next/router query 버그 / 리액트 합성 이벤트
2023. 3. 4. 21:56
TIL/트러블슈팅
Tag 쿼리가 제대로 입력되지 않는 현상 next/router를 활용하던 중 query를 사용하여 포스트를 필터하는 부분에서 에러가 발생했다. 처음 발생한 에러는 태그를 눌렀을 때 undefined가 발생했고 결과를 확인해보니 같은 자료를 얻을 수 있었다 useRouter/withRouter receive undefined on query in first render I got a problem with my dynamic route. It look like this [lang]/abc I am trying to get query value from [lang] but when I using useRouter/withRouter i got query during 2-3 render of page ( on..
Google Cloud Platform, docker-compose로 배포하면서 겪은 이슈
2023. 2. 24. 11:21
TIL/트러블슈팅
이전 내용 Google Cloud Platform 삽질기 (1) 요약 서버를 배포하기 위해 구글 클라우드 플랫폼을 사용하기로 결정했다. 도커 이미지를 쉽게 띄울 수 있고 마침 aws 프리티어가 끝나서 선택하게 되었는데 막상 GCP로 연결하고보니 이미지만 choiblog.tistory.com 앞선 내용과 이어지는 내용이다. 가상 머신 인스턴스를 띄우고 소스 코드를 업로드하는 부분까지 진행했다. 소스코드 실행하기 우선 인스턴스에 올린 코드 압축을 풀고 실행시켜봐야했다. sudo apt-get update && sudo apt-get install unzip unzip example.zip 압축이 해제되고 docker-compose.yml 파일이 있는 곳으로 접근해서 docker-compose up 명령어를 ..
Google Cloud Platform 배포 삽질
2023. 2. 21. 22:31
TIL/트러블슈팅
요약 서버를 배포하기 위해 구글 클라우드 플랫폼을 사용하기로 결정했다. 도커 이미지를 쉽게 띄울 수 있고 마침 aws 프리티어가 끝나서 선택하게 되었는데 막상 GCP로 연결하고보니 이미지만 띄울 수 있었고 도커 컴포즈는 따로 띄울 수 없는 것 같았다. 그래서 SSH를 활용하여 배포에 필요한 파일들을 옮기고 실행시켜보고자 도커까지 설치하였다. GCP란 aws, azure같이 구글에서 제공하는 클라우드 서비스이다. 이전에 aws를 사용하다가 뭣도 모르고 설정하는 바람에 비용이 조금 청구됐는데 그 이후로 접속을 잘 안하기도 했고 프리티어 기간이 끝나 GCP를 선택하게 되었다. 배포 이제 개발한 서버를 배포하기 위한 호스팅이 필요했는데 도커 이미지를 전달해주면 서버리스로 서비스해준다고도 해서 계속 찾아봤더니 이..
Docker ENV NODE_ENV 설정이 안될 때
2023. 2. 20. 22:19
TIL/트러블슈팅
해결 "start:dev": "cross-env NODE_ENV=local nest start --watch", "start:prod": "cross-env NODE_ENV=prod node dist/src/main.js", # 예시 코드 FROM node:14 # 삭제 # ENV NODE_ENV production WORKDIR /app COPY package.json . RUN yarn install COPY . . CMD [ "yarn", "start:prod"] 개요 # 예시 코드 FROM node:14 ENV NODE_ENV production WORKDIR /app COPY package.json . RUN npm install --production COPY . . CMD [ "node", ..
Docker Error: Cannot find module '/usr/src/app/dist/main.js'
2023. 1. 30. 17:55
TIL/트러블슈팅
요약 파일명, 파일 확장자, 루트가 정확히 일치해야한다. 나의 경우엔 NestJS 프레임워크에서 빌드 했을 때 만들어진 파일이 src/main.js의 루트 위로 만들어졌는데 이때 정확한 루트(src/ ), 확장자(.js)를 붙이지 않아 발생한 문제였다. 삽질 앞서 도커 이미지를 만들때도 열심히 삽질하다가 해결하고 이미지를 실행시키려고 하니 아래와 같은 에러가 발생했다. 에러메시지를 살펴보면 모듈을 찾을 수 없다는 얘기였는데 분명 dist파일에 잘 저장되어 있었다. 뿐만 아니라 prod도 잘 실행이 되기에 계속 헤맸고 이미지 파일 디렉토리 구조를 살펴보려고 했는데 여기서도 삽질을 해서 dist와 다를바 없을 것이라고 생각해서 다시 놓고 넘어왔다. 모든 스택오버플로우를 뒤져보니 아무래도 파일명과 루트, 확장..
docker 배포 시 cannot find module '..Route' or its corresponding type declarations.
2023. 1. 30. 10:36
TIL/트러블슈팅
요약 나의 경우는 파일의 대소문자 관련 문제였다. site.entity파일의 파일명 대소문자가 변경되었는데 build 파일도 잘 실행되길래 typescript문제인 줄 알고 열심히 삽질했다. 에러 로그가 파일루트에 관련되었다면 파일명이나 루트를 다시 확인해봐야 한다. 많이 겪었다고 생각한다.. fix: 배포시 대소문자 에러 · bjc1102/clipplanet-server@0d2aa63 Show file tree Showing 2 changed files with 2 additions and 2 deletions. github.com 에러 처음 빌드할 떄 tsconfig파일을 읽을 수 없다는 오류가 발생했다. docker image로 빌드파일을 사용해 만드는데 왜 필요한거지 생각했는데 전체 코드를 올려 ..
React-query getQueryData undefined가 발생하는 이유
2023. 1. 24. 22:26
TIL/트러블슈팅
요약 getQueryData는 특정 쿼리에 대해 구독 상태를 유지하지 않는다. 이말은 초기 렌더링되어 실행될때만 호출되고 그 이후 리렌더링이 발생하기 전까진 데이터가 업데이트 되지 않는다. 따라서 최신의 상태정보를 사용하고 컴포넌트 별 요청을 원하지 않는다면 option에서 staleTime을 잘 설정해서 useQuery훅을 사용해서 가져오면 된다. 이렇게하면 추가요청없이 무사히 데이터를 가져올 수 있게된다 const count = useState(1)[0] ...count + 1 위 코드처럼 setState없이 count를 +1 해봤자 리렌더링 되지 않는다. 이처럼 데이터가 패칭되어도 새로운 값으로 업데이트 되지 않는다. 초기 실행값만을 유지할 뿐이다. QueryClient | TanStack Quer..
NextJS auth hoc 구현
2023. 1. 21. 22:36
TIL/트러블슈팅
hoc를 사용한 이유 프로젝트 구조는 매우 간단해서 하나의 페이지로만 구성되어 있었다. 이때 로그인 여부에 따라 컴포넌트 렌더링 여부를 나누려고 했다. 구조를 생각해봤을 때 전체적인 로그인 상태를 관리하는 context api가 있고 여기서 로그인 상태를 가져와 나누었는데, 이때 로그인 여부 확인 - 로그인 컴포넌트 조건문 로직이 많이 중복되었다. 따라서 이 부분을 관리하기 위해 hoc를 통해 더 단순화 시킬 수 있을거 같아 여러 문서들을 참고했다. 구현 react-router 공식 example을 참고해서 구현했다. provider를 정의해서 로그인 로직을 구현했는데 NextJS라서 cookie를 가져오는 부분이 렌더링 문제가 발생했다. 아래와 같은 오류가 발생했는데 일단 구현을 목표로 정리해야할 부분..
Already included file name differs from file name only in casing... 이슈
2023. 1. 18. 22:25
TIL/트러블슈팅
요약 나의 경우에서는 깃 파일 대소문자 변경사항이 잘 반영되지 않아 발생한 오류였다. 이 외에도 단순한 tsconfig 설정으로 해결 할 수 있다고 하니 잘 찾아보는게 중요할거같다 git config core.ignorecase false git rm -r --cached . 대소문자 설정 뿐만 아니라 캐쉬도 정리해야 git에 잘 반영된다. 'File name differs from already included file name only in casing' on relative path with same casing Error TS1149: File name 'C:/Project/frontend/scripts/State.ts' differs from already included file name '...
UX 향상을 위한 confirm modal 만들기
2023. 1. 17. 23:40
TIL/트러블슈팅
파괴적인 동작을 할 때 사용할 confirm modal 만들기 import React, { useEffect } from "react"; import ReactDOM from "react-dom"; interface ConfirmModalProps { isModalOpen: boolean; content: string; handleSubmit: VoidFunction; handleClose: VoidFunction; } const ConfirmModal = ({ isModalOpen, content, handleSubmit, handleClose, }: ConfirmModalProps) => { if (!isModalOpen) return null; const ref = React.useRef(null)..