'HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS'에 해당되는 글 2건

  1. 2019.07.17 Reactjs 초기 프로젝트 구성하기
  2. 2019.07.08 Reactjs] Create-react-app 시작하기

Reactjs 초기 프로젝트 구성하기

Reactjs 초기 프로젝트를 구성하려는 방법 중 가장 쉽고 널리 알려진 것은 Create React App를 이용하는 방법이다. 아래와 같이 실행하면 바로 프로젝트 구성이 완료된다.

npx create-react-app my-app
cd my-app
npm start

아쉬운 점은 무엇이 설치 되었는지 내가 알지 못하고, 또한 컴파일에 오랜 시간이 걸린다.

npm run eject를 이용해서 묶음을 풀어 보면 너무 많은 것들이 설치 되어 있다.

그래서 방법을 찾아 보던 중 @babel/preset-env와 plugins이라는 유튜브를 보고 한땀씩 진행을 해보았다.

우선 나에게 필요한 기본 모듈은 다음과 같다.

기본 모듈

  • react
  • react-dom
  • react
  • react-router-dom
  • dotenv
  • axois

이들을 모두 설치하고 기본 테스트까지 된 프로젝트를 만들어 보았다.

진행하면서 수정사항이 바로 바로 반영되는 React Hot Loader도 알게되어 추가 하였다.

또한 컴파일을 위해 웹팩 설정을 하고 한땀 한땀 진행해보았다.

어려운듯 쉬운듯 꽤 많은 시간이 소비 하고야 내가 원하는 결과를 확인 할 수 있었다.

ReactJS-Start

많이 삽질하면서 많이 배운 시간이었다.

참고자료

Posted by lahuman

Reactjs] Create-react-app 시작하기

reactjs 시작은 다음과 같다.

$> npx create-react-app my-app
$> cd my-app
$> npm start

위와 같이 명령어를 실행하여 기본 react 구조와 모듈이 포함된 프로젝트를 생성한다. 생성된 프로젝트의 구조는 다음과 같다.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

이후 프로젝트에 router, design 관련 모듈들을 추가 해서 반영하면된다.

참고자료

Posted by lahuman