Skip to content

Latest commit

 

History

History
134 lines (118 loc) · 3.67 KB

README.md

File metadata and controls

134 lines (118 loc) · 3.67 KB

[참고] VSCode Settings

접기/펼치기

Extensions

  • ES7+ React/Redux/React-Native snippets
  • Tailwind CSS IntelliSense
  • Prettier
  • Auto Close Tag
  • Auto Rename Tag
  • Dracula Official
  • ESLint (v2.2.2)
  • HTML CSS Support
  • HTML Snippets
  • indent-rainbow
  • TODO Highlight

설정 파일 생성 및 내용 입력

  • ./vscode/파일명.code-snippets : 코드 자동완성 단축키 설정 파일
  • ./vscode/settings.json : 작업 환경 설정 파일

[참고] Git

접기/펼치기 
git init
git remote add origin 저장소주소
git pull origin 저장소주소
git status
git add .
git status
git commit -m "메세지"
git push origin master

React 프로젝트 세팅

접기/펼치기

패키지 설치 및 세팅

npx create-react-app 경로/어플명
npm i -D postcss autoprefixer
npm i -D prettier eslint eslint-plugin-react eslint-plugin-prettier eslint-config-prettier
  1. 프로젝트 생성
  2. CSS 를 위한 패키지 설치
    • postcss : css 파일의 후처리를 도와줌
    • autoprefixer : 접근성을 위한 접두사를 붙여줌
  3. 문법 교정과 코드 포맷팅을 위한 패키지 설치
    • prettier : 코드 포맷팅
    • eslint : 문법 교정
    • eslint-plugin-react
    • eslint-plugin-prettier
    • eslint-config-prettier : eslint와 prettier 간 포맷팅 충돌이 발생할 수 있는 rule을 해제

[옵션] 추가 패키지 설치 및 세팅

npm i -D tailwindcss prettier prettier-plugin-tailwindcss
npm i react-icons
  1. tailwindcss 패키지 설치
    • tailwindcss : 클래스명 선언 방식으로 사용 가능 : 리액트에서 bootstrap 사용 시, 스타일 컴포넌트 추가 방식으로 사용해야 함으로 불편함
    • prettier : 코드 포멧팅
    • prettier-plugin-tailwindcss : prettier 가 코드 포맷팅 시 tailwindcss 유틸리티 클래스를 지정된 기준에 따라 알파벳 순서로 자동 정렬
  2. icon 패키지 설치
    • react-icons : FontAwesome 을 포함해 여러 아이콘 라이브러리를 제공하는 패키지

기본 테스트를 위한 파일 및 폴더 생성

  1. src/assets/images
  2. src/components/index.js
  3. src/pages/index.js

설정 파일 생성

  1. jsconfig.json
  2. postcss.config.js
  3. tailwind.config.js
  4. .prettierrc
  5. .prettierignore

파일 내용 수정

  1. /src/index.css

🚀 배포

접기/펼치기

패키지 설치 및 세팅

npm i -D gh-pages
  1. 깃헙에서 SPA 배포를 위한 패이지

설정 파일 수정

  1. package.json 파일 내용 수정
....
"homepage": "https://깃헙유저명.github.io/저장소명/",
"scripts": {
    ....
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
},

Github 배포

  1. 수정사항 모두 push
  2. npm run deploy 실행
  3. homepage 에 입력한 주소 접근하여 배포여부 확인