[React] 가상 키보드 만들기 - 1. 개발환경 설정

📚 구현할 내용

• 웹팩을 활용한 개발 환경 설정
• ES Lint, Pritter 설정
• HTML, CSS로 키보드 레이아웃 제작
• 다크모드 
• 폰트 변경 
• 물리적으로 키보드 입력시 가상키보드에도 동일하게 나타나는 이벤트 적용
  • 특수키 제외
  • 한글 입력시 에러 메시지 출력
• 마우스로 가상키보드 클릭시 실제로 글자가 입력되는 이벤트 적용
  • 특수키 제외

 

🧱사용 툴

• webpack

 

💜 개발환경 설정

1. package.json 생성

npm init -y

 

 

 

2. 웹팩 패키지 설치 

npm i -D webpack webpack-cli webpack-dev-server

npm i -D 패키지이름 => devDependencies에 패키지를 설치하겠다.

devDependencies는 로컬 개발이나 테스트에 필요한 패키지를 말함.

만약 -D를 빼면 dependencies(프로덕션 환경에서 필요한 패키지들)에 들어가게 된다. 

 

🤔 패키지 버전을 바꾸고싶은데...

package.json 에서 버전을 수정하고 npm i(nstall) 하면 적용됨 

 

 

3. css, js 폴더 생성 후 각각 style.css, index.js 파일 생성

그리고 최상위 폴더에 웹팩 파일 생성 => webpack.config.js

 

 

4. webpack.config.js 파일 작성

 

npm i -D terser-webpack-plugin 명령어를 통해 압축용 추가 플러그인 설치 

 

5. 웹팩 번들러 작동

npx webpack

=> /dist 생성 및 bundle.js 생성됨

파일 작성하고 webpack 빌드(npx webpack) 하면 bundle.js , bundle.map.js 파일이 생성된다 

번들.map.js는 devtool : source-map 나타내는 파일임 

 

🤔 output에 path를 절대경로로 지정하지 않으면? => 아래와 같은 에러 발생

 

6. HTML / CSS 관련 플러그인 설치 후 webpack.config.js 파일에 필요한 옵션 설정 

// 관련 웹팩 플러그인 설치. html 파일을 설정해줄 모듈. 
npm i -D html-webpack-plugin html

// css 관련 패키지 
npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin

HTML 모듈인 html-webpack-plugin은 템플릿(index.html) 안에서 lodash 문법 사용 가능하게 해줌.

*lodash : 유틸성 메서드나 템플릿관련 메서드를 제공하는 라이브러리

 

 

 

 

7. package.json에서 스크립트 설정 설정

webpack --mode=production : 공백 줄바꿈없애고 압축해주고 빌드해줌. 

대부분 빌드시에는 이렇게 함. 옵션이 없으면 development 모드로 하게 됨 

webpack dev server로 개발서버 작동하게 script 작성 => npm run dev로 개발서버를 실행가능하게 됨. 

 

 

8. webpack.config.js 개발서버 관련 설정

 

 

📝 지금까지 작성한 웹팩 파일 전체

 

9. ES Lint, Prettier 설정

ES Lint : 코드를 실행하지 않아도 정적 분석을 통해 문법적 에러 찾아줌. 간단한 포맷팅 기능 있음. 

Prettier : 코드 포매터중 하나. 

 

ES Lint install

npm i -D eslint

 

Prettier install 

npm install --save-dev --save-exact prettier

 

--save-dev : -D랑 같음. 축약형

--save-exact : ^(캐럿)이 없이 설치됨. (캐럿의 의미 - 마이너 버전에 한해서 업데이트를 허용함. )

버전에 따라 프리티어 설정이 달라질수있기 때문에 옵션 사용을 권장함 .

 

 

10. 관련 플러그인 설치

npm i -D eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier : ES Lint의 포맷팅 기능이 프리티어와 겹치지 않게 비활성화 해주는 플러그인

eslint-plugin-prettier : ES Lint에 프리티어의 포맷팅 기능을 추가하는 패키지 

 

 

11. ES Lint 초기화

npx eslint --init

 

생성된 eslintrc.json 파일 수정 => 프리티어 플러그인 추가 (프리티어에서 추천하는 스타일로 사용할것임) 

 

12. .eslintignore 파일 생성해서 eslint를 적용하지 않을 파일들 작성 

 

13. prettier 설정해주는 파일 생성 => .prettierrc.json

prettier 포매팅 룰 설정해주기. prettier 홈페이지의 Playground에서 설정한 결과를 확인할 수 있다. 

prettier가 적용되지 않을 파일들을 적어줄 .prettierignore 파일 생성후 내부 파일을 .eslintignore과 동일하게 설정한다. 

 

 

14. vs code extension중 eslint, pritter 설치 후

cmd+shift+p 로 open workspace settings(json) 열어서 아래 내용 추가 

 

 

저장할때 eslint 와 pritter로 설정해주겠다. 

1. 저장할때 포맷한다. html, css, js로 모두 포맷팅하겠다

2. 세이브 될때 eslint 룰대로 설정을 한다. 

 

 

 

****************************

 

수강 완료!

 

 

 

*****************************

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발
#패캠인강후기 #패스트캠퍼스후기 #오공완 #30개프로젝트로배우는프론트엔드withReact

 

 

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.