개발과 일상 사이

들어가며 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 라고 검색하면 공식문서부터 별의별..

들어가며 전 회사에서 한 선배님이 질문을 했다. Blocking 과 Non-blocking, Sync 와 Async 의 차이를 설명할 수 있냐고. 어 음... 하는 사이 선배님이 다시 말을 했다. 그 둘을 설마 같은거라고 이해하고 계신건 아니죠? 음.. 그렇게 알고있는거 같은데요 라고 말했다. 그러자 나한테 그림 하나를 보여주었던 기억이 난다. 그로부터 수 개월 지난 후 부랴부랴 블로그에 정리를 해본다... 가장 대표적인 IBM developerWorks의 2:2 매트릭스 당연히 그림만 봐서는 절대 이해가 안간다. 하지만 한 가지는 알 수 있다. Blocking 이면 반드시 Sync 가 아니고, Non-blocking 이면 반드시 async 도 아니라는 점이다. 그 말인 즉슨, Blocking / Non..

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

거의 1년 가까운 기간동안 글을 쓰지 않았다. (아무도 관심은 없다만) 그동안 이직준비도 하고.. 실제로 정말 오고싶었던 곳으로 이직도 했고.. 여러모로 블로그에는 신경을 못썼다 일단 원래 있던 곳에서는 백엔드/프론트엔드 가리지 않고, 업무별로 나누어서 개발을 해왔다가 새로운 곳에는 FE개발자로 입사를 하게 되었다. 오자마자 무슨 깡이었는지, 기존 프로젝트를 nuxt 기반으로 바꿔버리겠다고 자신만만하게 큰소리 쳐버렸고(nuxt 해본적 없었음ㅋ) 부랴부랴 구글링하며 개발하느라 첫 한달동안은 시간이 정신없이 흘러갔던 것 같다. 개발하면서 나의 노근본에 대해서 다시 한 번 깨닫게 되었으며 팀원들한테 누가 되지 않도록... 열심히 배워야 함을 느끼고 있다.. 아무튼 전환 작업이 다되어가는 시점인 지금부터 짜잘짜..

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