당연한 개발자가 되자

터미널에 아래의 명령어들로 포트를 확인하고 종료시킬 수 있습니다. 1. 현재 열린 포트 목록 확인(password 필요)sudo lsof -PiTCP -sTCP:LISTEN 2. 특정 포트번호의 PID 확인sudo lsof -i :[PID를 확인 하고 싶은 포트 번호] 3. PID로 특정 포트 종료sudo kill -9 [PID]

평소에 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 도구를 통합하여 풀 스택 웹 애플리케이션을 만들 수 있습니다.라고 나와..

웹팩으로 통합 실무 환경에서는 Babel을 직접 사용하는 것보다는 웹팩으로 통합해서 사용하는 것이 일반적입니다. 로더 형태로 제공되는 babel-loader 를 사용합니다. 먼저 패키지를 install 합니다. npm install babel-loader 그리고 webpack.config.js에 로더를 추가합니다. module.exports = { // 우리가 지금 테스트하는 파일은 root에 있는 app.js 이므로 enrty를 변경해줍니다. entry: { main: './app.js' }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', // 바벨 로더 추가 excude: /node_modules/ // 바벨이 node_modules에 있는..

env 프리셋 설정 과거에 제공했던 연도별 프리셋을 사용해 본 경험이 있다면 까다롭고 헷갈리는 설정 때문에 애를 먹었을 지도 모르겠습니다. 그에 비해 'env'프리셋은 무척 단순하고 직관적인 사용법을 제공합니다. 타겟 브라우저 우리 코드가 크롬 최신 버전(2023년 06월 기준)만 지원한다고 가정해봅시다. 그렇다면 인터넷 익스플로러를 위한 코드 변환은 불필요합니다. target 옵션에 브라우저 버전명만 지정하면 'env'프리셋은 이에 맞는 플러그인들을 찾아 최적의 코드를 출력해 냅니다. 'babel.config.js' 예시 보기 module.exports = { presets: [ ['@babel/preset-env', { targets: { chrome: '79', // 크롬 79까지 지원하는 코드를 ..