항해 99 일지 (42) - WIL06

WIL (Weekly I Learned)

이번주는 클론 코딩 과정으로 백엔드와 협업하여 진행하였다.

 

이번주에 내가 배운것

• 백엔드와의 협업
  • 막막했던 백엔드와의 협업을 직접 해보면서 자신감이 생겼다.
• axios
  • API 호출을 axios를 사용하였다.
  • fetch를 사용하다가, 튜터님의 조언으로 axios로 전환
• JWT
  • 1주차 때 배운 JWT 방식을 사용하여 사이트의 로그인 기능을 구현
• CRUD
  • 백엔드와 지속적인 소통, 설계로 성공적으로 사이트의 CRUD를 구현할 수 있었다.
• 페이징
  • 저번에는 무한 스크롤 방식을 사용했지만 이번에는 리디 셀렉트의 사이트대로 페이지네이션을 구현
  • 백엔드와 소통하여 페이지마다 적절한 도서 목록을 출력해냄
• 백엔드와의 연동
  • 백엔드는 EC2에서 서버를 구동
  • 프론트엔드는 S3 에서 정적 웹사이트를 호스팅
  • S3에 있는 소스코드가 EC2 서버의 api를 호출
• 프로젝트를 진행하는 방식
  • 프로젝트 진행의 막연함, 막막함에서 각각의 시점에서 무엇을 해야만 하는지에 대한 확신이 생김
• 웹 사이트의 퀄리티 높이기
  • 기획한 프로젝트의 기능을 모두 구현 후 남은시간동안 프론트 엔드에서 개선할 수 있는 사이트의 오류들을 고침
  • 사용자의 입장에서, 편의성을 고려하여 소스코드를 수정
  • 페이지네이션의 중대한 오류를 수정

 

느낀것

• 틈틈이 리액트 공식문서를 공부하자
  • 현재 docs와 좋은 문서들을 접하며 공부중
• 자바스크립트 공부하기
  • 동기, 비동기 복습
• 보안 공부
  • 로그인 유지를 위한 사이트의 웹 저장소의 활용을 좀 더 공부해야할 것 같다.
• state 다루기
  • 함수형 컴포넌트에서 클래스 컴포넌트의 componentDidMount를 useEffect로 모방하여 하려했으나 state가 잘 불러와지지 않았다.
  • 렌더링과 useEffect에 대한 공부가 필요해 보인다.
• axios
  • 인스턴스화하여 편하게 사용하는 방법을 배워야한다.

 

내가 잘한 것

• 최선을 다 한 것
  • 투자할 수 있는 모든 시간을 오로지 프로젝트에 쏟아 부었다.
• 팀장으로서의 프로젝트 진행
  • 초반에는 막연함에 당황했지만 여러 조언들을 새겨듣고 프로젝트를 진행하였다.
  • 적은 인원수임에도 불구하고 가장 빠르게 모든 기능 구현을 완수할 수 있었다.
  • 퀄리티도 만족스럽게 나와서 뿌듯하다.
• 반응형 웹 사이트
  • 미디어쿼리를 공부하여 드디어 염원하던 반응형 디자인을 적용!!
  • 태블릿, 핸드폰 환경에서의 별도의 뷰를 만들어내었다.

---

구현 웹사이트

http://hanghae99books.site

hanghae99 books

 

시연 영상

www.youtube.com/watch?v=U8rmn8h4lPw

 

Repository(Frontend)

github.com/greedysiru/hanghae99_books

greedysiru/hanghae99_books

기존의 웹 서비스를 지정하여 백엔드와 협업하여 클론코딩을 하였다. 첫 협업에 팀장이라는 부담감이 있었지만 많은 조언들과 백엔드님들의 빠른 API 설계, 문제 해결로 생각보다 수월하게 진행할 수 있었던 프로젝트였다. 서버와의 통신이 부담스러웠던 나지만 API 호출을 성공해내면서 부담감보다는 흥미로움이 더 커진 것을 느꼈다. 그리고 간단해 보이는 웹 서비스라도 그걸 만들기 위해서 얼마나 많은 시간과 인력이 투자되어야 한다는 것도 알게 되었다. 결과물이 너무 만족스럽고 자랑스러워서 깃허브에도 메인에 올려놓았다!!🤩

---

항해 99 과정이 이제 미니 프로젝트와 실전 프로젝트밖에 남지 않았다. 지금처럼 꾸준히 열심히 해서 얻을 수 있는것은 모두 얻어갈 것이다!