본문 바로가기

JS10

CSR(Client-side Rendering)이란? (+SSR 비교) 🤔 CSR(Client-side Rendering)이란? Client-side Rendering(CSR)은 웹 페이지의 콘텐츠를 클라이언트(브라우저)에서 렌더링하는 방식이다. 서버에서 HTML, CSS, JavaScript 파일을 클라이언트로 보내고, 클라이언트에서 JavaScript를 실행하여 동적인 웹 페이지를 생성하게 된다. 이로 인해 서버의 부하가 감소하고, 많은 인터랙티브한 기능을 제공할 수 있게 된다. 자주 사용되는 웹 프레임워크로는 React, Angular, Vue.js 등이 있다. 😎 장점 ✅ 인터랙션 향상 CSR은 사용자 경험(UX) 측면에서 이점을 가지고 있다. 페이지의 동작에 따라 실시간으로 콘텐츠가 변경되어 사용자가 웹사이트를 더 쉽게 이용할 수 있다. 예를 들면, 기존 웹에서 페.. 2023. 6. 28.
[프로그래머스] H-Index(정렬) 👁‍🗨 문제 설명 H-Index는 과학자의 생산성과 영향력을 나타내는 지표입니다. 어느 과학자의 H-Index를 나타내는 값인 h를 구하려고 합니다. 위키백과1에 따르면, H-Index는 다음과 같이 구합니다. 어떤 과학자가 발표한 논문 n편 중, h번 이상 인용된 논문이 h편 이상이고 나머지 논문이 h번 이하 인용되었다면 h의 최댓값이 이 과학자의 H-Index입니다. 어떤 과학자가 발표한 논문의 인용 횟수를 담은 배열 citations가 매개변수로 주어질 때, 이 과학자의 H-Index를 return 하도록 solution 함수를 작성해주세요. ❌ 제한 사항 과학자가 발표한 논문의 수는 1편 이상 1,000편 이하입니다. 논문별 인용 횟수는 0회 이상 10,000회 이하입니다. 입출력 예 citati.. 2023. 4. 28.
[프로그래머스] 가장 큰 수(정렬) 👁‍🗨 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. ❌ 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbers return [6.. 2023. 4. 28.
[React] useCallback 사용법 정리 👩‍💻 이 글을 쓰게 된 계기... React는 Virtual DOM을 사용하여 컴포넌트의 렌더링 성능을 최적화한다. 그러나 불필요한 렌더링이 발생할 수 있는 상황이 있다. 이러한 상황에서는 React의 useCallback 훅을 사용하여 함수를 재사용하면 성능을 향상시킬 수 있다고 하는데 정확히 어떤 상황에서 써야 이게 잘 썼는지 소문이 날까? 란 생각에 정리해 보았다. 👁‍🗨 useCallback을 사용해야 하는 경우 일단 이론적으로 React에서 useCallback을 사용해야 하는 경우는 다음과 같다. ✅ 이벤트 핸들러 함수가 자주 재생성되는 경우 useCallback을 사용하지 않으면 이벤트 핸들러 함수는 매번 새로운 인스턴스가 생성된다. 그러나 useCallback을 사용하면 함수가 처음 생성.. 2023. 4. 28.