당연한 개발자가 되자

평소에 react-query를 사용하면서 작은 규모에서는 크게 문제가 없었지만, 프로젝트 규모가 커지다 보면 유지보수하기가 용이하지 못한 구조가 되어버린 경험들이 다수 있었습니다.특히 Next.js의 app router를 사용하게 되면서 그런 문제점들이 더욱 확실하게 느껴져서 블로그나 공식문서들을 찾아보며 좀 더 구조적으로 사용할 수 있도록 구성해보았습니다. 포인트Hydrate API(React의 기본 hydration method)와 ReactQueryStreamedHydration(React-query와 함께 사용하는 hydration method) 두 가지 중에 API 중에 어떤 것을 채택할 것인가?Server Component(SSR)와 Client Component(CSR) 양측에서 모두 깔끔하..

빌드 명령어# npmnpm run build# yarnyarn build#pnpmpnpm build Static rendering & Dynamic renderingnext.js 프로젝트를 빌드를 실행하면 터미널에 아래와 같은 결과들을 확인할 수 있습니다. 여기서 Route 경로 맨 앞에 기호의 의미는 아래와 같습니다동그라미 기호는 Static rendering을 의미합니다. 람다 기호는 Dynamic rendering을 의미합니다. Static renderingStatic rendering 페이지는 ‘npm run build’ 할 때 만든 html 페이지를 그대로 유저에게 보내줍니다.페이지안에 별 기능이 없습니다.미리 페이지 완성본을 만들어놨기 때문에 전송이 매우 빠릅니다.Dynamic renderin..

디렉토리 구조Next.js에서 서버기능은 ‘api’ 디렉토리에 만들어주면 됩니다.‘api’ 디렉토리는 라우팅 방식에 따라서 ‘app’ 디렉토리 하위에 만들거나, ‘pages’ 디렉토리 하위에 만들어 줄 수 있습니다.주의점은 비교적 최근에 등장한 app router는 아직 안되는 기능들이 존재할 수 있습니다. 사용법먼저 기존의 백엔드 프레임워크인 Spring, express, nest.js 같은 것들은 ‘사용자가 어떤 URL에 어떤 HTTP Method로 요청을 보내오면 이런 코드를 실행해라’ 같은 방식으로 구현했습니다. 하지만 Next.js는 서버 코드에도 자동 라우팅 기능을 지원하고 있기 때문에 ‘api’ 디렉토리 하위에 파일과 디렉토리를 만들어주면 그 파일과 디렉토리의 이름을 URL로 인식하고 해당 ..

Dynamic Route 란?만약 게시판에서 어떤 글을 클릭 했을 때 상세페이지로 이동하게 만들려고 합니다. 이동경로를 1, 2, 3… 같은 글 번호로 만들고 싶은데, 그렇다고 디렉토리를 1, 2, 3… 이렇게 만들게 되면 만약 글 개수가 1000개라면 1000개의 디렉토리를 만들어야 할 것입니다. 그럴때 사용할 수 있는 것이 Dynamic Route 입니다.Dynamic Route는 디렉토리명을 ‘[작명]’ 이런식으로 만들어주게 되면 디렉토리 한개로 수많은 페이지를 만들어 낼 수 있게 됩니다. 사용방법디렉토리명을 ‘[작명]’ 이런식으로 작성하게되면 Next가 ‘[ ]’ 부분에 어떤값이 들어오더라도 해당 디렉토리에 있는 페이지를 보여주게 됩니다. 예를들어 디렉토리명을 ‘detail/[num]’ 으로 작성..

public 디렉토리에 있는 이미지 경로로 이미지 사용하기public 디렉토리 안에 있는 파일들은 빌드하면 root 경로로 이동되기 때문에 이렇게 사용해도 문제 없습니다.export default function List() { const goods = ['Tomatoes', 'Pasta', 'Coconut']; return ( 상품목록 { goods.map((v, i) => { return ( {v} $40 ); }) } );}하지만 이미지의 사이즈가 크거나 하는 경우에는 layout shift 현상이 발생할 ..

Server Component란?Server Component란 말 그대로 서버 측에서 렌더링되고 클라이언트로 완성된 HTML을 전송하는 컴포넌트입니다.기본적으로 Component를 만들면 Next.js는 Server Component로 인식합니다. 특징HTML을 서버 측에서 생성하여 클라이언트에 전송합니다.페이지 초기 로딩이 빠릅니다.검색엔진(SEO) 노출에 유리합니다.데이터 페칭 로직을 서버 측에서 처리하여 클라이언트로 보내기 전에 데이터를 준비할 수 있습니다.Javascript 기능 사용 불가(onClick 같은 event, useState같은 react hook 등 사용불가)(HTML을 동적으로 바꾸는 모든 기능들 사용불가) Client Component란?Client Component란 클라이언..

Next.js란?많은 사람들이 React는 CSR이고, Next.js는 SSR이다 라고 설명하지만 정확하게는 그렇지 않습니다. SPA를 개발하는 많은 개발자들이 SSR에서 많은 불편함을 겪고 있을 때 대책으로 많이 거론되는 프레임워크이다보니 그런식으로 설명하는 사람들이 많지만, Next.js는 SSR을 위한 프레임워크다 라고 설명하는 것은 오해를 만들 여지가 있기 때문에 한번 같이 Next.js에 대해서 알아보도록 합시다. Next.js를 사용하는 이유는?Next.js 공식홈페이지에서는 세계 최대 기업에서 사용하는 Next.js를 사용하면 최신 React 기능을 확장하고 가장 빠른 빌드를 위해 강력한 Rust 기반 JavaScript 도구를 통합하여 풀 스택 웹 애플리케이션을 만들 수 있습니다.라고 나와..

Rendering을 최적화하기 위해서 반드시 알아야하는 것 기본적으로 React는 부모 Component에 있는 ‘state’가 state 변경함수에 의해서 변경되었다면 헤당 ‘state’를 사용하는 자식 Component는 물론이고 사용하지 않는 자식 Component까지도 전부 re-rendering된다는 사실을 반드시 숙지해야합니다. (re-rendering 된다는 것은 해당 Component에 있는 모든 함수, 변수, HTML 태그들이 다시 생성된다는 의미이기도 합니다.) re-rendering이 발생했을 때 ‘props’가 변경되었는지 매번 검사해서 변경되었을 때만 re-rendering 해주는 ‘memo()’라는 함수는 ‘props’에 대하여 얕은 비교( ‘=== or !==’ )를 합니다. ..

Rendering 성능을 향상시키는 방법은? Rendering은 React의 동작 방식에서 일반적으로 예상할 수 있는 부분이지만, rendering 작업이 때때로 낭비가 될 수 있다는 것도 사실입니다. 만약 Component의 rendering 출력이 변경되지 않았고, DOM이 해당 부분을 업데이트할 필요가가 없다면 해당 Component를 rendering 시키는 것은 시간낭비이고, 더 나아가서 애플리케이션의 성능에도 영향을 주기 때문에 사용자에게 나쁜 사용자 경험을 주게 될 수도 있습니다. React Component rendering 결과물은 항상 현재 props와 state의 상태를 기반으로 결정되어야 합니다. 따라서 props와 state가 변경되지 않았음을 미리 알고 있다면 rendering ..

❓Rendering(렌더링)이란 무엇인가? React에서 Rendering이란 Component가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 Component에게 요청하는 작업을 의미합니다. ⚙️Rendering의 프로세스는? Rendering이 일어나는 동안 React는 Component의 루트에서 시작해서 아래쪽으로 쭉 코드를 보면서 업데이트가 필요하다는 flag가 지정되어있는 component를 찾습니다. 만약 업데이트가 필요하다는 flag를 만난다면 Class Component의 경우에는 'classComponentInstance.render()'를 호출하고, Function Component의 경우에는 'FunctionComponent()'를 호출하고, Renderin..