프론트엔드 개발자11 JS 모듈 : Default Export와 Named Export의 차이점 default export와 named export는 JavaScript 모듈 시스템에서 모듈을 내보내는 두 가지 방법으로, 그 동안 큰 문제를 겪진 않았지만 코드를 꼼꼼히 보는 습관을 가지려고 노력하는 과정에서 정리하게 되었다. Default Export'Default', 즉 기본값 이라는 뜻으로 주된 기능이나 객체를 대표값 으로 설정한다는 의미에서 붙여진 export 방식으로, 가장 흔히 사용되는 값(예: 주요 클래스나 함수)을 모듈의 기본값으로 설정할 때 적합하다.한 모듈당 하나의 default export만 허용되는 특징이 있다. 그렇기에 임의의 이름으로 모듈을 가져올 수 있다.// module.jsconst add = (a, b) => a + b;export default add;// main.. 2025. 1. 29. 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. 이전 1 2 3 다음
