[한경xToss] 6-7주차 요약 : React.js 심화, NodeJS 기초

 

 

 개인의 학습 내용 기록 중, 극히 일부의 내용만 작성되었습니다.

 

 

React 기초

List & Key

• 리스트(List): 배열 데이터를 동적으로 렌더링하기 위해 사용되는 JSX 요소들의 집합 React에서는 배열의 각 항목을 JSX 엘리먼트로 변환하여 화면에 출력합니다.
• 키(Key): 리액트에서 각 리스트 항목을 고유하게 식별하기 위해 사용하는 속성입니다. 키는 리액트가 어떤 요소가 변경되었는지, 추가되었는지, 제거되었는지를 빠르게 파악하여 DOM을 효율적으로 업데이트하는 데 중요한 역할을 합니다.

Form

리액트에서 입력폼(input form)은 사용자의 입력을 받아 상태(state)로 관리하는 중요한 요소입니다. 입력폼을 만들 때는 리액트의 상태(state)와 이벤트 핸들러를 사용하여 입력 데이터를 관리합니다.

 

리액트의 Shared State (공유 상태)

Shared State(공유 상태)란 리액트 애플리케이션에서 둘 이상의 컴포넌트가 동일한 상태를 공유할 때 사용하는 개념입니다. 리액트는 단방향 데이터 흐름(부모 → 자식) 구조를 따르므로, 상태를 공유하려면 공통 부모 컴포넌트에서 상태를 관리하고 이를 자식 컴포넌트에 props로 전달하는 방식이 일반적입니다.

상태 공유가 더 복잡해질 경우, 다음과 같은 상태 관리 라이브러리를 사용할 수 있습니다:

useContext / 훅 / Redux / Zustand

이러한 방법들을 통해 컴포넌트 간의 상태 공유를 보다 효율적으로 관리할 수 있습니다.

 

리액트에서 CSS 구현 방법

1. JS inline style 속성
2. styled-components 모듈 사용
3. tailwind css 모듈 사용

 

Context - 전역 상태관리

PropsDrilling

프롭스 드릴링(Props Drilling)은 React와 같은 컴포넌트 기반 라이브러리에서 상위 컴포넌트의 데이터를 여러 중간 컴포넌트를 거쳐 최종적으로 필요한 하위 컴포넌트에 전달하는 과정을 의미합니다. 예를 들어, 최상위 컴포넌트에서 데이터를 가지고 있지만, 그 데이터를 직접 사용하지 않는 중간 컴포넌트를 통해 깊은 곳에 있는 컴포넌트로 전달해야 할 때 발생합니다.

이 방식은 컴포넌트 구조가 단순할 때는 문제가 없지만, 계층이 복잡해지면 다음과 같은 문제점이 발생할 수 있습니다:

불필요한 props 전달: 중간 컴포넌트가 데이터를 사용하지 않더라도 props를 전달해야 하는 상황이 생깁니다. 유지보수 어려움: 컴포넌트 구조가 복잡해지면 props의 흐름을 추적하기 어려워져 유지보수가 힘들어집니다. 재사용성 저하: 특정 props를 필요로 하는 컴포넌트가 다른 컴포넌트와 결합되어 재사용하기 어려워질 수 있습니다. 이러한 문제를 해결하기 위해 React에서는 Context API를 사용하거나, Redux, Zustand와 같은 전역 상태 관리 도구를 도입하여 컴포넌트 계층 구조의 복잡도를 줄이는 방법을 활용할 수 있습니다.

 

Chart.js

Polar area | Chart.js

npm i chart.js react-chart-2

Redux - 전역 상태관리

 

Tailwind CSS 프로젝트 만들기(Vite)

npm create vite@latest tailwindcss-project -- --template react

 

---

HTTP란?

HTTP(HyperText Transfer Protocol)는 브라우저와 서버가 서로 소통을 할 수 있도록 만들어진 규약이다.

• 하이퍼텍스트(HTML) 문서를 교환하기 위해 만들어진 protocol(통신 규약).
• 즉 웹상에서 네트워크로 서버끼리 통신을 할때 어떠한 형식으로 서로 통신을 하자고 규정해 놓은 "통신 형식" 혹은 "통신 구조" 라고 보면 된다. 프론트앤드 서버와 클라이언트간의 통신에 사용된다. 또한 백앤드와 프론트앤드 서버간에의 통신에도 사용된다.
• HTTP는 TCP/IP 기반으로 되어있다.
• HTTP 기본적으로 request(요청)/response(응답) 구조로 되어있다. 클라이언트가 HTTP request를 서버에 보내면 서버는 HTTP response를 보내는 구조 클라이언트와 서버의 모든 통신이 요청과 응답으로 이루어 진다.

HTTP는 어떻게 정해질까?

HTTP는 IETF(인터넷국제표준화기구)에서 RFC 문서 채택을 통해 이루어진다.

 

HTTP 특징

• 메세지 교환 형태의 프로토콜: 클라이언트가 보고 싶은 걸 서버에 요청하면 응답이 옴
• 비연결성(Connectionless): 클라이언트와 서버가 한 번 연결을 맺은 후, 클라이언트의 요청을 서버가 응답하면 맺었던 연결을 끊음. 불특정 다수의 통신을 줄여 더 많은 연결이 가능하지만, 동일한 요청을 새로 요청해야 함
• 무상태(Stateless): 이전 상태를 유지 하지 않음. 상태를 기억하기 위해서 쿠키, 세션, 토큰이 도입 됨

REST API란?

REST API란 REST를 기반으로 만들어진 API를 의미합니다.

REST : Representational State Transfer의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다.

 

REST API 설계 예시

1. URI는 동사보다는 명사를, 대문자보다는 소문자를 사용하여야 한다.

Bad Example http://khj93.com/Running/ **Good Example  http://khj93.com/run/**

2. 마지막에 슬래시 (/)를 포함하지 않는다.

Bad Example http://khj93.com/test/  **Good Example  http://khj93.com/test**

3. 언더바 대신 하이폰을 사용한다.

Bad Example http://khj93.com/test_blog **Good Example  http://khj93.com/test-blog**

4. 파일확장자는 URI에 포함하지 않는다.

Bad Example http://khj93.com/photo.jpg  **Good Example  http://khj93.com/photo**

5. 행위를 포함하지 않는다.

Bad Example http://khj93.com/delete-post/1  **Good Example  http://khj93.com/post/1**

 

Node JS

 

📌 JavaScript 모듈 시스템: ES Module(ESM) vs CommonJS(CJS)

JavaScript에는 대표적으로 두 가지 모듈 시스템이 있습니다.

1. CommonJS(CJS) → Node.js에서 기본적으로 사용되는 모듈 시스템
2. ES Module(ESM) → ES6(ES2015)에서 도입된 모듈 시스템

익스프레스(Express) 프레임워크 소개

익스프레스 프레임워크는 웹 서버 구현에 필요한 다양한 기능을 제공합니다.

라우팅: URI 경로에 따른 요청 처리 미들웨어: 요청과 응답을 처리하는 중간 단계에서 다양한 기능을 담당하는 모듈 뷰 템플릿 엔진: 동적인 HTML 파일 생성을 위한 데이터 바인딩 제공 정적 파일 지원: HTML, CSS, JS, 이미지(png, jpg, svg), 동영상(mp4) 파일 지원

설치 : sudo npm i express

 

노드몬 : 노드 서버 코드 변경시(저장) 자동으로 서버 재구동해줌. java spring과 다르게 핫픽스 가능

설치 : npm i -g nodemon

코드 실행 시 : nodemon ex11-express-server.js

 

Same/Cross Origin

참고자료 : [Info] Same-origin policy(SOP, 동일 출처 정책) 란?

[Info] Same-origin policy(SOP, 동일 출처 정책) 란?

 

 

 

-

 

6주차는 React 익히기 실습 진행을 많이 한 주였다

7주차부터는 NodeJS 배워봤고, 중간 프로젝트 팀 배정이 나와서 기획을 슬슬 시작하려고 했고..

노드js로 API 만들기 실습을 진행했는데 엄청 신기하고 재미있었다. (프론트 개발자의 백엔드 첫경험)

그리고 7주차 금요일은 졸업식이 있어서 결석했다..ㅎㅎ 드디어 졸업!!

 

이제 중간 프로젝트가 끝나서 밀렸던 포스팅 올리는 중 🥹