목록boiler-plate 만들기 (3)
For Programmer

* 리액트앱을 설치하게 될 경우 초기 기본적인 폴더 구조 *public - index.html 파일 내부를 보면 body 태그안에 라고 되어 있다. src - index.js내부에 가보면 초기 생성시 리액트는 이 엘리먼트를 사용하고 있으며 이러한 엘리먼트를 root돔이라고 한다. * 해당 boiler-plate 에서 사용하게 될 폴더 구조 *hoc폴더에 대한 설명 * 즉, 간단히 말해서 해당 페이지가 로그인한 사람만들어갈 수있는지, 로그인안해도 들어갈 수있는지 , 로그인하게되면 못들어가는지(로그인페이지,회원가입페이지) 등등을 판별 해주는 역할이다. 백엔드에서 Auth라는 미들웨어를 만들었었는데 이를 활용하여 axios통신으로 서버와 통신하여 로그인여부를 판별 할 것이다. 동영상강의

1.node.js 설치 https://nodejs.org/en/ 다음 node.js 공식홈페이지로 가서 설치할 수있다. 2.cmd를 관리자권한으로 실행 후 npm init 명령어를 이용하여 package.json 파일생성하기 3.vscode를 켠 후 해당폴더를 불러와 index.js파일 생성 후 간단한 실행 코드작성 4.단, 위의 express모듈을 사용하기 위해서는 다음과같이 vscode내 express모듈을 다운 받아야한다.( '--save'를 추가하게 될경우 package.json 내에 dependencies 객체에 추가가된다.) 5.노드 서버를 실행 하기 위해 package.json 에 start 스크립트 추가 6. 깃으로 노드 서버 실행하기 *이후 서버를 끄고싶다면 ctrl+c 로 끄면된다. 해..

git-hub에 보면 boilerplate란 용어를 굉장히 많이쓴다. 또한 boiler-plate이 실제 개발에 있어서 굉장히 유용한데 이는 단어 뜻 그대로 보일러를 찍어내는 통(접시) 정도라고 생각하면 된다. 즉, 코딩에서 적용해 보면 간단한 초기 기능의 반복적인 코드를 하나의 통안에 집어 넣는 다고 생각하면 된다. 그 통에 들어가는 코드를 boiler-plate이라고 생각하면된다. 우리가 만들 boiler-plate은 웹개발에 있어서 가장 기본이되는 회원가입,로그인,기본페이지를 만들 것이며 몽고DB와 리액트 , node-js를 이용해서 만들 것이다. 프론트 즉, 화면에 보여질 부분을 React를 이용할 것이며 회원가입처리 로그인처리를 node.js를 이용하여 처리할 것이다. 또한 데이터저장은 no-s..