[TIL-005] 리액트 첫주차 - 리액트의 개념, 첫 면접 스터디 발표

Today목표 : 4/14일 리액트의 개념 이해, 첫 면접 스터디 발표

---

알게된 점,

 

리액트의 개념에 대한 이해 🟡

1. 왜 리액트를 써야 할까?

1) 페이스북에 의한 유지보수

2) 막강하고 방대한 커뮤니티

3) 공식문서도 굉장히 잘 나와있고, 자료가 방대하다.

4) 리액트 패키지들이 많다.

5) React Native, electron, VR 등 상생이 좋다.

6) NPM trend 1위로 가장 많이 사용되는 라이브러리다.

막연히 그냥 많이 쓰기 때문에 사용하는 것보다는 내가 React를 사용하는 이유를 명확히 하고 사용하는 것이 좋을 것 같다.

 

2. 리액트는 SPA(Single Page Application)기반이다.

1) 기존 MPA(Multi Page Application)의 문제점

여러 페이지로 구성되어 있어 리렌더링과 깜빡임이 발생된다.

2) SPA(Single Page Application)의 장단점

장점: 한 페이지로 구성 되어있어 서버에 리소스를 1회만 요청한 후, 그 이후 필요할 때마다 데이터를 수정하는 방식이기 때문에 리렌더링에 의한 깜빡임이 없어 사용자 경험(UX)이 굉장히 부드럽고 좋다.

단점 : SEO(검색엔진)이 잘 찾지 못한다. 하나의 index.html로 구성되며 그 안의 내용이 root요소 밖에 없고, 내부에서 js파일을 연결해 동적으로 사용되기 때문이다. => 이에 대한 보완방법으로 Next.js가 많이 사용되는 추세이다.

3) SPA와 MPA의 차이점

SPA기반 : 컴포넌트 단위로 변경사항을 반영하기 떄문에 리렌더링에 의한 깜빡임이 없어 사용자 경험성이 좋다.

MPA기반 : 하나의 변경사항을 반영하기 위해 전체 페이지를 리렌더링하여 깜빡임이 발생한다. 여러페이지로 구성되어 있어 검색엔진이 잘 찾는다.

 

3. NPM과 Yarn의 공통점과 차이점

1. NPM : node.js 설치 시 자동으로 설치되는 Node Package Manager다.

=> 패키지들을 모아놓은 마켓 사이트가 존재하고, 명령어이기도 하다.

2. Yarn : 같은 패키지 매니저로서 명령어로 사용 가능하고, NPM에 비해 속도와 안정성(보안)이 개선되었다. 마켓은 존재하지 않는다.

공통점 : 자바스크립트 런타임 환경인 '노드'의 패키지 매니저다. 다양한 전세계 패키지 등을 '온라인 베이스'에 올려놓는데, 이것들을 설치하고 삭제할 수 있게 도와주는 관리자 역할을 한다.

가장 큰 차이점 : NPM에서는 devDependencies(플젝이 의존하는 개발관련 패키지들)설치 시 --save 명령어를 사용하고 yarn은 사용하지 않는다.

npm install --save -dev
yarn add -dev

*-g : global의 약자, 프로젝트 뿐만 아니라 컴퓨터 전반에 설치하여 사용 가능하다.

dependencies와 devPendencies와의 차이는 저번 협업 경험에서 개발과 관련된 라이브러리 등의 패키지 라고 들었는데 이 부분에 대해 좀 더 공부해보면 좋을 것 같다!

 

4. CRA(Create react app)

현업에서는 직접 React를 커스터마이징 하기 위해 CRA를 사용하지 않고 직접 Webpack, babel, eslint 등을 설치하고 관리하는 것으로 알고있다. 이전 협업플젝에서 경험해 본 적이 있어 굉장히 복잡하고 어렵지만 꼭 CRA를 사용하지 않고 React app을 만들어 사용해 보고 싶기 때문에 라이브러리나 패키지들을 직접 설치하고 관리하는 방법을 배워야 겠다.

 

5. <React.stricmode> 

리액트에서 엄격모드를 사용하는 방식인 것 같다. 리액트에서 항상 'use strict'를 사용하지 않아도 엄격모드로 작동하는 것에 대해 궁금했는데 궁금했던 점이 해결되었다. 다만 stricmode를 사용하면 앱이 2번 새로고침?실행? 된다. 불편시에는 해당 기능을 끄면 한번만 실행된다. 시간이 되면 이 동작 방식도 공부해 보자.

 

6. 상대경로 => 절대경로로 변경 방법

컴포넌트나 css 등 리소스들은 보통 src파일 내부에서 실행되는데, 항상 상대경로로 ./././ 이렇게 사용해야 하는 것이 불편하다면, 절대경로를 지정하는 방법이 있다. root경로에서 jsconfig.json파일을 생성하고 다음 코드를 작성하면 상대 경로 없이 바로 App.css같이 사용이 가능하다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

 

7. JSX

1. JSX => JS + XML 으로 JS안에서 HTML태그를 사용 가능하다.

2. JSX에서 JS를 사용할 때는 중괄호 { } 안에 입력한다.

3. JSX에서 CSS를 사용할 때는 객체 형식으로 넣어준다. 객체이기 때문에 변수에 담아서 사용 가능하다.

4. JSX는 DOM 요소인가? => 정확히는 X , React 요소이다. 리액트를 구성하는 것은 리액트요소, 돔을 구성하는건 돔요소이다.  => 가상돔에서 배우게 될 것이다.

 

7. Props drilling

컴포넌트의 props을 하위 컴포넌트로 계속해서 전달하는 과정에서 props이 불필요한 컴포넌트에서도 계속해서 전달해야 하는데, 이것을 Props drilling이라고 한다. => 중간에 props에서 오류가 생기면 어디서 발생한 에러인지 찾기가 힘들다. 유지보수가 어렵기 때문에 보완하는 방법들이 생겼다 => 리액트를 배우면서 평소에 불편하다고 느꼈던 부분인데 어떤 해결방법들이 존재하는지 공부해 볼 필요가 있을 것 같다.

 

8. React 서버? localhost:3000?

리액트를 실행하게 되면 localhost:3000포트에서 실행되게 되는데, 프론트인데 왜 서버를 작동시켜야 하는것인가? 이점이 궁금해졌다.

 

9. Props를 활용하는 다양한 문법

1. 객체 구조분해 할당 

export default function App(props) => App({name, age}) // => name과 age로 바로 사용 가능

컴포넌트가 항상 어떤 props를 받고 있는지 직관적으로 알 수 있다.

2. default Props

Props를 내려주지 않아도 default 매개변수처럼 default값을 설정해 놓을 수 있다.

App.defaultProps = {name : 'junyoung'}

3. children Props

<Title>
	<h1>'안녕하세요'<h1>
</Title>

자식 컴포넌트 안에서 어떤 내용을 작성하면 Title 컴포넌트에서 props.cildren으로 접근할 수 있다. 많이 사용되진 않는 것 같다.

 

 

 

면접 스터디 발표 : '비동기 처리 방식의 종류와 특징' ✅

면접 스터디 발표 내용

오늘은 주 1회 있는 면접 스터디 첫 발표날이었다. 발표 주제는 '비동기 처리 방식의 종류와 특징'이었다.

주제에 대해 공부하고, 정리하고, PPT를 만들고, 발표하고, 동영상을 올리는 과정을 거치면서

계속해서 이해하고 반복하여 설명하다보니 이해가 안되던 내용도 조금씩 이해가 되는 것을 느꼈다.

평소에도 항상  발표에 대한 부담과 긴장감이 너무 커서 스트레스를 좀 받았었는데,

막상 하고나니 또 무언가 하나 해냈다는 생각에 뿌듯하기도 하고 대견하기도 했다. 앞으로 기술 면접을 대비해서 계속해서

내가 아는 것을 말로 표현하고 설명하는 연습을 반복하며 발전하길 바라는 마음이다.

사실 커리큘럼을 소화하는 것만으로도 힘든데 이렇게 무언가 도전하고 있다는 사실만으로도 만족스러웠다.

앞으로도 더 열심히! 긴장감이 무뎌질만큼 도전하도록 하자.