목록전체 글 (549)
똑같은 삽질은 2번 하지 말자
보호되어 있는 글입니다.
Redux
Redux? Flux라는 개념을 구현한 기술 Redux의 탄생배경 앱의 규모가 크게되면 MVC 모델의 데이터흐름을 포작하기 어려운 점때문에 데이터 흐름을 포착하기 쉽게 하기위해 FLUX패턴이 등장하였다. 처음에는 앱의 규모가 작아 데이터의 흐름을 포착하기 쉬웠지만.... 앱의 규모가 커지면 커질수록 모델과 뷰의 의존성이 커진다.. 그래서 어느 하나의 모델의 변화로 몇개의 뷰가 바뀌는지 뷰의 변화로 몇개의 모델이 바뀌는지 예측하기 어려워졌다. https://bestalign.github.io/translation/cartoon-guide-to-flux/ Flux로의 카툰 안내서 원문: https://medium.com/code-cartoons/a-cartoon-guide-to-flux-6157355ab20..
보호되어 있는 글입니다.
Nuxt console.log에 찍히는 Nuxt SSR의 의미
개요 콘솔에 찍히는 이 마크의 의미는 무엇? 서버사이드 돔트리와 클라이언트사이드 돔트리가 다르다고 혼나서 원인을 찾아보다가 깨달은 몇가지를 기록 결론 Nuxt의 Univeral mode를 이용하게 되면 서버사이드 클라이언트사이드 로 나뉘어져서 실행된다. 위의 마크의 의미는 서버사이드에서 실행된 나의 middleware의 마크이다. 서버사이드에서 실행되는 로그들은 위의 console.log뿐만 아니라 본인의 터미널에도 찍히고 있을것이다! 추가조사 첫 페이지를 진입할 때는 서버사이드와 클라이언트사이드가 같이 동작하는데 이건 서버사이드 렌더링의 개념을 보고오면 좋은거 같다. 간단히 말하자면 서버사이드 렌더링이 이루어지는 과정은 pre-rendering -> hydration 인데 pre-rendering을 통..
Vue Web API 디자인 패턴 (Repository Pattern)
Repository Pattren 이란? 비지니스 로직과 API로 데이터를 취득하는 부분을 분리 시키기 위한 디자인 패턴이다. 그리고 서버와의 통신(api request)을 하기위해 개발할 때 고민해야 할 사항들을 해결해 줄 수 있다. api 재사용? 매번 URL을 다시 적어야 하나? 엔드포인트가 바뀌었을 때는 어떻게 됩니까? 다른 프로젝트에서 API 호출 처리를 재사용하고 싶은 경우는 어떻게 됩니까? 코드를 리팩터하거나 Vux의 actions로 이동하는 경우는 어떻게 됩니까? 여러 개의 리소스가 있는데, 네 개의 다른 엔드포인트를 정의해야 합니까? 테스트를 mock의 엔드포인트를 어떻게 다룰 수 있습니까? api.ts import { NuxtAxiosInstance } from '@nuxtjs/axio..
보호되어 있는 글입니다.
Nuxt에서 Vue I18n으로 국제화(다국어) 적용하기
개요 다국어 적용 1. package install $ yarn add @nuxtjs/i18n 2. plugins로 type 확장시키기 (이건 vue용) tsconfig.json { "compilerOptions": { "types": [ "@nuxt/types", "@nuxtjs/i18n", ] } } nuxt.confing.js modules: [ // https://go.nuxtjs.dev/axios '@nuxtjs/axios', // '@nuxtjs/firebase', 타입적용이 어려워서 nuxtjs/firebase는 안쓰는쪽으로함 // https://i18n.nuxtjs.org [ '@nuxtjs/i18n', { // 대응할 언어들 셋팅 locales: [ { code: 'ko', name: '..
Vue Props로 Array, Object의 default를 arrow function으로 하는 이유
개요 props로 object나 array를 내릴 경우에 default로 () => {}, () => [] 로 arrow function으로 값을 반환하는 이유에 대해서 알아보자 본론 ⬇︎ 이러한 에러는 아마 vue를 써본분이라면 한번쯤은 경험해 본 적이 있을꺼같다. 무엇을 위해? warning을 하는지 이 규칙을 무시하고 함수로 안하면 어떻게 될까? AppCounter.vue {{ obj.count }} +1 App.vue 위의 버튼을 클릭하든 아래의 버튼을 클릭하든 값이 동시에 더해져 버린다.. (마우스가 왜 안보이지 ㅠ 위 아래 버튼 번갈아가며 클릭중입니다.) 밑의 주소에서 직접 테스트 가능 https://codesandbox.io/s/lp603xn3r7 결론 data를 함수로 선언해서 return..
보호되어 있는 글입니다.
보호되어 있는 글입니다.