사실 react에서 성능 최적화를 위한 훅으로 react.memo 와 useCallback 이 있다는 것을 안지는 생각보다 오래되었다. 그런데, 이 부분 항상 공부해보고 써봐야겠다고 생각하고 있었지만 미뤄두고 있었다. memo, callback 을 공부할 수록 어렵게

nextJS기반으로 내 블로그 만들기 프로젝트를 하면서 꼭 추가하고 싶었던 기능은 다크모드였다. 이유는 아주 간단히, 내가 대부분의 웹페이지를 사용할때 다크모드를 이용했기 때문이다. 게다가, 요즘에는 모바일로 자기전에 보는 경우가 대다수니..! 다크모드는 꼭 있어야해

백트래킹 알고리즘을 알아보자

사용자입장에서 어떤 방법이 좋을까

웹팩은 별게(좋은게) 다있다

react, typescript, webpack5 환경설정

dev만 붙었을 뿐인데

열림교회처럼 내 모달도 닫고 싶을때

Overview 이번 프로젝트에서는 react-query를 사용해보기로 했다. 왜 사용하기로 했냐면 저번 recoil을 사용할때 suspense가 멋지게 동작하고 캐시처리 까지 해줘서 였던 것 같은데(react-query도 이 두가지 기능을 다 가지고 있으니까) 공식문

이번, 새로운 프로젝트를 진행하면서 로그인 기능을 추가해야 했다. 백엔드를 통해서 로그인 기능을 진행하는데 github oauth를 기반으로 작업했다. 사실 백엔드와의 기능을 추가하기 전에 파이어베이스 인증 탭을 이용해서 간단한 회원가입 폼을 만들어 본적이 있어서 쉽게

Overview 이번, 프로젝트에서는 다량의 데이터와 사진을 요청받아와 렌더링해야했다. 데이터가 많으면 100개도 될 수 있었고 사진도 받아와야 했고 data가 담고 있는 정보의 양도 꽤 되었다. 구현을 열심히 해서 데이터를 불러와 컴포넌트들을 렌더링 하는 것은 무사

사용자의 UX적 측면을 개선하기 위한 방법 중 하나로 lazyload가 있다. 간단하게 말하면 지금 당장 필요하지 않은 부분의 로딩을 지연시키는 것이다. 지금 필요하지 않은 부분을 렌더링 하지 않는 다는 것은 서버로부터 해당부분의 데이터를 전송받을 필요가 없다는 것이고

context, recoil

Overview 처음, Context Api를 알았을 때는 신세계였다. 리액트를 처음 공부하면서 가장 골치가 아팠던 부분은 props driling이었다. 부모컴포넌트와 하위컴포넌트의 deps가 적을때는 문제되지 않았다. 그런데, 부모 컴포넌트와 하위 컴포넌트의 de

리덕스 툴킷을 왜 쓰는걸까? 리덕스를 사용할때 기본적으로 만들어야 하는 코드는 다음과 같다. 초기 상태 정의 액션 타입 정의 액션 생성함수 정의 리듀서 정의 이 4가지를 모두 수행해야 한다. 그렇다면 상태와 action이 굉장히 많은 경우에는 어떻게 될까? 일단 리덕

리덕스를 사용하는 이유 redux 는 상태관리를 도와주는 도구로, 다수의 컴포넌트 또는 App 전체의 상태를 다룰 수 있도록 도와준다. 그런데 이런 점에서 보면 context 로도 충분하지 않나라는 생각이 들 수도 있다. 그렇다면 context가 있는데 redux를

overview 이번에 진행하는 airbnb 클론 코딩미션을 관련해서 양방향 레인지 버튼을 구현했다. input 값을 range로 관리하고 이러한 인풋을 두개 만들어 겹치고, div 를 위에 올리고 재미있었다. 그런데 타입스크립트로 코드를 수정하는 중에 useRef를

옵셔널 체이닝 연산자 ?. 옵셔널 체이닝 연산자는, 좌항의 피연산자가 null 또는 undefined 라면 undefined 를 반환하고, 그렇지 않다면 연산자의 우항을 참조한다. elem 이 null 이기 때문에 value 는, 좌항에서 끝나고 그대로 undefined 를 출력한다. 이런 점에서 옵셔널 체이닝 연산자는 어떠한 값이 null 또는 u...

상황 리덕스를 처음 공부하고 있는중, 초기 상태를 전달하는 과정에서 Cannot read properties of undefined 오류가 계속해서 나왔다. 이렇게 간단한 스토어를 만들어 주었고 이를 컴포넌트에서 호출하는 것이였는데 dispatch 하지 않은 상황에서 초깃값만 전달하려고 했던 거였다. 해결 아무런 dispatch 없이 리듀서가 호출되면...

Overview 시간에 쫓기듯 리액트를 공부하던 중 제대로 이해하지 못하고 넘어간 부분이 많다는 생각이 들었다. key 와 관련한 오류는, 그냥 이유는 모르겠고 고유한 값을 넣으라니까 넣어서 해결했다. 또 이유는 기억 안나지만 (아마 이건 수업때 배웠던 것 같은데)