전체 글
-
-
NestJS 개발시 tsconfig 설정시 strictNullChecks를 true로 하지 않을때Nest.js 2024. 2. 24. 15:04
NestJS 프로젝트시에 tsconfig 설정시 strictNullChecks를 true나 또는 strict true로 설정하지 않고 프로젝트를 하게 되면 typeorm의 findOne 함수를 예로 들었을때 typeorm의 type 스펙과 다른 결과가 다를 수 있다. findOne(options: FindOneOptions): Promise; typeorm의 findOne 또는 findOneById등 메소드들의 type의 리턴값은 Promise 이다. 그러나 strictNullChecks를 false로 지정 했을경우 원래 당연히 PostsModel | null 이렇게 추론 되어야 하는데 strictNullChecks를 false로 지정 했기 때문에 PostsModel로 추론 되는걸 알 수 있다. 결론적으..
-
NestJS에서 WebSockets 파트에서 AdaptersNest.js 2024. 2. 21. 20:50
https://docs.nestjs.com/websockets/adapter Documentation | NestJS - A progressive Node.js frameworkNest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Readocs.nestjs.com 공식문서에서 websocket에서 adapter ..
-
<w> [webpack.cache.PackFileCacheStrategy]Next.js 2024. 2. 14. 12:18
해당 에러는 내가 next.config.js 파일을 수정 한 이후에 발생했다. 개발환경은 docker이고 Dockerfile은 다음과 같다. FROM node:18-alpine3.18 WORKDIR /app COPY *.* /app RUN npm install COPY . /app RUN npm run build CMD [ "npm" , "run" , "dev"] 열심히 구글링 해본 결과 해당 오류를 제거 하려면 .next파일을 delete 한후 다시 docker 파일을 실행하니까 해결 됬다!
-
프론트에서 restapi를 이용한 http 통신을 할때 4xx번대 에러 또는 500번대에서 network 오류가 발생 했을때 크롬의 network 오류 표시Next.js 2024. 2. 3. 15:05
backend에서 일부러 403 에러를 던지게 구성 했을때 특정한 에러를 감지하기 위해 try catch 또는 .catch 등 특정 에러를 처리 하기 위해 제공 되는것들을 활용한다. 그렇게 했을때 console.log를 출력 해보면 Axios를 이용 했을때 catch 문이 실행 되면서 AxiosError를 출력 해볼 수 있고, 이것을 통해서 에러를 핸들링 하거나 처리 할 수 있다. 근데 나는 항상 프론트 개발을 하면서 크롬 브라우저에서 해당 빨간색 에러 network에러가 보이는게 너무 거슬렸다. 특히나 accessToken이 만료되어 refreshToken을 이용하여 다시 accessToken을 발급 하는 로직을 구성 했을때 뭐만 하면 401 에러가 크롬 브라우저 콘솔에 뜨는게 거슬렸다. 결론부터 말하..
-
(삽질금지 시리즈) Nextjs getServerSideProps에서 SSR 할때 react-query 사용 hydrate fetchQuery와 prefetchQueryNext.js 2024. 2. 2. 13:23
개발 하면서 ssr를 이용하여 api를 요청 할때 try catch 구문을 이용하여 restapi의 error상태에 따라 error 페이지로 보내줄려고 했다. ssr에서 react-query를 사용 할때 hydrate 방법을 사용 했는데, 굉장히 흥미로운게 있었다. react-query를 ssr에서 사용 할때 const queryClient = new QueryClient(); await queryClient.fetchQuery await queryClient.prefetchQuery 이렇게 사용하는데 - fetchQuery - perfetchQuery의 차이는 fetchQuery : 리턴값이 있다. prefetchQeury: 리턴값이 없다. fetchQuery : Promise prefetchQeury..
-
(삽질금지 시리즈) Docker 환경에서 NextJS SSR 사용시 주의할점Next.js 2024. 2. 1. 20:48
Next.js13에서 docker nginx환경에서 getServerSideProps(ssr) api 호출 에러 404 not found 개발 환경 구조는 다음과 같다. docker-compose nginx client backend Next.js13에서 docker nginx환경에서 getServerSideProps(ssr) api 호출 에러 404 not foundnginx에서 localhost:3000일때 client를 localhost:3000/api를 호출 하면 baceknd를 호출 하게 proxy 설정을 해주었다. export const getServerSideProps = (async context => { const queryClient = new QueryClient(); const { ..
-