velopert.log - mysetting

2:05 5/30

velog.io

mobile screenshot relative

2:05

velog.io

mobile screenshot

velopert.log
https://velog.io/@velopert

Frontend Engineer@RIDI. 개발을 재미있게 이것 저것 하는 개발자입니다.

저작도구: velog

최종 피드 수집: 2024-04-16 04:16

전체 (27)

1y

2022.log

2022년, 나에게 정말 큰 변화가 있던 한 해였다. 첫 직장이었던 라프텔을 퇴사했다. 그리고 구독형 게임 플랫폼 회사, 체프를 창업을 했다.
왜 퇴사를 했는가?
이 글을 읽는 사람들이 많이 궁금해할 것 같다. 라프텔은 솔직히 모

0012

1y

veltrends 개발 후기

Veltrends는 개발, IT, 디자인, 스타트업 관련 유익하고 재미있는 소식들을 한 눈에 볼 수 있는 서비스입니다.
홈페이지: https://www.veltrends.com/
GitHub Repo: https://github.

000

1y

다른 사람들이 안 알려주는 리액트에서 Context API 잘 쓰는 방법

여러분, 리액트로 웹 애플리케이션 개발 하면서 Context API를 어떻게 사용하고 계신가요? 과거에도 관련 포스트를 작성한적이 있긴 하지만, 지난 몇 년간 Context를 사용하면서 습득하게된 팁들을 여러분들에게 공유하면서 튜

001

1y

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

이 포스트는 책 『리액트를 다루는 기술』 에 수록될 예정입니다.
소스 코드는 여기에서 확인할 수 있습니다.
서버 사이드 렌더링은 UI를 서버에서 렌더링하는 것을 의미합니다. 앞에서 만든 리액트 프로젝트는 기본적으로 클라이언트 사이

000

2y

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

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

008

2y

2021.log

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

2021_회고

1021

2y

리액트 라우터 v6 튜토리얼

지난 11월에 리액트 라우터 v5 → v6 에서 어떤 업데이트가 있었는지 소개하는 영상은 찍었었으나, 리액트 라우터 v6를 새로 접하시는 입문자들을 위하여 리액트 라우터 v6 튜토리얼을 작성하게 됐습니다. 이 내용은 리액트를 다루

002

3y

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

리액트 생태계에는 다양한 상태 관리 관련 라이브러리들이 있습니다. 그 중에서, 리덕스(Redux)가 가장 많이 사용되고 있지요. 통계에 따르면 약 48%의 개발자들이 리액트 프로젝트에서 현재 리덕스를 사용하고 있습니다 [1].

002

3y

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

2020년 2월, 애니메이션 스트리밍 서비스 라프텔에서는 기존에 Android 와 iOS 각각 따로 구현되어 있던 애플리케이션을 리액트 네이티브를 통해 개발을 통합하여 할 수 있도록 리빌드를 했습니다. 이제 릴리즈 후 거의 1년이

000

3y

2020.log

2020년은 별로였다.
2020년엔 처음으로 장기간 재택근무를 해봤고, 덕분에 요리 실력은 늘었다. 그거 말곤 좋은게 딱히 떠오르지 않는다. 라프텔의 2020년 성과가 맘에 든다는 점 정도?
코로나 때문이었을까, 회사 업무외의 활

000

4y

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

그리드 뷰를 사용하는 다양한 사이트를 벤치마킹을 했고, 이제 벤치마킹을 통해 배운 것들 새 벨로그 홈에 적용하여 디자인을 해볼 차례이다.
이번 새로운 디자인에선 다음과 같은 것들을 해보고 싶었다.
사용자 프로필 썸네일을 작은 사이

000

4y

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

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

000

4y

2019.log

벌써 2019년도 끝났고, 2020년이 찾아왔다. 쓸 이야기가 많고 생각을 정리할 것도 많아서 결국 2019년 회고록을 2020년 새해 첫날에 릴리즈 하고 말았다! 역시, 회고록은 12월 초부터 작성하기 시작해야 한다. 내년엔 꼭

000

4y

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

12/4일 원티드에서 진행한 <요즘 "프론트엔드 개발" 어떻게 하지?>라는 행사에 참관했다. 이렇게 평일에 진행하는 행사에 참여해보는것은 진짜 드문 것 같다. 사무실이 마포 합정에 위치해서 강남으로 오는게 엄청난 고역이라 매번 재

000

4y

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

6. CRA로 만든 프로젝트에 storybook 적용
우리가 디자인 시스템을 만들때만 스토리북을 사용 할 수 있는건 아닙니다. 꼭 디자인 시스템이 아니여도, 기존에 존재하던 웹 프런트엔드 프로젝트에 스토리북을 적용하면 컴포넌트 문

006

4y

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

우리가 만든 컴포넌트들을 다른 프로젝트에서도 사용 할 수 있게 해주려면 패키지를 만들어서 npm에 퍼블리시를 해주어야 합니다. (또는, 로컬 패키지로 설정해서 사용하거나 git 레포로 설치하는 방법도 존재합니다.)
라이브러리를 배

000

4y

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

스토리북을 쓰는 방법을 어느정도 배웠으니, 이제 Hello 컴포넌트 말고 정말 디자인 시스템에 있어서 유의미한 컴포넌트들을 만들어봅시다.
그런데, 어떤 컴포넌트를 만들어야 할까요?
사실 가장 이상적인것은 프로젝트를 만드는 과정에서

000

4y

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

TypeScript 를 사용하면 JavaScript의 불편함을 해결해줄 수 있고, IDE를 더욱 적극적으로 활용 할 수 있게 해줍니다. 특히, 리액트 컴포넌트를 TypeScript 로 작성하면, PropTypes 를 완전히 대체

000

4y

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

2. 스토리북, 시작하기.
Storybook을 사용할 때 create-react-app으로 만든 프로젝트에서 Storybook 설정을 하여 사용할 수도 있고 아예 새로운 Storybook 전용 프로젝트를 만들어서 사용할 수도 있습

000

4y

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

이 튜토리얼은 TypeScript와 Storybook을 사용하여 리액트 디자인 시스템을 구축하는 방법을 다룹니다. 이 문서를 통하여 여러분들은 다음과 같은 주제들을 배우게 됩니다.
디자인 시스템 이해하기
Storybook의 주요

002