ssr를 사용하는 이유 중 큰 부분으로 metadata를 꼽을 수 있을 것 같다. title부터 og태그까지 서버로부터 받아온 데이터를 metadata에 넣어주면서 동적으로 변경하기 위해서이다.  Next.js에서는 아주 간단하게 이런 기능들을 제공하는데, 해당 기능은 Server Components에서만 지원하는 기능으로 metadata와 generateMetadata가 거기에 해당하는 속성들로 간단하게 metadata를 변경할 수 있다.  metadatalayout나 page에서 export 하면 적용할 수 있다. export const metadata = { title: "...", description: "...",} 가장 기본적인 기능으로 페이지별로 정적으로 metadata를 설정할 수 있다..

Next.js에서 Loading.js 파일이나 Suspense에 대한 중요성을 크게 생각하지 않았다. 하지만 ssr의 특징을 테스트를 통해서 보니 확실하게 이해가 되었다.  ssr의 장점이자 단점 사용자가 홈페이지를 접속했을 때 HTML엔 이미 데이터가 담긴 채로 전달되기 때문에 초기 렌더링 속도가 빠르다고 할 수 있다. ※ csr은? csr의 경우에는 홈페이지에 접속하면 뼈대만 있는 HTML 파일을 보내주고 이후 다시 서버로부터 데이터를 요청하기 때문에 초기 렌더링 속도가 느리다고 할 수 있다. 이러한 장점은 크롤러 봇이 HTML을 빠르게 읽을 수 있기 때문에 SEO에 좋게 작용될 수 있다.  하지만 서버 데이터를 ssr로 별다른 처리 없이 가지고 온다면 문제가 발생할 수 있다. 서버에서 넘어오는 데이..

UI를 공유하기 위해서 사용하는 layout 파일이다. 부모 경로에서 만들어둔  layout 파일은 부모의 자식 경로에 모두 적용이 된다. /main/board 경로가 구성되어 있다고 했을 때, board 페이지가 렌더링되면 main의 layout이 렌더링되고board의 layout 마지막으로 page가 렌더링된다.  root 경로에 있는 layout ( root layout ) 은 반드시 있어야 하며 html 태그나 body 태그를 포함해야 한다. 기본적으론 Server Component지만 'use client' 옵션을 준다면 Client Component로 구성될 수 있다.  layout을 통해 현재 선택된 레이아웃의 경로를 알기 위해서는 useSelectedLayoutSegment 또는 useSe..

Next.js 환경으로 프로젝트를 진행할 때 React의 ssr버전이라고 생각했지만 생각보다 많은 고전을 경험하고 있다. not-found 처리부터 시작해서 client, server 컴포넌트의 모시깽한 관계... Atomic Design Pattern에 빠져있는 지금 Next.js에서 어떤 방법으로하면 잘 사용할 수 있을지 고민해봤다.  개발 환경 개요.글쓴이가 사용(?)하던 디자인 패턴은 Container Presenter 패턴을 시작으로 Compound 패턴 그리고 현재 Atomic 패턴으로 왔다. 초기 디자인 패턴이라는 것은 하나의 개발 환경에 무조건 하나의 디자인 패턴을 사용해야 한다는 강박이 있었다.  그러다보니 지금까지도 개발하면서 충분히 만족할 수 없는 개발 환경을 구성하게 된 것 같다. ..

html 파일에서 스크립트의 실행 순서는 위에서부터 읽어온다. 그렇기 때문에 대부분의 스크립트 파일을 body 제일 마지막에 넣어주는 방식으로 처리한다.  // ...  이렇게 사용하는 이유는 script 태그에 있는 코드가 html 코드에 영향을 받아서 실행되기 때문에 먼저 script가 로드되고 html 코드가 불러와지면 오류가 발생할 수 있다.   head에 있는 querySelector가 실행되는 시점에는 div.test가 로드되지 않았기 때문에 아무것도 불러오지 못한다. 그런 상태에서 ele 관련 속성을 사용하면 오류가 발생하는 것이다.  하지만 script 태그 내부에서 적어주는 방식이 아닌 파일을 가지고 오거나 외부 플러그인을 가지고 오는 경우 head에 작성해도 문제..

React나 Vue 같은 라이브러리가 아닌 html에 바로 Script 태그를 사용할 때 주의해야 할 것이 전역변수이다. const나 let으로 변수를 만들 때 잘못하면 전역에서 만들어지기 때문이다.  // ... // ...  위와 같이 JavaScript 코드를 작성했다고 생각해보자.  여기서 전역변수는 vari 와 clickHandler이다. 단순 이렇게 사용하는 것이 문제가 되는 것은 아니다. 하지만 추후 다른 개발자가 동일하게 vari와 clickHandler로 변수를 만들 수 있는 여지가 있다면 어떻게 될까? 코드가 합쳐지면서 동일한 명칭을 가진 변수가 생기면서 오류가 발생할 것이다.  이것을 해결하는 방법은 2가지가 있다. 즉시 실행 함수 표현식정의되자마자 즉시 실행되는 ..

Not Found는 Next.js에서 404 에러가 발생했을 때 렌더링되는 페이지이다. 일반적인 사용 방법은 Not Found 가 필요한 위치에 not-found.jsx 파일을 만들어주면 끝이다.  근데 한가지 이상한 점이 있었다. 모든 페이지에 Header와 Footer라 필요해서 app 폴더 아래에 있는 layout에게 Header와 Footer를 불러왔다. const RootLayout = () => { return ( {children} )};export default RootLayout; 사건 재현을 위해서 Header와 Footer에는 특별한 기능이 있는 것은 아니고 간단한 문자만 렌더링 했다. 그 결과는 당연히 ..

지난번엔 Funnel 컴포넌트에 대해서 알아봤다. 토스에서 이미 잘 만들어둔 useFunnel 컴포넌트가 있지만 해당 기능을 참고해서 유사한 기능을 하는 Funnel 컴포넌트를 만들어 보려고 한다.  핵심 기능은 다음과 같다 : Funnel에 steps를 넘겨줘서 현재 Step에 해당하는 컴포넌트만 렌더링next() 함수를 통해서 다음 Step으로 이동 Funnel이란게 어려운 기능이 아니다. 현재 Step에 맞는 컴포넌트를 렌더링 해주는 것이 끝이다.  추가로 다음과 같은 기능을 구현할 생각이다 :next 외 prev, update 함수를 통해 컨트롤할 수 있는 기능을 구현할 계획이다.useFunnel이 토스의 Funnel 컴포넌트의 시작 지점인데, 나는 useFunnel을 전역 상태를 관리하는 용도로..