[부트캠프] 프론트엔드 1일차

RedPanda·2022년 8월 30일
0

[부트캠프] VueJS

목록 보기
1/3

추가 내용

> PostgreSQL과 mySQL과의 차이점

개발자 입장에서 편하다.

  • jsonB가 있어 object를 다루기에 편리하다.
  • utc를 기본으로 사용하여 데이터 변환에 용이하다.
  • boolean에 문자열이 들어와도 인식
  • PK에 'sequence', 'auto-increment'를 둘다 사용할 수 있다.(?)

> mac 터미널 명령어

https://m.blog.naver.com/jdub7138/220934381209

  • ls : 현재 폴더의 목록
  • tab : 빠른 입력. 조금 입력 후에 tab키를 눌러 자동완성

필기 내용

HTML & CSS

  • div : 가로길이의 요소들을 모두 감싸준다.

  • span : 인라인 컨테이너. span 안에 span을 넣어줄 수 있음.

  • margin & padding : 해당 블럭의 바깥쪽 영역과 안쪽 영역을 각각 다룬다.

  • rgb는 빛의 삼원색, cmyk는 색의 삼원색인데, rgb의 표현 범위가 더 넓다.

  • !important : 우선으로 css를 부여하고 싶을 때 작성해준다.

VueJS 설치하기...

vue는 초기 환경을 설정하는 것이 너무 어려웠다.

npm으로 끝나지 않고 다양한 익스텐션을 설치하고, 환경변수를 따로 설정해주는 등 신경을 쓸 일이 너무 많았다.

이번에는 모두 다루지는 않을 것이지만, 설치하면서 생긴 문제와 해결법을 포스팅하고자 한다.

Parsing error: No Babel config file detected...

내가 겪은 에러 구문이다. 해결 방법을 찾아 구글링을 해보았다.

1. esLint에서 만든 settings.json에 내용 추가

setting.json에서 문제가 생겼을 때 해결 방법이다.

preference -> setting -> workspace -> text editor -> code actions on save -> edit in setting.json을 클릭

클릭하면 현재 위치에 .vscode 디렉토리에 settings.json을 생성한다.
이 파일은 Vue의 환경설정 파일이다. 다음의 코드를 복붙한다.

{
    "eslint.validate": [
      "vue", "javascript", "html"
    ],
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true // save하면 자동 수정하게 해준다.
    },
    "editor.tabSize": 2, // tab을 2칸 시켜준다.
    "eslint.workingDirectories": [
      {"mode": "auto"}    
      ], // 해당 오류의 해결 코드
  }

추가하라 해서 추가했지만 이 부분에서 해결되었는지는 모르겠다.
터미널의 현재 디렉토리에 .vscode 디렉토리를 만들어 줄 것이라 생각했지만 사실 디렉토리를 연 곳에 생성되었다는 것을 알게 되었다.

생성한 이후에 작업 폴더에 넣었지만 작동하지 않아 폴더를 옮겨 다시 생성했다.

  1. .eslintrc.json 생성하여 해결하기

<관련 오류의 github 링크>

간단하게 현재 디렉토리에 .eslintrc.json 파일을 생성하고 다음의 코드를 추가한다.

{
  "parser": "@babel/eslint-parser",
  "parserOptions": { "requireConfigFile" : "false" },
  "babelOptions": { "configFile": "./.babelrc", }
}

솔직히 오늘 vue를 처음 접해봐서 그런지 문제도 많았고 복붙만 한 것 같다.
추후에 꼭 이 오류들을 만나면 이해하면서 해결해보았으면 좋겠다.

profile
끄적끄적 코딩일기

0개의 댓글