1. 방황😢

이번주는 프론트 심화과정 과제를 제출하는 날이었다. 결론적으로 요구되는 기능을 많이 넣지 못하고 제출 하였다.

왜 이런 상황이 일어났는지 생각해보았다.

이해가 안가는 부분을 계속 보고 이해 될 때까지 붙잡고 있어서 강의의 진도를 제대로 나가지 못하였고, 제출 마감까지 시간이 얼마안남아 이해가 안간채로 진도를 진행하니 더더욱 과제를 해결 하기 힘들어지는 악순환이었다.
또한 TIL 작성을 프로젝트를 진행하면서 배운 기술과정 하나하나 빼곡히 적어놨는데,
시간은 엄청 잡아먹었으나서 막상 다시보면 너무많은 키워드와 어디서 뭘 다시봐야할지 모르는 사태가 일어났었다.

하나하나 이해가며 나아가는것이 틀렸다고는 생각하지 않지만, 한가지를 너무 오래 끙끙 앓으면서 붙잡으니 효율이 떨어지는 것을 느꼈고 기록이 목적이 아닌 내머리속에 이해가 더 중요하다는 것을 많이 깨닫는 계기가 되었다.

2. 앞으로의 계획

이번주의 마음아픈 경험을 계기로 TIL쓰는방식과 공부법을 바꿔보려한다.

TIL을 키워드로🚩

TIL을 매일 강의에서 배웠던 모든 내용을 정리해가며 써내려갔는데, 이제부터는
키워드 하나를 골라 제대로 공부해서 내가 이해하는 만큼 써내려가려고한다.
더 공부가 필요하다고 생각되는 다른 정보들은 키워드를 따로 적어놓고 하나씩 꾸준히 해나갈예정이다.

옆 동기들과 함께🙌, 모르면 갔다 다시와🏃‍

이해가 안가는 부분을 혼자서 끙끙 앓지 말고 동기들과 적극적으로 공유해 나가면서 지식과 공부법을 알아가려 한다. 그리고 너무 막히는 부분이 있더라도 끝까지 진행해보고 다시 빨리 돌아와서 이해해보자!

3. 이번주차 과제 정리 및 느낀점

로그인, 회원가입

📜와이어 프레임 확인

1. 전체 와이어 프레임을 본뒤 뷰를 기준으로 컴포넌트를 나눠본다.
   즉, 생김새가 공통적인 부분이 있는부분을 나눠준다. 이렇게 중간 부분 컴포넌트가 정리가되면, 전체적으로 많이쓰이는 최소단위 컴포넌트를 생각해본다. 예를들어 Grid,Image, Button, Text 같은 경우에 elements 최소단위컴포넌트로

2. 중간단위 컴포넌트와 최소단위 컴포넌트를 어느정도 나누었으면 중간단위 컴포넌트에 들어갈 최소단위컴포넌트를 <div>image/ text / name </div> 이런식으로 대략적 적어 넣고 Router로 연결하여 확인해보기

3. 연결 되었다면 Grid부터 시작해서 하나씩 만들어가면 되는데 이때!
   페이지를 그리는데 꼭 필요한 데이터를 defaultProps에 담아두자! 데이터가 없어서 나는 오류를 방지하기위해

   ✨팁! 뷰를 그릴 때 무슨 데이터가 필요한지 먼저 쭉 정리를 해놓고 컴포넌트를 짜면 좀더 수월하게 짤 수 있다. 필요한 데이터가 정해지면 이제 이 데이터들을 어디서 받아올지 생각해보는 것도 중요하다. 예를 들어 Post의 데이터 같은경우 Postlist에서 props로 받아올건지 Post자체적으로 가지고있을건지

💻 초기셋팅

1. nvm -version 확인, nvm -ls 설치된 노드확인

2. nvm install 14.16.0 설치

3. nvm use 14.16.0 버전사용

4. npm install yarn (노드 패키지 관리 yarn사용)

5. yarn add creat-react-app (종합 패키지설치)

6. yarn create react-app (프로젝트 생성)

7. 프로젝트 생성 후 예전 프로젝트 진행할 때 사용한 package.json을 src폴더에 덮어 씌운 후 yarn install로 설치

8. 폴더구조 잡기

• src
  - pages
  - components
  - elements
  - redux
  - shared

shared에 App.js넣고 index.js에서 폴더 경로 변경

📄 페이지 연결

1. 로그인, 회원가입, 메인페이지페이지 기본 틀 만들고 라우터로 연결하기
   (yarn add react-router-dom)

2. App.js가서 import {Route, BrowserRouter} from "react-router-dom"

3. <BrowserRouter>로 <Route path="" exact conponent={}> 이런식으로 모든페이지 감싸고 브라우저에서 연결 확인

⚙ 시도해본 기능

OAUTH 2.0의 작동원리

😀 배운 점 및 느낌점

• 브라우저 저장소

프로젝트를 진행하면서 서버에서 받은 access_token을 저장할 브라우저 저장소 loaclStorage(공간 5mb), session(브라우저 종료시 삭제), cookie(공간 4kb)를 알게되었 다. 그리고 이 3곳의 저장공간 중 access_token을 Loacal Storage에 저장하는 일이 많은데 그 이유는 저장공간도더 크고 모든 http통신에 딸려들어가지 않기때문이다. 하지만, 로컬에 데이터가 남아 보안에 취약하다한다.
결론은
프로젝트의 성향에 따라 내가 필요한 저장 공간의 정도, 브라우저 종료시 삭제되도 되는지의 여부에 따라 다양하게 적용 할 수 있다는 것을 알았다.

• .리덕스 전역 상태관리의 중요성 ❗

전역상태관리는

1. 실제로 하위 컴포넌트에서 사용을 위해 불필요한 props를 전달받아야 하는 상황이 발생하고 props drilling이라는 문제를 해결하기 위해 사용합니다.

2. prop drilling으로 불필요한 re-rendering으로 인해 성능상의 이슈도 막기 위해서 사용합니다.

Prop Drilling ?
Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.

ConText API
전역에서 상태관리를 하는 방법에는 리액트 Hook에서 제공하는 Context API 라는것을 제공합니다.
자세한 사항은 리액트 공식 사이트(리액트 Context)에서 확인 가능합니다.

리덕스 주요 개념

리덕스는 자바스크립트를 위한 상태 관리 프레임워크이다. (리덕스 Redux 참고사이트)

장점은

1. 컴포넌트 코드로부터 상태 관리 코드 분리 가능
2. 서버 렌더링 시 데이터 전달 간편
3. 로컬 스토리지에 데이터를 저장하고 불러오는 코드를 쉽게 작성 가능
4. 같은 상탯값을 다수의 컴포넌트에서 필요로 할 때 좋음
5. 부모 컴포넌트에서 깊은 곳에 있는 자식 컴포넌트에 상탯값을 전달할 때 좋음
6. 알림창과 같은 전역 컴포넌트의 상탯값을 관리할 때 좋음
7. 페이지가 전환되어도 데이터는 살아 있어야 할 때 좋음

• CSS라이브러리

CSS in JS?
먼저 CSS in JS의 개념을 짚고 넘어가겠습니다. CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법입니다.

기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 best practice로 여겨졌었습니다. 하지만 React나 Vue, Angular와 같은 모던 자바스크립트 라이브러리가 인가를 끌면서 웹개발의 패러다임이 바뀌고 있습니다. 최근에는 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 되고 있습니다.

따라서, 웹페이지를 HTML, CSS, JavaScript 3개로 분리하는 것이 아니라, 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript을 몽땅 때려 박는 패턴이 많이 사용되고 있습니다. React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있습니다.

https://www.daleseo.com/react-styled-components/ REACT CSS 참고사이트
https://blog.songc.io/react/react-js-in-css/ REACT CSS 참고사이트