3월 넷째 주, 4월 첫째 주: 항해99 4,5주차
항해99 Chapter3 는 '3-1 주특기 기본' 과 '3-2 주특기 심화' 과정으로 나뉜다.
내가 고른 주특기는 프론트엔드의 꽃!!! 리액트(React)였다.
프론트엔드와 자바스크립트(javaScript)
프론트엔드는 단순히 HTML과 CSS를 사용해서도 웹사이트를 만들 수 있지만 자바스크립트를 더해주면 동적이고 사용자 친화적인 화면 구성이 가능하다. 하지만 이러한 동적인 유저인터페이스를 동적으로 나타내기 위해서는 수많은 상태를 관리해줘야 하는데, 이를 도와줄 수 있는 라이브러리 혹은 프레임 워크들이 존재한다. (대표적인 프론트엔드의 라이브러리에는 React Angular, Vue 가 있다. )
리액트(React)란?
리액트는 페이스북이 만든 라이브러리로 페이스북 개발자들이 라이브러리의 성능과 개발자 경험을 개선하기 위해 많은 연구를 한다. 이는 현업에서 인기있는 웹/앱(RN)의 view를 개발할 수 있도록 한다. 어플리케이션을 만들기 위해서는 사용자가 조작하기 위한 UI(User Interface), UI를 컨트롤하기 위한 로직, 데이터를 처리 비지니스 로직 등 크게 세 부분으로 개발이 필요하다. 그 중 React.js는 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다.
리액트 내에는 HTTP 클라이언트, 라우터 등의 기능들은 내장되어있지 않고, 따로 라이브러리가 있는 것도 아니어서 개발자는 원하는 스택을 입맛에 맞게 골라 사용할 수 있고 혹은 직접 라이브러리를 만들어 사용할 수도 있다. 리액트는 "컴포넌트" 개념에 집중되어 있다. 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여주는 레고같은 친구이다.
- 선언형(Declarative)이다.
- 컴포넌트(Component) 기반으로 재사용성(Reusable)이 높다.
- 컴포넌트는 state와 props를 가딘다.
- Virtual DOM(가상돔) 기반으로 가볍다.
<항해 99 Chapter 3 리액트 커리큘럼>
1. Chapter 3-1 주특기 기본
- "프론트엔드의 꽃 리액트(React)' 익숙해지기 - 임민영 튜터님
1) React 개발환경 구성 방법, JSX, Component
2) Component: event, listener, react hook
3) Redux, React-router
4) keyframe, firebase, firebase + react
5) React 꼼수, AWS S3 로 배포하기
- 과제 : 캘린더 만들기
2. Chapter 3-2 주특기 심화
- "리액트 심화반" - 임민영 튜터님
< 게시글 목록 페이지 만들기>
1) OAuth2.0을 비롯한 로그인 관련 이론
2) 자바스크립트 문법 & 이론
3) 로그인 기능 만들기(쿠키, 세션 방식)
4) Firebase Storage로 이미지 업로드하기
5) 프리뷰 만들기
6) 무한스크롤 만들기
7) 알림 기능 만들기 (파이어베이스 실시간 데이터베이스 사용)
8) 배포하기
9) SEO
10) 프리렌더링(pre-rendering)
- 심화 과제(매운맛): 매거진 만들기
- 난이도 조정 과제(순한맛): 나만의 단어장 만들기
단기간에 엄청난 양의 지식을 넣으려니 솔직히 많이 버거웠지만,
배운 걸 다 기억하려고 하기 보다는 '뷰 > 기능 > 연결' 의 순서와 흐름을 잘 파악하는 것이 중요하다고 하시던 튜터님의 말씀.
처음에는 부분에 얽매여 전체적인 흐름을 보지 못했는데 전체적인 흐름을 읽을 수 있게 되고나니 처음에 전혀 이해되지 않던 부분들도 '아하! 이럴 때 사용하는구나 !' 하고 재미를 느끼게 되었다.
'WIL' 카테고리의 다른 글
[WIL] 개발일지: 항해99 7주차 (0) | 2021.04.19 |
---|---|
[WIL] 개발일지: 항해99 6주차 (0) | 2021.04.11 |
[WIL] 개발일지: 항해99 3주차 (0) | 2021.03.22 |
[WIL] 개발일지: 항해99 2주차 (0) | 2021.03.14 |
[WIL] 개발일지: 항해99 1주차 (0) | 2021.03.07 |