profile
Frontend Engineer@Laftel Inc. 개발을 재미있게 이것 저것 하는 개발자입니다.
post-thumbnail

Remix로 쉽게 하는 리액트 서버사이드 렌더링

서버 사이드 렌더링, 데이터 요청 처리, 배포 등을 쉽게 할 수 있게 해주는 Remix 웹 프레임워크를 사용하는 방법을 알아봅시다. 이 프레임워크는 React Router의 API와 호환이 아주 잘 되며 Next.js 대신 사용할 만한 아주 멋진 기술입니다.

4일 전
·
2개의 댓글
post-thumbnail

벨로그에 다크 모드 적용하기

다크 모드는 2020년의 트렌드였고, 2022년인 지금, 너무나도 당연해져서 없으면 사용자가 많이 불편해 하죠. 다크 모드는 벨로그에도 정말 필요했는데요, 미루고 미루다가 드디어 이번 설날 연휴를 맞이하여 이를 적용한 이야기를 여러분들에게 들려드립니다.

2022년 2월 1일
·
24개의 댓글
post-thumbnail

2021.log

올해도, 쓸지 말지 굉장히 고민했다. 지난 1년을 되돌아 봤을 때 눈에 보일만한 아주 대단한 성과는 없었지만, 그래도 1년전과 비교했을 때 더 나은 ‘나’ 가 됐다는 사실에는 의심이 없다. 수 많은 배움이 존재했고 완벽하진 않았어도 멋진 한 해였다.

2021년 12월 31일
·
15개의 댓글
post-thumbnail

React Router v6 튜토리얼

리액트 라우터 v6를 새로 접하시는 분들을 위한 튜토리얼을 작성했습니다. 리액트 라우터 v6 의 기본적인 사용법, 그리고 이 라이브러리에서 제공하는 다양한 유용한 기능들에 대해서 알아봅시다.

2021년 12월 27일
·
7개의 댓글
post-thumbnail

Redux 어떻게 써야 잘 썼다고 소문이 날까?

40% 이상의 개발자들이 리액트 프로젝트에서 사용하고 있는 리덕스(Redux), 더 잘 쓰는 방법을 알려드립니다. 리덕스 말고 다른 선택지, 그리고 리덕스를 사용 할 떄 알고있으면 유용한 팁들을 다룹니다.

2021년 1월 28일
·
19개의 댓글
post-thumbnail

네이티브 앱 → 리액트 네이티브 앱 전환 그리고 1년 후

라프텔에서 네이티브 앱으로 구현되어 있던 환경을 리액트 네이티브 앱으로 전환 한 지 1년이 되었습니다. 그동안의 배움에 대해 공유합니다.

2021년 1월 7일
·
5개의 댓글
post-thumbnail

2020.log

2020년은 별로였다. 1년 동안 나는 무엇을 했을까? 비교적 무난하고 여유로웠던 한 해였다.

2021년 1월 1일
·
24개의 댓글
post-thumbnail

벨로그 홈에 그리드 뷰 되살리기 2편: UI 목업(Mock-up) 만들기

벨로그 홈을 새로 디자인하기 위하여 UI 목업을 준비하면서 했던 고민들을 정리하여 포스트로 작성해보았습니다.

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

벨로그 홈에 그리드 뷰 되살리기 1편: 문제 확인과 벤치마킹

이번에 벨로그 홈에 그리드 뷰를 되살릴 계획인데요, 이 과정을 포스트로 남기면 재밌을 것 같아서 이렇게 시리즈를 시작합니다! 이번 포스트를 통해 제가 어떤 생각을 하면서 UX를 기획하는지 엿볼 수 있을겁니다!

2020년 2월 20일
·
8개의 댓글
post-thumbnail

2019.log

벌써 2019년도 끝났다. 쓸 이야기가 많고 생각을 정리할 것도 많아서 결국 2020년 1월 1일에 릴리즈하고 말았다! 역시, 회고록은 12월 초부터 작성하기 시작해야 한다. 내년엔 꼭 회고록을 부지런히 써야겠다. 복학을 안했다. 왜? 원래 내 계획상으로는 지금 이 시점에 난 복학해서 홍콩에 가있을 줄 알았는데 복학은 무슨..! 아직 한국에 남아서...

2019년 12월 31일
·
28개의 댓글
post-thumbnail

원티드 - 요즘 "프론트엔드 개발" 어떻게 하지? 참관 후기

12/4일 원티드에서 진행한 요즘 "프론트엔드 개발" 어떻게 하지?라는 행사에 참관했다. 이렇게 평일에 진행하는 행사에 참여해보는것은 진짜 드문 것 같다. 사무실이 마포 합정에 위치해서 강남으로 오는게 엄청난 고역이라 매번 재밌어 보이는 행사도 그냥 생략해왔었는데, 요새 평상시보다 그래도 조금은 더 여유로워서 다녀올 수 있게 되었다. 이번 행사는 원...

2019년 12월 7일
·
17개의 댓글

CRA로 만든 프로젝트에 Storybook 적용 / 유용한 팁 / 강의를 마치면서..

6. CRA로 만든 프로젝트에 storybook 적용 우리가 디자인 시스템을 만들때만 스토리북을 사용 할 수 있는건 아닙니다. 꼭 디자인 시스템이 아니여도, 기존에 존재하던 웹 프런트엔드 프로젝트에 스토리북을 적용하면 컴포넌트 문서화를 할 때 편하므로 매우 유용합니다. 디자인 시스템을 만들기 위하여 프로젝트를 아예 분리하는것이 번거로운 상황이라면, 기존...

2019년 11월 24일
·
5개의 댓글
post-thumbnail

Rollup을 사용하여 디자인 시스템 번들 후, npm 라이브러리로 배포하기

우리가 만든 컴포넌트들을 다른 프로젝트에서도 사용 할 수 있게 해주려면 패키지를 만들어서 npm에 퍼블리시를 해주어야 합니다. (또는, 로컬 패키지로 설정해서 사용하거나 git 레포로 설치하는 방법도 존재합니다.) 라이브러리를 배포하려면, 우리가 보통 웹 애플리케이션을 webpack / parcel 과 같은 도구로 번들링하는 것 처럼 라이브러리도 번들링을...

2019년 11월 24일
·
0개의 댓글
post-thumbnail

Storybook을 활용하여 본격적으로 디자인 시스템 구축하기

스토리북을 쓰는 방법을 어느정도 배웠으니, 이제 Hello 컴포넌트 말고 정말 디자인 시스템에 있어서 유의미한 컴포넌트들을 만들어봅시다. 그런데, 어떤 컴포넌트를 만들어야 할까요? 사실 가장 이상적인것은 프로젝트를 만드는 과정에서 처음부터 디자인 시스템을 구축하고 재사용이 자주 될 것 같은 컴포넌트를 만들게 될 때마다 디자인 시스템에 컴포넌트를 하나씩 ...

2019년 11월 24일
·
4개의 댓글

Storybook 프로젝트에서 TypeScript로 컴포넌트의 props 문서화 편하게 하기

TypeScript 를 사용하면 JavaScript의 불편함을 해결해줄 수 있고, IDE를 더욱 적극적으로 활용 할 수 있게 해줍니다. 특히, 리액트 컴포넌트를 TypeScript 로 작성하면, PropTypes 를 완전히 대체 할 수 있고 훨씬 유용하고 편합니다. 아직 TypeScript 를 사용해본적이 없다면, 타입스크립트 기초 연습 블로그 포스트를 ...

2019년 11월 23일
·
3개의 댓글
post-thumbnail

Storybook을 다양한 Addon과 함께 활용해보면서 사용법 정복하기

Storybook의 기본적인 사용법을 알아보고, 또 다양한 Addons 들을 활용하는 방법을 알아봅시다.

2019년 11월 23일
·
10개의 댓글
post-thumbnail

TypeScript와 Storybook을 사용한 리액트 디자인 시스템 구축하기

TypeScript와 Storybook을 사용하여 나만의 디자인 시스템을 구축해봅시다! 우선, 디자인 시스템이 무엇인지부터 알아보도록 합시다.

2019년 11월 23일
·
4개의 댓글
post-thumbnail

TypeScript 환경에서 Redux를 프로처럼 사용하기

이번에 준비한 튜토리얼에서는 TypeScript 환경에서 Redux를 프로처럼 사용하는 방법을 다뤄보도록 하겠습니다. 왜 제목이 "프로처럼"이냐! 사실은 조금 주관적입니다. 이 튜토리얼에서는 지금까지 제가 다양한 TypeScript/Redux 관련 코드를 읽고, 작성해오면서 그 중에서 제가 맘에 들었던 구조를 소개시켜드리겠습니다. 그런데 프로처럼 사용해...

2019년 10월 3일
·
40개의 댓글
post-thumbnail

TypeScript 환경에서 리액트 Context API 제대로 활용하기

이번 튜토리얼에서는 타입스크립트 환경에서 Context API를 제대로 활용하는 방법에 대해서 다뤄보도록 하겠습니다. Context API를 사용함에 있어서, 코드의 구조를 어떻게 가져갈 지에 대해서는 딱 정해진 방법이 존재하지 않습니다. Context 를 준비하는 과정에서 클래스형 컴포넌트를 사용 할 수도 있고, 함수형 컴포넌트를 사용 할 수도 있죠. 함...

2019년 9월 29일
·
13개의 댓글
post-thumbnail

타입스크립트로 리액트 Hooks 사용하기 (useState, useReducer, useRef)

이번 섹션에서는 타입스크립트를 사용하는 리액트 컴포넌트에서 `useState` 및 `useReducer` 를 사용하여 컴포넌트의 상태를 관리하는 방법과 `useRef` 를 사용하여 컴포넌트 내부에서 관리하는 변수 및 DOM 을 이용하는 방법에 대해서 알아보겠습니다.

2019년 9월 27일
·
12개의 댓글