그냥

boolean

>> true. false

null != false

undefined

array

 >> square brackets, comma

npx create-react-app test1

npm error code ENOENT

>> npm -g install creat-react-app

굳이 프로젝트 단위로 필요한 것은 아니니 글로벌 설치

nuxt3

npx nuxi@latest demo_nuxt3

Which package manager would you like to use?

>> npm

Initialize git repository?

>> No

npm run dev

>> localhost:3000 으로 접속 가능

npm run build

npm run start

npm run generate

npm run preview

npm run postinstall

assets\
 > 이미지, CSS 파일 등 정적 자산을 저장합니다.
components\
 > Vue 컴포넌트를 저장합니다.
composables\
 > 재사용 가능한 로직(Composition API 훅)을 저장합니다.
layouts\
 > 애플리케이션의 레이아웃 컴포넌트를 저장합니다.
middleware\
 > 페이지 또는 라우트에 적용할 미들웨어를 저장합니다.
pages\
 > 애플리케이션의 페이지 컴포넌트를 저장합니다.
plugins\
 > Vue 플러그인 파일을 저장합니다.
public\
 > 정적 파일(예: 이미지, 폰트)을 저장합니다.
server\
 > 서버 사이드 로직을 저장합니다.
app.vue
 > 애플리케이션의 최상위 Vue 컴포넌트입니다.
nuxt.config.ts
 > Nuxt 설정 파일입니다.
package.json
 > 프로젝트의 npm 설정 파일입니다.
tsconfig.json
 > TypeScript 설정 파일입니다.

composition API 기반의 레이아웃 시스템 도입으로

<slot> 사용 !?

AAA.vue eslint 에러 발생

 > 'XX' is defined but never used

* 해결

아래 주석을 해당 라인에 추가

// eslint-disable-line no-unused-vars

onBeforeRouteLeave : 사용자가 현재 view 를 떠날 시 수행

ex)

import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave(() => {
  const answer = window.confirm('떠남?');
  if (answer === false) {
    return false;
  }
});

==, ===

변수 타입에 상관없이 값이 같은 경우 >> '=='

변수 타입과 값, 모두 같은 변수 비교시 >> '==='

router.push({
  name: 'About',
  state: {
    one: 1,
    two: 2
  }
});

>>

  const { one } = history.state;
  const { two } = history.state;
  console.log('one = ' + one);
  console.log('two = ' + two);

https://vuetifyjs.com/

* 환경변수 확인을 위하여 소스 추가 > App.vue

export default {
  created() {
    console.log(process.env);
  }
}

* 콘솔 로그 확인

* 모드 추가 > package.json

"scripts": {
  "test": "vue-cli-service serve --mode test"
}

* 새로운 환경변수 파일 추가 > {project root}/.env.{mode name} (ex. .env.test)

NODE_ENV = "test"
BASE_URL = "/"
VUE_APP_NAME = "test"
VUE_APP_PORT = 8080

* 생성/추가한 모드로 실행

* 포트 변경 > vue.config,js

module.exports = {
  devServer: {
    port: process.env.VUE_APP_PORT
  }
}

* .env 파일들은 프로젝트 루트 경로에 위치해야 한다

* 새로운 환경변수명은 VUE_APP_ 으로 시작해야 인식 및 사용 가능해진다.

* 참고:

https://velog.io/@skyepodium/vue-%EC%8B%A4%ED%96%89-%EB%AA%A8%EB%93%9C%EC%99%80-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95

ㅁㅁ

ㅁㅁ

함수를 호출하는 객체가 있는 경우 메소드,

함수를 호출하는 객체가 없는 경우 함수 ?!

!?

* 함수

  특정 작업을 수행하기 위해 설계된 기능

  직접 호출 할 수 있음

  재사용 가능함

  자체적으로 존재함

* 메소드

  객체의 프로퍼티가 함수인 경우

  점 표기법 또는 대괄호 표기법 사용하여 호출

  함수에 비해 재사용하기 어렵다

  메소드는 객체와 연결되어 있다

>> https://developer-talk.tistory.com/534

https://v3.router.vuejs.org/kr/

App.vue > RouterLink, RouterView

router/index.js > settings, mapping

views > components 와 기능적으로 다르지 않음, 단순 분류, component와 구분하기 위해 View로 끝나도록 네이밍

* mapping

 1. path > RouterLink to="{path}"

 2. name > RouterLink :to="{ name: '{name}' }"

 3. param (표기 : 콜론, ex) "/usr/:id") > RouterLink :to="{ name: 'user', params: {id:1}}"

  >> 컴포넌트에서 $route.params 로 참조 가능 ( ex. $route.params.id )

  >> composition API 방식 추천 : useRoute(), ref(route.params.id)

 4. navigation > function() { router.push({ name: 'home' }); } > button @click="{functionName}"

  >> 인자전달 가능

  >> router.push({ path: '/menu1/sub1' })  / push({ name: '/submenu1', params: { id: '1'} }) / push({ path: '/submenu1', query: { plan: 'private'} })

https://winterflower.tistory.com/454

아!?

모듈 참조 > 현재 디렉토리 > 프로젝트 루트 경로까지

cli 명령어 모듈 참조 > 글로벌 > 프로젝트 루트 경로까지

현재 디렉토리 기준 cli 명령어 버전관리 or 일회성 cli 커맨드 사용시 npx

package.json

 tilde(~), caret(^) > 해당 범위 내 최신 버전 설치 > package-lock.json 업데이트

 미존재 모듈 > package-lock.json 에 의해 버전 결정되고 아래 위치에 설치됨

  - 충돌 없이 가장 많이 사용되는 공통 버전 : 프로젝트루트/node_modules/

  - 나머지 : 해당 패키지 참조하는 패키지 내부/node_modules/

vue + eslint

컴포넌트 이름이 한개의 단어로 이루어져 있을 때 발생 하는 에러

shoud always be multi-word-component

> 2개 이상의 단어로 구성한다, 언더라인(_)을 붙인다 등등.. 이전 글에서 작성했던것 같다

>>  설정을 변경하는 다른 방법도 존재하더라

  .eslintrc 내 rules 에 'vue/multi-word-component-names': 'off' 설정 추가하거나

  package.json > eslintConfig > rules > "eslint-plugin-vue/multi-word-component-names": "off" 설정 추가한다

core-js 으악

vue-template-compiler 버전이 맞지 않는 문제 발생

* 해결 1

 1. vue-template-compiler 삭제

 2. package-lock.json 파일, node_modules 폴더 삭제

 3. npm install

 4. 재기동 확인

 >> 같은 문제 지속적으로 발생함

* 해결 2

 1. vue-template-compiler 업데이트

 2. npm install

 3. 재기동 확인

 >> 정상적으로 기동됨을 확인함

* 해결 3

 1. vue-template-compiler 삭제 (npm uninstall vue-template-compiler)

 2. compiler-sfc 설치 (npm i -D @vue/compiler-sfc

 3. npm install vue-loader@next

 4. package.json 에 작성한 의존성 패키지들 하나씩 업데이트/설치 시도

 5. 재기동

 >> 왜 잘 됨?

vue-loader 버전이 10 이상인 경우 vue-template-compiler 업데이트를 하면 된다는 메시지를 보긴 하였지만,

구글 검색 중 찾은 다른 글에는 vue 3.x 부터는 vue-template-compiler 를 사용하지 않는다는 내용도 존재했다.

오히려 사람을 더 헷갈리게 하는 글들이 많은 것 같다.

** 조심

package-lock.json

  > package.json 파일, node_modules 폴더 수정 시 npm 에 의해 생성/업데이트 된다.

  > 또한, 당시 의존성에 대한 모든 정보를 가지고 있다.

  >> 커밋하는 것을 추천한다.

 1. 의존성 트리에 대한 정보를 모두 가지고 있다.

 2. 커밋하는 것을 추천한다

 3. node_modules 없이 배포하는 경우 반드시 필요하다.

node_modules/ : 모든 패키지 설치, 사용중인 모든 패키지 확인 가능, npm 으로 설치된 패키지 파일 포함

public/ : webpack 을 통해 관리되지 않는 정적 리소스가 모여있는 곳

src/assets/ : image, css, font, etc...

src/components/ : Vue 컴포넌트 파일이 모여있는 곳

App.vue : Root component

main.js : 가장 먼저 실행되는 자바스크립트, Vue 인스턴스 생성 역할

.gitignore : github 업로드 시 제외할 파일 설정

babel.config.js ; Babel 설정 파일

package-lock.json : 설치된 package 의 dependency 정보 관리 파일

package.json : 해당 파일 공유하여 모든 패키지 설치 가능, 프로젝트에 필요한 package 정의/관리 파일

README.md : 프로젝트 정보 기록 파일

** package.json 파일내 속성들

 name : 프로젝트명

 version : 프로젝트 버전

 private : npm 배포 가능 여부

 scripts : 프로젝트 실행과 관련된 명령어 등록, 개발자가 정의 시 npm run 사용, npm 에서 제공되는 명령어는 npm 사용

 dependencies : 사용중인 패키지 정보 (패키지 설치지 자동 등록)

 devDependencies : 개발시에만 필요한 패키지 정보 (패키지 설치지 자동 등록)

 eslintConfig : ESLint 는 일괄성 있게 코드를 작성하고 버그를 회피할 목적으로 ECMAScript/Javascript 에서 발견된 패턴을 알려주는 플러그인, 구문 분석을 위해 babel-eslint 를 파서로 사용함 (패키지 설치지 자동 등록)

 browserslist : >1%, last 2 versions, not dead, not ie 11, ...

>> 대부분 수동 등록

기본 : vue.config.js

환경 : dev.config.js, prd.config.js, ...

각환경변수 : .dev.env, .prd.env, ...

2개 이상의 단어 구성으로 네이밍  시 해결 가능

Ctrl + C  선택한 셀 복사
Ctrl + V  복사한 셀 붙여넣기
Ctrl + X  선택한 셀 잘라내기
Ctrl + Z  마지막 작업 취소
Ctrl + Y  마지막 작업 다시 실행
Ctrl + S  현재 파일 저장
Ctrl + P  인쇄 대화상자 열기
Ctrl + A  모든 셀 선택

Ctrl + D  위쪽 셀 내용을 아래로 자동 채우기

Ctrl + E  빠른 채우기 (주변 셀 데이터 패턴 인식)

Ctrl + R  왼쪽 셀 내용을 오른쪽으로 자동 채우기
Ctrl + F  찾기 대화상자 열기
Ctrl + H  바꾸기 대화상자 열기
Ctrl + B  선택한 셀의 텍스트를 굵게
Ctrl + I  선택한 셀의 텍스트를 기울임
Ctrl + U  선택한 셀의 텍스트에 밑줄
Ctrl + N  새 통합 문서 열기
Ctrl + O  기존 통합 문서 열기
Ctrl + W  현재 통합 문서 닫기
Ctrl + Page Up  이전 워크시트로 이동
Ctrl + Page Down  다음 워크시트로 이동
Alt + Enter  셀 내에서 줄 바꿈
F2  셀 편집 모드로 전환
F4  마지막 작업 반복
F7  맞춤법 검사
F8  영역 선택
F9  모두 계산
F11  차트 만들기
F12  다른 이름으로 저장

Shift + F3  함수마법사 대화상자 열기
Ctrl + Shift + L  필터 켜기/끄기
Ctrl + Shift + +  셀 삽입
Ctrl + -  셀 삭제
Ctrl + T  표 만들기
Ctrl + 1  셀 서식 대화상자 열기
Ctrl + 9  선택한 행 숨기기
Ctrl + 0  선택한 열 숨기기

Ctrl + Enter  선택한 범위 모두 채우기

Ctrl + Shift + 방향키  연속 데이터 범위 지정
Ctrl + Shift + 9  숨겨진 행 표시
Ctrl + Shift + 0  숨겨진 열 표시
Ctrl + :  현재 시간 입력
Ctrl + ;  현재 날짜 입력
Ctrl + Shift + =  셀 삽입
Ctrl + Shift + $  통화 서식 적용
Ctrl + Shift + %  백분율 서식 적용
Ctrl + Shift + &  테두리 추가
Ctrl + Shift + _  테두리 제거
Ctrl + 방향키  데이터 범위의 끝으로 이동
Shift + 방향키  셀 선택 확장
Ctrl + Space  열 전체 선택
Shift + Space  행 전체 선택

Ctrl + -  행/열 삭제
Alt + E, S, V  값만 붙여넣기
Alt + E, S, T  서식만 붙여넣기
Alt + E, S, F  수식만 붙여넣기
Alt + E, S, M  덧셈 붙여넣기

Alt + F1  현재 범위의 데이터에 대한 차트 생성
Alt + F11  VBA(매크로) 편집기 열기

Alt + N, V  피벗테이블 생성

Alt + Shift + →  피벗테이블 그룹화

Alt + Shift + ←  피벗테이블 그룹화 해제

Alt + H, O, A  행 높이 자동 맞춤

Alt + H, O, I  열 너비 자동 맞춤
Ctrl + Alt + F9  모든 워크시트 계산
Ctrl + Shift + U  수식 입력줄 확장
Ctrl + Shift + Enter  배열 수식 입력
Ctrl + Shift + Tab  이전 통합 문서로 이동
Ctrl + Tab  다음 통합 문서로 이동
Ctrl + Shift + F3  이름 정의 대화상자 열기
Ctrl + Alt + V  선택하여 붙여넣기 대화상자 열기
Ctrl + Shift + K  주석 삽입
Ctrl + Shift + P  글꼴 대화상자 열기
Ctrl + Shift + F  글꼴 서식 대화상자 열기
Ctrl + Shift + O  주석이 있는 셀 선택
Ctrl + Shift + L  필터 켜기/끄기
Ctrl + Shift + U  수식 표시/숨기기
Ctrl + Shift + F  글꼴 서식 대화상자 열기
Ctrl + Shift + P  글꼴 대화상자 열기
Ctrl + Shift + T  요약행 활성/비활성

https://mobbin.com/

https://dribbble.com/

https://wwit.design/

https://calmcode.io/labs/tuilwind-css

https://developer.mozilla.org/en-US/blog/javascript-set-methods/

https://github.com/WebdevShefali/CheatSheets

npm -i D

npm install -D

npm install -dev
npm install --save-dev

> devDependencies