on
리액트 기초 / Boiler-Plate ( 따라하며 배우는 리액트 노드 )
리액트 기초 / 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:''
}
from http://naa0.tistory.com/123 by ccl(S) rewrite - 2021-09-04 01:00:25