Team Project

Camp Wander : 당신의 아웃도어 활동을 더욱 쉽게 ! 웹 어플리케이션 미니 프로젝트로 캠핑 / 백패킹을 취미로 하는 사용자들에게 지도 기반 서비스를 제공할 취지로 Camp Wander 프로젝트를 기획하게 되었다. 착수하고 나서의 일 이지만, 프로젝트의 스

이번 16기 14조는 캠핑 및 야외활동을 좋아하는 유저들을 위한 위치기반 웹 어플리케이션을 제작.Product : Camp WanderDescription: 'Camp Wander'는 자연의 아름다움과 여행의 열정을 나누는 캠핑 커뮤니티의 중심지입니다. 이 플랫폼은 모

\*\*개발 공부는 처음이며, 항해에 합류하기 전에 python으로 어느정도 공부를 한 적이 있습니다. 지금은 JavaScript를 메인으로 공부하고 있습니다.\*\*- 웹 미니 프로젝트를 하기 전까지는, 성장 가능한 개발자, 그리고 개발자의 실력에 대한 개념이 매우

12일의 시간을 들여, 2명의 백엔드 개발자 팀원과 프로젝트를 진행하였습니다.이런 기능들을 실제 백엔드 서버와 연결하여 구현해보는 경험을 하였고, 특히 개발 중 생긴 구현의 어려움을 서로에게 묻고, 서로의 기술로 지원하며 좀 더 효율적이고 합리적인 해결 방법을 찾은 경

\*\*주특기 미니프로젝트를 통해 지난 2개월 동안 정말 많이 성장했다고 스스로 알 수 있었습니다. 그리고 지금 여기서 모르고 있는 것들과, 무엇을 먼저 공부해야 할 지 스스로 느낄 수 있었어요. 이제 부트캠프 프로그램은 6주가 남아있고, 마지막 프로젝트를 하게 됩니다

✶ 항해99 16기 3조팀 프로젝트 Bid Panda의 FE 개발일지Issue ▸모바일 브라우져를 기반으로 시작하게 된 기획이라, 실제 모바일 디바이스의 화면비를 고정 값으로 두고, 스크린에 가상의 배경을 두고 작업해야 했다. 결국 우리의 프로젝트 UI는 공통의 프레임

✶ 항해99 16기 3조팀 프로젝트 Bid Panda의 FE 개발일지Issue ▸회원가입 기능에 중복 체크 기능이 2개, 이메일 인증 코드 발송 후 검증하는 요소가 있는 상태였다. 회원가입에 필요한 개인정보는 4개, 그리고 form data로 묶여서 서버와 통신하고 있

✶ 항해99 16기 3조팀 프로젝트 Bid Panda의 FE 개발일지Issue ▸백엔드 서버와의 협업은 까다로운 일이지만 즐거운 일이다. 요청의 위치가 잘못된 경우, config나 header가 없는 경우, api주소를 잘못 가공할 경우, 메소드를 잘못 지정할 경우,

✶ 항해99 16기 3조팀 프로젝트 Bid Panda의 FE 개발일지Issue ▸이미 개발된 게시글 페이지인 Aution List 소스코드는 state로 e.target.value값을 받아서 카테고리 조건으로 해둔 뒤, map으로 게시글 리스트를 그려주고 있었다. 동료

✶ 항해99 16기 3조팀 프로젝트 Bid Panda의 FE 개발일지Issue ▸마이 페이지에는 3개의 서로 다른 리스트를 조회할 수 있어야 했다. Mypage 컴포넌트에는 관심 목록, 참여 목록, 등록 목록에 해당하는 p태그가 있었고, 이 p태그의 click even

**✶ 항해99 16기 3조 팀 프로젝트 Bid Panda의 FE 개발일지** Issue ▸ Solve :

**✶ 항해99 16기 3조 팀 프로젝트 Bid Panda의 FE 개발일지** Issue ▸ Solve :

**✶ 항해99 16기 3조 팀 프로젝트 Bid Panda의 FE 개발일지** Issue ▸ Solve :

✶ 항해99 16기 3조팀 프로젝트 Bid Panda의 FE 개발일지Issue ▸최적화의 첫번째 단계로, 브라우저 첫 접근에서 로딩되는 번들 사이즈를 줄이기 위해 React lazy를 사용했다.Solve :Router.ts에서 페이지 라우팅 자체에 React lazy를

✶ 항해99 16기 3조팀 프로젝트 Bid Panda의 FE 개발일지Issue ▸트롤 유저가 중복 체크를 하지 않고 모든 입력을 채운 뒤 아무 버튼이나 누르면 회원가입이 되는 현상. 문제는 form 태그를 사용한 상태에서 중복체크 부분의 UI를 태그 밖으로 뺼 수 없는

✶ 항해99 16기 3조팀 프로젝트 Bid Panda의 FE 개발일지Issue ▸채팅룸에서 메시지를 주고 받으며 스크롤을 수동으로 내려야만 최신 메시지들을 확인할 수 있는 어처구니 없는 상황이었다. Solve :useRef로 화면 하단을 정의 해준 뒤, 를 사용하여 최

✶ 항해99 16기 3조팀 프로젝트 Bid Panda의 FE 개발일지Issue ▸UI UX를 위해 개발한 스플래쉬 페이지가 Main 페이지에 설치 되었는데, 매번 렌더링 될 때 마다 작동 되어, 사용자 편의성이 하락하는 문제가 발생.Solve :첫 렌더링에, isIn이

기술적 선택Vite →webpack 기반의 프로젝트로 개발하는 게 너무 느리고 답답해, 방법을 찾아보고 이번 프로젝트에 시도해 보았다. Vite는 수정된 부분만 핀포인트로 변경하고 번들링 해주는 ES Module 기반의 라이브러리다. 실제로 사용 해 봤을 때 그 성능이