728x90 반응형 KODA Project5 KODA 통계 페이지 구현 👆 통계 페이지 구현 움짤 KODA 총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작 그 중 맡았던 통계 페이지(FE)를 기록합니다 통계 페이지 (FE) 편 구현한 기능 recharts 라이브러리 사용, 통계 시각화 통계 페이지는 외부 라이브러리를 접해보고자 처음부터 꼭 구현하고 싶었던 페이지였는데 팀 계획에서 shouldHave 리스트에 있어 조금 늦게 작업에 들어갔다. 다행히 기획-계획 했던 프로젝트 첫주에 라이브러리를 살펴 놓고 노션에 정리했기 때문에 기능 구현은 빠르게 할 수 있었다 👇 정리한 해당 노션 : https://www.notion.so/wecode/6b7e7099535a4438ae2d60aab21488c9 가장 많이 쓰이는 nivo와 recharts 중 고민이.. 2022. 10. 21. KODA 링크 페이지 구현 👆 링크 페이지 구현 움짤 KODA 총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작 그 중 맡았던 링크 페이지(FE)를 기록합니다 링크 페이지 (FE) 편 구현한 기능 메인 페이지에서 받았던 url 보여주기, 복사 기능 👆 구현한 코드 (mainPage, linkPage) 링크 페이지는 따로 fetch를 쓰지 않고 메인 페이지에서 받은 id 값과 해당 url 데이터 값을 그대로 가져와 썼다. 이는 최대한 fetch를 줄이자는 백엔드 팀원의 의견이었는데 한 페이지당 무조건 데이터 받아오는 fetch가 있어야한다는 생각이 박혀있었던 터라 매우 흥미롭게 들렸고 회의 후 이런 코드가 나왔다. Link to 로 state 에 담아 객체로 Link 와 해당 타이틀(name)을 그대로 넘.. 2022. 10. 21. KODA 메인 페이지 구현 👆 메인 페이지 구현 움짤 KODA 총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작 그 중 맡았던 메인 페이지(FE)를 기록합니다 메인 페이지 (FE) 편 구현한 기능 서베이 불러오기 (해당하는 서베이 없을 시 안내 문구), 페이지 네이션 서베이 서치 기능, 필터 서베이 삭제(데이터 베이스에서 삭제), 강제 종료 기능 맡았던 페이지 중에 가장 공들였던 메인 페이지! 페이지네이션을 처음으로 구현했는데 관련된 다양한 라이브러리가 있다는 점도 알게 되어 여러모로 뿌듯한 작업이었다. 모든 페이지와 연결되는 메인 페이지인만큼 기획 단계부터 유저 플로우를 최대한 신경써서 기획 - 작업했는데 이렇듯 기획자님과 계속 소통하며 팀원과 1차 2차 초안을 만들어 작업했다. 기획 후엔 와이어 프레.. 2022. 10. 21. KODA 로그인 페이지 구현 👆 로그인 구현 움짤 KODA 총 4명이서 구성된 Team Koda ( FE : 2, BE : 2 ) 제작 그 중 맡았던 로그인 페이지(FE)를 기록합니다 로그인 (FE) 편 구현한 기능 로그인창에서 아이디 Input 3글자 && 비밀번호 input 3글자 이상 입력시 버튼 활성화 활성화 된 로그인 버튼 누를 시 서버와 통신 후 로컬 스토리지에 토큰 발급, 메인페이지로 넘어감 👆 구현한 코드 * 서베이툴은 한 명의 관리자만 원하셨으므로 굳이 회원가입 기능은 만들지 않았음! * id, password 값을 state 하나로 객체에 담아서 관리했고 이 값들을 body에 담아보냈다 후에 response 값에서 adminToken이 있을 경우 token을 로컬스토리지에 저장했다. 버튼을 form 태그 안에 넣었.. 2022. 10. 21. KODA Project 회고록 및 위코드 수료 회고록 KODA Project 란? 프론트엔드 깃허브 [https://github.com/kolonDT/202209_wecode_fr] GitHub - kolonDT/202209_wecode_fr Contribute to kolonDT/202209_wecode_fr development by creating an account on GitHub. github.com 백엔드 깃허브 [https://github.com/kolonDT/202209_wecode_en] GitHub - kolonDT/202209_wecode_en Contribute to kolonDT/202209_wecode_en development by creating an account on GitHub. github.com 👆 깃허브 링크 개발기.. 2022. 10. 20. 이전 1 다음 728x90 반응형
