티스토리

개발과 일상 사이

검색하기

블로그 홈

개발과 일상 사이

jh-7.tistory.com/m

종후 님의 블로그입니다.

구독자: 6

방명록 방문하기

주요 글 목록

CSR, SPA / SSR, MPA 그리고 Nuxt Universal 들어가며 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) 에서 사용되는 방식 최초 한번의 페이지에 대해서만 서버로 부터 받은 다음, 이후에는 필요한 데이터만 .. 공감수 3 댓글수 4 2022. 1. 11.
Vue css variables (style 영역에서 동적인 값 쓰고싶을 때) 프로젝트 진행 중에 단순 마크업 작업으로 해결할 수 없는 디자인 이슈가 생겼다. API로 부터 받은 데이터를 기반으로 컴포넌트별로 동적으로 다른 css를 적용해야 했다. 물론 template 내에서 inline style 을 적용할 수도 있었지만 영역에서 동적인 값을 사용하는 법을 알아보게 되었다. 그러다가 알게 된 css variables 이라는 놈... 역시 근본이 없어서 이런거 하나 몰랐다 기존에는 SASS 및 LESS 등을 사용하면서 css 변수를 사용해왔는데, 순수 css 에서도 css variable 이라는 기술을 통해 재활용 가능한 변수를 사용할 수 있었다. (물론 IE는 안됨ㅋ) CSS Variables 이녀석에 대한 정보라면 사실 CSS Variables 라고 검색하면 공식문서부터 별의별.. 공감수 7 댓글수 0 2021. 11. 5.
Blocking, Non-blocking, Sync, Async 의 차이 들어가며 전 회사에서 한 선배님이 질문을 했다. Blocking 과 Non-blocking, Sync 와 Async 의 차이를 설명할 수 있냐고. 어 음... 하는 사이 선배님이 다시 말을 했다. 그 둘을 설마 같은거라고 이해하고 계신건 아니죠? 음.. 그렇게 알고있는거 같은데요 라고 말했다. 그러자 나한테 그림 하나를 보여주었던 기억이 난다. 그로부터 수 개월 지난 후 부랴부랴 블로그에 정리를 해본다... 가장 대표적인 IBM developerWorks의 2:2 매트릭스 당연히 그림만 봐서는 절대 이해가 안간다. 하지만 한 가지는 알 수 있다. Blocking 이면 반드시 Sync 가 아니고, Non-blocking 이면 반드시 async 도 아니라는 점이다. 그 말인 즉슨, Blocking / Non.. 공감수 39 댓글수 7 2021. 10. 19.
Nuxt 의 레이아웃 layouts 화면을 구성할때 반드시 잡아놓는것... 바로 레이아웃이다. 흔히들 말하는 GNB, LNB, 컨텐츠 등등... 아무튼 화면개발 하게되면 이건 무조건 잡고 가는거다 Nuxt 에서는 간편하게도 layouts 라는 디렉토리를 통해 화면별 사용할 레이아웃들을 만들어 둘 수가 있다. 레이아웃은 크게 3가지 종류가 있다고 내가 맘대로 정했다 1. default 레이아웃 말그대로 모든 화면에 적용되는 default 레이아웃이다. 파일명을 default.vue 로 만들면 그것이 디폴트 레이아웃이 된다. 예시로 든 Header 와 Footer 는 실제로 만들어둔 컴포넌트이며, Nuxt 컴포넌트에서 화면 routing 이 일어난다. 즉 화면의 상단과 하단에 공통적으로 항상 출력되는 컴포넌트가 있을 때, default.vue.. 공감수 1 댓글수 0 2021. 8. 22.
오랜만에 업로드 하면서 써보는 일기 거의 1년 가까운 기간동안 글을 쓰지 않았다. (아무도 관심은 없다만) 그동안 이직준비도 하고.. 실제로 정말 오고싶었던 곳으로 이직도 했고.. 여러모로 블로그에는 신경을 못썼다 일단 원래 있던 곳에서는 백엔드/프론트엔드 가리지 않고, 업무별로 나누어서 개발을 해왔다가 새로운 곳에는 FE개발자로 입사를 하게 되었다. 오자마자 무슨 깡이었는지, 기존 프로젝트를 nuxt 기반으로 바꿔버리겠다고 자신만만하게 큰소리 쳐버렸고(nuxt 해본적 없었음ㅋ) 부랴부랴 구글링하며 개발하느라 첫 한달동안은 시간이 정신없이 흘러갔던 것 같다. 개발하면서 나의 노근본에 대해서 다시 한 번 깨닫게 되었으며 팀원들한테 누가 되지 않도록... 열심히 배워야 함을 느끼고 있다.. 아무튼 전환 작업이 다되어가는 시점인 지금부터 짜잘짜.. 공감수 1 댓글수 0 2021. 8. 22.
javascript 에서의 this 자바스크립트에서의 this 는 자바에서의 this 와는 다르게 매번 헷갈리는 녀석이다. 결론적으로 말하자면 자바스크립트에서의 this는 this를 사용하고 있는 함수가 어떻게 호출된 함수냐에 따라 달라진다. 어떻게 호출된 함수냐에 대한 경우는 크게 3가지가 있다. - 일반 함수 호출 - 메소드 호출 - 생성자 호출 1. 일반 함수로서 호출 기본적으로 this 는 전역 객체에 바인딩 된다. (브라우저에서는 window, Node에서는 global 객체) 전역 함수, 내부 함수, 심지어 콜백 함수도 모두 this 는 global 객체를 가리키게 된다. // 전역 함수 function testFunc1 () { console.log(this) // Window } const testObj = { // 메소드 .. 공감수 2 댓글수 0 2020. 11. 8.
Vue 의 화면 갱신은 비동기였다.. 근본없는 개발자가 무작정 개발하고 테스트하려니 매번 별것도 아닌 곳에서 막힌다. 아래와 같은 코드가 있다고 하자. Vue.component('example', { template: '{{ value }}', data () { return { value: false } }, methods: { onButtonClick () { this.$router.push('home') } } }) 버튼을 클릭하면 $router.push 가 호출되는 간단한 예제이다. 단, 버튼에는 disabled 속성이 value 라는 변수와 바인딩 되어있다. 만약 value에 true 를 주게되면 당연히 버튼은 활성화 될 것이다. 그렇다면 아래와 같은 테스트코드를 짤 수 있다. (mount 부분은 생략하겠다.) wrapper.setD.. 공감수 6 댓글수 0 2020. 8. 15.
Vue Test Utils 에서 mount 와 shallowMount 의 차이 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.. 공감수 3 댓글수 0 2020. 6. 15.
Vue 에서 배열 및 오브젝트의 변경 감지 데이터가 변경되면 Vue는 해당 데이터가 변경된 것을 감지하여 화면을 다시 렌더링한다. 그런데 문제는 배열과 오브젝트에 대해서는 변경을 감지하지 못할 수도 있다. 일단 예를 하나 들어보겠다. Click Me! {{ item }} 버튼을 누르면 testArr 의 4번째 인덱스 값을 바꾸는 로직이다. 그런데 버튼을 눌러보면, 실제로 데이터는 로직대로 바뀌었지만 화면이 갱신되지 않는다. (물론 $forceUpdate 로 화면을 강제로 갱신해버릴수는 있다.. ) Vue는 배열의 특정 메소드들을 래핑하여 해당 메소드의 호출이 있을때 변화를 감지하고 화면을 갱신한다. push() pop() shift() unshift() splice() sort() reverse() 위의 메소드들을 실행해보면, 화면 갱신이 자동으.. 공감수 5 댓글수 0 2020. 5. 2.
async function과 Promise 비동기 작업(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.. 공감수 1 댓글수 0 2020. 4. 26.
근본에 대하여 근본(根本) 1. 초목의 뿌리. 2. 사물의 본질이나 본바탕 3. 자라 온 환경이나 혈통 나에게 질문해본다. 나는 근본이 있는가? 아니. 난 근본이 없다. 나의 근본은 매우 빈약한 근본이다. 이러한 근본을 극복하기 위해서는 많은 노력이 필요하다. 내 노력과 근본에 비해서 그 동안 잘 풀려왔을 뿐이다. 하지만 그 운은 여기까지 일 수도 있다. 여기서 더 나아가려 할 때 빈약한 나의 근본이 발목을 붙잡을 수 있다. 2020년에는 근본을 극복하기 위한 많은 노력을 하자. 공감수 1 댓글수 0 2020. 3. 25.
javascript 의 Concurrency model 과 Event Loop AWS Lambda 의 context 객체에는 callbackWaitsForEmptyEventLoop 라는 프로퍼티가 있다. 저녀석에 대해 알아보다가 이참에 자바스크립트의 이벤트 루프에 대해 정리해보려 한다. (이번에 다루는 것은 Node.js 의 libuv에 대한 얘기는 아니다.) 시작하기에 앞서 자바스크립트의 동작 원리에 대해 정리해보자. 일반적으로 자바스크립트를 사용하고있는 브라우저에는 크게 2가지 엔진이 있다. 1. 자바스크립트 코드를 읽어들여 실행하는 자바스크립트 엔진(javascript engine) 2. html, css 코드를 가지고 브라우저에 화면을 그려내는 렌더링 엔진(rendering engine) Chrome 과 Node.js 가 구글의 V8 엔진을 사용하고 있다는 것을 많이 들었을.. 공감수 1 댓글수 0 2020. 2. 1.
callback function (콜백함수)를 Promise 로 변환 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 = () .. 공감수 1 댓글수 2 2019. 12. 7.
[애자일] MVP 란? 애자일 혹은 린스타트업 등의 방법론에서 굉장히 자주 등장하는 단어중에 mvp가 있다. mvp는 다음의 약자이다. Minimum Viable Product 최소 실행 가능한 제품 좀 더 간단하게는 '최소 기능 제품' 혹은 '최소 요건 제품' 정도로 생각하면 될 것 같다. 여기서 말하는 최소 기능이란 고객이 꼭 필요로 하는 기능들이다. 최소 기능 제품이라고 해서 대충 껍데기만 있는 제품을 말하는게 아니라 고객이 실제 실행하려는 비즈니스가 올바로 동작하는 최소한의 기능을 갖춰야 한다. MVP를 통해 고객에게 필요한 기능을 빠르게 제공함과 동시에, 고객으로부터 피드백을 받을 수 있다. 그림을 보고 이해할 수 있듯, 고객이 필요로 하는 기능이 있는 상태에서 제품이 제공되어야 한다. 이후 위의 과정을 반복해가며 고.. 공감수 5 댓글수 1 2019. 9. 16.
Mongoose Query Builder 몽구스 쿼리 빌더 RDB만 써오던 나란 사람은 noSql을 잘 다루지 못하는 상황에서 무턱대고 몽고DB를 쓰고 있다. 쿼리도 짤 줄 모르면서 어째어째 잘 쓸 수 있는 이유는 Mongoose의 쿼리빌더 덕분이다. 물론 회사에서 현재 진행중인 프로젝트가 nodejs 상에서 knex를 사용하고 있기 때문에 (postgresql 이긴 하지만) Mongoose의 쿼리빌더가 생소하게 느껴지진 않았다. 몽구스 쿼리빌더! 누구나 꼭 쓸만한 아주아주 기본적인! 몇가지만 정리해 보려고 한다. 일단 아래와 같이 Player 라는 model이 있다고 가정해보겠다. const Player = new mongoose.Schema({ name: String, team: String, age : Number }) where 가장 기본적인 놈이다. 말.. 공감수 0 댓글수 0 2019. 9. 10.
AWS Lambda 배포 시 alias 명시하는 법 (+주의사항!) aws 람다를 이용하여 개인 프로젝트를 진행하고 있는데, 개발과 운영의 버전을 따로 가져가려고 alias를 주어야 하는 상황이 생겼다. 별거 아닌 이 작업에서 며칠간 엄청난 삽질을 하여 알아낸 것을 정리하고자 한다. (사실 회사 프로젝트에선 이미 많은 능력자 분들이 좋은 환경을 구성해 놓았는데, 개인 프로젝트에서 그것을 좀 흉내내려고 했다...) 일단 serverless framework 를 사용하고 있다는 전제하에 글을 작성하겠다. 기본적인 serverless 패키지 상에서는 배포 시 alias를 명시할 수가 없다. deploy 명령어를 통해 배포를 하게 되면 람다들은 $LATEST 라는 버전으로 배포가 될 것이다. 물론 그렇게 배포 하고나서 aws console 에 직접 접속하여 버전별 alias를 .. 공감수 2 댓글수 0 2019. 9. 2.
javascript 자주쓰는 Array 메소드 2편(some, every, filter) 앞서서 설명한 forEach와 map은 정말 많이 쓰니 꼭 알아둬야한다. 근데 이번에 설명한 some, every, filter 는 앞의 두녀석보다는 상대적으로 덜 쓰게 된다. (filter는 자주 쓰는거 같다) 심지어 some, every 의 존재 자체를 깜빡한 채 해당 기능을 반복문으로 직접 구현할때도 있었다... 평상시에 정리해두면서 머리속에 팍팍 넣어놔야 겠다. 세가지 메소드 모두 인자로는 (요소, 인덱스, 배열자체) 를 받는다. 예제에서는 요소 하나만 인자로 받아서 설명하도록 하겠다. (실제로도 거의 이렇더라 나는) some 배열의 요소중 하나라도 특정 조건을 만족하는지 true, false로 리턴해주는 메소드다. (이름 참 명확하다) 참고로 요소를 돌면서 조건을 만족하는 요소를 만나면 그 즉시.. 공감수 0 댓글수 0 2019. 8. 7.
javascript 자주쓰는 Array 메소드 1편(forEach, map) 개발을 하면서 정말 많이 사용되는 녀석들... 바로 array 메소드들이다. 매번 필요한 기능이 있을 때마다 구글링을 하게 되는데 array 메소드의 경우 하도 자주 쓰니 이참에 정리를 해보려고 한다. 이번 포스팅의 경우 배열의 원소 하나하나에 접근하는 공통점을 가진 forEach와 map에 대해서 차이점을 정리하겠다. forEach 배열 안에 존재하는 요소에 하나하나 접근을 하여 원하는 로직을 구현할 수 있다. 함수 인자로는 순서대로 원소, 인덱스, 원본배열 이다. (사실 인자는 보통 첫번째만, 기껏해야 인덱스 까지만 사용되더라... map도 마찬가지고) 간단히 숫자들로 구성된 배열들의 합을 구한다면 아래와 같이 구현하면 되겠다. let numArr = [1,2,3,4,5] let sum = 0 // .. 공감수 0 댓글수 0 2019. 8. 5.
CommonJS와 ES6의 모듈(module) 시스템 먼저 자바스크립트의 모듈시스템에 대해 설명하자면 기존에는 html 파일에서 태그를 이용하여 필요한 자바스크립트 파일들을 불러왔다. 이러한 방식에는 큰 문제가 있었는데 html 파일에서 불러와진 여러 자바스크립트들이 서로 다른 파일임에도 불구하고 서로가 의존적이게 되어버렸다... 부가적으로 파일들을 로드하는 순서도 중요했고... 이러한 점을 보완하기 위해 등장한 것이 바로 모듈 시스템이다. 간단히 말하면 외부에서 사용할 수 있게 특정 함수나 오브젝트 등을 모듈화 하고, 해당 모듈을 사용하려는 쪽에서는 필요한 모듈만 불러와서 사용하면 된다. 모듈을 정의하기 위한 문법에는 여러가지가 있다. (모듈 포맷) 대표적으로 AMD, CommonJS, ES6 등이 있는데 이 포스팅에서는 CommonJS와 ES6를 비교해.. 공감수 4 댓글수 0 2019. 7. 10.
[애자일] 트럭(버스) 팩터란? 트럭팩터 (혹은 버스팩터) 주로 애자일에서 사용되는 단어인데, 간단히 설명하면 다음과 같다. 팀원 중 몇명이 버스(혹은 트럭)에 치어죽어야 프로젝트가 심각한 상태에 놓이는지를 나타내는 지표다. 극단적인 표현일 뿐, 퇴사나 휴가 등으로 빠지는 경우로 이해하면 될 것 같다. 로또 팩터라고도 하는데, 로또에 당첨되면 퇴사를 하니 결국엔 같은 의미이다. 트럭팩터가 1 이라면 -> 특정인 1명만 빠져도 프로젝트가 심각해진다. 라고 이해하면 되는 것이다. 반대로 트럭팩터가 10 이라면, 10명이나 치어죽어야 프로젝트가 망한다는 뜻이니 트럭팩터가 높을 수록 해당 프로젝트의 리스크가 작다고 볼 수 있다. 즉 현재의 문제라기 보다는 잠재적인 문제점 (특히 인적자원) 을 나타내기에 좋은 지표라고 할 수 있다. 특정 인원에.. 공감수 0 댓글수 0 2019. 4. 5.
[스프링부트 기초3] Postman과 H2 를 이용한 CRUD API 확인 지난 강의까지 만든 REST로 구현한 간단한 CRUD API 를 실제로 호출해보겠습니다. resources 폴더 내에 있는 application.properties 파일 명을 application.yml 으로 변경합니다. 두 확장자 모두 설정 파일 입니다만, yml 파일이 지원하는 특유의 직관적이고 유연한 구조 덕분에 yml 파일이 최근들어 많이 사용되고 있습니다. application.yml 1 2 3 4 spring: h2: console: enabled: true cs 프로젝트 생성 시 dependency에 추가해두었던 H2를 활성화 했습니다. 실제로 CRUD 기능을 테스트 하기 위해서는 당연히 DB 테이블을 직접 확인해봐야겠죠? 다행히 H2 는 별도의 클라이언트 프로그램 없이 웹 상에서 콘솔을 제.. 공감수 0 댓글수 2 2019. 3. 10.
[스프링부트 기초2] JPA를 활용하여 CRUD API 만들기 1편 강의에서 간단한 스프링부트 웹서버를 띄우는거까지 했으니 이번에는 특정 도메인 모델에 대한 CRUD 기능을 제공하는 API 를 만들어보겠습니다. 도서관리 기능을 제공하는 예제로 진행하겠습니다. 우선, 도서관리의 기본이 될 Book 클래스를 생성해 보겠습니다. 위와같은 패키지와 클래스 파일을 생성해주세요. Book 클래스 도서관리 API 를 만드는 예제이기 때문에 저희 예제의 도메인 모델은 '책' 입니다. 소스는 다음과 같습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 @NoArgsConstructor(access = AccessLevel.PROTECTED) @Getter @Setter @Entity public cla.. 공감수 4 댓글수 1 2019. 3. 3.
KCD 2019 참관기 to_date('20190223','YYYYMMDD') 토요일어느덧 미리 신청해두었던 KCD 2019 행사 날짜가 되어 동기와 함께 다녀왔다. 아마 지난번에 왔을때는 2017년이었던 것 같은데, 전반적인 행사의 진행 방식은 큰 차이가 없었다.장소 역시 광화문에 있는 한국 마이크로소프트로 동일했다. ↑ 후원 업체들과 참여 커뮤니티들의 숫자가 꽤 많다! ↑ 선착순으로 식권과 사은품을 준다는 말에 다소 일찍 가서 그런지, 당시엔 아직 많은 부스가 제대로 준비가 되지 않았었다.(어쨌든 사은품을 받았다 후후) ↑ 다양한 부스에서 설문조사에 응하면 해당 회사나 커뮤니티의 상품과 스티커를 받았다. ↑ 이날 엄청나게 많은 스티커를 겟했다.(뿌듯) 개인적으로는 역시 라인과 카카오의 스티커가 귀여웠다. ↑ 각 커뮤니티 장.. 공감수 0 댓글수 0 2019. 2. 24.
[디자인패턴] 빌더 패턴 Builder Pattern (객체 생성 방법) 빌더 패턴(Builder Pattern)은 일반적으로 객체를 생성할 때 사용하는 패턴이다. 특히 생성자에 들어가는 매개변수가 많을 때, 해당 클래스는 단순 생성자 호출 대신에 Builder 패턴을 사용하는게 유리하다. 빌더 패턴의 장점을 이해하기 쉽게 빌더 패턴 외의 객체 생성 방법을 먼저 보자. 1. 점층적 생성자 패턴( telescoping constructor pattern) 가장 일반적인 패턴이다. 간단히 요약하면 매개변수를 1개 받는 생성자, 2개 받는 생성자 ~ (반복) 결국에는 전부 다 받는 생성자까지 모두 만들어 주는 방식이다. 123456789101112131415161718192021222324public class Person { private final String name; pri.. 공감수 2 댓글수 3 2019. 2. 14.
[스프링부트 기초1] 스프링부트(Spring Boot) 시작하기 (IntelliJ) 맥북도 사게 된겸 스프링부트를 공부하게 되었다. (맥북이랑 뭔상관인가 싶긴하다.) 또한 IDE 로 기존에 써왔던 이클립스(STS) 말고 많이들 쓰고 있는 인텔리제이를 선택하였다. (처음 사용하면서 느끼는 점은.. 버벅임 없이 빠른 것과 자동완성이 정말 잘 나오는 것?) 인텔리제이와 스프링부트를 처음 배우는 입장에서 작성한 글인지라 수정해야할 내용이나 추가적으로 알아야할 내용에 대해서는 적극적으로 댓글 부탁드립니다. 개발 환경은 크게 다음과 같습니다. IDE: IntelliJ IDEA Ultimate JAVA: 1.8 ↑ 신규 프로젝트를 생성하면서, 왼쪽에서 Spring Initializer 를 선택한다. ↑ 위 화면을 참고하며 작성하되, Group 및 Artifact는 본인 맘대로 작성해도 무관하다. (.. 공감수 2 댓글수 4 2019. 2. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.