솔미는 성장중

프로젝트를 시작하며 패스트캠퍼스 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..

프로젝트를 시작하며 패스트캠퍼스 X 야놀자 프론트엔드 부트캠프 1기를 참여하며 첫 과제가 나왔다. HTML,CSS 과제였고, 웹사이트를 클론 코딩하는 것이었다! HTML/CSS 과제였지만 간단한 부분은 JS로 구현해보았다. 웹사이트 선정 기준 1. 기존에 관심있었던 브랜드 2. 온보딩 강의에서 배웠던 swiper라이브러리와 스크롤 효과를 적용해볼 수 있는 사이트 3. CSS를 통해 다양한 효과를 시도해볼 수 있는 사이트 레퍼런스 사이트 & 프로젝트 결과 잭슨카멜레온 (레퍼런스 사이트) 클론코딩 사이트 클론코딩 깃헙 23.08.05 기준: 데스크탑에서만 정상적으로 작동한다. (반응형 미구현) 구현 내용 1. 헤더 애니메이션 스크롤에 반응 : 상단에 있을 땐 투명 / 어느 정도 스크롤을 내리면 흰색 배경 :..