[코드숨] 리액트 13기 -1강/개발환경구축

 1.

node 설치하기 (왼쪽 LTS를 대부분 설치해서 사용함)

https://nodejs.org/ko/

16.17.1 LTS안정적, 신뢰도 높음

 

node -v   노드몬 버전확인

 

C:\Users\user\Desktop\codeSoom>cd demo

 

---

C:\Users\user\Desktop\codeSoom\demo>npm init

 

...    <아래는 만약 따로 설정할 경우 예시>

package name: (demo)   =>이름 /  =>엔터누르면 아래로 넘어가짐(기본값) 변경되는값쓰면 됨
version: (1.0.0) 0.0.1   =>버전
description: Demo   => 어떤걸로 실행이 되느냐
entry point: (index.js) 

test command:   =>어떤걸로 테스트하느냐
git repository:    =>깃주소

keywords:
author:    =>누가 만들었냐
license: (ISC)

.....

ls -al   =>영상에선 기존 터미널에 치니까 파일이 나오는데 vs code엔 안뜸

위와 같은 오류는 맥과 윈도우 명령어 차이

따로 설정을 해주던가 윈도우에 따른 명령어를 사용해야한다

 

변경예시

doskey ls=dir  맥
doskey clear=cls

 

윈도우 명령어로 한 예시

rm package.json  맥

del package.json

......

 

---

(del package.json 로 지워주고 다시 설치함)

 

2.

cd demo(현재하위폴더)

npm init -y

 =>기본값으로 다 yes 해서 만들어짐 (demo 폴더임)

code .  =>현재 여기서 vs code 파일이 실행됨

 

3.

C:\Users\user\Desktop\codeSoom\demo>npm i

package-lock.json  이 또 생김 /더 정확한 버전 /사용했던 패키지에 대한 정보들, 구체적인 정보들을 확인할 수 있어,

다른 프로젝트를 설치하고 실행시 오류를 줄여줄 수 있다. 

(그 전에는 package.json 이미 존재)

 

 

4.

<브라우저로 보기 위한 방법 1 or 2 >

1).serve 

터미널에 npx serve  (=>새로고침해주어야하는 화면으로 확인가능한 번거로움 /2를 이용)

 

2).webpack

ㄱ.

npm install --save-dev webpack webpack-cli webpack-dev-server  개발환경에서만 사용한다고 의존성잡아주기

or

npm i -D webpack webpack-cli webpack-dev-server   이거 쳐줌

(하면 package.json에 devDependencies  (개발환경의 의존성들) 리스트가 추가됨)

 

ㄴ. 개발용 서버 실행시키기

npx webpack-dev-server 

=>구버전이라 아래 방법으로 바뀜(webpack과 webpack-dev-server의 버전이 변경되어, 개발용 서버를 실행하는 방법과, 파일의 경로가 변경됨)

npx webpack serve --mode development

 

5.

index.html 파일 생성

src 하위폴더 생성>index.js 파일 생성

 

이렇게 진행할시 오류가 발생한다(http://localhost:8080/)

Cannot GET /  =>화면 출력

 

해결방법

public 폴더를 만들어서
기존 index.html파일을 옮겨준다.

 

6. webpack.config.js 

webpack.config.js 파일 생성(webpack이 실행될때 참조하는 설정파일/ webpack.config.js에 mode옵션이 없을 경우 에러가 발생하기 때문에 설정에 다음과 같이 추가하거나 실행할 때 mode옵션을 전달해야 한다.)

module.exports={
    mode: 'development',
}

 

7. package.json 파일에서 아래꺼 추가 (이럴 경우 다음 실행시 터미널에 npm start 해도 브라우저 실행됨)

"start":"webpack serve --mode development"

 

 

 

▼참고

https://velog.io/@wogkr1383/Webpack-devserver-Cannot-GET

Webpack 'Cannot GET /' 삽질기 ⛏️

https://webpack.js.org/configuration/dev-server/#devserverstatic

DevServer | webpack

https://yamoo9.gitbook.io/webpack/webpack/config-webpack-dev-environment/webpack-mode

Webpack 모드 - Webpack 러닝 가이드

https://ingg.dev/webpack/

[JS] Webpack을 쓰는 이유

https://wotres.tistory.com/entry/webpack-error-%ED%95%B4%EA%B2%B0%EB%B2%95-WARNING-in-configurationThe-mode-option-has-not-been-set-webpack-will-fallback-to-production-for-this-value-Set-mode-option-to-development-or-production-to-enable-defaults-for-each-environment

webpack error 해결법 : WARNING in configurationThe 'mode' option has not been set, webpack will fallback to 'production' for

 

---

8. ESLint 설치

>확장프로그램에서 설치한다.

>터미널에서 설치 및 설정

npm i -D eslint    설치
npx eslint    확인
npx eslint --init   초기화

npx eslint --init 할 경우 설정
첫번째꺼는 맨 아래,
JavaScript modules (import/export),
 React,
TypeScript? · No 
· browser
Use a popular style guide
> Airbnb:
config > JavaScript
 Would you like to install them now? / Yes
npm

확인방법: npx eslint src/index.js or  npx eslint .치면 문제점 발견
자동고쳐줌: npx eslint --fix .  

 

위 진행시 .eslintrc.js 안의 내용은 다음과 같다.

 

---

만약 typescript 사용한다는 yes 선택시

Airbnb 대신 typescript 를 standard로 할지 등을 선택하게 뜸

그럴시 .eslintrc.js 안에 코드는 아래와 같음 (extends 내용만 다름)

---

 

console.log 다른 방식 작성

let a=3;
a=3;
const {log}=console;
log('Hello, world!', a);

let a = 3;
a = 4;
function log(...args){
print(...args);
}

오류 : Expected linebreaks to be 'LF' but found 'CRLF' 

 

해결: .eslintrc.js 파일>rules부분 아래 추가

rules: {

    'linebreak-style': 0,

  },

 

▼ 오류해결 변경 이방법 참고

https://zindex.tistory.com/130

---

babel파일은 다음 게시물 참고