초기 로딩 속도가 중요하기에 Next.js를 사용해 SSR 페이지를 구현했습니다. Typescript를 사용하며 타입 삽입에 익숙해졌고, 컴파일 단계에서 에러를 처리할 수 있었습니다.

웹 사이트 성능 최적화를 통해 lighthouse performancn 점수를 49점에서 92점으로, 웹 접근성 점수를 79점에서 86점으로 향상시켰습니다. 또한 초기 렌더링 속도를 50% 감소시켰습니다.

스타일의 자유도를 높이고 유지보수를 쉽게 하기 위해 tailwind를 사용했고, Styled-components와 결합해 가독성을 높이고 리액트 컴포넌트의 장점을 극대화했습니다.

웹, 모바일 뿐만 아니라 웹 화면의 크기에도 반응하는 반응형 웹 사이트를 구축했습니다. UX에 대해 깊게 고민하여 UI를 디자인했으며, 페이지 전환 없는 스크롤 다운 페이지를 구현했습니다.

Next.js에 익숙해진 계기가 되었고, 많은 이들의 유입을 위해 검색엔진최적화(SEO)에 신경 쓴 프로젝트입니다.

농장과 소비자의 상생을 돕기 위해 만든 체험 예약 서비스입니다. 과일값의 하락으로 버려지는 과일이 많다는 소식에 아이디어를 얻어 만들게 되었습니다.

회원가입&로그인, 농장 회원 관리 페이지 등 중요 로직을 담당했으며, 전체 페이지의 6/14를 구현하며 최대로 기여했습니다.

좋은 UX를 제공하기 위해 React를 사용해 CSR 방식의 SPA를 구축했습니다. 리로드 없는 페이지 전환을 위해 react-router-dom을 사용했습니다. 이 과정에서 라우팅, CSR, SSR, SSG에 대한 개념을 더욱 확실하게 숙지할 수 있었습니다.

데이터 전달 형태를 변경하여 API 호출 횟수를 50% 줄였습니다

상태값은 redux-toolkit을 사용하여 전역적으로 관리했습니다. 안정적이고 많이 사용되는 기술인만큼 한 번은 써봐야겠다는 생각으로 선택했습니다.

처음으로 Styled-components를 사용했고, PostCSS가 무엇인지 배우는 계기가 됐습니다. 디테일한 디자인을 위해 따로 css 프레임워크를 사용하지 않고 디자인 시스템을 구축했습니다.

자바스크립트의 기초를 다질 수 있었던 프로젝트입니다. 데이터 호출이 가장 많은 관리자 페이지 전체를 담당했고, 주문/ 상품/ 카테고리 CRUD를 구현했습니다.

백엔드 개발자와 협업하는 방식에 대해 많이 배울 수 있었습니다. 필요한 명세를 문서로 작성했고, 적극적으로 소통하여 모호한 이슈를 만들지 않았습니다.

유저의 편의성을 위해 데이터 보존 처리에 신경 썼습니다. 상품 삭제시 판매량이 있다면 삭제가 아닌 판매중지 처리되며, 상품 카테고리 삭제시 속한 상품들은 '미설정' 카테고리로 옮겨집니다.

다음 주소 API를 사용하여 주소 검색을 구현했습니다. 처음으로 API를 커스터마이징하며 자신감을 얻을 수 있었습니다.