수익화를 목적으로 개인 프로젝트로 QR Generator와 Convert Image라는 두 개의 툴 서비스를 운영하면서, 아래와 같은 한계와 문제들이 있었습니다.마케팅 경험의 부재: 유지보수와 개선 방향을 잡기 위해 GA4, GSC 데이터를 세팅했지만, 데이터를 통해

Next.js 기반으로 서버 데이터를 활용하는 컴포넌트를 만들때 매번 고민되는 지점이 있다.바로 데이터를 언제 어떻게 불러올 것 인가에 대해서 고민을 해야한다.인턴 기간 중 Nuxt.js 로직을 Next.js로 마이그레이션 하는 과정에서도 고민을했던 영역이다.Next.

우아콘의 한 세션에서 앱 내 웹 뷰에서 리스트 컴포넌트를 리스트 가상화 (List Virtualization)를 통해 최적화 했다라는 이야기를 들었다.그 발표를 계기로 리스트 가상화에 대해서 궁금해졌고, 이게 실제로 어떤 원리로 최적화가 이루어질 수 있는지 알아보자.리

연령, 장애 여부에 관계없이 웹 사이트에서 제공하는 정보에 동등하게 접근하고, 이용할 수 있도록 보장하는 것시각 - 저시력, 실명, 색각 이상 같은 시각 장애를 고려이동성 - 근육 속도 저하, 근육 제어 손실로 인해 손을 쓰기 어렵거나 쓸 수 없는 상태를 고려청각 -

여러가지 간단한 케이스로 라이브 코딩 테스트 준비를 하는 과정에서 useDeferredValue를 새롭게 알게 되었고, 앞으로 활용도가 많은 훅인 것 같아 어떤 역할을 하고, 어떤 경우에 사용하면 좋을지 생각해보았다.useDeferredValue는 UI 업데이트를 지연

이번 글에서는 필터 컴포넌트 설계하면서 고민했던 과정을 공유하려고 합니다. 단순히 컴포넌트를 나누는 것을 넘어, 어떻게 하면 재사용 가능하면서도 유연한 구조를 만들 수 있을까에 초점을 맞췄습니다.( \*예시는 실제 프로젝트와 다소 차이가 있습니다. )프로젝트에는 여러

update 방식을 제한할 수 있다.비슷한 성격의 state를 묶어서 관리할 수 있다.\+) state를 조작하는 Action도 묶어서 관리할 수 있다. reducer 내부에서 관리되기 때문에 응집도가 높다.You Might Not Need an Effect – Rea

페이스북이 임의로 만든 언어로서 다양한 속성을 가진 트리 구조를 토큰화해 ECMA Script로 변환하는데 초점을 두고 있다.→ 표현하기 까다로웠던 XML 스타일의 트리 구분을 작성하는 데 많은 도움을 주는 새로운 문법JSX를 구성하는 기본 요소로 HTML의 요소와 비

메인 페이지에서 CPU 성능을 낮춰 테스트를 해봤을 때 LCP 지표가 3.35s로 개선이 필요한 상태로 측정이 돠었다. 그래서 메인 페이지 컴포넌트 로직 수정을 통해 개선을 기획하게 되었다.LCP는 페이지에서 가장 큰 영역을 차지하는 컨텐츠가 로드 되었을 때의 시점을

최근 새롭게 업데이트된 React.19.2와 Next.js 16의 업데이트 내용을 살펴봤습니다.

우연한 기회를 통해서 실시간 통신 방식들을 서로 비교해봐야할 상황이 생겼다.실시간과 관련해서는 거의 경험이 없다시피 했고, 대충 WebSocket 개념 정도..? 만 알고있었다.언제가되든 실시간과 관련된 기능을 꼭 한 번 경험해볼 날이 올 것 같아 다양한 방식들을 알아

프로젝트를 진행하면서 팔로우/좋아요 버튼에 낙관적 업데이트를 처음 적용해보았고, 그 과정에서 관련 자료들을 찾아보고, 낙관적 업데이트에 대한 생각들이나 초기 코드를 리팩토링하는 과정을 적어보았다.useMutation의 동작에 따라 onSuccess는 mutateFn이

최근 프로젝트에서 PWA 기능을 구현 하거나, MSW를 통해서 백엔드 데이터를 mocking한 경험들이 있었다.두 가지 경험을 하면서 공통적으로 나왔던 용어가 있었는데 바로 Service Worker 다.Service Worker라는 개념이 여러번 나오다보니 조금 더

프로젝트 서비스 소개 페이지를 구현하면서 소개 리스트와 목차 컴포넌트를 구현하고, 목차 컴포넌트를 클릭했을때 특정 소개 영역으로 이동하도록 하는 요구사항이 있었다.간단한 구현이라고 생각했는데 그 과정에서 알게된 부분들이 몇가지 있어 구현 과정을 정리해보았다.위 이미지

최근 두 개의 프로젝트를 병행하고 있다. 항상 프로젝트를 하면 icon을 많이 활용하게 된다.앞서 시작한 프로젝트에서 icon을 관리하고 호출하는 방식을 이후 시작한 프로젝트에 적용해보면서 더 나은 방식이 있을 것이라는 생각이 들어 개선 과정을 정리하게 되었다.우선 모

프로젝트에서 로그인 회원가입 관련 로직을 전담하게 되었는데, 초기 구현을 끝내고 그냥 넘어가기에는 개선해볼 수 있는 사항이 너무 많아보여서 중간에 다른 구현은 제껴두고 리팩토링 시간을 가지게 되었다.처음 작성했던 이메일 Input 컴포넌트인데 보기에도 상당히 복잡해보인

리액트 19버전 출시를 앞두고 있는 지금, 어떤 기능들이 추가되는지 알아보기 위해 개인적으로 번역하며 읽어보았습니다. > RC? Release Candidate의 약자로, 소프트웨어 개발 주기에서 최종 출시 전에 공개되는 버전을 말한다. 안정성과 기능이 최종 버전에

오래된 사이드 프로젝트 에러들을 잡는 과정에서 다음과 같은 경고 문구가 나왔다.찾아보니 styled-component를 위해 넘겨준 props가 걸러지지 않고 DOM Element의 attribute에 넘겨졌고, DOM Element에서는 props에 해당하는 attr

우테코 프리코스를 진행 중 코드리뷰를 해드리면서 static 메서드와 인스턴스 메서드 중 어느 것이 적합한지에 대해 고민하게 되어 이를 정리해 보았다.의문을 가지게 된 코드는 다음과 같은데,사용자 입력을 담당하는 InputManager 클래스의 getCarName이 각

사이드 프로젝트를 다시 보면서 이미지 관련해서 적용해보고 싶은 것들이 있어 다시 건드리게 되었다.현재 API에서 모든 포켓몬은 1035마리로 각 포켓몬은 앞/뒤 모습을 이미지로 보여주고 있다. 뒷 모습의 경우 마우스를 호버해서 보여주지만 앞모습의 경우 모든 포켓몬의 이