💡 TIL 20230824 - import { useRouter } from “next/router”와 “next/navigation” 차이 next.js 13에서의 useRouter 훅 useRouter는 next/router에서만 불러와야 하는 줄 알았는데, 자꾸 import하려면 next/router와 next/navigation 두 가지가 떠서 궁금하기도 했고 오늘 위와 같은 에러를 마주해서 찾아보았다! 둘의 차이는 무엇? useRouter from next/route Page router으로 라우팅 시 사용 useRouter from next/navigation v13 이후 App router으로 라우팅 시 사용 Next.js 13 App router 이번에 진행 중인 프로젝트는 App rout..
💡 TIL 20230822 - Prisma, Planet scale 셋업 및 연결 방법 1. Prisma, Planet Scale, Vitess 1) Prisma Prisma는 데이터베이스를 다루기 위한 현대적이고 강력한 ORM (Object-Relational Mapping) 도구이다. Prisma를 사용하면 데이터베이스 스키마를 간편하게 정의할 수 있고, 데이터베이스 쿼리 역시 쉽게 작성하고 실행할 수 있다. Prisma는 다양한 데이터베이스 시스템과 통합할 수 있으며, TypeScript와 JavaScript를 지원하며, 데이터 모델과 데이터베이스 스키마를 동기화하여 개발자에게 강력한 개발 경험을 제공한다. 2) Planet Scale MySQL과 호환되는 서버리스 데이터베이스로, 개발자 경험을 저..
💡 TIL 20230820 - Prisma 1. Prisma란? 1) Node.js와 TypeScript ORM ORM은 Object Relational Mapping의 약자이다. 기본적으로 번역기의 개념이라고 생각하면 되는데, JS 또는 TS 코드와 DB 사이에 다리를 놓아주는 역할을 한다. SQL같은 데이터베이스 언어를 작성하지 않고 타입스크립트 코드로 작성하여 오류가 발생하기 전에 알 수 있다. PostgreSQL, MySQL, SQL Server, SQLite, MongoDB와도 사용할 수 있다. 2) schema.prisma Prisma를 사용하기 위해서는 먼저 Prisma에게 DB가 어떻게 생겼는지 설명해주어야 하는데, 이 설명은 `schema.prisma`라는 파일에 작성한다. // sche..
💡 TIL 20230819 - Tailwind CSS 장단점, 연습예제 1. Tailwind CSS란 Tailwind CSS는 utility-first 컨셉을 가진 CSS 프레임워크이다. 부트스트랩과 비슷하게 m-1(.m-1 {margin: 0.25rem}), flex(.flex {display: flex})와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다. tailwind는 제로 런타임으로 동작하며 빠르고, 유연하다. 1) 장점 프로그래밍 언어와 같은 추상화 수준을 제공해 스타일을 빠르게 적용할 수 있어 코드의 길이가 줄고, css 작업 시간이 절약된다. 컴포넌트 생성이 쉽고, 관리 및 유지보수가 편하다. 커스터마이징이 쉬워 원하는 대로 디자인을 바꾸..
💡 TIL 20230817 - SSR vs SSG vs ISR 저번 글에서는 CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)의 차이점에 대해 공부했다면, 오늘은 SSR, SSG, ISR에 대해 정리해보았다. 1. SSR (Server Side Rendering) 1) 서버 사이드 렌더링 SSR은 CSR과 반대되는 개념으로 서버에서 페이지를 렌더링해서 클라이언트에 전달해주는 방식이다. Next.js에서 SSG나 ISR과 구분되는 이유는 렌더링되는 시점 때문인데, SSR은 사용자가 요청할때마다 그 시점에 페이지를 새롭게 렌더링한다. 그렇기 때문에 fetch 해야하는 데이터가 빈번하게 변경될 때 사용된다. 2) getServerSideProps getServerSideProps 함수는 serv..
💡 TIL 20230816 - redirect와 rewrite 1. redirect, rewrite의 공통점/차이점 redirect와 rewrite 유저가 어떤 path로 접근하는 경우, 다른 path나 경로로 자동으로 이동시켜주는 기능이다. 공통점 next.js에서 기본적으로 제공하는 기능이다. 두 가지 모두 유저가 특정 path로 이동 시 의도한 path로 이동시키 위해 사용한다. 차이점 redirect는 정해진 path로 url이 변경되어 유저가 확인할 수 있다. 반면 rewrite는 redirect 해주는 것은 똑같지만, 유저가 처음 입력한 url 그대로 유저에게 보여진다. 2. redirect, rewrite 설정 방법 1) next.config.js // next.config.js module..
💡 TIL 20230815 라이브러리 vs 프레임워크, CSR vs SSR 1. 라이브러리(React) vs 프레임워크(Next.js) React에서는 우리가 모든 것을 직접 생성하고 설정해 주었던 것들이 Next에서는 이미 만들어져 있다. 1) 📚 라이브러리 React는 JavaScript Library 어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임 응용 프로그램이 라이브러리를 사용한다. 개발자로서 사용하는 것 2) 🛠️ 프레임워크 Next.js는 React Framework 코드를 작성하는 기본 틀을 제공하여 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경 응용 프로그램은 프레임워크에 의해 사용된다. 개발자가 코드를 불러오는 것 코드를 적절한 위치에 잘 적기만 한다면 f..
🇰🇷 20230815 TIL Next.js 기초 강의를 듣던 중 프로젝트 create를 npx로 하길래 npm과 뭐가 다르지? 그렇다면 yarn이랑은? 궁금해져서 간단하게 찾아보고 정리하였다. 1. npm 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 Node Package Manager라는 말 그대로 노드 환경에서의 패키지 매니저를 의미한다. 자바스크립트 환경에서 프로젝트를 시작할 때 node와 함께 설치하라고 하는 Getting Started가 많고 사용 빈도가 높다. `npm install 모듈명 -g` : npm을 통해 -g 옵션을 주면 매 프로젝트마다 모듈을 설치해 줄 필요가 없고 내 컴퓨터 안에서 글로벌하게 모듈이 설치되어 프로젝트마다 같은 모듈을 공유해서 사용할 수도 있다. 단..
💡 TIL 20230814 리액트 프로젝트를 빌드하면서 상태관리 라이브러리는 당연하게도(?) Redux만 써봤었다. 하지만 세상에 당연한 것은 없는 법.. Recoil, Zustand, Jotai 등 다른 상태 관리 라이브러리도 써보고 싶다는 생각에 먼저 Recoil부터 설치해서 사용해보게 되었다. 1. Recoil이란? Recoil은 페이스북이 만든 상태 관리 라이브러리이다. React 전용으로 나온 상태 관리 라이브러리인 만큼 리액트에서 최적화되어 작동한다. 아래는 Recoil 공식 홈페이지에서 소개하는 Recoil의 특징인데 설명이 뭔가 귀엽다. 리액트 공식 유튜브에서 설명하는 Atom의 개념도이다. redux에서는 store라는 중앙 상태 관리소에 담아두고 관리하는 개념이었다면, 리코일에서는 뭔가..
