2023-05-31
7분

나는 어떤 개발자일까

2019년~현재(2023)까지 길다면 길고 짧다면 짧은 4년 정도를 프론트엔드 개발자로 일하고 있다. 최근들어서 내가 프론트엔드 개발자로 잘하고 있는건가, 나는 어떤 개발자인가에 대한 생각을 많이 하게 된다. 의식의 흐름대로 적어보자. 나중에 이 글을...

2022-06-11

반응형 사이트에서 이미지 사이즈 최적화

요번에 개발하게 된 프로젝트는 반응형 웹사이트였다. 이 과정에서 이미지 사이즈 최적화를 적용하게 되었는데, 리서치하다보니 몰랐던 것들을 좀 알게되어서 정리해본다. WEBP등의 형식을 이용한 최적화와 압축을 통한 최적화도 있지만, 요기서는 반응형 사이트...

2022-03-12

웹 브라우저에서 앱 열기

이번에 일을 하면서 웹에서 앱 열기, 인앱 등 앱과 연결되어 일하는 부분이 꽤 많이 생겼다. 인앱 대응이야 해본 경험이 있었지만, 앱 열기의 경우 꽤나 까다로웠다. 관련된 용어가 많고 OS 별로 다르다 보니 헷갈리는 포인트가 많았는데, 이 부분을 정리...

2022-01-11

Gatsby 블로그 다크 테마 적용하기

이번에 블로그에 다크테마를 적용하게 되었다. (요즘 핫한 Remix 좀 써보려다가.. tailwind 문서 좀 보다가.. 다크테마가 이뻐서 생각남) 다크 테마가 좀 지난 트랜드이긴 한데 적용해봐야지.. 해봐야지.. 하다가 이제야 적용하게 되어 그 경험...

2021-08-08

web push 사용해보기

일하다가 web push 사용을 검토해보는 작업을 하게 되었다. 이것저것 찾아보다보니 꽤 재미있기도 하고, 생각보다 그렇게 간단하지는 않다.이전에 Notification API를 써본적이 있는데 요녀석과는 완전히 다른 것이다. 요것부터 먼저 비교를 하...

2020-04-16

github action으로 리마인더 만들기

알고리즘 스터디를 진행하면서 리마인더를 하나 만들어보고 싶은 생각이 들었다. 크론잡을 어떻게 만들까.. 찾아보다가 github action에 스케쥴을 설정할 수 있다는 것을 보고 한번 만들어보았다.어떻게 만들었는지와 해당 액션을 만들면서 테스트 했던 ...

nextjs와 redux-saga 사용하기

사이드 프로젝트를 진행하며 nextjs와 redux-saga를 함께 사용하기로 하였다. 해당 프로젝트 세팅을 하면서, 서버 사이드 렌더링 환경에서 redux-saga를 어떻게 사용해야 하는지 알아본 내용을 정리해보자!SSR과 redux-saga보통 S...

redux, redux-saga와 typescript를 편하게 쓰기위한 노력

redux, redux-saga, typescript는 내가 개발을 하며 주로 사용해왔던 스택들이다. React 개발을 할 때 많이 사용해왔고 어떻게 하면 더 편하게 쓸 수 있을지 고려해왔다. 특히, typescript를 사용하기 시작하면서 더 많이 ...

2019-07-23

debounce와 throttle

개발할 때 기억안나고 헷갈리는 개념들이 참 많다. 그 중에서도 나는 유독 이 debounce와 throttle을 쓸 때마다 까먹는다. 대부분의 프로젝트에서 사용했는데 쓸 때마다 헷갈린다.. 이번에도 기억해야할 상황에서 또 생각이 안났는데 역시 기억하기...

2019-06-18

marked + highlight 번들 사이즈 줄이기

이번에 프로젝트를 하면서 marked와 highlight.js를 사용하여 마크다운에 코드 syntax 하이라이팅을 지원하려고 했다.marked 옵션에 highlight가 있어서 그 안에 이런식으로 넣어줬었다.import hljs from 'highli...

2019-06-08

react-redux의 hook API 미리 써보기

react-redux의 hook api는 2019-06-08 기준 v7.1.0-alpha.5. 버전 이기 때문에 언제 바뀔지 모른다. 그래도 미리 한 번 써보자.React가 hook을 내놓음에 따라 많은 라이브러리들이 hook API를 지원하고 있다....

2019-05-17

첫 node cli로 gatsby 글 쉽게 쓰기

Gatsby로 만든 블로그의 글을 쓸 때, 마크다운 파일의 정보를 가져오기 위해서 파일 위에 frontmatter를--- title: "첫 node cli로 gatsby 글 쉽게 쓰기" date: "2019-05-17" tags: - gatsby ...

2019-05-10

React-Router에 scroll restoration 적용하기

이번에 프로젝트를 진행하며 만들어본 약간 임시 방편일 수 있는 scroll restoration 기능을 글로 남겨봅니다.이번 프로젝트에서 글 리스트가 있고, 리스트 중 하나를 클릭하면 글 페이지로 넘어가는 일반적인 웹 사이트를 만들고 있었다. 그런데 ...

2019-04-08

React - Intersection Observer API를 사용하여 인피니트 스크롤 구현하기

스크롤이 특정 포지션을 지나갔을 때 아이템을 추가로 로드하는 인피니트 스크롤을 최근에는 Intersection Observer 를 이용해 구현했다. 이전에 scrollTop 같은 속성을 이용하는 것보다 훨씬 편하다. 물론 polyfill을 사용해야 하...

2019-03-23
| 2분

React - 간과하기 쉬운 간단한 최적화 방법

React에서 쉽게 넘어갈 수 있는 최적화 방법 중의 하나를 작성해보려고 한다. 아주 간단한 차이가 큰 변화를 만드는 것 중 하나이다. 다음 코드를 보자.const Inner = () => { const expensiveCalc = () => { ...

2019-03-04
| 6분

함수형 컴포넌트와 클래스 컴포넌트

이번에 이 글을 읽고 평소에 느꼈던 부분과 종합하여 클래스 컴포넌트와 함수형 컴포넌트 사용시 주의해야 할 점을 생각해보았다.함수 컴포넌트와 클래스 컴포넌트의 차이function Button({ user }) { const sayHello = () ...

2019-02-10
| 7분

Webpack을 이용한 코드 스플리팅

코드 스플리팅은 webpack같은 모듈 번들러들의 중요한 역할 중 하나다. 하나의 큰 번들을 여러개의 작은 번들들로 쪼개준다. 왜 하는지 또 어떻게 적용하는지 알아보자.

2019-01-07
| 7분

Gatsby로 블로그 이전 후기

2019년에는 취업준비를 위한 알고리즘 공부와 더불어 꾸준한 블로그 글쓰기를 목표로 하고 있었다. 이미 이전에 hexo를 통해 이용하던 블로그가 있었으나, Gatsby가 요즘 핫하기도 하고 써보고 싶은 생각도 있었기 때문에 Gatsby를 이용해 이 ...

2018-11-23

React Hooks 사용하기 - react에 redux 바인딩 시키기

이번에 hooks를 사용해보면서 redux를 react에서 사용할 수 있도록 도와주는 react-redux를 hooks로 간단하게 만들어보았다. 여러 React Hooks API를 사용하면서 Hooks에 대한 개념을 더 잡을 수 있는 시간이였던 것 같...

2018-11-05
| 5분

React - PureComponent 제대로 사용하기

React에서 제공하는 컴포넌트 클래스는 기본 Component와 PureComponent가 있다. (함수형 컴포넌트일 경우에는 16.6 버전에 나온 React.memo 가 PureComponent 역할을 한다.) 기본 Component와 PureCo...