profile
웹 개발자입니다
post-thumbnail

처음 React를 2달여간 사용해본 후기, 도입 배경, 앞으로 배울 점

React를 신규 프로젝트에 도입하고 2달여간 사용해본 후기, 사용한 기술 스택, 도입 배경, 앞으로 배울 점 등을 정리해보았습니다.

2020년 1월 23일
·
2개의 댓글
post-thumbnail

프론트엔드 개발 시 고려할 사항 - 최적화

프론트엔드를 개발하면서 고려해야 할 최적화 작업에 대해 간단하게 정리해 보았습니다.

2020년 1월 10일
·
0개의 댓글
post-thumbnail

Vue 3에 도입될 composition api 간단 리뷰

프론트엔드 프레임워크 중 하나인 Vue는 현재 2.6.x 버전이고, 3.x.x 메이저 버전 업데이트를 앞두고 있다. Vue-next에서 확인할 수 있는 Vue3의 주요 변경점은 컴파일러 개선, 타입스크립트 지원 강화, 그리고 composition api 등이 있다. composition api의 경우 Vue 2.x버전에서 사용할 수 있도록 배포되어있다. 이...

2019년 11월 18일
·
1개의 댓글
post-thumbnail

Graphql Apollo client의 fetchPolicy 옵션

최근 회사에서 백엔드 api는 Graphql로, 프론트엔드는 Vue로 작업하고 있다. 나는 프론트엔드에서 vue-apollo라는걸 사용해서 Graphql을 연동해서 사용한다. 이걸 사용하면서 새롭게 알게된 Apollo의 fetchPolicy에 대해 간략히 설명하고자 한다. fetchPolicy 옵션이란? Apollo client에서 graphq...

2019년 10월 31일
·
0개의 댓글
post-thumbnail

AWS codepipeline, codebuild로 SPA 자동배포하기

정적인 싱글 페이지 어플리케이션(SPA)은 AWS S3에서 쉽게 호스팅할 수 있습니다. 이와 더불어 아마존 웹 서비스(AWS)의 CodeBuild, CodePipeline 등의 서비스를 이용하면 CI, CD를 쉽게 구현할 수 있습니다. 이렇게 CI, CD를 구축한다면 더욱 편리하게 테스트, 빌드, 배포가 가능합니다. 이 글에서는 아마존 웹 서비스를 사용...

2019년 10월 4일
·
0개의 댓글
post-thumbnail

Svelte를 조금 더 소개합니다.

이전 글에서는 Svelte의 기초 문법에 대해서 소개했습니다. 이 글에선 이전에 미처 다루지 못한 문법에 대해서 다루겠습니다. 다룰 내용 - 동적으로 class 할당하기 - bind로 입력값 연결하기 - 자식 컴포넌트에 bind 사용하기 - bind:this로 참조 얻어오기 - slot 사용하기 - 특별한 svelte: 엘리먼트 - 후기 ...

2019년 8월 23일
·
2개의 댓글
post-thumbnail

자바스크립트 Factory 패턴 구현하기

팩토리 패턴은 객체 지향 프로그래밍에서 유래된 디자인 패턴입니다. 객체 생성을 단순하게 추상화해서 반복적인 객체들을 생성할 때 사용합니다. 이 글에서는 제가 ES5, ES6+로 팩토리 패턴을 구현하는 몇가지 방법을 짧게 공유하겠습니다. 객체 생성자 함수 ES6에 클래스가 생기기 전에는 다음과 같은 객체 생성자 함수를 만들어서 클래스의 역할을 대신했습...

2019년 8월 19일
·
0개의 댓글
post-thumbnail

웹 프레임워크 Svelte를 소개합니다.

현재 2019년 8월, Angular, React, Vue를 프론트엔드 프레임워크 3대장이라고 합니다. 3대장 프레임워크는 이미 유명하고 많은 기업에서 사용하고 있습니다. 입문용 한글 소개자료도 충분히 존재합니다. 이 글에서는 상대적으로 덜 알려진 웹 프레임워크인 Svelte에 대해 간략하게 소개하겠습니다. 다룰 내용 - svelte 소개 -...

2019년 8월 7일
·
8개의 댓글
post-thumbnail

타입스크립트 class

이 글은 제가 타입스크립트를 공부하면서 정리한걸 옮겨온 것입니다. 타입스크립트(typescript)의  class에 관한 주요 개념을 알아보자. 자바스크립트(javascript)는 프로토타입 기반의 객체지향 프로그래밍이 가능하다. ES6에는 Java나 C++ 처럼 class가 생겼다. 하지만 다른 객체 지향 언어에 비해 자바스크립트 class는 기능...

2019년 7월 20일
·
0개의 댓글
post-thumbnail

자바스크립트 ES6 Map 타입

ES6에 새로 추가된 Map 타입의 기본 문법과 특징을 간단하게 알아보겠습니다. Map은 key와 value가 [key, value] 형식으로 이루어진 리스트입니다. Map 생성 및 요소 추가 Map 객체 생성은 다음과 같이 new Map()으로 하며 set으로 요소를 추가할 수 있습니다. String, Symbol 외 타입을 키로 사용 가능 Ob...

2019년 7월 20일
·
2개의 댓글
post-thumbnail

자바스크립트 콜백부터 async await까지 비동기 처리

1. 동기와 비동기 동기란 어떤 코드가 위에서부터 아래까지 흐름대로 자연스럽게 실행됨을 의미합니다. 좀 더 정확한 예시로 함수A를 실행하면 함수A의 작업이 완전히 끝난 후 다음 작업을 실행하는 것입니다. 위 코드는 함수를 실행한 순서대로 1, 2, 3을 출력합니다. 흐름이 위에서 아래로 동기적입니다. 위 코드는 asyncFunction1을 먼저 실행...

2019년 7월 15일
·
5개의 댓글
post-thumbnail

자바스크립트 rest, spread 문법과 destructuring

모던 자바스크립트에는 더욱 좋은 문법이 많이 추가되었습니다. rest, spread 문법과 destructuring도 그 중 하나입니다. 오늘은 이에 관련된 내용을 작성하겠습니다. 1. 파라미터와 아규먼트 저도 이 stack over flow 문서를 보기 전에는, 파라미터와 아규먼트를 명확히 구분하지 못했습니다. 아규먼트(argument)란 함수를 ...

2019년 7월 15일
·
0개의 댓글
post-thumbnail

Serverless를 이용하여 AWS S3 정적 호스팅하기

정적인 html, 싱글 페이지 어플리케이션(spa)는 아마존 웹 서비스(AWS)의 S3라는 파일서버에 올려서, 간단하게 호스팅 할 수 있습니다. 오늘은 serverless 프레임워크를 이용해서 AWS S3에 정적 호스팅을 간단하게 하는 방법을 알아보겠습니다. 1. npm 프로젝트 생성 node.js 환경에서 동작할거기 때문에 npm 프로젝트를 생성해줍...

2019년 7월 12일
·
0개의 댓글
post-thumbnail

Vue 컴포넌트를 오픈소스로 npm에 배포하기

컴포넌트는 vue.js의 기본 구성 요소입니다. 좋은 컴포넌트를 만들어서 오픈소스로 배포하면, awesome vue 등에 게시될 수 있습니다. 이번 글에서는 컴포넌트를 만들고 npm에 배포하는 방법에 대해 알아보겠습니다. 1. vue-cli 설치 https://cli.vuejs.org/ vue-cli는 create-react-app과 비슷합니다....

2019년 6월 28일
·
0개의 댓글
post-thumbnail

Javascript 깊은 복사의 함정

오늘 자바스크립트의 얕은 복사(shallow copy), 깊은 복사(deep copy)에 관해서 써보고자 한다. 공부해보니 내가 알던 깊은 복사에 커다란 함정이 있었고, 내가 알던 깊은 복사의 기능이 맞는지 의구심이 들었다. 그래서 제목을 자바스크립트 깊은 복사의 함정으로 지었다. 내가 알던 얕은 복사와 깊은 복사 우선 이를 이해하려면 자바스크립트의...

2019년 6월 26일
·
7개의 댓글
post-thumbnail

Vue slot 및 v-slot 사용법

Vue 2.6.0에 v-slot이라는 문법이 추가되었습니다. 기존 slot의 사용법을 간단하게 훝고, v-slot에 대해 알아보겠습니다. slot vue에서 slot은 자식컴포넌트의 엘리먼트를 부모에서 지정할 때 사용합니다. 대신 v-bind(:)나v-on(@)처럼으로 단축해서 쓸 수 있습니다. 또한 동적인 컴포넌트 바인딩과 유사하게 s...

2019년 6월 26일
·
1개의 댓글

타입스크립트를 처음 공부하고 느낀점

Javascript만 할줄 알던 개발자가 처음 Typescript를 공부해보고 느낀점

2019년 6월 14일
·
0개의 댓글
post-thumbnail

Serverless를 이용해서 Nuxt 프로젝트 AWS lambda에 배포하기

최근 클라우드 서비스를 이용한 마이크로 서비스 아키텍쳐(MSA)가 대두되고 있습니다. AWS lambda는 MSA에 적합한 클라우드 서비스입니다. 이를 이용하면 간단한 코드 작성만으로 서버 없이 배포를 할 수 있습니다. serverless 프레임워크는 node.js 환경에서 lambda 배포를 쉽게 할 수 있도록 돕습니다. 이 serverless를 ...

2019년 6월 14일
·
1개의 댓글