typescript5 [React/Next.js] 여러 줄의 타이핑(multi line typing effect) 효과 개인 포트폴리오 프로젝트 중 구현한 문자열 배열의 여러 줄 타이핑 효과이다. 한 줄만 타이핑 하는 효과의 구현은 검색으로 매우 쉽게 찾아 볼 수 있었지만, 항상 뭔가 더 추가로 더 해보고 싶은 마음에 여러 줄을 한번에 이어서 타이핑 하도록 구현해보았다. 거기에 추가로 여러개의 문자열을 번갈아가며 타이핑하도록 구현하였다. 핵심 원리를 요약하자면, useEffect내에서 상태로 관리 중인 문자열의 인덱스를 확인하고 settimeout을 사용해서 지연 시간 후에 다음 문자를 추가해준다. 근데 의존성 배열에 갱신되는 문자를 넣어서 지연시간 후에 문자가 갱신되면 다시 랜더링 되면서 useEffect로 같은 로직이 반복되는 원리이다. 코드의 각 줄마다 상세 설명을 주석으로 남겨두었다. 위의 코드는 문자열 배열을 타.. 2023. 12. 31. 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. [error] 'PostList' cannot be used as a JSX component. Its return type 'Promise<Element>' is not a valid JSX element async 서버 컴포넌트를 타 컴포넌트에서 사용 시, 해당 에러 발생 'PostList' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement': type, props, key 에러 원인 현재 Next.js 13.2.4 버전의 경우, async / await 서버 컴포넌트를 타 컴포넌트에서 사용 시, Promise 를 리턴하는데, 타입스크립트를 사용 중이라면 타입 에러가 발생한다. 해결 방법 해당 에러는 Next.js 팀이 타입스크립트 팀과 해결 중에 있으며, 이 문제.. 2023. 4. 29. 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. 이전 1 2 다음
