전체 글

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를..

AWS 프리티어 적용 범위

이미지 최적화를 위해 AWS S3와 CloudFront를 통한 CDN서비스를 이용하려고 한다. 나는 아직 프리티어 계정이 유효하기 때문에 S3와CloudFront의 제공 범위에 대해서 기록해놓고 과금이 나오지 않도록 조심해서 사용해보려고 한다. Amazon CloudFront (AWS의 CDN서비스)프리티어와 관계없이 모든 고객에게 월 1TB 데이터 송신, HTTP/HTTPS 천만건, CloudFront 함수 200만건 무료Amazon S312개월 동안 5GB 제공, GET 요청 20000건, PUT 요청 2000건 중요한 것은 아직 저 건수가 너무 추상적이다,, 실제로 돌려보고 체감을 해봐야 실제로 어느정도의 사용량이 있을 지 알 수 있을 것 같다. 해킹으로 인한 과금과 무료로 제공되는 지원을 넘었을 ..

FE 프로젝트 아키텍처에 대한 고민(feat. FSD 아키텍처)

프로그래머스 최종 프로젝트에서 프론트엔드 폴더구조에 대한 논의를 거쳐 FSD 아키텍처에 대해 공부하고 내용을 공유하기로 했다. FSD 아키텍처는 어떤 구조인지 살펴보며 이전에 사용하던 방식과 FSD 아키텍처를 사용했을 때를 비교하여 좋은 점을 살펴보고 우리 프로젝트에 적용했을 때 얻게되는 이점 또한 생각해보려고 한다. FSD 공식페이지 : https://feature-sliced.design/ Welcome | Feature-Sliced DesignArchitectural methodology for frontend projectsfeature-sliced.design공식문서에 다양한 서비스들의 깃허브 주소가 있다. 레퍼런스로 활용할 수 있을 것 같다.FSD(FeatureSliced Design) Arc..

[Git & Github] 로컬 브랜치 <-> 원격 브랜치 동기화

1. 원격에서 삭제한 브랜치 로컬에도 동기화시키기이슈를 처리하고 브랜치를 삭제한경우 해당 원격브랜치를 동일하게 로컬에서도 삭제해야하는 경우가 있을 수 있다. 원격에서 브랜치를 삭제했는데 로컬에 남아있는지 확인하는 방법은 아래와 같다git branch -rorigin/브랜치명 -> 과 같이 뜨는 경우 원격의 브랜치가 아직 로컬에 있다는 것! 따라서 아래 명령어를 통해 깃허브에서 삭제한 브랜치를 로컬에도 적용시키자.브랜치 목록 동기화를 하는 명령어이다.git fetch -p그러면 gir branch -r 했을때 origin/브랜치명 이 안뜰 것이다!2. 로컬에서 만든 브랜치 원격에 동기화시키기git branch # 새로운 브랜치 생성git push # 원격에 올리기잘 적용됐는지 확인하기 위해선 1번에서..

[트러블슈팅] 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하게 되었다(문제의 시발점...) 채은이가 코드를 수정할때마다 코드에서 이미지 파일명을 수정해서(왜냐하면 현재 코드 내의 이미지 파일 명은 내 버전..

[Algorithm-JS] 프로그래머스 코테 Lv2 - 기능개발(array)

✔️ 문제링크https://school.programmers.co.kr/learn/courses/30/lessons/42586?language=javascript 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr✔️ 문제요약배포되어야 하는 작업들이 순서대로 담긴 배열 progresses가 존재하며 각 작업의 값은 배포된 정도를 의미한다. 매일 수행할 수 있는 작업의 속도가 담긴 배열 speeds도 존재한다. 각 작업들은 배포 순서가 존재하기 때문에 먼저 100% 배포 준비가 됐더라도 앞선 작업이 배포 준비가 되지 않는다면 배포가 불가능하다. 배포가 가능한 날에 ..

[Algorithm-JS] 프로그래머스 코테 Lv2 - 의상(hashMap)

✔️ 문제링크https://school.programmers.co.kr/learn/courses/30/lessons/42578?language=javascript 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr✔️ 문제요약[의상의 이름, 의상의 종류]로 이루어진 2차원 배열 clothes가 존재하며, 코니는 하루에 최소 한가지의 옷은 입어야 한다. 단, 같은 종류의 옷은 여러벌 입을 수 없다. 코니가 입을 수 있는 옷의 조합의 수를 반환해라.🔴 제한사항clothes의 각 행은 [의상의 이름, 의상의 종류]로 이루어져 있다.코니가 가진 의상의 수는 1개 이상 ..