전체 글

개요 24년 9월 개강과 함께 마지막 학기, 3개월 가량의 수업 겸 프로젝트를 시작하게 되었고우리팀의 프로젝트 주제는 재테크 블로그로 결정되었다. 이전 프로젝트와는 다르게 이번 프로젝트의 경우 블로그에 상세하게 과정을 적으려는 이유가 크게 두 가지가 있는데프로젝트를 진행하는 FE 팀원들(나 포함)중 내가 제일 경험이 많아 나름 파트장 같은 주도적인 역할을 해야하고, 이에 따라 문제가 생기거나 개발 중 궁금증이 생겼을 때 척척 해결해주는 포지션이 되고자.이제껏 기술 스택을 선정하고 사용할 때 이유없이 사용한 경우가 빈번했기에 이번 기회에 프로젝트를 진행하며 항상 이유를 생각하며 기술을 선정하고, 기억하는 습관을 갖고자. 프로젝트의 문서화 작업은 이번주에 끝이나서 본격적으로 개발이 코앞이기에 프로젝트 요구사..

Dynamic Import 동적 임포트전에 프로젝트 진행 중 빌드 크기 및 초기 렌더링 속도 이슈가 있어서 도입했던 것인데지금도 물론 초보지만 그때는 걸음마 뗀 망아지였기에 그냥 쓰라길래 쓰는 그런 기술인데 궁금해서 찾아봤다.내가 당시 사용한 것과 각 블로그나 문서에서 설명하는 예시가 비슷해 이해가 더 빠르게 됐다. 각설하고 알아보자Dynamic?'동적'이라는 말이 붙은 것 처럼 경우에 따라 필요 코드를 import 하는 것으로버튼을 눌렀을 때 보여져야하는 모달창이라던가, nav바 클릭에 따라 보여지는 콘텐츠가 다른경우 사용한다.이로써 초기에 불필요한 파일이  초기 번들에 포함되는 것을 막고 별도의 번들에 포함시켜 초기에 로딩해야 하는 스크립트의 사이즈를 줄일 수 있게 된다.당연히 초기에 로딩되는 번들 ..

본 글은 하단의 링크의 글들을 공부하며 필사한 글임.Container/Presentational Pattern?리액트에서 관심사의 분리를 강제하는 방법으로 해당 패턴을 사용해, 비즈니스 로직과 뷰를 분리해낼 수 있다. 관심사 분리를 위해 두 컴포넌트로 분리한다.1.  Presentational Components : 데이터가 어떻게 사용자한테 보여질 지에 대해 다루는 컴포넌트(렌더링)- 뷰의 역할 2. Container Components : 어떤 데이터가 보여질지를 다루는 컴포넌트- 비즈니스 로직의 역할   Presentational Components Presentational Component의 경우 props를 통해 데이터를 받으며 받은 데이터를 화면에 표현하는 것이 목적이며 데이터를 건드리지 않..

본 글은 하단의 링크의 글들을 공부하며 필사한 글임. 여러 컴포넌트로 쪼개서 개발을 하다 보면 상위 컴포넌트에서 쓰이는 데이터를 하위 컴포넌트로 전달해야 할 일이 생긴다.보통이라면 props를 통해 전달해야겠지만 컴포넌트 간의 거리가 멀어질 수록 이 방법은 번거롭고 비용이 발생한다. 추가로 리팩토링 또한 어려워진다.데이터를 필요로 하지 않는 컴포넌트들은 제외하고 데이터를 필요로 하는 컴포넌트가 데이터에 접근할 수 있는 방법이 필요하다.Provider패턴을 통해 위와 같은 방법을 구현할 수 있다.Provider1. 가장 먼저 모든 컴포넌트를 Provider로 감싼다. data를 필요로 하는 최상위 컴포넌트를 감싸면 된다. Provider는 Context객체를 제공하고, 리액트에서 제공하는 createCon..

Hydration서버로 부터 받아온 HTML위에 React applicaiton(js 코드)를 실행함버튼에 이벤트를 추가한다던지 Link와 같은 상호작용 요소를 추가한다던지특정 컴포넌트는 이러한 Hydrate과정이 필요하겠지만 이런 과정이 필요하지 않은 컴포넌트도 존재한다.이런 경우엔 사용자가 모든 페이지의 JS파일을 다운받는 것이 아닌 상호작용 요소가 필요한 페이지에서만 js파일들을 다운 받게 해야 효율적이다.' use client '그럼 위와 같은 Hydrate 필요여부를 구분하는 방법이 바로 use client이다.이를 통해 어떤 컴포넌트가 Hydrate가 필요한지 구분할 수 있고, 이를 통해 서버 컴포넌트, 클라이언트 컴포넌트가 분류된다.'use client' 여부를 떠나 모든 컴포넌트는 SSR되..

Next에서의 Routing 방식app폴더 내부의 파일 시스템으로 경로를 표시해 라우팅을 제공최상단에 위치한 page.tsx는 '/' root경로에서 보여주는 페이지를 담당폴더에 page.tsx가 존재하지 않는경우 해당 폴더 경로로 접근 시 404오류 발생다만 폴더가 중간 경로로 사용되는 경우 경로명으로는 사용가능하단의 사진의 경우 middle/basement로 접근시 page.tsx의 내용에 해당하는 페이지를 보여줌Not Found 페이지 파일404오류가 발생할 때 보여주는 페이지not-found.tsx로 최상단에 생성Linknext/link에서 import해오며  기존의 a태그의 역할을 함. href에 이동하려는 폴더구조 경로를 입력한다.HomeusePathnamenext/navigation에서 가져..