송민준의 개발노트

보호되어 있는 글입니다.

타입스크립트는 2012년 MS에서 만든 오픈소스이다. 타입스크립트를 자바스크립트로 트랜스파일(편의상 컴파일) 한다. 첫번째 장점으로 타입스크립트는 정적 타이핑이고 자바스크립트는 동적 타이핑인데 정적 타이핑은 사용 전에 타입을 만드시 할당해야 한다. 개발자가 에러코드를 작성해도 컴파일 단계에서 식별이 가능하다. 또한 최신 IDE의 경우 컴파일 전 작성 단계에서 식별이 되게 지원이 되고 이는 개발생산성 향상으로 이어진다. (자바, C++ 계열의 개발자들이 좋아한다...) 두번째 장점은 타입스크립트는 ECMA스크립트 표준을 따르고 웹 브라우저보다 훨씬 더 빠르게 자바스크립트의 기능을 실행할 수 있는 것이다. 또한 최신 자바스크립트 문법을 지원하며 모든 브라우저 사양을 지원하는 버전으로 컴파일이 가능하다. 개인..

아래와 같이 특정 파일을 컴파일을 해줬더니 에러가 두둥... 첫 시작부터 에러가 발생했다. // 예시 tsc sample.ts 방법은 윈도우 기준으로 쉘에 들어가서 아래와 같이 명령어를 실행하고 Y로 변경을 해준다. Set-ExecutionPolicy Unrestricted

NPM(Node Package Manager) - 자바스크립트 라이브러리를 설치하고 관리하는 패키지 매니저 package.json -> spring의 pom.xml 처럼 패키지 목록을 관리하고 프로젝트 정보, 스크립트 등을 작성하는 곳 npm init : package.json 및 생성 npm init -y : init 명령어 시 세팅을 기본값으로 설정 npm install [라이브러리명] : [라이브러리] 설치 (명 없으면 package.json에 있는거 전체 설치) npm uninstall 라이브러리명 : 라이브러리 삭제 npm install 라이브러리명 --global(or -g) : 전역으로 설치(프로젝트가 아닌 시스템 레벨에서 사용할 자바스크립트 라이브러리) -- 윈도우 C:\Users\유저명\..

우선 Directive란 무엇인가? Vue 컴포넌트에 특별한 속성으로 사용되고 특정한 동작을 지정해주는 것이다. Vue에서 흔히 사용하는 v-if, v-show, v-text 등이 디렉티브이다. 그렇다면 개발자가 어떤 특정한 기능을 공통적으로 속성에 적용하고 싶다면 커스텀 디렉티브를 이용해서 구현이 가능할 것이다. 추가적인 디렉티브 개념이 알고싶다면 아래의 링크 참고 https://kr.vuejs.org/v2/guide/custom-directive.html 사용자 지정 디렉티브 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 나는 디렉티브를 이용해서 CSR Vue 프로젝트에 스크롤 애니메이션 효과를 구현한 적이 있다. 이번에 Nuxt로 전환하면서 해당 디렉티브..

얼마 전 Vue를 사용해서 프로젝트를 만들어 완성했다. 기본적인 CSR로 개발을 했는데 초기 로딩 속도와 SEO 때문에 SSR 개발을 도와주는 Nuxt를 공부하게 되었다. 그에 앞서 CSR과 SSR을 정리하고자 한다~! 1. CSR(Client Side Rendering) CSR은 SPA(Single Page Application)에서 쓰이는 방법으로 웹서버(Nginx 등)에서 html과 static 파일 번들을 가져온 후, javascript를 통해 동적으로 Rendering하는 방법이다. [장점] 동작하는데 데이터 갱신에만 리소스를 요청하므로 서버 부하가 덜하다. 최초 이후 동작들은 빠르게 Rendering이 가능해서 UX가 뛰어나다. [단점] 다만 SPA는 초기에 한번에 번들되어 오기 때문에 시간이..

프론트 개발을 하면 필수적으로 많이 사용하는 함수들을 모아서 공통 js 파일을 만든다. Vue에서는 어떻게 사용하는지 정리하도록 하겠다. 우선 공통 js를 만들기 전에 플러그인이라는 개념에 대해 알아야한다.(전역 수준으로 함수 만들어서 사용할거니까...) 따로 정리하진 않겠다. https://kr.vuejs.org/v2/guide/plugins.html 플러그인 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 플러그인으로 사용할 공통 js 파일을 plugins이나 assets이나 본인이 선호하는 곳에 아래와 같이 만들어준다. import Vue from 'vue' export default{ install(Vue) { const pt = Vue.prototype..

공부할 때나 실무에서나 개발을 하다보면 정신없게 늘어만 가는 DTO를 보고 어떻게 줄일 수 없을까라는 생각을 하게 된다. 너무 많아져 IDE의 도움 없이는 찾지도 못할 수준이 되는 프로젝트도 있다. 그래서 이번 기회에 DTO에 관한 부분을 고민하고 개선해보기로 했다. 우선 내가 생각하기에 충족되어야 할 조건들은... 아래와 같았다. 1. 패키지 구조에서 보다 간단하게 2. API에 필요한 데이터들만 뽑아낼 DTO 3. Swagger에 명시가 가능하게 4. 필요에 따라 페이징도 적용 가능하게 이것저것 찾아보고 고민해본 결과 inner class 패턴이 보기에 좋고 관리하기도 좋아보였다. Account(계정)을 예로 남겨보겠다. swagger 및 valid 관련 코드는 가독성을 위해 제거했으니 필요하다면 추..