리액트와 VS Code 환경 구축

맥북 에러 해결법

$npx create-react-app blog 
$npm start

위의 커맨드를 실행하였을 때 맥북에서

npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node\_modules'

에러가 뜨는 경우
폴더 수정 권한이 없다고 에러를 띄우는 것.

위의 에러는 /usr/local/lib/node_modules 라는 폴더에 수정권한을 주면 된다.

$sudo chown \-R 맥북유저이름: 위에에러뜬경로
$sudo chown \-R $USER 위에에러뜬경로

혹은

sudo npx create-react-app blog

---

VS Code extension 설치

• Live Server
• Korean Language Pack for Visual Studio Code(나는 영어가 편해 설치하지 않았다.)
• Auto Close Tag
• Auto Complete Tag(태그 수정할 때 편하다)
• Auto Import
• Auto Rename Tag
• Reactjs code snippets (코드 자동완성 기능)

---

코드 자동 포맷

cmd + shift + p -> settings.json에서 아래의 코드를 추가하면 코드 저장시 자동 포맷이 가능하다.

{
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "modifications",
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

만약 프로젝트에서 eslint config prettier을 패키지에 설치 한 후 autofix 하고 싶다면, settings.json에 source.fixAll.eslint 옵션을 넣는다.

{
    "editor.fontSize": 13,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
}

나는 settings.json을 다음과 같이 설정해 두었다.

{
    "debug.console.fontSize": 14,
    "window.zoomLevel": 1,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.startupEditor": "none",
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "terminal.integrated.fontSize": 11,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "npm.keybindingsChangedWarningShown": true,
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "modifications",
}

---

React 젠코딩 설정하기

1) Include Languages 검색 -> 작업영역(WorkSpace setting)

2) AddItem 버튼 클릭 후
key 에 javascript 입력. value에 javascriptreact 입력.