본문 바로가기
Next.js의 기존 프로젝트에서 ts 추가하는 법 ✅ 1. TypeScript 패키지 설치bash npm install --save-dev typescript @types/react @types/nodetypescript: TypeScript 컴파일러@types/react, @types/node: React와 Node.js의 타입 정의 파일✅ 2. tsconfig.json 자동 생성bash npx tsc --init또는 Next.js가 자동으로 생성하도록 하기:bash touch tsconfig.json npm run dev🚀 npm run dev 실행 시, Next.js가 기본 tsconfig.json 파일을 자동으로 생성해 줌.✅ 3. 파일 확장자 변경프로젝트 내의 파일들을 .js → .ts 또는 .tsx로 변경.컴포넌트 파일 → .tsx서버 액션.. 2025. 3. 28.
[VSCode]한글이 깨져 보이는 파일 인코딩 변경하기 커서 콘솔에 한글이 깨지는 버그가 있어서 찾게 되었다. vs code도 똑같이 통하니 참고할 것https://dewble.tistory.com/entry/change-encoding-of-a-file-that-looks-broken-in-korean [VSCode]한글이 깨져 보이는 파일 인코딩 변경하기파일의 인코딩 문제로 인해 한글이나 특수 문자가 깨져 보일 때가 있습니다. 이런 문제를 해결하기 위해 VSCode를 사용하여 파일의 인코딩을 변경하는 방법을 소개하겠습니다. 1. 원본 파일을 VSCoddewble.tistory.com 2025. 3. 27.
프론트엔드에서의 사이드 이펙트란? 쉽게 말해서 개발에서 "예측할 수 없는 효과"를 뜻한다. 프론트엔드에서 사이드 이펙트가 발생했다는 것은 당연히 안 좋은 뜻이다.이에 관한 자세한 내용은 다음 글을 참고하라.https://choisuhyeok.tistory.com/52 [side effect] 사이드 이펙트 ?여러 문서를 읽다 보면 side effect라는 단어를 보게 된다. 번역하면 부작용인데 다들 side effect는 피하라고 하는 거 보니 안 좋은 뜻인 거 같아 보이긴 한다. 개발에서 side effect는 의도하지 않은 (choisuhyeok.tistory.comhttps://yooneeee.tistory.com/129 [프론트엔드 기술면접] 순수함수란? 불변성과 사이드 이펙트와 연결순수함수란 무엇인가요? 불변성과 사이드 이펙트와.. 2025. 3. 26.
Next.js의 다이나믹 라우팅 예를 들어, "아이디"같은 고유의 키 값이 필요한 페이지. 동일한 페이지 레이아웃을 틀을 가지지만, 그 안에서의 고유 값은 달라지는 페이지의 라우팅이 존재한다고 생각해 보자.그리고 관련 프로세스에 대해 10개의 라우팅이 필요하다고 여겨보자.그러면 우리는 page.tsx를 10개를 만들어서 컴포넌트를 세팅해줘야 할까? 뭐 물론 10개를 만들어 줄 수는 있다.근데 만약 1천 개라면? 1억 개라면?만일 당신이 유튜브 페이지를 만든다고 쳐보자. 각 영상에 대한 컴포넌트를 당신이 "전부" 만든다고 생각해 보자. 진짜 끔찍하지 않겠는가?이런 라우팅을 커버하기 위해 등장하는 기술이 "다이나믹 라우팅"이다.고유의 id를 이용해서 동일 페이지 레이아웃에서 달라지는 고유 UI를 각각 구현할 수 있다.이에 관한 문서는 다음.. 2025. 3. 22.
Next.js의 데이터 가져오기(Data fetch) 리액트에서 데이터를 가져오는 방법보다 Next.js에서 데이터를 가져오는 방법이 훨씬 편하다.참고로 데이터를 가져오는 것을 "Data Fetch"라고 부른다!공식 문서데이터 패칭에 관한 Next.js의 공식 문서 링크는 다음을 참고하자. (좀 더 딥하게 들어감.)https://nextjs.org/learn/dashboard-app/fetching-data App Router: Fetching Data | Next.jsLearn about the different ways to fetch data in Next.js, and fetch data for your dashboard page using Server Components.nextjs.org또한, 이 부분을 번역한 글도 있다. 다음 글을 참고하자.h.. 2025. 3. 21.
Next.js의 메타데이터(Metadata) 이번에는 Next.js의 메타데이터에 대한 이야기를 할 것이다. 우리가 HTML를 배울 때, 메타데이터를 기입해서 SEO을 최적화하는 부분을 했었다. 리액트에서는 메타데이터를 세팅하는 것이 "매우" 힘들다. (불가능한 건 아니다. 다 방법이 있다. 그게 복잡해서 문제...)Next.js에서는 메타데이터를 지원해 준다. 편하게 메타데이터를 세팅하면 된다.공식 문서공식 문서는 다음과 같다. 참고하자.https://nextjs.org/learn/dashboard-app/adding-metadata App Router: Adding Metadata | Next.jsLearn how to add metadata to your Next.js application.nextjs.orghttps://nextjs.org/.. 2025. 3. 21.
Next.js의 Hydration(하이드레이션)이 무엇일까? Next.js는 초기 HTML 파일을 먼저 전달하고 이후 HTML 요소들을 React 컴포넌트로 변환 및 이벤트리스너를 부착하여 React DOM에서 관리하게 만든다. 이 과정을 Hydration이라고 부르게 된다.이런 렌더링 작동 원리 덕분에, 빠른 웹페이지 로딩이 가능해진다. (왜냐하면 일단은 HTML을 빠르게 웹 페이지에 띄우고, 이후에 자바스크립트를 가져오는 것이기 때문. 리액트는 일단 모든 파일을 다 가져와야 하기 때문에, 초기 로딩 속도가 느리다.)노마드코더 영상https://nomadcoders.co/nextjs-for-beginners/lectures/4696 All Courses – 노마드 코더 Nomad Coders초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요!nomadcode.. 2025. 3. 20.
SSR 과 CSR (서버 사이드 렌더링/클라이언트 사이드 렌더링) Next.js나 리액트를 배울 때, 서버 사이드 렌더링이랑 클라이언트 사이드 렌더링 이야기가 나온다. 간단하게 말하면 렌더링에서 차이가 나는 것인데,서버 사이드 렌더링은 "서버"에서 미리 렌더링을 하고 클라이언트로 보내주는 것이고, 클라이언트 사이드 렌더링은 "클라이언트"에서 렌더링을 담당하는 것이다.자세한 내용은 다음 글을 참고하자.https://velog.io/@jhyun_k/%EC%84%9C%EB%B2%84%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-vs-%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%A0%8C%EB%8D%94%EB%A7%81-SSR%EA%.. 2025. 3. 20.
Next.js의 Not Found Routes Next.js에는 특별한 파일들이 존재한다.page.tsx 와 layout.tsx가 대표적인 파일이다.근데, 여기에 추가적으로 특별한 파일이 하나 더 있다. 이 부분을 설명하고자 한다.404 not found유저가 잘못된 경로로 이동하면 뜨는 not found를 Next.js에서는 기능으로 넣어두었다.만드는 법은 쉽다.일단 폴더명은 다음 폴더 이름으로 "무조건" 설정해야 한다.app/not-found.tsx이후 본인이 코드를 작성해 주면 된다.(예시코드)import Link from 'next/link' export default function NotFound() { return ( Not Found Could not find requested resource Ret.. 2025. 3. 18.
Vercel로 프로젝트 배포하는 방법 Vercel 이란Vercel은 프론트엔드 개발자를 위한 클라우드 서비스를 제공하고 있는 회사이다. 또한 Next.js를 개발하고 있는 회사이다. Next.js의 프로젝트를 배포할 때 가장 최적화되어 있다. Next.js를 배포하고 싶다면 이 호스팅 서비스를 쓰면 된다.물론 호스팅만 제공하는 것은 아니다. 다양한 서비스도 존재한다.회원가입다음 링크로 들어간 이후, Sign Up를 클릭해서 회원가입을 진행하면 된다.https://vercel.com/home Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, wor.. 2025. 3. 17.
Next.js의 데이터 베이스 세팅 이번에는 데이터 베이스를 이용해 볼 것이다. 그중 Postgres 데이터 베이스를 이용할 것이다. 기본적인 세팅부터 시작해 보자. Postgres 데이터 베이스에 관한 공식 문서는 다음 링크를 참고하자.https://www.postgresql.org/ PostgreSQLThe world's most advanced open source database.www.postgresql.org일단, 데이터 베이스를 세팅하기전에, 깃허브에 프로젝트를 올리고, Vercel과 연동할 것이다. (이 부분에 대한 글은 아예 또 추가로 올리겠다.) 이후 프로젝트와 Postgres 데이터 베이스와 연동할 것이다. 그다음으로 초기값으로 데이터 베이스에 데이터를 넣어둘 것이다. data fetch는 다음 글에서 작성하겠다.깃허브.. 2025. 3. 16.
토스 es-toolkit 한입 먹기 토스에서 만들어낸 es-toolkit이라는 "라이브러리"가 있다. 토스의 es-toolkit 공식 페이지에는 다음과 같이 라이브러리를 정의하고 있다.es-toolkit.현대적인 JavaScript 유틸리티 라이브러리 더 정확히는 일상적인 개발에서 사용하는 다양한 함수를 모아둔 라이브러리라고 생각하면 된다.공식 홈 페이지https://es-toolkit.slash.page/ko/ es-toolkites-toolkit 현대적인 JavaScript 유틸리티 라이브러리es-toolkit.slash.page공식 홈 페이지는 위 링크를 따라가면 된다.  오른쪽 맨 위 사이드에는 관련 깃허브와 npm, jsr, 디스코드가 있다. 참고하자.toss 공식 문서 내용 lodash와 같은 다른 라이브러리와 비교했을 때, e.. 2025. 3. 14.
Next.js에서 페이지간 이동하는 방법 우리는 레이아웃과 페이지를 만드는 방법을 배웠다. 이제 라우트, 즉 "페이지"의 이동을 알아보도록 하자. 되게 쉬우니 금방 따라 할 수 있다!Linka태그는 우리가 만들어낸 페이지가 아니라 아예 다른 사이트의 페이지로 "넘어가는" 태그라면, Link 태그는 우리가 만들어낸 "페이지간의 이동"임을 기억해야 한다.사용방법은 간단하다.import Link from 'next/link';export default function Home() { let name = 'Vercel'; let link = 'https://nextjs.org/'; return ( {name} by dev Next js Next.js 바로가기 hel.. 2025. 3. 14.
vscode에서 쓰이는 유용한 기능 소개 개인적으로는 alt 클릭이 유용했다. (생각보다 커서 반복해야 할 작업이 많이 생긴다!)(관련 영상) >https://youtu.be/mh-0twurNRE?si=DnqIxS2TVLRu1sZn 2025. 3. 13.
리액트 PDF 사용방법 관련 깃허브 링크는 다음과 같다.https://github.com/wojtekmaj/react-pdf GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.Display PDFs in your React app as easily as if they were images. - wojtekmaj/react-pdfgithub.com설치 방법 >npm install react-pdforyarn add react-pdf이후 react-pdf를 설치하고 withResolver가 없다는 에러를 막기 위해 core-js도 설치해 준다npm install core-jsimportimport { Documen.. 2025. 3. 13.
Next.js의 레이아웃과 페이지 Next.js에서의 라우팅 시스템과 리액트에서의 라우팅 시스템은 다르다. 리액트에서는 따로 라우팅 라이브러리를 깔아야 하지만, Next.js에서는 "파일" 기반의 라우팅 시스템을 가지고 있다.각 폴더는 URL 경로와 매치되는 라우트 경로를 나타낸다.당신이 지은 폴더의 이름이 라우팅 주소의 이름이 된다.(예를 들어) app 폴더 안에 dashboard라는 폴더를 만든다. 이후 invoices라는 폴더를 만들면 "내 도메인 / dashboard / invoices" 가 라우팅 주소가 된다. 그리고 각 라우트 마다 page.tsx / layout.tsx 파일을 통해 별도의 UI를 만들 수 있게 된다.app 폴더의 최상 파일. 즉, src > app > page.tsx는 홈화면이 되어줄 것이다.dashboard.. 2025. 3. 13.
Next.js의 폰트/이미지 최적화 글을 시작하기 전에, 공식 문서는 다음 링크를 참고하길 바란다.https://nextjs.org/learn/dashboard-app/optimizing-fonts-images App Router: Optimizing Fonts and Images | Next.jsOptimize fonts and images with the Next.js built-in components.nextjs.org(일단 이미지에 대한 부분을 먼저 작성하겠다.)이미지를 넣는 방법.Next.js에서는 이미지를 넣는 방법이 크게 2가지가 있다.1. 그냥 태그를 쓴다.2. 태그를 사용해서 이미지를 최적화한다.1. 그냥 태그를 쓴다.public에 이미지 넣어두고, 필요한 페이지에 태그를 써주면 된다./ 부터 시작해서 이미지 경로.. 2025. 3. 12.
Next.js에서의 css 스타일링 Next.js에서는 스타일링을 할 수 있는 방법이 여러 가지 존재한다. 이 글에서는 그 부분을 이야기할 것이다.이번 챕터에서...다룰 주제는 다음과 같다.전역 CSS 파일이 무엇인가스타일링 방법: Tailwind 와 css modulesclsx 유틸리티 패키지로 class 명을 조건부로 제공전역 css프로젝트를 만들고, src > app 부분을 보면 global.css 파일이 있다. 이 파일이 "전역"으로 css를 먹일 수 있는 파일이다.이 파일은 앱 내에 어디든 불러올 수 있다.(import) 근데 보통 최상위 컴포넌트에 추가하는 것이 좋은 관행이다.예시 코드 > (경로) : src > app > layout.js import { Geist, Geist_Mono } from 'next/font/goog.. 2025. 3. 11.
Next.js 프로젝트 빌딩하는 법 Next.js는 리액트의 풀스택 프레임워크이다.리액트의 단점을 보안하고 서버 사이드 렌더링으로 돌아간다. (클라이언트 사이드 렌더링도 가능함)SEO에 불리한 리액트랑 다르게 Next.js는 SEO가 잘 적용이 된다. 또한 현재 프론트엔드에서 가장 트렌디하다. (관련 영상 및 글)https://toss.tech/article/firesidechat_frontend_6 프론트엔드 개발에서 Next.js, 꼭 써야 할까? | EP.6 모닥불프론트엔드 개발에서 프레임워크는 정말 필수 일까요? 토스 정진우, 조유성 님이 전하는 프레임워크와 라이브러리의 정의부터 실제 업무에서의 활용법까지, 실용적인 예시를 통해 함께 알아보toss.techhttps://www.youtube.com/watch?v=1w70c7x62BI.. 2025. 3. 10.
Vite로 리액트 프로젝트 시작하기 create react app 지원이 중지되었기에, 다른 방식으로 프로젝트를 만드는 것을 추천한다. 방법은 많다. 그중에서 Vite를 이용해서 리액트 프로젝트를 빌딩 하는 방법을 작성하고자 한다.(create react app 지원 중단 관련 글)왜 쓰는가?이유는 되게 간단하다. 프로젝트가 커져도 빠른 속도를 유지해주기 때문이다.작은 프로젝트에서는 잘 못 느낄 수 있지만, 프로젝트가 커지면 npm start시 "미리 보기" 서버를 여는 속도가 매우 늦어진다. (심하면 '분' 단위까지 늘어날 수 있음.) 그리고 코드를 수정하고 저장하고 반영하는 속도도 느려진다.이런 부분을 방지하기 위함이다.Vite 설치하기아래와 같은 명령어를 입력하여 설치할 수 있다.Vite를 사용하기 위해서는 14.18+, 16+의 N.. 2025. 3. 8.

티스토리툴바