전체 글61 [React] useCallback 사용법 정리 👩💻 이 글을 쓰게 된 계기... React는 Virtual DOM을 사용하여 컴포넌트의 렌더링 성능을 최적화한다. 그러나 불필요한 렌더링이 발생할 수 있는 상황이 있다. 이러한 상황에서는 React의 useCallback 훅을 사용하여 함수를 재사용하면 성능을 향상시킬 수 있다고 하는데 정확히 어떤 상황에서 써야 이게 잘 썼는지 소문이 날까? 란 생각에 정리해 보았다. 👁🗨 useCallback을 사용해야 하는 경우 일단 이론적으로 React에서 useCallback을 사용해야 하는 경우는 다음과 같다. ✅ 이벤트 핸들러 함수가 자주 재생성되는 경우 useCallback을 사용하지 않으면 이벤트 핸들러 함수는 매번 새로운 인스턴스가 생성된다. 그러나 useCallback을 사용하면 함수가 처음 생성.. 2023. 4. 28. [프로그래머스] 카펫(완전탐색) 👁🗨 문제 설명 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요. ❌ 제한 사항 갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다. 노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다. 카펫의 가로 길이는 세로 길이와 같거나, 세.. 2023. 4. 27. Prisma 사용/공부 요약 👩💻 Prisma를 공부하게 된 계기 이번에 Next.js 13버전으로 Airbnb 클론 프로젝트를 시작하게 되었다. 개인적으로 에어비앤비는 전세계적으로 많은 사람들이 많이 사용하는 웹서비스라 한번쯤 그 기능들을 내 나름대로 구현해 보고 싶었다. 하지만 에어비앤비를 프론트엔드로만 적용하기엔 백엔드 부재가 심하다 생각해서 망상만 하다가 이번에 Next.js로 만들기로 결정한 김에 풀스택을 찍먹해보기로 했다. 결정 한 후에 ORM을 찾던 중 스키마를 통해 데이터베이스를 간단히 조작할 수 있다는 Prisma를 알게 되었고 이번 프로젝트에 적용해보기로 결정했다. 📝 Prisma의 개념과 특징 소개 공식 문서를 확인하면 Prisma는 Node.js, TypeScript, Rust, Go 등 다양한 언어와 프레임.. 2023. 4. 27. RESTful API란? 🤔 RESTful API란? 📝 정의 RESTful API는 Representational State Transfer의 약자로, 웹 상의 자원을 HTTP 프로토콜을 이용하여 전송하는 것을 의미한다. RESTful API는 일관적인 인터페이스를 제공하며, 서버와 클라이언트 간의 통신을 가능하게 해준다. ❓ 사용하는 이유 RESTful API는 다음과 같은 이유로 많이 사용된다. HTTP 프로토콜을 이용하여 간단하게 자원을 전송할 수 있다. 서버와 클라이언트 간의 인터페이스를 일관적으로 제공한다. 클라이언트와 서버가 독립적으로 개발될 수 있다. 캐싱 처리가 용이하여 서버의 부하를 줄일 수 있다. 😎 적용방법 RESTful API를 적용하기 위해서는 다음과 같은 요소들을 고려해야 한다. ✅ HTTP 메소드 R.. 2023. 4. 21. [프로그래머스] 이중우선순위큐(Heap) 👁🗨 문제 설명 이중 우선순위 큐는 다음 연산을 할 수 있는 자료구조를 말합니다. 명령어 수신 탑(높이) I 숫자 큐에 주어진 숫자를 삽입합니다. D 1 큐에서 최댓값을 삭제합니다. D -1 큐에서 최솟값을 삭제합니다. 이중 우선순위 큐가 할 연산 operations가 매개변수로 주어질 때, 모든 연산을 처리한 후 큐가 비어있으면 [0,0] 비어있지 않으면 [최댓값, 최솟값]을 return 하도록 solution 함수를 구현해주세요. ❌ 제한 사항 operations는 길이가 1 이상 1,000,000 이하인 문자열 배열입니다. operations의 원소는 큐가 수행할 연산을 나타냅니다. 원소는 “명령어 데이터” 형식으로 주어집니다.- 최댓값/최솟값을 삭제하는 연산에서 최댓값/최솟값이 둘 이상인 경우,.. 2023. 4. 12. [프로그래머스] 디스크 컨트롤러(Heap) 👁🗨 문제 설명 하드디스크는 한 번에 하나의 작업만 수행할 수 있습니다. 디스크 컨트롤러를 구현하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 요청이 들어온 순서대로 처리하는 것입니다. 예를들어 - 0ms 시점에 3ms가 소요되는 A작업 요청 - 1ms 시점에 9ms가 소요되는 B작업 요청 - 2ms 시점에 6ms가 소요되는 C작업 요청 와 같은 요청이 들어왔습니다. 이를 그림으로 표현하면 아래와 같습니다. 한 번에 하나의 요청만을 수행할 수 있기 때문에 각각의 작업을 요청받은 순서대로 처리하면 다음과 같이 처리 됩니다. - A: 3ms 시점에 작업 완료 (요청에서 종료까지 : 3ms) - B: 1ms부터 대기하다가, 3ms 시점에 작업을 시작해서 12ms 시점에 작업 완료(요청에서 종료까지 .. 2023. 4. 12. [FrontEnd 지식] 브라우저 렌더링 원리와 순서(+성능 최적화 고려사항) 🙌 소개 웹 브라우저는 인터넷에서 다양한 정보를 제공하고, 사용자가 이를 시각적으로 확인할 수 있도록 하는 중요한 도구다. 하지만, 대용량의 웹 페이지를 불러올 때 브라우저의 성능이 느려지거나 멈추는 경우가 발생할 수 있다. 이러한 문제를 해결하기 위해서는 브라우저 렌더링 원리와 성능 최적화 방법을 이해하면 도움이 될 수 있다 판단해 시간을 내어 찾아보았다. 🤔 브라우저 렌더링 원리란 무엇인가 브라우저가 웹 페이지를 불러올 때는 렌더링 엔진이라는 소프트웨어 모듈이 사용된다. 렌더링 엔진은 HTML, CSS, JavaScript와 같은 웹 페이지의 요소들을 파싱하고, 이를 브라우저 화면에 표시하는 역할을 한다. 브라우저 렌더링 원리는 크게 렌더링 엔진, 렌더 트리, 레이아웃, 그리고 페인팅으로 구성된다. .. 2023. 4. 11. [프로그래머스] 기능개발(스택 / 큐) 풀이 👁🗨 문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. ❌ 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100.. 2023. 4. 8. 이전 1 2 3 4 5 6 ··· 8 다음
