왕초보코딩탈출

웹팩에대하여 

향후에 웹팩 옵션 수정 할 때 다시 자세하게 알아보기하고 Webpack이 뭐하는지만 일단 알아보자

https://webpack.js.org/

사이트에 들어가보면 메인에

나 또한 웹팩설정에 대하여 아직 잘 모른다 ㅎㅎ 

위에 이미지만 딱 봤을 때 아 ~ 어떤 느낌인지 

설정도 잘은 모르겠지만 

무엇을 어떻게 묶어서 어떻게 내보내고 불러올지 설정하지 않을까... 

bundle your assets  

JS , .png ,sass , jpg 등등   웹팩으로 딱 묶는 거구나 !!!

내가 기존에 작성했던 HTML 을보면

페이지마다 스크립트 또는 CSS 다 불러와야하고 그나마 include를 써서 하긴했다만 그것도 페이지별로 다르니 

필요없는 스크립트를 브라우저에서 로딩하게되고 불필요한 자원을 낭비하게 된다.....

그래서 webpack을 사용하는 것 아닐까?

CSS는  css-loader 가 

FILE 은 file-loader 가

여기서 한가지 알아야 할 것은 

최신 브라우저는 대부분 ES6 형태를 실행 가능하지만 구버전에서는 실행할 수 없기 때문에 ES5로 변환해줘야한다.

다음과 같은 import 는 ES6문법이다.

ES6 문법으로 작성 되어진 JS 코드들을 ES5로 변경해야한다 

이것을 가능하게 해주는 것이 Babel-loader 일단 웹팩에 대해서는 이정도로 알고 나중에 설정할 때 더 알아보기로 하자

자세하게 알아보려면 사이트 들어가서 Documentation 읽어보세요 ㅎㅎ 

create-react-app 도구는 npm 또는 yarn 으로 설치 할 수 있음 

패키지를 모든 디렉터리에서 사용 할 것이므로 전역으로 설치 

터미널에서  다음과 같이 입력

$ create-react-app my_project

명령어를 실행하면 자동으로 my_project에 필요한 로컬 모듈을 설치해줌

$ cd my_project

$ yarn start

자동으로 웹 프라우저로 http://localhost:3000/ 로 리액트 초기 프로젝트 페이지가 열림 

리액트를 시작하기 앞서 VScode 유용한 확장 프로그램을 설치하겠습니다.

1. ESLint ( 자바 스크립트 문법을 체크)

2. Relative Path ( 상대경로 작성 시 편리하게 )

3. Guides ( 들여쓰기 가이드라인)

4. React code Snippets ( 리액트 관련 스니펫 모음)

구글에 검색해보시면 더 유용한 확장 프로그램이 많이 있어요 .. 필요하신건 설치하셔서 진행하시면 되겠습니다.~

1. 리액트 시작하기 

시작하기 설치 항목

1. node.js 

https://nodejs.org/ko/

2. npm 또는 yarn 

https://yarnpkg.com/lang/en/

3. 코드 에이터 ( vscode , atom  등등)

https://code.visualstudio.com/

참고로 Atom 같은경우는 생각보다 메모리를 많이 잡아먹어서 ㅠㅠ 버벅거림 ㅠㅠ 첨엔 안그랬는데 왜이렇게 무거워졌는지 VScode를 추천함 !!!

설치 방법은 어렵지 않음 .. 거진 next 만 누르면 설치 됨 ㅎㅎ

yarn은  npm install yarn -g  로 설치해도 됨 ㅎㅎ ~

추가로 Git 을 설치하셔 버전 관리도 추천 드립니다.