[회고록] 리액트 프로젝트 (feat. Node.js) - 글 작성 중

📃 개요

서버(Node)에서 데이터를 받아와서 CORS 이슈, HTTP 이해를 하기 위해 구현한 프로젝트

 

 

 

⏳ 개발 기간

리액트를 다시 공부하는 기간 1일 5시간이고 총 5일의 기간이 있었고 개발 기간은 총 2일이고 1일 5시간 작업

· 공부 기간은 1일 5시간씩 하여 총 5일

· 개발 기간은 1일 5시간씩 하여 총 2일

 

 

 

💻 사용한 기술

개발

· HTML

· CSS Module

· React

 

클라이언트 배포 (React)

· Netlify

 

서버 배포 (Node)

· Koyeb

 

 

 

🔥 구현한 기능

· form 태그 이용하여 전송하고 데이터를 받아와서 화면 구현

 

 

 

✍ 회고록

일기장처럼 회고록을 작성하겠습니다. :)

 

🙂 프로젝트 진행 전

전에 리액트를 해봤지만 정확하게 이해하고 코드를 작성했어야 했는데 그러지 못 하고 작성을 했다. 그래서 다시 배우는 과정에서 "내가 다시 할 수 있을까?" 걱정이 많았다.

 

 

 

😭 프로젝트 진행하면서 어려웠던 점

1. 리액트 동작 원리

자바스크립트 동작 원리 이벤트 루프를 알았는데 리액트 동작 원리를 이해하기 어려웠다. 

 

작성하기

왜 어려웠어?

어느 부분에서 어려웠어?

이해하기 위해서 어떻게 했어?

 

2. 리액트 비동기

리액트 비동기가 왜 어려웠어?

어느 부분에서 어려웠어?

 

3. CORS

CORS 어디에서 어려웠어? (CORS가 무엇인지? 부터 시작해서 이해되는 과정 설명)

어느 부분에서 어려웠어?

 

4. Vite 설치하고 배포

Vite 설치하고 배포할 때 왜 어려웠어? (CRA 설치하고 배포하는 것이 달랐다. 우선 폴더가 달랐다.)

어느 부분에서 어려웠어?

 

 

 

😊 프로젝트 진행 후 얻은 것

1. 리액트 동작 원리

2. 리액트 비동기

3. CORS

4. CRA, Vite 설치 그리고 차이

5. 리액트 프로젝트 수행

 

 

 

📚 더 공부해야 할 것

자바스크립트 이벤트 루프처럼 리액트도 동작 원리를 알고 작업을 해야 할 것 같다. 그리고 useState(), useEffect() ... 같은 리액트 훅을 무작정 사용하기보다는 어떻게 동작하는 지 알고 사용해야 할 것 같다. 그 외 리액트에서 일어날 수 있는 것들 지속적으로 공부해야 할 것 같다.

 

비동기, HTTP, CORS, 객체 지향, 네트워크 ... 관련하여 프론트엔드가 알아야 할 것들 공부를

 

 

 

👋 끝

 

 

 

 

 

 

 

 

 

 

 

 

1. CRA, Vite 이거 외 웹팩, 바벨 ... 관련하여 설치 (CRA, Vite 없이 설치)
리액트 설치할 때 CRA 이용하다가 이번에 Vite, 웹팩, 바벨 ... 관련하여 설치를 알았다. 여기서 나는 어떤 거를 선택하여 설치할까? 설치하고 작업하는 게 똑같다고 생각하다가 내 생각이 달라졌다.

 

왜? 이 도구를 선택했나? 장단점이 무엇인가? 어떤 게 효율적인가? 왜?를 물어보면서 파악, 분석하는 게 도구 선택에 있어서 도움이 된 것이다.

 

2. 전달하는 값이 많아지면 헷갈렸다.

처음에는 값 전달이 헷갈리지 않았는데 코드가 많아졌을 때 이리저리 값 전달이 헷갈려서 차근차근 보면서 값 전달하는 흐름을 알았다.

 

3. 클라이언트와 서버 HTTP 통신

(디렉토리 구조 보여주면서 느낀 점 남기기)

 

4. 기존의 방식과 새로운 방식

(기존꺼랑 새로운 방식 차이랑 느낀 점 남기기)

 

5. 배포

프론트(React)랑 백엔드(Node) 배포하는 방법 구글링하는 중

 

6. CORS 경험 및 GET, POST 경험

백엔드에서 JSON으로 된 URL 받아와서 화면을 구현하면서 겪었던 경험