개발과 일상 사이

들어가며 React, Vue 등을 활용하여 개발한 웹서비스는 대부분 SPA로 개발되었을 것이다. 그러나 SPA 에도 명백히 단점이 존재하고, 해당 단점을 극복하기 위해 위와같은 SPA 프레임워크를 쓰면서도 SSR이 되어야 하는 상황이 존재할 것이다. 그러한 것을 가능하게 하는 Next.js, Nuxt.js 등의 프레임워크가 있는 것이고 그 중에서도 오늘은 Nuxt.js 의 Universal Mode를 정리해보려고 한다. 시작하기에 앞서서 CSR, SSR 부터 정리해보자. CSR (Client Side Rendering) React, Vue 등을 활용한 SPA (Single Page Application) 에서 사용되는 방식 최초 한번의 페이지에 대해서만 서버로 부터 받은 다음, 이후에는 필요한 데이터만 ..

프로젝트 진행 중에 단순 마크업 작업으로 해결할 수 없는 디자인 이슈가 생겼다. API로 부터 받은 데이터를 기반으로 컴포넌트별로 동적으로 다른 css를 적용해야 했다. 물론 template 내에서 inline style 을 적용할 수도 있었지만 영역에서 동적인 값을 사용하는 법을 알아보게 되었다. 그러다가 알게 된 css variables 이라는 놈... 역시 근본이 없어서 이런거 하나 몰랐다 기존에는 SASS 및 LESS 등을 사용하면서 css 변수를 사용해왔는데, 순수 css 에서도 css variable 이라는 기술을 통해 재활용 가능한 변수를 사용할 수 있었다. (물론 IE는 안됨ㅋ) CSS Variables 이녀석에 대한 정보라면 사실 CSS Variables 라고 검색하면 공식문서부터 별의별..

화면을 구성할때 반드시 잡아놓는것... 바로 레이아웃이다. 흔히들 말하는 GNB, LNB, 컨텐츠 등등... 아무튼 화면개발 하게되면 이건 무조건 잡고 가는거다 Nuxt 에서는 간편하게도 layouts 라는 디렉토리를 통해 화면별 사용할 레이아웃들을 만들어 둘 수가 있다. 레이아웃은 크게 3가지 종류가 있다고 내가 맘대로 정했다 1. default 레이아웃 말그대로 모든 화면에 적용되는 default 레이아웃이다. 파일명을 default.vue 로 만들면 그것이 디폴트 레이아웃이 된다. 예시로 든 Header 와 Footer 는 실제로 만들어둔 컴포넌트이며, Nuxt 컴포넌트에서 화면 routing 이 일어난다. 즉 화면의 상단과 하단에 공통적으로 항상 출력되는 컴포넌트가 있을 때, default.vue..

자바스크립트에서의 this 는 자바에서의 this 와는 다르게 매번 헷갈리는 녀석이다. 결론적으로 말하자면 자바스크립트에서의 this는 this를 사용하고 있는 함수가 어떻게 호출된 함수냐에 따라 달라진다. 어떻게 호출된 함수냐에 대한 경우는 크게 3가지가 있다. - 일반 함수 호출 - 메소드 호출 - 생성자 호출 1. 일반 함수로서 호출 기본적으로 this 는 전역 객체에 바인딩 된다. (브라우저에서는 window, Node에서는 global 객체) 전역 함수, 내부 함수, 심지어 콜백 함수도 모두 this 는 global 객체를 가리키게 된다. // 전역 함수 function testFunc1 () { console.log(this) // Window } const testObj = { // 메소드 ..

근본없는 개발자가 무작정 개발하고 테스트하려니 매번 별것도 아닌 곳에서 막힌다. 아래와 같은 코드가 있다고 하자. Vue.component('example', { template: '{{ value }}', data () { return { value: false } }, methods: { onButtonClick () { this.$router.push('home') } } }) 버튼을 클릭하면 $router.push 가 호출되는 간단한 예제이다. 단, 버튼에는 disabled 속성이 value 라는 변수와 바인딩 되어있다. 만약 value에 true 를 주게되면 당연히 버튼은 활성화 될 것이다. 그렇다면 아래와 같은 테스트코드를 짤 수 있다. (mount 부분은 생략하겠다.) wrapper.setD..

Vue 에서 테스트 코드를 짜기 위해서 Vue Test Utils 를 사용하는데, 테스트 코드에서 Wrapper 를 만드는 메소드는 mount 와 shallowMount 두 가지가 있다. 크게 대단한 내용은 없지만 정리할 겸 둘의 차이를 알아보았다. 1. mount Creates a Wrapper that contains the mounted and rendered Vue component. 공식 문서의 설명이다. 말 그대로 mounted 되고 렌더까지 된 뷰 컴포넌트를 생성한다. 여기서 중요한 점은, mount 메소드는 mount()를 한 컴포넌트 뿐만 아니라, 해당 컴포넌트의 자식 컴포넌트 까지도 렌더를 해버린다는 점이다. 간단한 예를 들어보겠다. {{ message }} 위와 같은 부모 컴포넌트(A..

데이터가 변경되면 Vue는 해당 데이터가 변경된 것을 감지하여 화면을 다시 렌더링한다. 그런데 문제는 배열과 오브젝트에 대해서는 변경을 감지하지 못할 수도 있다. 일단 예를 하나 들어보겠다. Click Me! {{ item }} 버튼을 누르면 testArr 의 4번째 인덱스 값을 바꾸는 로직이다. 그런데 버튼을 눌러보면, 실제로 데이터는 로직대로 바뀌었지만 화면이 갱신되지 않는다. (물론 $forceUpdate 로 화면을 강제로 갱신해버릴수는 있다.. ) Vue는 배열의 특정 메소드들을 래핑하여 해당 메소드의 호출이 있을때 변화를 감지하고 화면을 갱신한다. push() pop() shift() unshift() splice() sort() reverse() 위의 메소드들을 실행해보면, 화면 갱신이 자동으..

비동기 작업(function A) 호출 시 await 키워드를 사용하게 되면 function A를 호출하는 함수(function B)는 반드시 async 키워드를 붙여주어야 한다. async function B () { const result = await A() } 단... 이렇게 await을 사용하기 위해선 function A가 Promise를 리턴하고 있어야 한다는 전제가 있다. 마찬가지로 function B를 다른 함수가 await을 이용하여 호출한다고 한다면 function B 는 Promise를 리턴하고 있어야 하는 것이다. 그래서 난 개발인생 내내 아래와 같은 짓을 해왔다. async function B () { const result = await A() return Promise.reso..