아자아자 화이팅이닷 !

240304 엘리스 SW트랙 11주차 Day 51 본문

TIL

240304 엘리스 SW트랙 11주차 Day 51

유초23 2024. 3. 5. 01:52
728x90

1차 플젝이 끝나고 다시 강의 주간이 돌아와따 ..!

2차 플젝을 위한 빌드업이 아주 잘 되어있어서 할 것 같다는 느낌에 ,,

매우 열심히 리액트를 공부해야 할 것 같다 ,,.,

 

* React는 UI를 구성하기 위해 '컴포넌트'라는 단위로 개발을 진행한다.

* React는 내부적으로 Virtual DOM(가상 DOM)을 통해 렌더링을 진행한 뒤 변경점만 사용자 화면에 반영한다.

* React를 사용할 때 JSX를 사용하는 것은 선택사항이다. 그러나 개발 효율을 위해 사용하는 것을 권장하고 있다.

* React는 컴포넌트 단위로 앱을 작성하여 코드의 재사용성을 늘릴 수 있다.

* React는 한 페이지에서 데이터가 자주 바뀌는 웹앱을 개발하는 데 적절하다.

* React는 대규모 프로젝트에서 데이터를 효율적으로 관리하는데 유용하지만 실행속도면에서는 다소 불리하다.

* React는 Facebook, Instagram 등 대규모 서비스에서 사용되고 있다.

* React는 컴포넌트 내의 데이터가 바뀌면 자동으로 감지하여 UI를 업데이트한다.

* HTML/JS와 REACT의 비교

* Create React App (CRA)은 React 어플리케이션을 쉽게 생성할 수 있도록 도와주는 보일러 플레이트이다.

* CRA에는 Babel, Webpack 등이 기본 탑재되어있다.

* React 개발을 위해서 반드시 CRA를 사용해야하는 것은 아니다. 그러나 개발에 유용한 기능을 다수 포함하고 있으며 다수의 개발자에게 익숙한 환경이므로 협업에 도움이 되므로 사용을 권장한다.

* CRA는 Node.js 환경 위에 구축된다.

* CRA는 React를 개발한 Facebook에서 관리하고 있어 꾸준한 지원이 보장된다.

* CRA는 프로젝트를 배포 시 해야하는 번들링과 Trans-compile 등을 기본적으로 제공한다.

* CRA는 상대적으로 덜 중요한 코드는 가려져있어 온전히 React 개발에 집중할 수 있다.

* CRA는 기본적으로 Client-side Rendering만 지원한다.

* npm 관련 많이 사용하는 명령어

* CRA로 생성한 프로젝트에서 

./public/index.html 과 ./src/index.js 파일은 필수이므로 삭제되어서는 안된다.

* 설치한 라이브러리를 프로젝트 내에서 불러오기

 

* npm install을 통해 package.json에 정의된 의존성 패키지들을 모두 설치한다.

* npm install 명령어는 항상 최신 버전의 패키지를 내려받는게 아니고 원하는 버전을 지정하여 패키지를 내려받을 수 있다.

* npm install <패키지명> 을 입력해 원하는 패키지를 npm 서버로부터 내려받는다.

* JSX에서 스타일을 작성할 때

 

* 여기에서 첫번째 중괄호는 여기서부터 자바스크립트 표현을 쓰겠다는 의미이고,

두번째 중괄호는 자바스크립트 Object의 시작을 알리는 의미이다.

 

* camelCase는 여러 단어로 이루어진 변수명이 있을 때,

예시처럼 첫단어만 소문자로 쓰고 그 다음 단어부터는 대문자로 시작하도록 하는 명령법이다.

* JSX의 특징

* JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장이다.

* JSX는 컴포넌트를 구성하기 위해 사용한다.

* JSX는 기존의 HTML과 다른 부분이 있으므로 유의하여야 한다.

* JSX는 실제로 배포할 때에는 Transcompile이 되어 JavaScript로 변환된다.

* JSX는 element의 class는 className을 사용한다.

* JSX에서 style은 object로만 입력할 수 있다.

* JSX에서 닫는 태그는 필수이다.

* JSX를 transcompile할 경우 JavaScript로 출력된다.

* JSX 코드 예시

* Component

 

* 여기에서 Controlled Component는 각 input들의 data를 state를 이용해 직접 관리

Uncontrolled Component는 data를 react로 관리하지 않고 필요할 때 element로부터 긁어오겠다는 의미

* Class Component와 Function Component

* Component의 특징

* React : 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 중 하나로, 페이스북과 인스타그램에서 개발 및 관리하고 있는 오픈 소스이기도 하다.

* var (변수 선언) 에 대한 설명

 

* JS에서의 각 Array 메소드에 대한 설명

- forEach : 배열의 각 원소에 함수를 실행한다.

- map : 배열의 각 원소에 함수를 실행하고 결과값으로 새로운 배열을 만든다.

- filter : 배열의 각 원소에 함수를 실행해 조건을 만족하는 요소만 포함하는 배열을 만든다.

* 배운 내용 점검하기 문제에서 forEach, map, filter를 사용하는 문제가 오랜만에 나와서 살짝 당황쓰 ㅋ..

 

1.

 

2. 

 

3.

 

요러케 풀어주어따 !

* React를 사용하는 이유들을 정리하면 “사용자와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용한다”.

 

* React의 장점

  • React의 Virtual DOM은 사용자 경험을 향상하고 개발자의 작업 속도를 높입니다. Virtual DOM이란 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념입니다.
  • React 컴포넌트의 재사용은 개발 시간을 크게 절약합니다.
  • 단방향 데이터 흐름을 통해 안정적인 코드를 제공합니다. 단방향 데이터 흐름은 데이터는 항상 일정한 장소에 있고, 그 장소에서만 변경이 가능한 것을 의미합니다.
  • 오픈 소스이며 페이스북 라이브러리이기 때문에 지속해서 개발되고 커뮤니티에 공개됩니다.
  • Hooks를 이용해 컴포넌트의 상태를 쉽게 관리할 수 있습니다.
  • 여러 개발 도구를 지원합니다. 예를 들어 크롬에서는 React Developer Tools라는 확장 프로그램을 제공합니다.

* React는 여러 개발 도구를 지원한다.

* DOM(Document Object Model)이란 HTML 요소들을 노드로 포함하는 트리와 같은 구조를 말합니다.

* CDN(Contents Delivery Network)은 지리적 물리적으로 떨어져 있는 사용자에게 컨텐츠 제공자의 컨텐츠를 더 빠르게 제공할 수 있는 기술을 말합니다.

* React는 앱 작성 방식을 정의하는 라이브러리로 데이터가 앱에 사용되는 방식과 그 데이터가 변화하는 결과에 따른 UI 변경 방법에 대해 명확한 규칙을 설정하여 수행한다.

* 자바스크립트는 규칙을 설정하지 않는 스크립트 언어이기 때문에 코드 작성이 자유롭다.

* React는 HTML과 자바스크립트를 하나의 파일로 유지한다.

* React도 자바스크립트(.js) 파일이 있다. 다만, 해당 파일 안에서 JSX 문법을 사용하는 차이가 있다.

* React는 제어 컴포넌트를 통해 자신의 상태를 관리한다.

* React는 이벤트 발생 시 UI를 자동으로 업데이트한다.

* var, let, const

* React 객체 표현

* React.createElement() 메소드를 이용하면 엘리먼트를 JSX 문법을 이용하지 않고 객체로 표현할 수 있다. 이는 React JSX에서 HTML 엘리먼트를 생성하여 반환한다.

* 06 문제집 - JSX 문법 및 렌더링 - [실습1] HTML을 JSX로 변환하기 에서

 

* index.js에 존재하는 코드 serviceWorker.unregister();는 앱 배포 시 캐시가 남지 않도록 하는 코드입니다.

 

이에 대한 설명 (공식 문서)

ServiceWorkerRegistration: unregister() method - Web APIs | MDN (mozilla.org)

 

ServiceWorkerRegistration: unregister() method - Web APIs | MDN

The unregister() method of the ServiceWorkerRegistration interface unregisters the service worker registration and returns a Promise. The promise will resolve to false if no registration was found, otherwise it resolves to true irrespective of whether unre

developer.mozilla.org

* 자바스크립트 표현식과 연산자

 

표현식과 연산자 - JavaScript | MDN (mozilla.org)

 

표현식과 연산자 - JavaScript | MDN

이번 장에서는 JavaScript의 표현식과 함께 할당, 비교, 산술, 비트 계산, 논리, 문자열, 삼항 등 다양한 연산자를 살펴보겠습니다.

developer.mozilla.org

* React 앱을 구성하는 가장 작은 단위를 엘리먼트라고 한다.

* 엘리먼트는 한 번 생성되면 수정이 불가능한 불변 객체이기 때문에 값을 변경하고 싶으면 새로운 엘리먼트를 만들어 업데이트 해야한다.

* DOM이란 객체 지향 모델을 통해 구조화된 문서를 표현하는 형식을 말한다.

* ReactDOM.render() 메소드를 이용해 엘리먼트를 렌더링 할 수 있다.

* 06 문제집 - JSX 문법 및 렌더링 - [실습8] DOM에 엘리먼트 렌더링 에서

 

아예 App 컴포넌트 자체를 렌더링 할 때에는

 

이런식으로 App을 써줘야한다는 거 !

* 컴포넌트의 종류 : 함수형 컴포넌트와 클래스형 컴포넌트

* 클래스형 컴포넌트는 React.Component를 상속받아 구현한다.

* 컴포넌트는 앱의 기능을 단위별로 캡슐화하는 React의 기본 단위로 독립적이고 재사용 가능한 코드의 조각이다.

* 컴포넌트 호출 시 <함수 혹은 클래스 이름/>과 같은 형태로 호출한다.

* 클래스형 컴포넌트는 논리와 상태를 구현할 때 사용되어 상태형 컴포넌트라고 한다. 반면, 함수형 컴포넌트는 비상태형 컴포넌트로 상태를 구현할 수 없다.

* State(상태)를 저장하기 위해서는 클래스형 컴포넌트가 사용된다.

* 07 문제집 - 컴포넌트 - [실습3] 컴포넌트 렌더링 에서

 

  • props란, 함수의 인자값과 동일한 역할을 수행합니다.

오늘도 수고해따 !

뒤에 있는 최신 JavaScript 문법 알아보기 부분은 따로 정리해야겠당 ..!

 

728x90

'TIL' 카테고리의 다른 글

240306 엘리스 SW트랙 11주차 Day 53  (0) 2024.03.14
240304 엘리스 SW트랙 11주차_최신 JS 문법 알아보기  (0) 2024.03.14
240124 엘리스 SW트랙 5주차 Day 23  (0) 2024.01.31
240123 엘리스 SW트랙 5주차 Day 22  (0) 2024.01.31
240122 엘리스 SW트랙 5주차 Day 21  (0) 2024.01.31
'TIL' Related Articles more