js33 React란? React란?React는 사용자 인터페이스(UI)를 구축하기 위해 개발된 JavaScript 라이브러리이다. 2013년 Facebook에서 처음 개발되어 공개되었으며, 현재는 Meta와 오픈 소스 커뮤니티에 의해 유지·관리되고 있다. 컴포넌트 기반으로 설계되어 재사용성, 유연성, 성능 최적화에 장점을 가지고 있다. React의 탄생 배경Virtual DOM의 등장: Virtual DOM은 DOM의 가상 버전을 메모리에 저장하여, 실제 DOM과의 차이를 비교하고 최소한의 변경 사항만 실제 DOM에 적용하여 성능을 최적화하는 기술이다. 이를 통해 React는 복잡한 UI에서도 빠르게 동작할 수 있게 되었다.Virtual DOM : React에서 UI 성능을 최적화하기 위해 사용하는 가상화된 DOM 구조이다.. 2024. 10. 6. CommonJS와 ESModule 이번주에는 WebPack에 대해 카터에게 물어봤다.(카터는 신이야) 그런데 웹팩이 궁금했는데, 갑자기 JS의 역사와 함께 내가 모르는 개념(개념까지도 아니다. 그냥 사실이다. 난 사실을 몰랐던 것이다)들을 알게되었고, 그 중에서 웹팩에 대해 알기 위해 CommonJS와 ESModule에 대해 먼저 공부해 보았다. CommonJS와 ESModule (ECMAScript Module)이란?CommonJS와 ESModule (ECMAScript Module)은 자바스크립트에서 모듈을 관리하고 조직화하는 두 가지 주요 방식이다. 모듈을 관리하고 조직화한다는 것은, 코드를 독립적인 단위로 나누어 재사용 가능하고 의존성을 쉽게 관리할 수 있도록 만드는 것을 의미한다. 아직은 잘 이해가 가지 않으니 더 깊게 이야.. 2024. 10. 5. NextJS 공식문서 Chapter 4 관련 용어 및 정리 Nested routingNext.js에서 파일 시스템 라우팅(file-system routing)은 디렉토리 구조를 기반으로 라우트를 자동으로 생성하는 방식입니다. 즉 프로젝트의 파일과 폴더 구조에 따라 웹사이트의 url이 결정되는 것 입니다. 빌드와 서버에서의 처리:빌드 시: Next.js는 pages 디렉토리 구조를 바탕으로 각 파일에 대해 라우팅 규칙을 생성합니다. 서버에서의 요청 처리: 사용자가 특정 URL에 접속하면, Next.js는 이 URL에 매핑된 페이지를 찾아 렌더링합니다. 이 과정에서 정적 파일로 처리할지, 동적 파일로 처리할지 결정됩니다.dashboard 페이지 url layout.tsx 설정아래 코드를 통해 dashboard/~ 한하여 사이드바가 뜨도록 설정할 수 있습니다. imp.. 2024. 8. 14. NextJS 공식문서 Chapter 3 관련 용어 및 정리 Why optimize fonts?(글꼴 최적화)웹사이트 디자인에서 폰트의 중요성폰트는 웹사이트의 가독성을 높이고, 브랜드 아이덴티티를 강화할 수 있습니다.성능에 대한 영향 폰트 파일을 로드하는 데 시간이 걸리면 페이지 로딩 속도가 느려질 수 있습니다.누적 레이아웃 이동(Cumulative Layout Shift, CLS): 폰트가 로드되기 전까지 브라우저가 텍스트를 시스템 폰트나 폴백 폰트로 렌더링하고, 이후 커스텀 폰트로 교체될 때 레이아웃 이동이 발생할 수 있습니다. 이 이동은 사용자 경험을 저하시킬 수 있으며, 특히 구글이 페이지 성능을 평가할 때 중요한 지표로 사용됩니다.Next.js에서의 폰트 최적화Next.js는 next/font 모듈을 사용하여 폰트를 자동으로 최적화합니다. 폰트 파일을 빌.. 2024. 8. 14. 이전 1 2 3 4 5 ··· 9 다음
