T3ch

일단 Vue js와 Nuxt에 대한 세부적인 내용이 없는 부분은 양해부탁드립니다. Nuxt를 사용하고나서 겪었던 장단점들을 적어보려 합니다. 직관적인 Vue 프레임워크 웹 개발을 쉽고 강력하게 만들어주는 오픈소스 프레임워크인 Nuxt.js로 여러분의 다음 Vue.js 애플리케이션을 만들어보세요. Nuxt 공식 홈페이지에 나와있는 대문 문구입니다. 위 말 그대로 Vue를 front-end 도구로 사용하기 쉽게끔 만들어진 framework입니다. 공식 홈페이지가 한글로 이미 번역이 되어있어서 자세한 설명은 공식 홈페이지를 참조하는게 가장 적합합니다. 이 글에선 직접 NUXT JS로 개발을 하면서 겪었던 내용들을 위주로 작성하였습니다. 기존의 Vue를 쓰면서 필요했던 작업들... 단편적으로 vue를 사용한다는..

사용하다보니 몇 가지 문제점이 있어서 해결방법은 추후에 업데이트하도록 하겠습니다. 원래는 혼자 공부목적으로 쓰다가 실무에서 적용하려다보니 기존에 쓰던 구조에서 변경의 필요성의 느껴졌습니다. 이유는 다음과 같습니다. 상용과 개발환경에 따라 사용하는 데이터베이스가 다릅니다. 하나의 프로그램에서 필요에 여러개의 데이터베이스 접근이 가능해야합니다. 개발서버DB와 상용서버DB가 완벽하게 일치하지 않기 때문에 entity 생성도 별개로 되어야합니다. 이전 챕터까지 진행했다면 sequelize 문법 사용이 가능한 js 파일들 (보통 entity라고 하는 것 같습니다.) 이 생성되었을 겁니다. 하지만 위와같은 제약사항을 해결해야한다면 index.js 파일부터 sequelize-auto 모듈을 사용하여 entity를 생..

블로그에 글을 쓰는게 굉장히 오랜만입니다. 취업하게 되면서 바빠지다보니 블로그 운영을 거의 못하게 되었습니다. 다시 블로그를 활성화시키기 위해 실무에서 개발하면서 경험했던 사항들을 써내려보고자 합니다. Vue의 기초부터 차례차례 적어가려는 이론학습 중심의 카테고리가 아닙니다. 어쩌다보니 회사에서 Vue를 쓰게 되어서 제대로 공부할 새도없이 바로 실전으로 부딪히게 되었는데, 그 과정속에서 했던 삽질들을 적어보려합니다. 물론 제 삽질이 근본적인 해결책을 제시해준다고 할 순 없고 말 그대로 현재 제가 처리하려는 상황을 해결하기 위한 임시방편이 될 수도 있습니다. 문제가 있다면 언제든지 댓글 남겨주시면 감사하겠습니다.

오랜만에 다시 글을 쓰게 됩니다. Sequelize를 쓸 일이 갑자기 생기게 되었네요~ 이전까지는 sequelize를 이용해 define 된 테이블 정보를 가지고 진행을 했었는데, 만약 Models 디렉토리에 제가 정의하지 않은 테이블이 있다면 그 테이블을 sequelize를 통해 사용할 수 있을까요? 흔히 말하는 DML구문은 sequelize 에서는 Model 객체에서만 있는 메소드 입니다. 이 말은 즉, models 디렉토리에 테이블 정보 파일이 있을 때 findOne이나 update 등과 같은 메소드를 사용할 수 있습니다. 근데 내부 DB에는 있는데 제 models 디렉토리에 그 테이블에 대한 js 파일이 없다면 결국 그 테이블은 조작이 불가능합니다. 예를들면 models 디렉토리안에 이 두개의 파..

제너레이터란?: 이터레이터를 사용해 자신의 실행을 제어하는 함수. 일반적인 함수는 호출되면 그 함수가 종료될 때까지 제어권을 완전히 넘기게 되는데 제너레이터에서는 그렇지 않습니다. 특징1. 제너레이터는 언제든 호출자에게 제어권을 넘길 수 있습니다. 2. 제너레이터는 호출한 즉시 실행되지는 않습니다. 대신 이터레이터를 반환하고, 이터레이터의 next 메서드를 호출함에 따라 실행됩니다. 이 두가지 특징을 제외하고는 일반 함수가 동일하다고 설명하고 있습니다. 일단 제너레이터를 만드는 일반적인 예제를 하나 살펴보겠습니다. function* gen() { yield 1; yield 2; yield 3; } let g = gen(); // "Generator { }" => MDN에서 나오는 예제인데요 제너레이터는 ..

문제 설명수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ...1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작성해주..

for ... of 구문에 대해 알아보겠습니다. 기본적인 MDN의 정의는 이러합니다. for...of 문(statement)은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다. 보통 for ...of문은 for ...in문과 비교를 하곤 하는데 중요한 차이점 하나만 짚고 넘어가겠습니다. let info = { 'name' : 'Lee', 'age' : 28, 'sex' : 'm' } for(let i in info){ console.log(i);//name age sex } for(let i of info) { consol..

프린터 문제 설명일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, B, C, D)가 순서대로 인쇄 대기목록에 있고 중요도가 2 1 3 2 라면 C D A B 순으로 인쇄하게 됩니다. 내가 인쇄를 요청한 문서가 몇 번째로 인쇄되..

이번에 알아볼 내용은 let과 const 입니다. 변수와 상수 선언 시에 쓰이는 키워드인데 ES6 이전에는 var 라는 키워드 하나로만 사용했었는데요, ES6에서 등장한 let 과 const는 어떤점에서 다른지 알아보도록 하겠습니다. ※ let : let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다. var 키워드와 비교해서 설명을 하게 되는데, 그럼 var 키워드와 비교했을 때 어떤 차이점이 있는지 알아보겠습니다. 1. 중복선언 var x = 5; var x = 7; var x = 0; var 키워드로는 이렇게 써도 오류가 발생하지 않습니다. 근데 보통 이렇게 변수를 선언하..

이번에 다룰 내용은 default + rest + spread 입니다. 내용은 크게 어렵지 않습니다. 적어도 default는 프로그래밍을 하다보면 많이 듣던 말 중에 하나죠. Rest와 Spread 또한 기존에 ES5에서 사용했던 방법을 좀 더 간결하고 간편하게 작성하기 위한 새로운 연산자를 제공해주는 개념입니다. ❖ default: 기본 값이라는 뜻이죠. 자바스크립트에서는 기본 값이 없다면 undefined 라는 값을 갖고있습니다. 말 그대로 값이 없다는 뜻이죠. 하지만 때에 따라서 값의 입력이 없어도 기본 값을 정해줘야 하는 경우가 있을 겁니다. 1234567//ES5function inc(number, increment) { increment = increment || 1; return number..