PRDEN

1. Composition API Vue2(option API)는 data() { } methods: { } computed: { } 위와 같은 구조를 가져서 data 안에 값들이 어떤 함수에 의해 변하는지 분산되어있어 추적이 어려웠다. 그러나, Vue3의 등장으로 setup 함수에 데이터가 그룹핑 되어 용이하게 데이터의 흐름을 파악할 수 있다. ex) react 처럼 2. setup 훅 내부에 data와 function을 구성한다. (반응형 data 전) setup() { let name = "sungjun"; let age = 30; const handleClick = () => { console.log(age); }; return { name, age, handleClick }; } }; 3. re..

웹팩 기본 사용법 (CLI) 웹팩은 자바스크립트 모듈 번들러로 웹 개발을 도와주는 많은 부가기능을 포함하고 있다. 웹 팩의 기본 디렉터리 구조 (기본 디렉터리 구조만 알아라) webpack-example |- /dist |- main.js |- /src |- time.js |- index.js |- index.html |- package.json |- /node_modules 전통적인 웹사이트에서는 HTML 파일에 이런 방식으로 자바스크립트 파일을 가져다 쓰기 때문에 HTML 파일 없이는 정상적으로 작동할 수 없다.( HTML 파일에서 외부 자바스크립트 라이브러리에 대한 의존성 관리) 또한, 외부 라이브러리를 추가적으로 사용할 때 javascript 파일이 아닌 HTML 파일을 수정해줘야 하는 단점도 있..

https://velog.io/@ash/Node.js-%EC%84%9C%EB%B2%84%EC%97%90-logging-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-winston-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0 [Node.js] Logging 라이브러리 winston 적용하기 Node.js 서버에 winston으로 로그 남기기 velog.io

1. Deployment 1) Universal App 처음으로 서버에서 다이나믹하게 렌더링 된 후에 Application이 SPA로 변해서 SEO에 좋다 2) Single Page App app이 사용자에게 HTML만 보이고 콘텐츠는 일단 보이지 않는다. 3) Static -> 배포절차 : 처음 빌드하고 이 프로젝트 폴더(. nuxt/, node_modules, package.json, nuxt.config.js)를 웹서버에 올려야 한다.

1.mixin https://joshua1988.github.io/vue-camp/reuse/mixins.html#%E1%84%86%E1%85%B5%E1%86%A8%E1%84%89%E1%85%B3%E1%84%8B%E1%85%B5%E1%86%AB-%E1%84%8F%E1%85%A9%E1%84%83%E1%85%B3-%E1%84%92%E1%85%A7%E1%86%BC%E1%84%89%E1%85%B5%E1%86%A8 Mixins | Cracking Vue.js 믹스인 믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법입니다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, created 등과 같은 컴포넌트 옵션 joshua1988.github.io 2..

1. Middleware page가 로드되기 이전에 작동한다. client, server 두 곳에서 다 작동한다. 1) middleware폴더 하위에 log.js, auth.js 파일 작성 2) pages, layout 폴터 하위 컴포넌트에 middleware : 'log' 로 사용가능하다. 3) authentication을 필요로 하는 페이지 있으면 middleware에서 처리하기 2. Cookie, localStorage page refresh되면 server에서 쿠키 받아오면 된다.

1. nuxt.config.js Nuxt.js.org - configuration 파트 참조 1) mode : 'universal ' - pre rendering 필요할 때, 필요 없으면 spa로 해도 된다. 2) head - html의 head 영역이랑 같다. - 특정 페이지에만 적용하고 싶으면 해당 pages 하위 component에 head:{ } 이렇게 넣어주면 된다. 3) loading : 맨위에 처리되는 것 보여준다. 비 활성화 하려면 loading:false 작성 spa에서 -> loadingIndicator:{ name: ' circle ', color: '#dddd' } 가운데 동그라미~~ 로딩될 때 4) css : global css assets 하위 경로 넣어주면 된다. 5) env ..

1. asyncData() asyncData() { return {} } asyncData는 server에서 작동한다.(? client에서는 작동 안 하나??) 이건 page에서만 사용 가능하다.(layout이나 component에서 쓰면 작동 안 한다.) 이게 작동하고 난 후에 페이지가 렌더링 된다. 다시 말해 페이지 먼저 렌더링 된 후에 데이터를 뿌리는 형태가 아니라는 것이다. 따라서 asyncData 안에서 this로 method나 data에 접근 불가능하다. asyncData는 component가 생성되기 전에 작동하기 때문이다. 이렇게도 사용한다. asyncData({redirect}){ redirect() } 2. asyncData on Client & Server asyncData는 처음 페..

1. Pages font link 넣고 싶을 때 nuxt.config.js의 head의 link에 추가하면 된다. 2. Props : 위에서 -> 아래로 상위 컴포넌트에서 어떻게 던지고, 하위에서 어떻게 받는지 잘봐 3. Emits : 아래에서 ->위로 하위에서 어떻게 보내고 상위에서 어떻게 받는지 확인

1. pages 하위에 디렉토리 vs vue components pages 하위에 디렉토리 만들 경우 디렉토리 명칭이 라우터 주소 대신해 주고 디렉토리 안에는 꼭 index.vue 명칭 지켜야 한다. pages 하위에 디렉토리 만들지 않고 vue 파일만 만들경우 해당 컴포넌트 이름이 라우터 주소 역할을 한다. 2. dynamic path ex) users/120303 1) 파일로 만들 경우 pages 폴더 하위에 users 폴더 하위에 _id.vue 파일 만들기 2) 폴더로 만들 경우 pages 폴더 하위에 users 폴더 하위에 _id 폴더만들고 그 하위에 index.vue 만들기 id 파일 혹은 폴더 하위에 {{ $route.params.id}}로 해줘야 한다. id는 파일 혹은 폴더 명칭 따라가기 ..