[항해99] 부트캠프 3-4주차 회고

김두루 (FrontEnd Developer)·2022년 2월 6일

항해99 부트캠프 회고록

목록 보기

3/8

항해 부트캠프 커리큘럼 중 3~5주차는 주특기를 집중적으로 파고드는 기간이다.
각각 3주차는 입문, 4주차는 숙련, 5주차는 심화하는 단계로 구성되어 있고, 이 기간동안 개인 과제를 통해 주특기를 가다듬고 팀 과제를 통해 팀원간 정보를 공유하고 협력할 수 있다.

📒 React 입문

3주차 입문주차의 개인 과제는 일주일 평점을 남기고 파이어베이스 or S3로 배포까지 완료하는 과제이다.

과제 요구 사항

✅ 메인 페이지

일주일 평점 보여주기
- 평점은 1~5까지 숫자 중 랜덤한 정수
각 요일 옆 삼각형 버튼을 누르면 요일 평점 남기기 페이지로 이동하기

✅ 평점 남기기 페이지

선택한 요일 보여주기
동그라미를 눌러서 평점 입력하기 (1번째 동그라미 누르면 1점, 3번째 동그라미 누르면 3점)
남기기 버튼을 누르면 이전 페이지로 이동하기

📌 이 과제를 통해서 익힐 수 있는 것

컴포넌트와 리액트 요소를 다룰 수 있다.
이벤트를 관리할 수 있다.
라우팅을 할 수 있다.

입문주차 과제 예시 : http://myweekreview.s3-website.ap-northeast-2.amazonaws.com/
개인 과제 깃허브 주소 : https://github.com/durukim/react_project.git

📒 3주차를 통해 공부한 것

JSX : HTML 태그는 .js 파일 안에서 쓸 수 없어서 나온것이 JSX이다.
- JSX는 자바스크립트의 확장 문법이다.
- XML과 매우 비슷하게 생겼으며, 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
- JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
- 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.
라이프 사이클 : 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이 난다.

생성될 때 : componentDidMount
업데이트 할 때 : componentDidUpdate
제거할 때 : componentWillUnmount
업데이트되는 4가지 상황
1. props 가 바뀔 때
2. state 가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. 강제로 렌더링을 트리거할 때
Ref : 일반 HTML에서 DOM요소에 이름을 달 때 id를 사용한다. 리액트에서는 DOM에 이름을 다는 방법이 Ref 이다.
Ref를 사용하는 이유
1. id는 유일해야 하지만 component 재사용을 한다면 중복될 가능성이 있다.
2. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동한다.
  + 리액트에서도 id를 사용할 수는 있다.
어떨 때 사용하는지
1. DOM을 꼭 직접적으로 건드려야 할 때 사용한다.
- 특정 input에 포커스 주기
- 스크롤 박스 조작하기
- Canvas 요소에 그림 그리기 등
DOM : DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할.
가상 DOM : 실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다. 실제 (무거운)돔의 가벼운 사본 같은 개념.
리액트가 가상돔을 반영하는 절차
1. 변화가 일어났다. 변화된 버전을 가상돔으로 바꾼다.
  ㅡ> 데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링한다.
2. 가상돔끼리 비교한다.
  ㅡ> 변화 전의 가상돔과 변화된 가상돔을 비교한다.
3. 바뀐 부분만 적용한다.
  ㅡ> 바뀐 부분만 실제 돔에 적용을 함으로서 레이아웃 계산은 한 번만 이행된다.
STATE : State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만, props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다.
Event Listener : 이벤트 리스너는 사용자가 어떠한 행동(이벤트)을 하는지 아닌지 지켜보다 알려주는 것이다. ex) 마우스 클릭 , 마우스 오버, 키보드 조작 등
Router : 리액트 라우터 돔을 이용하여, 페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와주는 React hooks.
React Hook : Hooks는 리액트 v16.8에 새로 도입된 기능이다. 함수형 컴포넌트에 사용되는 몇 가지 기술을 Hook이라고 한다. 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect등의 기능 등을 제공한다.
등장 배경
리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉜다. 기존의 개발방식은 일반적으로 함수형 컴포넌트를 주로 사용하되 state이나 Life Cycle Method를 사용해야 할 때에만 클래스형 컴포넌트를 사용하는 방식이었다. 이유는 클래스형 컴포넌트가 함수형 컴포넌트에 비해 가지는 단점 때문이다.
- 클래스 문법이 어렵다.
- 축소가 어렵다.
- Logic의 재사용이 어렵다.
- 최신 기술의 적용이 효과적이지 않다.
이러한 단점을 제외하고, 위에 언급한 state나 Life Cycle Method를 사용하기 위해서는 클래스형 컴포넌트 사용이 불가피했다. 하지만 Hooks가 등장하고 함수형 컴포넌트에서도 두 작업이 가능해졌다.

📒 React 숙련

4주차 숙련주차에서는 개인 과제는 나만의 사전을 만들고 파이어베이스 or S3에 배포까지 완료하는 과제이다.

과제 요구 사항

✅ 게시글 목록 페이지

게시글 목록을 화면에 그리기 (각각 뷰는 카드 뷰로 만들기)
게시글 내의 예시는 파란 글씨로 보여주기
게시글 목록을 리덕스에서 관리하기
게시글 목록을 파이어스토어에서 가져오기

✅ 게시글 작성 페이지

게시글 작성에 필요한 input 3개를 ref로 관리하기
작성한 게시글을 리덕스 내 게시글 목록에 추가하기
게시글 목록을 파이어스토어에 저장하기

📌 이 과제를 통해 익힐 수 있는 것

라우팅을 할 수 있다.
리덕스를 활용할 수 있다.
데이터를 파이어스토어에 저장하고 가져올 수 있다.

숙련주차 과제 완성 페이지 : https://sparta-react-357ea.firebaseapp.com/
개인 과제 깃허브 주소 : https://github.com/durukim/react-dict.git

📒 4주차를 통해 공부한 것

리덕스 : 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다.
Redux 기본 용어
1. 액션(Action)
  상태에 변화가 필요하다면 액션을 일으켜야한다. 액션은 객체로 표현되며 type필드를 반드시 가지고 있어야 한다.
2. 액션 생성함수(Action Creator)
  액션 생성함수는 액션 객체를 만들어주는 함수이다. 화살표 함수로도 표현이 가능하다.
3. 리듀서(reducer)
  리듀서를 한국어로 번역해보면 변화를 일으키는 것을 말한다. 리듀서는 현재 상태와 액션 객체를 받아, 필요하다면 새로운 상태를 리턴하는 함수이다. 액션 유형을 기반으로 이벤트를 처리하는 이벤트 리스너라고 생각하면 된다.
4. 스토어(Store)
  스토어에는 상태가 들어있다. 하나의 프로젝트는 하나의 스토어만 가질 수 있다.
5. 디스패치(Dispatch)
  스토어의 내장 함수 중 하나인 디스패치는 액션 객체를 넘겨줘서 상태를 업데이트 하는 유일한 방법이다. 이벤트 트리거라고 생각할 수 있다.
6. 구독(Subscribe)
  스토어의 내장 함수 중 하나인 구독은 리스너 함수를 파라미터로 넣어 호출하면 상태가 업데이트될 때마다 호출된다. 일종의 이벤트 리스너라고 볼 수 있다.
7. 셀렉터(Selector)
  일반적인 vanilla.js의 리덕스에서는 스토어의 내장함수인 getState를 사용하지만 react-redux에서는 상태 값을 가져올 때 사용한다.
Firebase : FireBase는 2014년도에 구글에서 인수한 모바일, 웹 애플리케이션 개발 플랫폼이다. FireBase는 이 모든 플랫폼을 프로젝트 구축 시, 자동적으로 만들어 준다. 또한 서버를 구축하기 위해서 리눅스 명령어를 알 필요도 없고, 도메인을 구입할 필요도 없으며 개발하는 동안에는 서버를 구입할 필요도 없다. FireBase는 백엔드 기능을 클라우드 서비스 형태로 제공하기 때문에 서버리스 애플리케이션 개발이 가능하다. FireBase 플랫폼으로 프론트엔드 개발자와 백엔드 개발의 경계가 모호해질 것이며, 적은 비용으로 매우 좋은 앱을 만들 수 있을 것이라 기대된다.
AWS S3 버킷 : Simple Storage Service의 약자로 파일 서버의 역할을 하는 서비스이다.
일반적인 파일서버는 트래픽이 증가하면 장비를 증설하는 작업을 해야 하는데 S3가 이것을 대행해주기 때문에 트랙픽에 따른 시스템적인 문제의 걱정을 줄일 수 있다. 또한 파일에 대한 접근 권한을 지정 할 수 있어서, 서비스를 호스팅 용도로 사용하는 것을 방지 할 수 있다.

📒 3~4주차 아쉬웠던 점

2주 동안 무언가 굉장히 많은 내용을 배우고 익혀나갔다. 하지만 따라가기 바쁘고 당장 해결해야할 문제들이 많아서 모든 내용을 깊게 이해하고 넘어가지 못해 개념적인 이해가 많이 부족하다. 심화주차가 끝나기 전까지 처음부터 다시 천천히 진행하면서 제대로 이해하고 넘어가지 못한 부분들을 다시 복습하고 머리속에서 정리하는 시간이 많이 필요해 보인다.