이 글을 쓰는 이유
C언어 Java 알고리즘 등등.. 공부를 하다가 문든 생각난
컨텐츠의 홈페이지 제작이 떠올라서 만들어 보려고 생각했습니다. (포폴겸...)
하지만 아직 JAVA 문법도 완전히 파악하지 못했는데 Spring 으로
제작하려니 진행속도도 느릴꺼같고 코드도 멍멍판 날꺼같은 생각이 들었습니다.
그러다 문든 생각난게 .. 아.. 나 NodeJS Express 로 홈페이지 제작을 해봤었지..
정확히는 4달전에 ReactJS NodeJS Express React-Apollo React-GraphQL 로
SNS 홈페이지를 간단하게 만들어 본적이 있었습니다.
React-Apollo, React-GraphQL 를 사용해 보고싶어서..
그래서 공부와 동시에 NodeJS 로 간단하게 홈페이지를 제작해 보려고 생각이 들었습니다.
다만.. 초기 설정 하는방법을 듬성듬성 까먹었기에 블로그에 글을 남겨
후에도 보고 참고할 수 있도록 하려고 글을 작성합니다.
이 포스트는 개인적으로 보기 쉽게 작성한 것이고 더 자세하게
ReactJS를 활용한 홈페이지 제작은 아래 참고자료 링크를 통해
알아보는 것을 추천합니다.
추가적으로 느낀것 .. 역시 C언어 Java Jsp Spring 공부하고
다시 ReactJS 를 만져보니 훨신 쉽게 느껴졌습니다.
문법이 상당히 비슷한것을 이제 느끼네요..
필요한 것
npm - Node Package Manager
NodeJS 설치 바로가기
create-react-app
create-react-app 자세히 보기
react-styled-components
react-styled-components 자세히 보기
npm install –save-d styled-components
react-redux
react-redux 자세히 보기
npm install –save-d redux
npm install –save-d react-redux
react-router-dom
react-router-dom 자세히 보기
npm install –save-d react-router-dom
react-intl
react-intl 자세히 보기
npm install –save-d react-intl
제가 개인적으로 사용하는 모듈들 입니다.
디렉토리 구조
개인적인 디렉토리 구조입니다.
project
- config
- node_modules
- public
- scripts
- src
- actions
- components
- homePage
- layout
- header
- footer
- containers
- homePage
- connectedIntlProvider
- reducers
- style App.js index.js
참고자료
React 설치부터 실행 홈페이지 제작까지 모든 설명이있는 블로그
Kendrick’s Blog 님의 블로그 JSX 확장자란?
리액트에서의 shallow compare 부터 React.PureComponent 까지