202130118 송태경

2025-06-05 강의

• Learn React 에는 중급과 고급 React에 관한 학습을 할 수 있도록 도와 준다.
• UI로 표현하기는 Quick Start에서 학습했던 내용의 심화 학습을 설명하고 있다.
• 상호작용 더하기는 State의 심화 학습을 설명하고 있다.
• State 관리하기는 고급 state관리 및 useState외에 Reducer와 Context Hook 등에 관해 설명하고 있다.
• 마지막으로 Escape Hatches는 React 외부의 시스템을 제어하고 동기화 하는 방법으로 고급 심화 과정을 다루고 있다.

2025-05-29 강의

처음부터 React 앱 만들기

• Vite

• Vite 는 현대 웹 프로젝트에 더 빠르고 가벼운 개발 환경을 제공하는 것을 목표로 하는 빌드 도구다.

• Vite는 독창적이며, 기본적으로 합리적인 기본 기능을 제공한다.

• Vite는 빠른 새로고침, JSX, Babel/SWC 및 기타 일반적인 기능을 지원하는 풍부한 플러그인 생태계를 갖추고 있다.

• Vite는 이미 우리가 추천하는 프레임워크 중 하나 인 React Router 에서 빌드 도구로 사용되고 있다 .

• Parcel

• Parcel은 뛰어난 기본 개발 경험과 확장 가능한 아키텍처를 결합하여 프로젝트를 시작 단계에서 대규모 프로덕션 애플리케이션으로 발전시킬 수 있다.

• Parcel은 빠른 새로고침, JSX, TypeScript, Flow 및 스타일링을 기본적으로 지원한다.

• Rs 빌드

• Rsbuild 는 React 애플리케이션 개발에 원활한 환경을 제공하는 Rspack 기반 빌드 도구다.

• 세심하게 조정된 기본 설정과 성능 최적화 기능을 바로 사용할 수 있도록 제공한다.

• Rsbuild는 빠른 새로고침, JSX, TypeScript, 스타일링 등 React 기능을 기본적으로 지원한다.

• 라우팅

• 라우팅은 사용자가 특정 URL을 방문할 때 표시할 콘텐츠나 페이지를 결정한다.

• 라우터는 코드 내에서 구성하거나 구성 요소 폴더 및 파일 구조에 따라 정의할 수 있다.

• 라우터는 최신 애플리케이션의 핵심 부분

• 데이터 가져오기

• 서버나 다른 데이터 소스에서 데이터를 가져오는 것은 대부분의 애플리케이션에서 핵심적인 부분

• 특별히 제작된 데이터 가져오기 라이브러리는 데이터를 가져오고 캐싱하는 어려운 작업을 대신 처리해 주므로, 앱에 필요한 데이터와 이를 표시하는 방법에 집중할 수 있다.

• 더 빠른 프리페칭과 더 나은 성능을 위해 라우팅 로더에 통합될 수도 있으며, 서버 렌더링에도 사용할 수 있다.

• 코드 분할

• 코드 분할은 앱을 필요에 따라 로드할 수 있는 작은 묶음으로 나누는 프로세스

• 앱의 코드 크기는 새로운 기능과 추가 종속성이 있을 때마다 증가

• 프레임워크를 사용하는 앱에 의존하여 코드를 분할하는 경우, 코드 분할이 전혀 발생하지 않았을 때보다 로딩 속도가 느려지는 상황이 발생할 수 있다.

애플리케이션 성능 개선

• SPA

• 단일 HTML 페이지를 로드하고 사용자가 앱과 상호작용할 때 페이지를 동적으로 업데이트

• SPA는 시작하기는 쉽지만 초기 로드 시간이 느릴 수 있다.

• SSR

• 서버에서 페이지를 렌더링하고 완전히 렌더링된 페이지를 클라이언트로 전송한다.

• SSR은 성능을 향상시킬 수 있지만, 단일 페이지 앱보다 설정 및 유지 관리가 더 복잡할 수 있다.

• SSG

• 빌드 시점에 앱의 정적 HTML 파일을 생성

• SSG는 성능을 향상시킬 수 있지만, 서버 측 렌더링보다 설정 및 유지 관리가 더 복잡할 수 있다.

• RCS

• 빌드 타임, 서버 전용, 인터랙티브 컴포넌트를 단일 React 트리에 혼합할 수 있다.

• RSC는 성능을 향상시킬 수 있지만, 현재 설정 및 유지 관리에 대한 전문 지식이 필요하다.

2025-05-22 강의

새로운 React 앱 만들기

• React로 새로운 앱이나 웹 사이트를 구축하려면 프레임워크부터 시작하는 것이 좋다.
• 앱에 기존 프레임워크에서 잘 제공하지 않는 제약 조건이 있거나, 자체 프레임워크를 빌드하는 것을 선호하거나, React 앱의 기본 사항만 배우려는 경우 React 앱을 처음부터 빌드할 수 있습니다.
• 풀스텍 프레임워크

  권장 프레임워크는 프로덕션에서 앱을 배포하고 확장하는 데 필요한 모든 기능을 지원한다. 최신 React 기능을 통합하고 React의 아키 텍처를 활용한다.

• Next.js (앱 라우터)

Next.js의 앱 라우터는 React의 아키텍처를 최대한 활용하여 풀 스텍 React앱을 활성화하는 React 프레임워크이다.

Next.js는 Vercel에서 유지 관리 한다.

Next.js 는 앱을 빌드해서 Node.js와 서버리스 호스팅 혹은 자체 서버에 배포할 수 있다.

Next.js는 또한 서버가 필요 없는 점적 내보내기도 지원한다.

Vercel은 추가적으로 옵트-인 유료 클라우드 서비스도 지원한다.

0pt-in 이란 사용자가 옵션을 직접 선택할 수 있도록 하는 서비스다.

• React Router (v7)

React Router는 React에서 가장 인기있는 라우팅 라이브러리이며, Vite와 함께 사용하면 풀스텍 React 프레임 워크를 만들 수 있다.

표준 Web API이며, 다양한 자바스크립트 런타임과 플랫폼을 위한 준비된 배포 템플릿이 있다.

React Router는 Shopify에서 유지 관리 한다.

• Expo (네이티브 앱용)

Expo는 네이티브 UI를 사용하여 안드로이드, ios, 웹을 위한 범용 앱을 만들 수 있는 React 프레임워크다.

네이티브 부분을 쉽게 사용할 수 있게 해주는 React Native Sdk를 제공한다.

Expo는 EXpo 에서 유지 관리한다.

Expo로 앱을 빌드하는 것은 무료이고, 구글이나 애플 스토어에 제한 없이 제출할 수 있다.

Expo는 추가적으로 옵트-인 유료 클라우드 서비스를 제공한다.

• TanStack Start(Beta): TanStack Strat는 TranStack Router를 기반으로 하는 풀스텍 React 프레임워크다. Nitro나 Vite와 같이 전체 문서 SSR, 스트리밍, 서버 함수, 번들링과 많은 유용한 도구를 제공한다.
• RedwoodJS: Redwood는 쉽게 풀스텍 웹 애플리케이션을 만들 수 있도록 사전탑재된 패키지와 구성을 가진 풀스택 React 프레임 워크다.
• 앱에 기존 프레임워크에서 잘 제공되지 않는 제약 조건이 있거나, 자체 프레임워크를 구축하는것을 선호하거나, React앱의 기본 사항을 배우려는 경우 React 프로젝트를 처음부터 시작하는데 사용할 수 있는 다른 옵션이 있다.
• 처음부터 시작하면 더 많은 유연성을 얻을 수 있지만 라우팅, 데이터 가져오기 및 기타 일반적인 사용 패턴에 사용할 도구를 선택해야 한다.
• 이미 존재하는 프레임워크를 사용하는 대신 자신만의 프레임워크를 구축하는 것과 비슷하다.
• 자신만의 솔루션을 구축하려면, Vite, Parcel 또는 RSbuild와 같은 빌드 도구로 시작할 수 있도록 하는 처음부터 React 앱 만들기 가이드를 참조하자.

parcel

• 뛰어난 기본 개발 경험과 확장 가능한 아키텍처를 결합하여 프로젝트를 시작 단계에서 대규모 프로덕션 애플리케이션으로 발전시킬 수 있다.
• Parcel은 빠른 새로고침, JSX, TypeScript, Flow 및 스타일링을 기본적으로 지원한다.

Rsbuild

• Rsubuild는 React 애플리케이션 개발에 원활한 환경을 제공하는 Rspack 기반 빌드 도구다.
• 세심하게 조정된 기본 설정과 성능 최적화 기능을 바로 사용할 수 있도록 제공한다.
• Rsbuild는 빠른 새로고침, JSX, TypeScript, 스타일링 등 React 기능을 기본적으로 지원한다.

2025-05-15 강의

step 3: 최소한의 데이터만 이용해서 완벽하게 UI State 표현하기

• UI를 상호작용 하게 만들려면, 사용자가 기반 데이터 모델을 변경할 수 있게 해야한다.

• React는 state를 통해 기반 데이터 모델을 변경할 수 있게 한다.

  state는 앱이 기억해야 하는, 변경할 수 있는 데이터의 최소 집합

  state를 구조화 하는데 가장 중요한 원칙은 중복배제원칙이다.

  애플리케이션이 필요로 하는 가장 최소한의 state를 파악하고, 나머지 모든 것들은 필요에 따라 실시간으로 계산

  예를 들어, 쇼핑 리스트를 만든다고 하면 배열에 상품 아이템들을 넣게 된다.

  UI에 상품 아이템의 개수를 노출하고 싶다면, 상품 아이템 개수를 따로 state값으로 가지는 게 아니라 단순하게 배열의 길이만 쓰면 된다.

step 4: State가 어디에 있어야 할 지 정하기

• state 가 어디에 위치 돼야 하는지 결정 하려면,

1. 대개, 공통 부모에 state를 그냥 두면 된다.
2. 혹은, 공통 부모 상위에 컴포넌트에 둬도 된다.
3. state를 소유할 적절한 컴포넌트를 찾지 못했다면 state를 소유하는 컴포넌트를 하나 만들어줘서 상위 게층에 추가한다.

• React는 항상 컴포넌트 계층구조를 따라 부모에서 자식으로 데이터를 전달하는 단방향 데이터 흐름을 사용한다.
• 앱을 구현하면서 어떤 컴포넌트가 state를 가져야 하는 지 바로 명확하지 않을 수 있다.
• 이 개념이 처음이라면 더 어려울 수 있다.
• 애플리케이션의 각 state에 대해서,

  1. 해당 state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다.
  2. 그들의 가장 가까운 공통되는 부모 컴포넌트를 찾는다.- 계층에서 모두를 포괄하는 상위 컴포넌트
  3. state가 어디에 위치 해야 하는지 결정한다.

Step 5: 역 데이터 흐름 추가하기

• filterText 라는 state가 변경되는 것이 아니기 때문에 input의 value는 변하지 않고 화면도 바뀌는 것이 없다.
• state는 FilterableProductTable이 가지고 있고 state 변경을 위해서는 setFilterText와 setInStockOnly를 호출 하면 된다.
• SearchBar가 FilterableProducTable의 state를 업데이트할 수 있도록 하려면, 이 함수들을 SearchBar로 전달해야 한다.

2025-05-08 강의

• React를 사용하게 되면 우리가 고려하고 있는 디자인이나 만들 앱들에 대한 생각을 바꿀 수 있다.

• React로 사용자 인터페이스를 빌드할 때, 먼저 이를 컴포너느라는 조각으로 나눈다.

• 그리고 각 컴포넌트의 다양한 시각적 상태들을 정의한다.

• 마지막으로 컴포넌트들을 연결하여 데이터가 그 사이를 흘러가게 한다.

• 어떤 배경을 가지고 있냐에 따라, 디자인을 컴포넌트로 나누는 방법에 대한 관점이 달라질 수 있다.

• Programming : 새로운 함수나 객체를 만드는 방식과 같은 방법으로

  단일책임 원칙을 반영하고자 한다면 컴포넌트는 이상적으로 한 번에 한 가지 일만 해야 한다.

• 만약 컴포넌트가 점점 커진다면 작은 하위 컴포넌트로 쪼개져야 한다.

• 데이터 모델을 렌더링하는 앱의 정적인 버전을 만들기 위해서는 > 다른 컴포넌트를 재사용하고, > props를 이용하여 데이터를 넘겨주는 컴포넌트를 구현하는 것이 좋다.

• props는 부모가 자식에게 데이터를 넘겨줄 때 사용할 수 있는 방법이다.

• 앱을 만들 때 계층 구조에 따라 상층부에 있는 컴포넌트 즉, 1. FilterableProductTable부터 시작하는 하향식으로 만드는 방법이 있다.

• 또는 하층부에 있는 컴포넌트인 5. ProductRow부터 상향식 으로 만들 수도 있다.

• 간단한 예시에서는 보통 하향식으로 만드는 게 쉽지만, 프로젝트가 커지면 상향식으로 만들고 테스트를 작성하면서 개발하기가 더 쉽다.

• state는 앱이 기억해야 하는, 변경할 수 있는 데이터의 최소 집합이다.

• state를 구조화 하는데 가장 중요한 원칙은 중복배재원칙 이다.

• 애플리케이션이 필요로 하는 가장 최소한의 state를 파악하고, 나머지 모든 것들은 필요에 따라 실시간으로 게산한다.

• 예를 들어, 쇼핑 리스트를 만든다고 한다면 배열에 상품 아이템 들을 넣을것이다.

  UI에 상품 아이템의 개수를 노출하고 싶다면, 상품 아이템 개수를 따로 state값으로 가지는 게 아니라 단순하게 배열의 길이만 쓰면 된다.

2025-04-18 강의

상태를 다시 들어올리기

• history컴포넌트 에 상태를 배치하면 자식 컴포넌트에서 Game해당 상태를 제거할 수 있다.
• 컴포넌트 에서 컴포넌트로 "상태를 끌어올린" 것처럼 , 이제 컴포넌트에서 최상위 컴포넌트 로 상태를 끌어올린다.
• squares, Board, SquareBoard, BoardGame, GameBoard, Board, history

map함수의 사용

• 원본 배열 (history): map이 호출된 원본 배열.

• 원본 배열의 인덱스 (move): 현재 순호나 중인 원본 배열 요소의 인덱스.

• 요소값 (squares): 현재 수노히 중인 요소 배열의 값.

• 각각의 history 요소에 대한 { } 의 실행문(후작업) 실행.

• moves 객체에 저장.

• 최종 출력에 사용.

Key 선택하기

• 리스트를 렌더링할 때 React는 렌더링 된 각 리스트 항목에 대한 몇 가지 정보를 저장한다.

• 리스트를 업데이트할 때 React는 무엇이 변경 되었는지 확인해야 한다.

• 리스트의 항목은 추가,제거,재정렬 또는 업데이트 될 수 있다.

• 리스트의 항목에 key 프로퍼티를 지정하여 각 리스트의 항목이 다른 항목과 다르다는 것을 구별해 주어야 한다.

• 만약 데이터베이스에서 데이터를 불러와서 사용한다면 Alexa, Ben, Claudia의 데이터베이스 ID를 key로 사용할 수 있다.

• 리스트가 다시 렌더링 되면 React는 각 리스트 항목의 key를 가져와서 이전 리스트의 항목에서 일치하는 key를 탐색한다.

• 현재 리스트에서 이전에 존재하지 않앗던 key가 있으면 React는 컴포넌트를 생성한다.

• 만약 현제 리스트에 이전 리스트에 존재했던 key를 가지고 있지 않다면 React는 그 key를 가진 컴포넌트를 제거한다.

• 두 key가 일치한다면 해당 컴포넌트는 이동한다.

• key는 각 React가 컴포넌트를 구별할 수 있도록 하여, 컴포넌트가 다시 렌더링 될 때 React가 해당 컴포넌트의 state를 유지할 수 있게 한다.

• 컴포넌트의 key가 변하면 컴포넌트는 제거되고 state와 함께 새로 반환된다.

• key는 React에서 특별하게 미리 지정된 프로퍼티다.

• React는 자동으로 key를 사용해 업데이트 할 컴포넌트를 결정한다.

2025-04-17 강의

static 끌어 올리기

• 사용자가 Borad의 왼쪽 위 사각형을 클릭하여 X를 추가하면 어떤 일이 발생하는지 정리

• 1.buttondl Square로부터 onClick prop로 받은 함수가 실행된다.

• 2.handleClick은 인수 0을 사용하여 squares 배열의 첫 번째 엘리먼트를 null에서 X로 업데이트 한다.

• 3.Board 컴포넌트의 squares state가 업데이트되어 Board와 그 모든 자식이 다시 렌더링 된다 .

  이에따라 0인 Square 컴포넌트의 value prop이 null에서 X로 변경된다.

• 최종적으로 사용자는 왼쪽 위 사각형을 클릭한 후 비어 있는 사각형이 X로 변경된 것을 확인 할 수 있다.

중요

• DOM button 엘리먼트의 onClick 어트리뷰트(속성)는 빌트인 컴포넌트이기 때문에 React에서 특별한 의미를 갖는다.

• 사용자 정의 컴포넌트, 예를 들어 Square의 경우 이름은 사용자가 원하는 대로 지을 수 있다.

• Square의 onSquareClick prop나 Board의 handleClick 함수에 어떠한 이름을 붙여도 코드는 동일하게 작동한다.

• React에서는 주로 이벤트를 나타내는 prop에는 onSomething과 같은 이름을 사용하고, 이벤트를 처리하는 함수를 정의 할 때는 ahndleSomething과 같은 이름을 사용하낟.

불변성이 중요한 이유

최종 결과는 같지만, 원본 데이터를 직접 변형하지 않음으로써 몇 가지 이점을 얻을 수 있다.

• 1.불변성을 사용하면 복잡한 기능을 훨씬 쉽게 구현 할 수 있다.
• 2.부모 컴포넌트의 state가 변경되면 모든 자식 컴포넌트가 자동으로 다시 렌더링 된다.

  변경 사항이 없는 자식 컴포넌트도 포함 된다.

  • 컴포넌트가 데이터의 변경 여부를 저렴한 비용으로 판단할 수 있다.

구조 분해 할당

• lines는 승리 할 수 있는 squares의 index 번호이다.

2025-04-10 강의

사용자와 상호작용 하는 컴포넌트 만들기

• 컴포넌트는 무언가 "기억"하기 위해 state를 사용한다.

• React는 상태 기억을 위해 useState라는 Hook을 제공한다.

props를 통해 데이터 전달하기

• React의 component architectrue를 사용해서 재사용 할 수 있는 component를 만들어서 지저분하고 중복된 코드를 삭제한다.

• Board component를 만들고 ,Square component의 내용을 복사한다.

• Square component의 button을 하나만 남기고 모두 삭제한다.

• Board component의 button을 Square component로 교체한다.

• App에서 호출하는 component를 Square에서 Board로 바꿔준다.

• 정상적으로 출력이 되는지 확인한다.

• 여기까지 하면 component는 깔끔하게 정리 됐지만, 숫자 출력이 1만 나오게 된다.

• 이 문제를 해결하기 위해 props를 사용하여 각 사각형이 가져야 할 값을 부모 component (Board)에서 자식 component(Square)로 전달

• component를 호출하는 쪽이 부모 component

2025-04-03 강의

1. Hook사용하기

• use로 시작하는 함수를 hook이라고 함.

• 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.

2. hooks의 사용 규칙

최상위에서만 Hook을 호출해야한다.

• 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.

• 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있다. 

• 그렇기 때문에 이 규칙을 따르면 useState 와 useEffect가 여러번 호출되는 경우에도 Hook의 상태를 올바르게 유지할 수 있게 된다.

• Hook은 React의 렌더링 및 상태 관리 메커니즘과 밀접하게 연결되어 있으며, 아래와 같은 규칙을 따라야 함.

if, for, while 등의 블록 내부에서 Hooks를 호출하면 안 됨. 함수의 조건문 내부에서 호출하면 실행 순서가 달라질 수 있기 때문.

리액트 함수 내에서만 Hook을 호출해야한다.

• Hook은 일반적인 js 함수에서는 호출하면 안된다.

• 함수형 컴포넌트나 custom hook에서는 호출 가능하다.

• React 함수형 component 또는 사용자 Hook 내부에서만 사용 가능.

• 일반적인 JavaScript 함수에서 useState, useEffect 등의 Hook을 사용 할 수 없음.

function형 컴포넌트에서만 Hook을 사용하는 이유

Class형 component는 lifecycle 함수를 통해서 상태 관리

function형 component를 주로 사용하는 이유

Class형 component를 많이 볼 수 있기 때문에

component 간 데이터 공유

2025-03-27 강의

1. component 생성 및 nesting(중첩)

• component는 고유한 로직과 모양을 가진 UI의 일부

• component는 버튼처럼 작을 수도 있고, 전체 페이지처럼 클 수도 있음.

• component는 마크업를 변환(return)하는 JavaScript 함수.

• export default 키워드는 파일내의 componen중 기본 component를 지정합니다.

• 이 키워드의 사용도 JavaScript 문법입니다.

좀더 구체적으로 알고 싶다면 사이트의 MDN혹은 javascript.info 링크를 확인하세요.

2. 스타일 추가하기

• React에서는 className으로 CSS클래스를 지정합니다.
• className은 HTML의 class 속성과 동일한 방식으로 동작합니다.
• CSS 규칙은 별도의 CSS 파일에 작성합니다. 그런데 React는 CSS 파일을 추가하는 방법을 규정하지는 않습니다.

정적 페이지를 작성할 때와 동일한 방법을 지원합니다.

• 가장 가단한 방법은 HTML에 link 태그를 추가하는 것.

그러나 link를 추가하면 정적 페이지를 수정해야 하기 떄문에 추천 x

3. 조건부 렌더링

• React에서 조건문을 작성하는데에는 특별한 문법이 필요 없습니다.
• 일반적인 자바스크립트 코드를 작성할 때 사용하는 것과 동일한 방법을 사용합니다.

4. 리스트 렌더링

• 컴포넌트 리스트를 렌더링하기 위해서는 for문 및 map() 함수와 같은 자바스크립트 기능을 사용합니다.
• il에 key 속성arrtibute이 있는 것을 주목해야함.
• 목록을 사용할 때는 각 항목에 대해 고유하게 식별하는 문자열 또는 숫자를 전달해야 함.
• 항목을 삽입, 삭제 또는 재정렬할 때 어떤 일이 일어났는지 알기 위해 Key를 사용.

2025-03-20 강의

의존성 관리와 package.json

package.json의 주요 역할

package.json 파일은 프로젝트의 루트 디렉터리에 위치하며, 다음과 같은 중요한 정보를 포함

프로젝트의 이름과 버전.

의존성 (dependencies): 프로젝트에서 사용하는 외부 라이브러리 및 패키지 목록.

스크립트: npm 명령어를 쉽게 실행할 수 있도록 하는 커맨드 정의.

설정: 프로젝트에 관련된 추가적인 설정 정보.

의존성 관리

의존성은 프로젝트가 외부 라이브러리나 패키지에 의존하는 것을 의미 package.json은 이를 관리하는 중심 역할

의존성에는 크게 두 가지가 나뉨

일반 의존성 (dependencies): 프로덕션 환경에서 필요로 하는 패키지.

개발 의존성 (devDependencies): 개발 과정에서만 필요로 하는 패키지 (예: 테스트 도구, 빌드 도구 등).

의존성 관리의 중요성

버전 관리: 의존성 버전 관리를 통해 프로젝트의 안정성을 유지

협업: package.json과 package-lock.json 파일을 Git에 저장하면 팀원들 간에 동일한 의존성

환경을 유지

보안: 보안 패치가 적용된 최신 버전으로 의존성을 관리하는 것이 중요

2025-03-13 강의

Node.js의 대하여

• Node.js는 JavaScript를 기반으로 사용하여 JavaScript는 개발 공부를 처음 한 사람도 쉽게 익힐 수 있을 만큼 난이도가 낮다. 개발자 커뮤니티가 잘 돼 있다.

• Node.js는 개발자들 사이에서 인기가 높기 때문에 커뮤니티에는 이미 개발자들이 만들어 공유한 다양한 패키지들이 있다. 그래서 npm을 잘 활용하면 유용한 기능들을 쉽게 구현할 수 있다.

• Node.js를 학습한다는건 JavaScript를 활용할 줄 알게 된다는 사실이라서 Node를 배운다는건 프론트엔드 부터 풀스택 개발자 까지도 가능하다는 것. 프론트 엔드 영역도 쉽게 파악 할 수 있다는 것에 대단함을 느낌.

• Node.js는 가볍고 빠른 서비스에 어울린다고 전에 배운 게 생각이 났다 다른 무거운 언어 Java를 Node랑 비교 하면 훨 무겁다고 들었다 특히 javaPlugin , Module을 추가해 구성하면 Node.js가 얼마나 빠르고 가벼운지를 알 수 있을 것이다.

스트리밍 사이트로 유명한 ott 넷플릭스가 있는데 이 사이트도 Node를 활용하여 안정적인 서비스를 제공하고 있는 걸로 알고있다.

React

React에 대하여

리액트를 공부하기 전 앞서 리액트에 대해 알아보자

• 리액트(React)는 Facebook(현재 Meta)에서 개발한 프론트엔드 라이브러리입니다. 주로 사용자 인터페이스(UI)를 개발하는 데에 중점을 두고 있죠. 이 라이브러리를 사용하면 실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼과 같은 다양한 종류의 웹 애플리케이션을 쉽게 만들 수 있습니다. 리액트는 프론트엔드 개발자들 사이에서 매우 인기가 높은 도구입니다. 활발한 커뮤니티와 다양한 라이브러리와의 호환성을 통해 개발자들이 쉽게 정보를 공유하고 협업할 수 있기 때문인데요. 리액트가 많은 개발자들에게 사랑받고 있다는 사실은 다양한 설문조사와 통계 데이터에서 확인할 수 있습니다.

• React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

React 장점

1. 개발 생산성이 높다 화면에 구성되는 요소들을 하나하나 개발하지 않고 반복되는 것들은 컴포넌트를 재사용해 생산성을 높일 수 있습니다. 마치 레고 조립으로 수많은 형태를 완성하는 형식과 비슷합니다. 오류가 생겼을 때도 전체 페이지를 수정하는 대신 해당 컴포넌트만 수정하면 되기 때문에 문제 해결도 쉽습니다. ​
2. 입문자도 흥미를 쉽게 느낄 수 있다 학습 커브가 높지만, 전세계적으로 활용도가 높아서 커뮤니티 도움이나 다양한 학습 자료를 활용하면 입문자도 빠르게 개발을 시작할 수 있어요. 기초적인 프로그래밍 지식만 있어도 손쉽게 앱 개발을 경험할 수 있습니다. ​
3. 사용하는 기업이 많다 전 세계 65만 개 프론트엔드 채용 공고를 분석한 결과, 리액트 채용 공고는 약 35만 5000개 정도로 압도적인 1위를 차지했습니다. 국내에서도 11번가, 티몬, 오피지지, 카카오페이 등 수많은 기업에서 프론트엔드 개발에 리액트를 사용하고 있습니다.

개발 플랫폼

1. Node.js 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용한다. 안정적이고 신뢰도가 높은 LTS 버전, 최신 기능이 포함된 Current 버전이 있다. → 이번 프로젝트에서는 안정성 보장을 위해 LTS 버전을 사용