전체 151

terminal 명령어 모음

1) 홈 디렉토리로 이동 cd ~ 2) 새 디렉토리(폴더) 생성 mkdir [디렉토리(폴더)명] 3) 디렉토리(폴더) 이동 cd [디렉토리(폴더)명] 4) 부모 디렉토리로 이동 cd ../ 5) 현재 경로 출력(print working directory) pwd 6) 디렉토리 내용 출력 ls 7) 디렉토리의 폴더 상세 정보까지 출력 ls -l 8) 디렉토리의 숨김 파일과 디렉토리까지 출력 ls -a *tip: 옵션은 합쳐서 ls -al처럼 사용이 가능하다. 9) 파일이 있는 디렉토리를 내용과 함께 삭제 rm -rf [디렉토리(폴더)명] 10) vi 편집기로 [파일명.확장자명) 파일을 작성 vim [파일명.확장자명] 11) 파일 생성 touch [파일명.확장자명] 12) 터미널 창의 내용 삭제 clear ..

개념 정리 2022.01.25

[가이드] code Formatter(ESLint,Prettier 설정)

ESLint, Prettier를 이용하면 코드 스타일을 획일화 하는 작업(코딩 컨벤션 자동 설정)을 손쉽게 할 수 있다. 협업을 하거나 혼자 개발하거나 가독성이 좋은 코드 품질을 유지하기 위해서는 이 방법으로 개발하는 것이 유용하다. 그리고 저장할 때 자동으로 코드 스타일을 맞춰주기 때문에 어이없는 에러를 만들 확률이 줄어든다. 소스를 작성하고 저장했을 때 개행이나 세미콜론 등의 코드 형식을 정해서 사용할 수 있는게 prettier 인데 .prettierrc라는 설정파일을 만들어서 설정해도 되지만, 그럴 경우, prettier와 ESLint가 충돌 할 수 있기 때문에 ESLint로만 설정하도록 한다. .eslintrc.js 파일을 생성해 작성한다. vscode에서 eslint 플러그인을 설치한 후 최상단..

Setting Guide 2022.01.21

[Error] 'node-sass' version 5.0.0 is incompatible with ^4.0.0

vue 프로젝트 생성 후 node-sass 와 sass-loader를 설치한 후 run 했더니 에러가 떴다 검색 해봤더니 node 버전과 node-sass 버전이 맞지 않아서 뜨는 에러라고... 그래서 노드 버전을 확인한 후 맞는 버전의 'node-sass'를 설치했다. https://www.npmjs.com/package/node-sass node-sass Wrapper around libsass www.npmjs.com 스크롤 내려가보면 표로 작성된 간단한 가이드를 확인할 수 있다. 예를 들어 나의 노드 버전이 14일 경우, node-sass 버전을 4.14.1 버전으로 설치해주고 검색하다 얻어걸린 sass-loader 버전 7.3.1을 설치해주면 에러 해결~~ 인줄 알았더니 또다른 에러가 발생했다...

Vue.js 2022.01.21

[가이드] Vue CLI 사용

설치 npm install -g @vue/cli # vue-cli 3.x npm i -g vue-cli. # vue-cli 2.x yarn global add @vue/cli 버전 확인 vue --version 업그레이드 npm undate -g @vue/cli yarn global upgrade --latest @vue/cli 새 프로젝트 생성 vue create 프로젝트명 # vue-cli 3.x vue init webpack 프로젝트명 # vue-cli 2.x 로컬 서버 실행 npm run serve # vue-cli 3.x npm run dev. # vue-cli 2.x 2.x 템플릿 가져오기 (레거시) Vue CLI 3은 동일한 vue 바이너리를 사용하므로 Vue CLI 2(vue-cli)를 덮..

Setting Guide 2022.01.21

git 명령어 모음

git 명령어 1) [파일명.확장자명]을 스테이지에 올림 git add [파일명.확장자명] git add . #수정한 전체파일을 스테이지에 올림 2) 커밋 메시지[메시지명]을 붙여 커밋 git commit -m "[메시지명]" 3) 메시지[메시지명]을 붙여서 스테이징과 커밋을 동시에 진행 git commit -a -m "[메시지명]" 4) 커밋 내역 확인 git log git log --pretty=oneline #한줄로 출력 git log --oneline #할줄에 한커밋씩 출력 git log --branches --graph. #커밋로그에 각 브랜치의 커밋을 그래프로 표시 5) 특정 커밋 내역 확인 git show [커밋 id] 6) 최근 버전과 작업 폴더의 수정 파일 사이의 차이를 출력 git di..

개념 정리 2022.01.21

이메일 템플릿(웹메일) 코딩 시 주의사항

HTML은 태그로 마크업할 것 네이버, 다음, 구글 등 이메일 클라이언트들은 각각 다른 이메일 렌더링 버전을 가지고 있다. 보안상의 이유로 일부 코드를 막아두거나 쓸 수 있는 태그와 속성, css 속성에 제한을 두고 있으며, 그로 인해 작성한 코드가 적용되지 않는 경우도 있다. 또한 기존 자주 사용하는 태그로 웹표준 방식의 마크업을 하게 되면 구조가 틀어지게 된다. 그러므로 대부분의 이메일 클라이언트에서 잘 나오는 태그가 크로스 브라우징에도 적합하다. CSS는 인라인 스타일로 작성할 것 css를 정의하는 방법은 아래와 같이 3가지가 있다. 외부문서 작성(Linked Style) 문서내부 작성(Embedded Style) 태그에 직접 지정(Inline Style) 이메일 클라이언트는 보안상의 이유로 나 태..

개념 정리 2022.01.21

[Error] Do not use 'new' for side effects

vue 프로젝트를 생성하고 세팅을 하던 중 새로운 에러가 발생했다. src/main.js에서 에러가 발생!! new Vue({ el:'#app', render: h => h(App) }) new를 쓰지 말랜다. 검색해 봤더니 eslint 때문에 발생하는 현상이란다. 제일 간단하게는 new를 그대로 사용하지 않고 변수를 선언하는 방법이 있다. 이 방법으로 나는 해결을 봤으니 더이상의 방법을 찾고 싶지 않았지만.... 후에 이게 아닌 보다 원천적인 해결을 원할 수도 있으니... var vm = new Vue({router, render: h => h(App)}) vm.$mount('#app') new를 변수에 선언하지 못하는 상황인 경우, eslint no-new: "error"을 입력해준다면 해결이 된다고..

Vue.js 2022.01.20

<wbr> vs <br>

는 단어 중간에서 행바꿈될 수 있는 위치를 정의할 때 사용함. 길이가 굉장히 긴 단어의 경우, 브라우저는 자동으로 행바꿈을 실행하게 되는데 이때에 브라우저가 해당 단어를 잘못된 위치에서 행바꿈하지 않도록 요소를 사용하여 행바꿈 될 수 있는 위치를 직접 명시할 때 사용합니다. 태그는 길이가 긴 단어의 경우, 브라우저와 상관없이 무조건 행바꿈을 실행하도록 명시합니다. * 태그는 html5에서 새롭게 추가된 요소로 ie에서는 지원하지 않음. http://this.is.a.really.long.example.com/With/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages/deeper/level/pages

개념 정리 2022.01.18