profile
프론트엔드 개발자입니다
post-thumbnail

React에서 UI와 비즈니스 로직을 분리하는 기초적인 방법

React에서 UI와 비즈니스 로직을 분리하는 기초적인 방법

약 23시간 전
·
0개의 댓글
post-thumbnail

2020년 6월에 나는 React를 어느정도 쓰고 있는가

지난 프로젝트에 React를 도입해본 배경은 무엇인지, 기술 스택, 프로젝트 구조는 어떻게 했는지, 회고하는 글

2020년 6월 15일
·
1개의 댓글
post-thumbnail

좋은 디자인에 관해서

내가 지향하는 좋은 디자인에 관해 쓴 글

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

React의 useReducer, useCallback, useMemo 제대로 알고 사용하기

useReducer, useCallback, useMemo 제대로 알고 사용해보자

2020년 5월 8일
·
0개의 댓글
post-thumbnail

프론트엔드의 상태관리란 무엇인가?

상태관리의 개념과 예시를 간단하게 살펴보자

2020년 4월 16일
·
0개의 댓글
post-thumbnail

컴포넌트를 단순하게 개선시키기

잘못된 컴포넌트 설계를 개선시키기

2020년 4월 8일
·
0개의 댓글
post-thumbnail

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

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

2020년 1월 23일
·
4개의 댓글
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에 대해 간략히 설명하고자

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

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

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

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

Svelte를 조금 더 소개합니다.

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

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

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

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

2019년 8월 19일
·
1개의 댓글
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일
·
6개의 댓글
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개의 댓글