오류해결

[트러블슈팅] Layout Shift 해결하기

온라인 전시회를 무탈하게 운영하고 (운영하는 동안 큰 이슈가 없었고 사용자 피드백을 받으며 계속 개선해나아갔다!) 링크드인에도 글을 올리며 운영 경험을 포함해 웹사이트를 홍보했습니다. 프로그래머스 데브코스를 하면서 만난 훌륭한 멘토님이 계시는데, 여쭤볼 것이 있어서 이것저것 여쭤보다가 멘토님도 링크드인 게시글을 확인했다며 개선 사항들을 추천해주셨습니다. 그 중 하나가 Layout Shift!!Layout Shift로 인한 문제점링크드인으로부터 처음으로 웹사이트를 접속하는 사용자(특히 데스크탑 사용자)들은 웹성능이 캐시된 데이터를 사용자는 사용자보다 좋지 않았습니다. 따라서 데스크탑 첫 화면에 로딩되는 비디오가 느리게 로딩되었고, 이로 인해 로고 이미지가 위로 올라오는 Layout Shift 문제가 발생하..

VSCode Vitest "이 작업 영역에서 아직 발견된 테스트가 없습니다." 오류 해결

vitest 라이브러리 설치와 extension 설치, 테스트 코드 작성까지 모두 다 한 이후, vitest extention을 이용하여 테스트를 실행하려고 할때 아래 이미지와 같이 테스트 항목이 뜨지 않는 오류가 있었다.해당 이슈를 겪고 있는 사람들이 꽤나 많이 있다.https://github.com/vitest-dev/vscode/issues/196 Vitest extension completely non functional on mac · Issue #196 · vitest-dev/vscodeDescribe the bug Vitest completely fails to work on any of my vitest repos To Reproduce Steps to reproduce the behavi..

[Docker] docker: Error response from daemon: Ports are not available | address already in use 포트충돌 해결

컨테이너를 실행하려는 도중 3000번 포트가 로컬에서 이미 사용중이어서 포트충돌(이미 사용중) 오류가 났다. 열려있는 port 닫고 새로 실행하는 방법1) 열린 포트 확인하기sudo lsof -PiTCP -sTCP:LISTEN2) 특정 포트 확인하기sudo lsof -i :[port]sudo lsof -i :3000 // example3) 포트 닫기특정 포트를 확인한 결과에서 PID를 이용하여 특정 포트를 닫아줄 수 있다.sudo kill -9 [PID] 이후 컨테이너를 실행하면 특정 포트에 대한 연결이 잘 이루어질 것이다. 더보기참고https://jongsky.tistory.com/41 (Mac) port 확인 방법 및 5000 port 삭제 방법1. 글을 작성하게 된 계기 docker-compose를..

[트러블슈팅] vite+react-ts+tailwind 작동안됨 해결

이번에 비트로 프로젝트를 생성하고 tailwind를 적용시키는데 tailwind가 적용되지 않아 삽질을 정말 많이 했다. 공식 문서에 나온 단계로 동일한 과정을 진행했음에도 불구하고 스타일 적용이 안됐지만 결국 해결하여 이건 기록해두고 나중에도 똑같은 이슈 발생시 사용해야겠다는 마음으로 작성한다.. 구글링 진짜 많이했다.. 👉🏻 문제상황공식문서에서는 vite.config.ts에서 설정하라는 것이 없었는데, 구글링을 하다보니 vite를 사용하면 따로 설정을 해주어야 한다고 한다.그래서 아래 코드를 넣어 두 라이브러리를 plugin에 추가해줬는데도 style이 적용이 안됐다..import tsconfigPaths from "vite-tsconfig-paths";import tailwindcss from ..

[트러블슈팅] Git 파일명 대소문자 변환 인식 불가 문제

더보기동아리 프로젝트의 이미지 파일명의 대소문자를 변경해야하는 필요가 있어서 변경했던 적이 있었다. 당연히 git이 이러한 변경사항을 인지했을거라고 생각했고(그냥 당연하다고 생각했다) 다른 파일들의 변경사항들이 있어서 git add . 로 바로 합쳐서 commit을 진행했다(이것도 내 실수,, 어떤 파일이 어떤 상태에서 처리되고 있는지 계속 확인하고 올바르게 커밋하는 습관을 들였어야 했는데 변경된 파일들 다 들어갔겠지~하고 넘어갔었다..) 결국 내가 바꿔놨던 이미지 파일의 변경사항이 반영안된 상태로 깃허브에 계속 남아있게 됐고,, 그 버전을 채은이가 clone하게 되었다(문제의 시발점...) 채은이가 코드를 수정할때마다 코드에서 이미지 파일명을 수정해서(왜냐하면 현재 코드 내의 이미지 파일 명은 내 버전..

Express.js CORS 오류 해결

👇🏻 해결법은 맨아래에풀스택구현중, 프론트에서는 axios 라이브러리를 사용하여 백엔드와 API 연동을 진행하려고 하였다. 코드의 유지보수와 재사용성을 위해 http 클라이언트를 따로 구성하는 코드를 만들었고, export하여 axios를 더 보기 쉽게 사용할 수 있게 하였다. // http.tsimport axios, { AxiosRequestConfig } from "axios";const BASE_URL = "http://localhost:3000";const DEFAULT_TIMEOUT = 30000;export const createClient = (config?: AxiosRequestConfig) => { const axiosInstance = axios.create({ baseU..

zsh: command not found: nvm 해결

더보기vite로 리액트 앱을 생성하고 npm install을 하다가 아래와 같은 오류를 보게 되었고, 해당 오류는 노드 버전이 상이하다는 것이었기 때문에 nvm을 통해 버전 관리를 하려고 했다.노드 버전 관리를 위해 아래 명령어를 실행했는데 작동하지 않았다.$ nvm install 18.12.1zsh: command not found: nvm1. nvm 설치 여부 확인내 경우 nvm이 설치가 안되어있는 경우였다. 그래서 아래와 같이 nvm을 설치해주었다.nvm -v // 0.39.7 버전이 뜨지 않는다면 터미널에서 Homebrew로 설치해준다.brew updatebrew install nvmmkdir ~/.nvm 설치후 아래 2번 진행2. zshrc 설정nvm이 존재한다면 환경변수 설정이 제대로 되어 있..

api.channel.io API 가져오기 에러 해결 - plugin key

잘만 되던 동아리 웹사이트가 갑자기 POST 호출 중에 아래와 같은 403 forbidden 오류가 발생하며 동작하지 않았다. {type: "constraintUrlError", status: 403, errors: [{message: "this url is constraint"}],…}errors : [{message: "this url is constraint"}]language : "ko"status : 403type : "constraintUrlError"constraintUrlError에 대해서 검색도 해봤지만 마땅한 답이 나오지 않았다. 그런데 역시, 오류를 자세히 들여다 봐야한다. 오류에 아래와 같은 주소가 있었다. https://api.channel.io/front/v6/elastic/pl..

TypeError: Cannot destructure property '변수명' of 'req.body' as it is undefined.

request body에 올바른 json 형식으로 값을 보내줬음에도 불구하고 아래와 같은 오류가 났다.TypeError: Cannot destructure property 'user_id' of 'req.body' as it is undefined. 해당 오류는 body값에 있는 user_id를 인식하지 못한다는 의미인데, body를 파싱할 수 있도록 미들웨어를 추가해주어야 한다. express를 사용한다면 아래 코드를 추가하자. const express = require('express')const app = express();app.use(express.json()); 해당 오류는 app.use(express.json());이 없기 때문에 발생하는 오류이다. app.use(express.json())..