개발과 일상 사이

들어가며 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) 에서 사용되는 방식 최초 한번의 페이지에 대해서만 서버로 부터 받은 다음, 이후에는 필요한 데이터만 ..

자바스크립트에서의 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..

AWS Lambda 의 context 객체에는 callbackWaitsForEmptyEventLoop 라는 프로퍼티가 있다. 저녀석에 대해 알아보다가 이참에 자바스크립트의 이벤트 루프에 대해 정리해보려 한다. (이번에 다루는 것은 Node.js 의 libuv에 대한 얘기는 아니다.) 시작하기에 앞서 자바스크립트의 동작 원리에 대해 정리해보자. 일반적으로 자바스크립트를 사용하고있는 브라우저에는 크게 2가지 엔진이 있다. 1. 자바스크립트 코드를 읽어들여 실행하는 자바스크립트 엔진(javascript engine) 2. html, css 코드를 가지고 브라우저에 화면을 그려내는 렌더링 엔진(rendering engine) Chrome 과 Node.js 가 구글의 V8 엔진을 사용하고 있다는 것을 많이 들었을..

javascript를 개발하면서 특정 라이브러리들을 사용하다보면 callback function을 사용하는 경우들이 있다. 예를들면 아래와 같은 경우다. request.get(url, function(error, response, data) { if (error) { throw new Error(error) } else { console.log(data) } }) (물론 request 의 경우는 await을 사용할 수 있는 별도 라이브러리가 존재하긴 한다.) 만약 await을 쓰고싶다거나, Promise 체인에서 사용하고 싶다면 위의 함수를 promise로 감싸주어야 한다. (당연한 말이지만 저 앞에다가 await 붙인다고 되는게 아니다..) 아래와 같이 해주면 된다. const getData = () ..