하리하링웹

프론트엔드 개발 직군으로 이직준비를 하며 느낀점에 대한 간단한 글이다. 예전에 약 한 달간 이직을 준비했었는데 이로인해 얻은것이 굉장히 많다고 생각하여 글로 쓰게되었다. 아래는 내가 한달동안의 이직준비와 그 과정에서 얻었다고 생각하는 것들이다. 현재 업계에서 유행하는 기술스택 현재 기업이 원하는 인재 서류작성을 통한 커리어의 방향성 검증 나의 부족한 점 내 코딩 방식에서 잘못된 점 1번 현재 업계에서 유행하는 기술스택 부터 차근차근 말해보자면 일단 현재 대기업들에서 사용하는 프론트엔드 스택들과 내가 사용하는 스택의 차이를 확인할 수 있었다. 이를통해 거의 같은 동작을 하는데 나와는 다른 라이브러리를 기업들이 택한 이유 ex)swr, react-query 제법 유명한데 동작방식을 잘 몰랐던 스택들 ex) ..

https://jjongsk.tistory.com/entry/useSWR-%EB%98%91%EB%98%91%ED%95%98%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 useSWR 똑똑하게 사용하기 useSWR이 좋은 라이브러리라고는 이미 널리 알려져 있음에도 불구하고 useSWR에 관련된 대부분의 글들에서 좀 더 다양하게 응용하여 사용하는 방법에 대해 다루는 경우는 많이 보지못했기에 가볍 jjongsk.tistory.com 추가)이 방식대로 코딩을 진행하다가 아주 큰 문제를 발견하였다. 일단 결론적으로 말하면 이러한 방식으로 swr을 사용하지 않는것이 좋다. 아래의 방식대로 swr을 사용하게 되면 해당 key와 일치하는 mutation을 동작하지 않게 해버리는 치명..

React에서 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 re-render되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이번 글에서는 2.부모 컴포넌트가 re-render되었을 때 발생할 수 있는 re-rendering을 방지하는 방법에 대해 작성할 예정이다. 간단하게 예시 코드를 보자 import { useState } from 'react'; function BigComponent() { console.log('revaluating'); return complex calculations ; } e..

React에서 크게 re-rendering이 일어나는 조건은 크게 보면 3가지정도가 있다. 함수 내의 State가 변경되었을 때 부모 컴포넌트가 Rerender되었을 때 컴포넌트의 Props값이 변경되었을 때 자세하게 설명하면 수많은 조건이 있겠지만 대부분의 re-rendering는 저 3가지 조건의 상호작용으로 일어나게 된다. 이 글에선 1.함수 내의 State가 변경되었을 때 의 경우 re-rendering을 방지하는 디자인 패턴에 대해 설명할 예정이다. 먼저 React의 re-render 과정을 간단하게 나누어 설명을 해보자면 re-evaluation 과정을 거친다. virtual dom을 생성한다. 비교 후 Commit하여 페이지에 반영한다 정도로 나누어져 있다. 자세하게 설명하면 뭐 함수를 호출..

위 사진에서 UI를 담당하는 Notification Component가 아니라 이를 구현하기 위한 Provider를 만들 예정이다. 필요한 기능들은 아래와 같다. 1. 토스트기능 2. Auto dismiss on/off 기능 3. dismiss ms 설정 기능 4. success,alert,info 3가지 종류 라이브러리는 안쓸 수 있으면 최대한 안쓰기로 마음먹었기에 별다른 토스트 라이브러리를 사용하지 않고 직접 구현하였다. 먼저 기본적으로 필요한 Type들을 정의해준다. 자동으로 Notification가 닫히는 시간을 5초로 정의하였으며 Auto Dismiss유무는 True로 정의하였다. 이 값은 사용자가 Option값을 넣지 않았을때의 기본값이다. 이후 Notification을 Provide하기 위한..

useSWR이 좋은 라이브러리라고는 이미 널리 알려져 있음에도 불구하고 useSWR에 관련된 대부분의 글들에서 좀 더 다양하게 응용하여 사용하는 방법에 대해 다루는 경우는 많이 보지못했기에 가볍게 useSWR의 좀 더 섹시한 사용방법중 한가지를 공유하고자 글을 작성하게 되었다. 먼저 공식문서의 useSWR의 간단한 사용 방법은 다음과 같이 되어있다. 또한 많은 사람들이 아마? useSWR을 이러한 방법으로 사용하고 있을 것이다. 물론 이러한 방법으로 사용하는것이 나쁜것은 절대 아니다. 하지만 이런 방식으로 사용을 할 때에 간과하는 부분이 있을수도 있을 것 같다. 가장 핵심적인 이유는 바로 저 첫번째 인자가 단순하게 api path를 적는것이 아닌 key라는 것이다. useSWR은 저 key를 기반으로 f..

오늘의 이슈는 cross-domain 환경에서 쿠키가 등록 되지 않는것에서 시작된 이슈였다. 로그인 버튼을 누르면 server domain에는 쿠키가 정상적으로 등록이 되지만 web domain에는 쿠키가 등록이 되지않아 유저정보를 받아올 수 없는 이슈였다. 먼저 환경에 대한 설명으로는 A라는 도메인을 가진 next.js로 만들어진 웹 페이지, B라는 도메인을가진 koa로 만들어진 서버가 존재하며 두 개의 project에서 oauth를 사용해야 할 일이 있어 kakao,google oauth를 연동하게 되었다. 이는 localhost에서는 정상적으로 동작하였지만(도메인이 같음) release시 cross-domain환경이 되어 쿠키가 정상적으로 등록되지 않는 이슈가 발생하였다. 왜 이런 이슈가 발생하게 ..

https://may10.vercel.app/ 위 링크의 개인 프로젝트를 개발하다가 겪은 MongoDB의 connection limit 관련된 이슈를 해결한 방법에대해서 정리해볼려고한다. 평범하게 프로젝트를 개발하던 중 위의 이미지와 같이 DB의 connection이 exceeded 되었다는 메일이 엄청나게 오는것을 발견하였다. 처음에 이를 발견하고 일단 cluster의 데이터를 확인해보았으며 실제로 shared cluster의 경우 maximum connection이 500인데 500을 몇 번이나 터치하는것을 확인할 수 있었으며 실제로 이로인해서 DB가 터지기까지 하는것을 확인하였다. 해결하려고 db connection 관련된 코드를 찾아보았으나 코드상으로는 문제를 발견하지 못했으며 이로인해서 주말 내..

React.memo는 특정한 몇 가지의 경우를 제외하고는 실제로 사용할 일이 많이 없기에 React.memo는 생소하다고 느끼는 사람들이 많을 것 같다. 또한 React.memo는 사용하더라도 성능상의 큰 이득을 가져오지 못할수도 있으며 잘못 사용할경우 찾기 힘든 버그를 발생시키거나 오히려 페이지의 성능이 저하되는 경우도 있을수도 있기에 사용할 때 주의해서 사용해야하는 함수이다. React.memo는 Component를 memo라는 함수로 감싸는것으로 사용할 수 있으며 memo로 감싸져있는 Component를 render할때에 render 이전에 현재 render되어 있는 component의 Props와 다음에 render될 Props를 비교하는 연산을 한 번 거친다. 이후 두 개의 Props가 모두 일..

작년 11월즈음 mongoDB Korea에서 대충 아래와 비슷한 양식의 메일이 날아왔다. 자격증만 따면 응시료를 100% 반환해주고 떨어지더라도 50%를 할인해준다는 완전 혜자 이벤트를 진행한다는 메일이였다. 물론 자격증 시험료가 150불로 싼 편은 아니다. 어찌됐든 기존에 mongoDB를 약 1년간 사용해왔고 이 김에 DB쪽으로 깊게 공부해보고 싶은 맘에 자격증 시험 준비를 해보았다. 준비 기간은 회사를 다니면서 약 2~3주 정도 준비했었던 것 같다. 준비 자체는 아주 쉬웠다고 할 수 있다. mongoDB쪽에서 관련된 영상이나 example들을 다 준비해주었기 때문이다. 물론 공부 할 범위는 다른 시험들에 비해 좀 긴 편이라고 말할 수 있으며 자격증 시험 자체도 그렇게 쉽다고는 말할 수 없는 시험이였다..