본문 바로가기

전체 글67

CSS 애니메이션 성능 개선 ❗️문제 상황 2가지 요구사항을 수행할 때 애니메이션 효과가 매끄럽지 못함 1. 스크롤 위치가 특정 섹션에 도달하면 화면을 고정시키고 카드만 가로로 이동해야 함(left로 위치를 변경했음) 2. 카드가 이동하면 배경의 이미지는 가운데 위치하는 카드의 이미지로 변경되어야 함(background-image를 변경했음) ✅ 해결 미리 배경 이미지를 렌더링 해놓은 상태에서 opacity만 transition을 주고 카드의 위치는 transform의 translateX속성을 사용하여 애니메이션 최적화함 속성을 바꾸는 것만으로 최적화가 가능했던 이유는 무엇일까요? 이유에 대해 설명하기 위해서는 우선 브라우저 렌더링 과정에 대한 이해가 필요합니다. 📌 간략한 브라우저 렌더링 과정 1. HTML과 CSS 등 리소스를 .. 2024. 1. 8.
[프로그래머스] 뒤에 있는 큰 수 찾기 JS 첫 번째 풀이는 뒷큰수가 있는 경우만 판별하여 이중 포문으로 처리했습니다 2개 정도 시간초과가 발생했습니다 시간 초과가 발생해서 어떻게 해야 반복을 줄일 수 있을까 고민했습니다 생각을 하다보니 스택을 통해 뒷큰수만 유지하면 되겠다는 판단이 들었습니다. 뒤에서부터 순회를 하면서 바로 뒤에 있는 수와 그 수의 뒷큰수들만 스택으로 관리하는 방식으로 풀었습니다 function solution(numbers) { //뒤에서부터 순회하면서 //스택에는 바로 뒤에 있는 수와 그 수의 뒷큰수들만 관리 const stack = []; const result = []; //뒤에서부터 순회 for (let i = numbers.length - 1; i >= 0; i--) { //스택이 빌 때까지 반복 while (stack.. 2024. 1. 7.
[프로그래머스] 무인도 여행 JS 문제링크 전형적인 BFS문제 모든 원소를 순회하면서 존재하는 모든 무인도를 방문하고 하나의 무인도를 발견할 때마다 bfs를 통해 해당 무인도가 가지고 있는 식량의 수를 더해나가는 방식으로 풀었습니다 방문한 무인도의 원소는 X로 변경하여 방문처리를 해줬습니다 function solution(maps) { //bfs 완전 탐색 const q = []; const result = []; const r_length = maps.length; const c_length = maps[0].length; const dr = [0, 0, -1, 1]; const dc = [1, -1, 0, 0]; //문자열을 배열로 변환 for (let r = 0; r < r_length; r++) { maps[r] = maps[r].. 2024. 1. 6.
[React Native] 폰트 설정 이 방법은 버전 0.70이상만 가능한 걸로 알고 있습니다 더 낮은 버전을 사용 중이신 분들은 직접 ios와 안드로이드 폴더에서 설정을 해주셔야 합니다 프로젝트 루트 경로에 react-native.config.js 파일을 만들고 폰트 파일 경로를 입력해주세요 module.exports = { assets: ['./assets/fonts'], }; react-native-asset 라이브러리를 사용하면 자동으로 적용됩니다 npx react-native-asset 혹시라도 ios에서 빌드가 실패한다면 ios/Fonts에 폰트 파일을 넣어주시면 됩니다! 2024. 1. 5.
[프로그래머스] 호텔 대실 JS 문제링크 개인적으로 프로그래머스에 있는 과제 진행하기 문제랑 비슷하다고 느꼈습니다 스터디원 분의 풀이 방법이 인상깊었는데 그 풀이를 이 문제에 적용해보려고 했어요 1. 예약 시간들은 모두 분단위로 변환, 시작 시간 기준으로 오름차순 정렬을 했습니다. 2. 배열들을 순회하면서 2-1. room_stack(사용 중인 방들의 종료시간이 저장되어 있는 배열)을 내림차순 정렬합니다 2-2. 현재 예약 시작 시간 기준으로 종료된 방이 있으면, 종료된 방을 pop합니다 2-3. 현재 예약의 종료시간을 room_stack에 push합니다 2-4. room_cnt와 room_stack의 length를 비교해서 큰 값을 저장합니다 사실 room_stack을 내림차순 정렬하는 것보다 우선순위큐를 사용하는게 시간복잡도 측면에.. 2024. 1. 5.
[프로그래머스]미로 탈출 JS 문제링크 전형적인 최단거리 찾는 bfs 문제였습니다 최단 거리를 2번 찾아야 해서 함수를 만들어서 활용했습니다 특정 지점까지의 최단거리를 찾는 함수를 만들어서 1. 입구에서 레버까지 방문 가능 여부를 확인하고 2. 레버에서 출구까지 방문 가능 여부를 확인했습니다 function solution(maps) { const r_length = maps.length; const c_length = maps[0].length; const dr=[0,0,-1,1]; const dc = [1,-1, 0,0]; let visited = Array.from(new Array(r_length), ()=> new Array(c_length).fill(false)); let q=[]; let start; let lever; .. 2024. 1. 4.

티스토리툴바