Front-end/Weekly I Learned & Error 해결

WIL (2021-09-26)

calvin9150 2021. 9. 26. 18:00

1. 부트캠프 2주차 

드디어 React 주특기 과정을 시작하였다. 부트캠프에서 React(프론트), Node.js(백엔드), Spring(백엔드) 이렇게 3개의 주특기 중 하나를 택할 수 있는데, 전부터 공부해오던 React를 선택하였다. 이번 부트캠프에선 각각 2:1:1 비율로 선택되었다고 한다. 면접 때 어느 과정에 흥미를 두고 있는지 물었던 만큼, 비율이 꽤나 잘 맞아떨어진 것 같다. 

 

2. 주특기 기본과정 프로젝트

이번은 팀 프로젝트가 아니며, 부트캠프에서 제공한 React강의로 학습을 하고나서 위의 프로젝트를 혼자서 진행해야 한다.

 

3. React 강의에서 배운 것들

  1. React router
    - SPA에서는 서버에서 주는 html이 1개 뿐이다. 그렇다면 웹사이트에서 페이지 구분.. 즉 url 구분은 어떻게 해야할까? 그렇게 주소에 따라서 다른 페이지를 보여주는 것이 라우팅이며, React router 라이브러리를 사용하여 구현했다. 이유는? 사용자가 제일 많으며 공식문서도 잘 정비되어 있어 사용하기 좋았다.
  2. Redux 를 통한 상태관리
    - React router로 라우팅을 한 건 좋았는데, 페이지간에 데이터는 어떻게 공유할까? props를 통해 자식 컴포넌트에 전달할 순 있지만, 컴포넌트가 많아질수록 관리하기 까다로울 수 밖에 없고, 자식컴포넌트에서 부모 컴포넌트로 데이터를 전달하기도 까다롭다. 그렇다면 별도의 데이터 저장공간을 만들어 두고, 컴포넌트의 상하관계에 상관없이 데이터 입출력 할 수 있도록 하는 것이 Redux다. 
  3. Firebase
    - Firebase는 BaaS를 제공하는데, 이것은 DB, 소셜 서비스 연동 등을 API형태로 제공한다. 이것을 사용해 나의 경우에는 백엔드 API를 새로 제작할 필요없이 프론트엔드 작업만으로 상기 개인 프로젝트를 작업할 수 있다.
  4. AWS S3
    - 1주차에서 사용한 AWS EC2는 컴퓨팅 환경을 제공해준다면 S3는 스토리지 서비스로, image는 물론이고 html, css, js 파일도 올릴 수 있다. 이를 이용해서 정적 웹 사이트를 호스팅할 수도 있다.