개발자를 향해...

본 글은 John Ahn 님의 [노드 리액트 기초 강의]를 수강하며 작성하였습니다. #26 Redux 기초 Redux는 상태 관리 라이브러리이다. state 컨테이너라고 하는데 state는 props와 비교할 수 있다. props는 부모 컨포넌트에 자식 컨포넌트가 들어갈 때 즉 컴포넌트 간에 소통할 때 props를 이용해야한다. 그리고 props는 부모가 자식에게만 보낼 수 있다. 이렇게 전달한 props는 값을 바꿀 수 없다. 값을 바꾸기 위해서는 부모 컨포넌트가 다른 값을 전달하는 방법밖에 없다. state는 컴포넌트 안에서 데이터를 전달할 때 사용한다. props와는 다르게 값을 바꿀 수 있다. state의 값이 변할 때마다 리렌더링 된다. state는 다음과 같이 사용될 수 있다. state={ ..

본 글은 John Ahn 님의 [노드 리액트 기초 강의]를 수강하며 작성하였습니다. #23 Proxy Server ? proxy 서버를 통해 유저가 뭔가 보내면 여기서 여러 활동을 할 수 있다. 예를 들어 ip나 중요한 데이터들을 서버가 알아볼 수 없게 바꾸거나 방화벽 기능을 할 수 도 있고 필터 기능을 할 수도 있다. 또한 static한 이미지를 프록시에 저장해 굳이 인터넷까지 가지 않아도 proxy에서 데이터를 가져올 수 있다. 그리고 원하지 않는 유저의 접근을 막을 수 있다. #24 Concurrently Concurrently를 이용해 백서버와 프론트 서버를 한번에 켜보자. 우선 라이브러리를 다운받기 위해 npm i concurrently 를 터미널에 실행해주자. 그리고 루트 디렉토리의 packa..

본 글은 John Ahn 님의 [노드 리액트 기초 강의]를 수강하며 작성하였습니다. #19 CRA to Our Boilerplate src 하위에 위와같이 폴더와 파일들을 생성해준다. 생성해준 .js파일들에는 다음과 같은 형식의 코드를 작성한다. import React from 'react' function Registerage(){ return( Registerage ) } export default RegisterPage; #20 React Router Dom npm i react-router-dom을 설치해준다. reactrouter.com/web/example/basic 여기에서 import { BrowserRouter as Router, Switch, Route, Link } from "reac..

본 글은 John Ahn 님의 [노드 리액트 기초 강의]를 수강하며 작성하였습니다. #15 리액트란 ? 리액트의 특징 라이브러리로 페이스북에서 만들었다. 모듈과 비슷한 컴포넌트를 사용한다. 여기서 사용하는 컴포넌트는 재사용성이 뛰어나다. (컴포넌트 - 기능을 파일 하나에 모듈화 또는 컴포넌트화 하면 다른 파일에서 이 기능을 호출해서 쓸 수 있다.) Virtual Dom을 사용한다. Virtual Dom은 변화가 생기면 전체 Dom을 리로드하는 Real Dom과 반대로 변화가 일어나는 부분만 로드시킨다. Virtual Dom은 이전 Dom의 snap shot을 저장해 두었다가 jsx가 업데이트 되면 이전 스냅샷과 비교해 바뀐 부분을 찾는다. 이 과정을 diffing이라고 한다. diffing에서 바뀐 부분..