전체 글

잘못된 내용이 있다면 알려주시면 감사하겠습니다.이전 글: 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가지의 사항 모두 실제로 ..

서론올해 회고를 적기 전 2023년을 마무리하면서 적은 회고를 읽어 보았는데, 그때와 달라진 점이 있다면 삶에 대한 자신감인 것 같다. 2023년에는 참 고민이 많았다.물론 지금도 당장 2025년을 어떻게 살아야 할지 고민이 많고 막막하지만, 나만 그런 게 아니라 다들 똑같이 많은 고민들을 가지고 살아간다. 세상은 어떻게든 돌아간다.그렇기 때문에 낙관적인 마인드와 용기를 갖는 것이 불안해 하고 조급해하는 것보다 훨씬 삶의 만족도를 높이는데 도움이 된다고 생각한다. 물론 나태해지는 것을 합리화 한다는 말은 아니다.하지만 사회의 일원이기 전에 한 명의 사람으로서 삶을 행복하게 사는 것이 중요하다고 생각하게 되었다. 인생은 길다.이제 고작 25살일 뿐이고 하지 못한 것도 많고 하고 싶은 것도 많다.25살이 되..

기다리고 기다리던 우테코 프리코스의 1차 결과가 나왔다.운이 좋게도 우테코 프리코스에 1차 합격을 하게 되어서 최종 코딩테스트를 치게 되었다..🥹 사실 4주 차 과제를 만족스럽게 하지 못했고 자소서에 인턴을 하고 있다고 솔직하게 써놔서 불합격 스택이 엄청나게 쌓인 상태였기 때문에 당연히 떨어질 줄 알았다. 그래서 메일이 왔다고 했을 때 열어보는 것이 조금 두려웠다. 하지만 인턴 기간 중에 죽어라 과제를 하던 내 모습이 생각나서 떨어져도 만족스러웠다..라고 생각하며 메일을 열어봤는데 다행히도 1차 합격을 할 수 있었다..ㅠㅠ 경쟁률은 프론트 기준으로 1주 차 과제를 할 때 PR이 450개 정도였는데, 최종 코딩테스트를 본 사람이 85명이니까 1:5.x 정도였던 것 같다. 내가 왜 붙었을까 곰곰이 생각해..

웹 에이전시에서 개발을 하다 보니까 프론트엔드에서 프로젝트마다 자주 필요하지만, 자체 개발을 하려면 시간이 많이 드는 것들이 있다.로그인 및 회원가입 폼페이지네이션필터테이블 폼주로 위와 같은 것들인데 이런 요소들을 기획서에서 본다면, 기획에 따라서 구현 산정 시간이 기본 4H+ 로 잡혔던 것 같다. 물론 요즘 MUI 같은 UI 라이브러리들이 잘 나와서 이런 것들을 잘 활용하면 빠르게 개발할 수 있지만, 자체 개발을 해야 하는 경우가 한 번씩은 생기기 마련이다. 그래서 해커톤이나 자체 개발을 할 때 시간을 좀 단축할 수 있는 템플릿을 만들어 두면 좋을 것 같다는 생각이 들어서 이번에는 폼과 관련된 로직을 만들어 보았다.  GitHub - jeongwoo903/react-form-templateContrib..