리액트 기초 / Boiler-Plate ( 따라하며 배우는 리액트 노드 )

출처 : https://www.youtube.com/watch?v=RxPJeeEgdIs&t=149s

 

보일러 플레이트

코딩을 하다 보면 의미 없는 노동을 할 때가 있습니다.

대표적인 코드가 바로 자바에서 사용하는 getter, setter입니다.

이 둘은 캡슐화를 위해 필수적인 요소들이지만,

의미 없는 노동을 하는 대신,

보통 IDE에서 자동으로 완성됩니다.

이러한 단순한 노동을 없애주는 것을 일컬어 "보일러 플레이트" 라고 말합니다.

​

정리하면,

​

1. 최소한의 변경으로 재사용할 수 있는 것

2. 적은 수정만으로 여러 곳에 활용 가능한 코드, 문구

3. 각종 문서에서 반복적으로 인용되는 문서의 한 부분

​

입니다.

​

​

여기에서는

​

GitHub - jaewonhimnae/boilerplate-mern-stack: Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX

의 해당 코드 (로그인 기능, 기본적인 레이아웃 기능 등이 있는 코드) 를

보일러 플레이트로 활용하여

리액트를 학습할 예정입니다.

( 설명 영상 : 노드 리액트 기초 강의 #1 소개 )

​

사용을 위해 fork 해옵니다.

​

​

clone 해 줍니다.

​

​

visual studio code에서 실행해 줍니다.

​

​

​

---

 

 

React 프로젝트의 시작

1. 서버와 클라이언트에서 Dependencies 다운받기

node 설치 확인

터미널에서 node -v

설치하러 갑니다 총총. . .

​https://naa0.tistory.com/122

후우... 이제 됐습니다.

package.json에 있는

패키지들 받기 위해

​

npm install 부터 해줍니다.

​

2. dev.js 파일 생성

server 폴더의 config 폴더 안의 key.js 파일을 보면,

​

# server/config/key.js

if (process.env.NODE_ENV === 'production') {

 

module.exports = require('./prod');

 

} else {

 

module.exports = require('./dev');

 

}

​

이러한 구존데,

prod(출시) 모드와, dev(개발) 모드를 나눠놓은 것입니다.

우선 나중에 dev를 로컬 경로로 지정하기위해,

dev.js를 만들어

prod.js를 붙여넣기 해준 후, 따옴표만 찍어줍니다.

​

# server/config/dev.js

module.exports = {

mongoURI:''

}