TIL 09-17 클론 코딩 2일차

TIL

1. 주문관리 어플리케이션 클론 코딩

클론 코딩 : 주문관리 어플리케이션 1일차

• Product에 대한 정보를 react에서 조회할 때 사용할 api 만들기
• 사용자가 프론트단에서 product에 대한 조회 및 간단한 장바구니 기능 만들기

 

프론트와 협업하기 위한 React 익히기

새로운 React 앱 만들기 : 노드 패키지를 npx로 실행시켜서 create react app 을 실행시켜서 React 앱 만들기

 

React 구조 : package.json안에 있는 scripts 명령어들로 start, build, test 등을 할 수 있다.

 

React는 UI를 만들기 위한 JS 라이브러리이다.

 

React는 Component 단위 구조이다.

 

계층구조로 나뉘게 되는데 만약 자식에서 부모로는 이벤트처리를 할 수 없기 때문에 부모에서 해당 이벤트를 처리를 props로 받아서 처리해야한다.

 

axios 설치 : npm install을 이용하면 노드 패키지 모듈을 설치할 수 있다. axios, bootstrap, react 등 js 라이브러리들을 node 모듈이라고 부를 수 있는데 이것들이 단순히 노드 애플리케이션은 아니지만 js 라이브러리 패키지를 다운받아서 설치할 수 있고 패키지에서 하나의 js 파일을 만들면 브라우저에서 읽어가는 것이다.

개발할 때만 사용하는 것이고 실제로 노드 프로그램을 돌리는 것은 아니다.(개발 할때만 돌리는 것 같다.)

 

react는 노드 애플리케이션은 아니고 node 서버가 react application을 호스트 할 뿐이다.

react가 실제로 실행되는 환경은 브라우져 환경이지 node 환경이 아니다.

 

dom이 그려지는 시간이랑 element가 만들어지는 시간이랑 갭이 있을 수 있다.

그래서 렌더링 된 후에 dom에 접근하게 되는 경우가 있다.

 

렌더링이 다 된후에 원하는 로직을 돌려야 하는 상황이 있을 수 있는데 useEffect라는 hook을 이용해서 해당 준비가 다 되면 로직이 호출된다.

dependency를 이용해서 특정 product가 다 로드 되면 실행되게 하거나 할수있고 []로 주면 딱 한번만 실행되고 정상적으로 렌더링이 되면 딱 한번 수행하게 할 수 있다.

예를 들어, 비동기 작업들을 수행하게 해서 spring 서버로 요청을 날려서 데이터를 받아와서 특정 데이터를 세팅할 수 있다.

 

 

es6도 잘 모르는 상태에서 아직 react를 완전히 익히는 것은 무리인거 같지만 프로젝트 구조라던지 코드를 어느정도 읽을 수 있게 되었다.