서론 오랜만에 개발 책인 아닌 인문학적인 책을 읽었다. 좋았다.오랜만에 보물같은 책을 발견한 느낌이다. 이 책은 글과 여러 명언으로 구성되어 있는데, 책을 읽을수록 자연스럽게 나에 대해서 하나씩 알아갈 수 있는 구조로 구성되어 있다.어떤 인생에 대한 큰 질문을 던지고 이에 대해 고민한 사람들의 명언을 통해 스스로의 답을 찾을 수 있게 해두었다. 만약 당신이 아래 중 하나에 속한다면 이 책을 적극적으로 추천한다.회사를 그만두려는 사람일이 재미없는 사람이직을 준비하려는 사람나와 맞는 일이 무엇인지 알지 못하는 사람하고 싶은 일을 찾지 못하는 사람책을 읽게 된 이유이 책을 읽게 된 이유는 요즘 하고 있는 일들이 별로 재미있지 않아서 읽어보게 되었다. 나는 개발이 참 좋다. 내 가치관과 잘 맞는 일이라고 생각한..

해당 글은 "패턴으로 익히고 설계로 완성하는 리액트" 1장을 읽고 작성된 글입니다.서론"그게 어제의 최선이었다."이번 글의 시작은 위 문구로 시작해보고 싶어서 이미지를 가져와 봤다. 나는 개발을 하면서 여러 코드를 작성하고 지우고 고친다.코드를 잘 작성하기 위해 많은 것들을 배우지만, 나중에 보면 왜 이렇게 작성했을까.. 라는 생각이 많이 든다. 코드를 잘 작성한다는 것은 뭘까?모든 개발자들이 아마 코드를 잘 작성하고 싶어할 것이다.다만 이에 대해선 사람마다 기준이 다 다를 것이다. 이번 글에서 소개하는 리액트 안티패턴을 알아둔다면, 어떤 코드를 피해야 하는 지 본인 만의 기준을 만들 수 있을 거라 생각한다.안티패턴은 기술적 오류는 아니지만, 차후 문제를 일으키거나 확장을 어렵게 할 수 있다.우선 안티패..

서론이번 글은 Next App Router에서 MSW를 세팅하기 위한 방법을 정리해 본 글이다. (삽질에 삽질을 거듭하며..) 이번에 Devoops라는 서비스를 제작하면서 여러 불편함을 겪었는데 그중 하나가 백엔드 개발에 대한 프론트 의존성이었다. 개발기간이 2달 정도 주어졌다 보니 mocking 서버를 세팅하고 handler를 구현하는 것이 팀 차원에서 부담으로 느껴졌다.그래서 우선 명세에 따라 Mock 데이터를 하드코딩 해서 작업을 하긴 했지만, 파라미터 값에 따라 달라져야 하는 데이터 같은 경우 작업하기가 어려웠고 데이터 패칭 로직으로 다시 한번 수정해야 하는 불편함이 있었다. 임시 런칭 이후, 추가작업을 하던 도중 서버가 죽어서 프론트 개발에 다시 병목이 걸리는 상황이 생겼는데, 그때마다 마냥 기..

잘못된 내용이 있다면 알려주시면 감사하겠습니다.이전 글: https://so-tired.tistory.com/336서론요즘 HTML + CSS + Javascript로 순수하게 프론트엔드 개발을 하는 사람은 드물 것이다.그 대신 라이브러리나 프레임워크를 이용한다. (차후, 그냥 통합하여 프레임워크라 하겠다.) 왜? 어떤 이유가 있어서일까?그 이유로는 생산성 증대, 대규모 프로젝트 관리 용이, 성능 등등.. 여러 가지 일 것이다. 그런데 프레임워크를 써서 개발하는게 순수하게 Vanilla JS로 개발하는 것보다 좋을까? 이번엔 프레임워크가 렌더링에 주는 이점에 대해서 한 번 알아보자.프레임워크가 렌더링에 주는 이점DOM은 동적 UI 변경에 최적화 되어있지 않다우리는 프론트 개발을 하면서 DOM을 조회하기도..

잘못된 내용이 있다면 알려주시면 감사하겠습니다.다음 글: https://so-tired.tistory.com/337서론최근에 웹 성능 최적화에 관심이 생기게 되었다. 그래서 React DevTools의 Highlight Updates 기능을 통해서 페이지의 렌더링을 개선하려던 와중, 해당 페이지의 상태가 변했을 때 상태를 사용하지 않는 정적인 컴포넌트에 하이라이트가 되는 이슈가 있었다. 사실 Highlight Updates 기능은 렌더 함수 실행 여부를 감지하기 때문에, 정적 컴포넌트에 변화가 없어도 변화 여부를 체크하기 위해 렌더 함수는 호출되기 때문에 하이라이트가 되는 것이 당연했다.  하지만 문득 아래와 같은 생각이 들었다. "React를 통해 구현은 잘하고 있지만, 그 내부에서 일어나는 일들에 대..

후기이번에 읽어 본 책은 리액트 훅 인 액션 이라는 책이다. 이 책을 읽게 된 이유는 단순 훅을 잘 구성하려면 어떻게 해야하지? 라는 궁금증에서 읽어보게 되었는데, 이런 궁금증을 시원하게 해결해 주었다. 또한 useState, useEffect, useReducer, useRef 등등.. 상태와 부수효과, 최적화와 관련된 리액트의 내장된 훅들의 원리와 사용방법에 대해서 자세히 알려주어서 읽는 내내 많은 도움이 되었다. 특히 렌더링과 관련된 부분을 잘 짚어주면서 설명을 해주셔서 불필요한 렌더링을 방지하기 위해 이런 점들을 고려해야 하구나 하면서 많이 깨달았던 것 같다. 리액트는 뷰와는 달리 손이 더 많이 간다. 프레임워크와 라이브러리의 차이라고도 볼 수 있을 것 같은데 대신 최적화하는 부분에 있어서는 ..

여느때와 같이 새로운 인풋을 찾고 있다가 구름에서 '구름 COMMIT'이라고 진행하는 강연이 있는데, 이번 강연자 분이 토스 FE 리더이신 박서진 개발자셨다. 주제도 관심있었기에 한 번 만나보고 질문도 해보고 싶어 신청을 했다.신청해서 오프라인 참석자로 선정되어서 기분좋게 판교로 가려고 했는데, 시외버스 기사님이 버스정류장을 그냥 지나치는 바람에.. 시간내에 못갈것 같아서 말씀드리고 집에서 유투브로 시청했다,, 🥲강연의 큰 주제는 '성장'에 대한 얘기였고 채용하는 입장에서 말씀을 많이 해주셔서 꽤 도움이 되었다. 어느 동기부여 책들이 그러하듯 듣고 난 후에 든 생각은 나는 지금 그대로 잘 하고 있구나 였다.새로운 정보가 아니라 이미 누구나 알고 있는데 다시끔 리마인드 된 것들. 이를 까먹지 않고 꾸준히..

문제가끔 프론트엔드에서 실시간으로 입력을 받아 검색어에 따른 추천 검색어나 자동완성을 제공해줘야 하는 상황이 있다.이를 구현할 때 여러번 동일한 문제를 마주친 적이 있는데, 바로 입력값이 바뀜에 따라 api 요청을 하게 되면 너무 많은 api 요청이 발생한다는 점이다.위의 프로젝트에서 검색창에 "선릉역"을 검색하면, "ㅅ,서,선,ㄹ,르,릉,ㅇ,여,역"과 같이 9번의 api 요청이 발생하게 된다. 물론 바로바로 값을 받아 기능을 수행하면 좋겠지만, 다음과 같은 애로사항이 있을 수 있다.유료 api의 경우 비용이 많이 발생함.너무 빠른 타자로 입력할 시 깜빡임이나 이전 결과값이 나올 수 있음.검색과 관련한 다른 기능과 비동기의 타이밍이 안맞아서 잠재적인 에러가 발생할 수 있음.위 3가지의 사항 모두 실제로 ..