React

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리2013년도 페북에서 만듦컴포넌트로 이뤄져 있어 재사용성이 뛰어남real DOM: 브라우저에 기본적으로 내장되어있는 API. HTML 태그(노드)가 트리 형태로 구성되어 있으며, DOM을 통해 이 트리에 접근

클라이언트의 요청의(URL) 변경에 따라 페이지, 컴포넌트의 변화를 제공하기 위한 라이브러리cd cliend -> npm install react-router-dom --saveApp.jsReact Router DOM을 이용해 URL 요청에 따라 컴포넌트를 호출www.

HTTP 비동기 통신 라이브러리(클라이언트에서 서버에 요청을 보낼 때 사용)클라이언트와 서버 간 통신을 원활하게 하기 위해 Ajax와 더불어 사용특징Promise API 사용요청과 응답 데이터 변형HTTP 요청 취소 및 HTTP 응답 JSON 형태로 자동 변경cd cl

프론트 포트 넘버와 서버 포트 넘버가 다르다. 이때, 양쪽 다 아무런 설정 없이는 CORS 정책 때문에 통신이 불가하다Cross-Origin Resource Sharing포트 넘버(Origin)가 다른 두 서버가 Sharing 할 때, 적용되는 정책두 Origin이 다

클라이언트와 서버 중간에서 '대리' 역할 수행. 보안상의 문제로 직접 통신할 수 없을 때 중간에서 통신을 중계.클라이언트 입장에서 프록시 서버는 서버와 같이 동작하는 것처럼 보이며,서버 입장에서는 클라이언트와 같이 동작하는 것으로 보인다.방화벽웹 필터 기능캐쉬 데이터,

론트, 백 서버 한번에 킬 수 있음\*npm install concurrently --savepackage.json위와 같이 추가다음, npm run dev로 실행(프론트와 백엔드 서버 둘다 실행)www.inflearn.com/course/따라하며-배우는-노드-리액트-

능 구현에 보다 더 집중하기 위해 사용하려 함(for 기능 위주의 개발)\*Material UIReact BootstrapSemantic UIAnt DesignMaterialize 등등장점사용하기 편리스타일 깔끔enterprise 환경에서도 어울리는 디자인 구현단점사이

상태 관리 라이브러리. JavaScript 프로그램을 위한 예측 가능한 상태(State) 컨테이너State을 관리해주는 툴부모 컴포넌트, 자식 컴포넌트, 그 자식의 컴포넌트가 있다고 가정했을 때, 모두가 공통적으로 관리하는 데이터가 있다고 해보자Redux를 사용하지 않

생성: constructor를 먼저 실행을 해 상태를 부여 -> render(HTML,jsx을 DOM에 알맞게 할당. 화면 렌더링) -> componentDidMount(데이터 가져오기 등) 수정: render부터 componentDidUpdate 과정까지 수행삭제:

LoginPage.js\_actions/user_action.js\_reducer/user_reducer.js처음 reducer 상태 정보시작 페이지로 리다이렉팅되고, 상태 정보가 업데이트 되었음을 알 수 있음www.inflearn.com/course/따라하며-배우는-

RegisterPage.jsuser_actionstypes.jsuser_reducer.js 회원가입 완료후 로그인 페이지로 www.inflearn.com/course/따라하며-배우는-노드-리액트-기본

LandingPage.js로그인한 상태에서로그아웃 버튼을 누르면, 로그인 페이지로 이동되고, 로그아웃이 성공했음을 알 수 있음www.inflearn.com/course/따라하며-배우는-노드-리액트-기본

HOC을 이용해 유저의 상태 정보에 따른 페이지 접근 권한을 설정아무나 진입 가능한 페이지Landing PageAbout Page로그인한 회원만 진입 가능한 페이지Detail Page로그인 한 회원은 진입 못하는 페이지Register PageLogin Page관리자만