솔미는 성장중

보호되어 있는 글입니다.

프로젝트를 시작하며 패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 참여하고, 첫 번째 기업연계 프로젝트이다. 3번째 프로젝트로 부트캠프에선 토이 프로젝트2(웹소켓을 활용한 채팅 사이트)를 진행했지만 나는 그 시기에 과정 외 프로젝트를 진행해서 API연동을 해보지 못한 상태로 투입됐다. 그리고 백엔드와 첫 협업을 진행하는 것이기에 걱정이 됐었다. 하지만 "하면 된다" 마인드로 냅다 시작 🔥 프로젝트 결과 빨리 잡아! (숙박 예약 사이트) 깃허브 주소 초점을 두고 준비했던 부분 1. 백엔드와 소통 2. 최적화 3. 코드리뷰 꼼꼼히 하기 개별 숙박 상품 상세 조회 이름, 주소, 예약 가능 여부, 전화번호, 소개, 위치, 옵션, 객실 표시 useQuery를 이용해 효율..

야놀자 기업연계 프로젝트로 숙박 예약 사이트를 만들었었고 이를 마치며 리팩토링 기간을 가졌다! 전체적으로 type을 분리하고, 가독성을 높이도록 코드를 개선했을 뿐 아니라 성능 개선 또한 도전해보았다. lighthouse를 이용해 dev서버 성능을 측정해보았다. 여러모로 성능을 저하시키는 요인이 많다. 사용하지 않는 자바스크립트 줄이기 vite에서 build를 하면 기본적으로 webpack과 비슷하게 코드 스플리팅을 해준다. 아래 사진에서도 사용하지 않는 자바스크립트 줄이기 항목에서 아주 많이 절감된 것을 볼 수 있다! 폰트 최적화 다음으로는 폰트 최적화를 시도해보았다. @font-face { font-family: "CWDangamAsac-Bold"; src: url("https://cdn.jsdeli..

문제발생!!!! 백엔드 분들과 협업하여 작업하던 프로젝트에서 CORS 에러가 발생했다. 백엔드 측에서는 프론트에서 사용하는 포트번호를 열어주었다는 데 그게 적용되지 않는 문제였다. (시큐리티를 적용하고 나서 발생한 문제였는데, 백엔드 측에서 한 가지 설정을 빼먹으셨던 것이 원인이었다.) 마감이 얼마 남지 않았는데 권한 에러가 발생해 API 연동과 관련된 모든 작업이 all stop되는 사태가 발생했다 (っ °Д °;)っ 그래서 다양한 해결법을 알아보던 중 proxy 서버를 띄워서 작업해보라고 멘토님께서 제안해주셨다! 배포할 때 적용시킬 순 없지만 (일반적으로 배포할 때 proxy서버를 띄우지 않으니까) 일단 코드를 짜고 작업할 수 있는 환경을 만들 수 있었다. 개념을 먼저 잡아보자! Proxy 서버란? ..

문제 상황 백엔드와 야놀자 기업 과제 프로젝트를 진행하게 되었다. 2주라는 짧은 프로젝트였기에 모든 과정이 빠르게 진행되어야 했다. ＼（〇_ｏ）／ 초반 ERD작업, API설계, 디자인 시안 제작, 기획 등 빠르게 진행되었다! 모든 것이 착착 진행되나 싶었으나 문제가 생겼다.. 퍼블리싱을 다 끝냈는데도 불구하고 API를 만드는 작업은 아주 초반 단계였던 것이다. 그렇다고 손놓고 있을 수는 없겠다라는 생각에 붕 뜬 시간에 무엇을 할 수 있을지 알아보았다. ✨ 그러다가 알게 된 MSW ! ✨ MSW 작동방식 1. 라이브러리를 설치하면 브라우저에 Service Worker을 등록한다. 2. Service Worker는 브라우저에서 이루어지는 실제 네트워크 요청들을 가로채 복사해서 실제 서버가 아닌 클라이언트 사..