TS3 Next.js 13에서 TypeScript를 사용한 WebSocket 구현 WebSocket은 HTTP와는 다른 독특한 통신 방식을 사용하여, 실시간 양방향 통신을 가능하게 합니다. 이 글에서는 Next-Chat이라는 채팅 PWA 웹앱을 만들며 작성한 코드를 다시 분석해보려 합니다. 코드 줄마다 이해한 내용으로 주석을 적어놓았으니 코드만 보셔도 됩니다! app router 가 아닌 pages router 를 선택한 이유 next.js 13 이상으로 프로젝트 생성 시, App Router를 사용하면 HTTP 메소드인 GET, POST, PUT, DELETE를 API 함수명으로 사용하지 않으면 에러가 발생하므로, App Router를 선택하지 않고 page Router를 사용해서 해결하였습니다. WebSocket은 일반적인 HTTP와 다르므로, App router를 사용해서 API.. 2023. 12. 5. Next.js 개발 중, MongoDB 중복 접속 방지 TS 코드 src/util/database.ts 경로에 다음의 코드를 작성해두고 사용하자(근데 다른데 둬도 상관은 없당) .env.local 에 아래의 값을 넣어주자 MONGODB_URI="몽고DB 접속url" import { MongoClient } from "mongodb"; if (!process.env.MONGODB_URI) { throw new Error("Please add your Mongo URI to .env.local"); } const uri: string = process.env.MONGODB_URI; let client: MongoClient; let clientPromise: Promise; if (process.env.NODE_ENV === "development") { // In dev.. 2023. 4. 29. react / typescript 프로젝트에 eslint, prettier 세팅하기 프로젝트를 진행하며, 리액트와 타입스크립트를 사용하는 프로젝트에 eslint와 prettier 를 세팅하는 방법을 정리하려 한다 1. 아래의 코드를 터미널에 입력하여 CRA (create-react-app) 로 타입스크립트 기반의 리액트 프로젝트를 생성한다 npx create-react-app 프로젝트폴더명 --template typescript 2. 터미널에 'cd 프로젝트폴더명' 을 입력하여 프로젝트 폴더로 이동하여 아래와 같이 eslint 라이브러리를 설치한다 (npm 말고 yarn 쓰자 npm 별로당) yarn add eslint 3. 프로젝트 폴더 내 최상위 경로에(package.json 과 같은 레벨) '.eslintrc.js' 파일을 생성하고 아래의 코드를 붙여넣어주자 module.expor.. 2022. 12. 14. 이전 1 다음
