프론트엔드 개발자10 FLUX 아키텍쳐에 대해 알아보자 Flux 아키텍쳐Flux는 Facebook이 만든 애플리케이션 아키텍처 패턴으로, 데이터 흐름과 상태 관리를 단방향으로 구성한 것이 특징이다. 이렇게 아키텍쳐를 한 줄로 요약하면 이해가 잘 가지 않으니 더 깊게 알아보자. 등장 배경 Facebook은 서비스가 성장하고, 더 많은 기능들이 추가되면서 상태 관리의 어려움이 점점 커졌다. 기존에 Facebook 서비스는 MVC(Model-View-Controller) 패턴을 사용하였는데, MVC 패턴은 여러 컴포넌트가 상호작용하면서 각자의 상태를 변화시키는 양방향 데이터 바인딩을 사용하게 된다. 하지만 이렇게 될 경우 하나의 컴포넌트에서 발생한 상태 변화가 다른 컴포넌트에 영향을 미치고, 이는 다시 또 다른 컴포넌트에 영향을 미치면서, 복잡한 상호작용 구조가.. 2024. 10. 14. 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. NextJS 공식문서 Chapter 1 관련 용어 및 정리 파일 설치1. pnpm 설치pnpm은 npm이나 yarn보다 빠르고 효율적인 패키지 매니저로, pnpm이 설치되어 있지 않다면, 다음 명령어를 통해 전역으로 설치할 수 있습니다.npm install -g pnpm2. Next.js 앱 생성Next.js 애플리케이션을 생성하려면 터미널을 열고 프로젝트를 저장할 폴더로 이동한 후, 다음 명령어를 실행합니다:npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm이 명령어는 create-next-app이라는 CLI 도구를 사용하여 Next.js 애플리케이션을 설정합니다.. 2024. 8. 12. 이전 1 2 3 다음
