Overview 이번 프로젝트에서는 react-query를 사용해보기로 했다. 왜 사용하기로 했냐면 저번 recoil을 사용할때 suspense가 멋지게 동작하고 캐시처리 까지 해줘서 였던 것 같은데(react-query도 이 두가지 기능을 다 가지고 있으니까) 공식문서를 슥 훑어보니 이거 당장 사용할 수 있겠는데? 그런 생각도 들었기 때문이다. 물론 절반...
이번, 새로운 프로젝트를 진행하면서 로그인 기능을 추가해야 했다. 백엔드를 통해서 로그인 기능을 진행하는데 github oauth를 기반으로 작업했다. 사실 백엔드와의 기능을 추가하기 전에 파이어베이스 인증 탭을 이용해서 간단한 회원가입 폼을 만들어 본적이 있어서 쉽게
Overview 이번, 프로젝트에서는 다량의 데이터와 사진을 요청받아와 렌더링해야했다. 데이터가 많으면 100개도 될 수 있었고 사진도 받아와야 했고 data가 담고 있는 정보의 양도 꽤 되었다. 구현을 열심히 해서 데이터를 불러와 컴포넌트들을 렌더링 하는 것은 무사
Overview 개발하거나 개발한 걸 확인할 때는 맨날 크롬만 봤다. 크롬을 기준으로 개발하는 것에 너무 편해져 있었기도 했고, 사실 아무생각 없었다. 크로스 브라우징? 그런거 아무 생각 없었고, IE의 악명은 워낙 자자했으므로 바벨을 이용해 지원해주는 걸로 해결 했다
사용자의 UX적 측면을 개선하기 위한 방법 중 하나로 lazyload가 있다. 간단하게 말하면 지금 당장 필요하지 않은 부분의 로딩을 지연시키는 것이다. 지금 필요하지 않은 부분을 렌더링 하지 않는 다는 것은 서버로부터 해당부분의 데이터를 전송받을 필요가 없다는 것이고
Overview 처음, Context Api를 알았을 때는 신세계였다. 리액트를 처음 공부하면서 가장 골치가 아팠던 부분은 props driling이었다. 부모컴포넌트와 하위컴포넌트의 deps가 적을때는 문제되지 않았다. 그런데, 부모 컴포넌트와 하위 컴포넌트의 de
리덕스 툴킷을 왜 쓰는걸까? 리덕스를 사용할때 기본적으로 만들어야 하는 코드는 다음과 같다. 초기 상태 정의 액션 타입 정의 액션 생성함수 정의 리듀서 정의 이 4가지를 모두 수행해야 한다. 그렇다면 상태와 action이 굉장히 많은 경우에는 어떻게 될까? 일단 리덕스를 편하게 사용하기 위한 액션 타입, 액션 생성함수들의 코드량이 엄청 많을뿐만 아니라 액...
리덕스를 사용하는 이유 redux 는 상태관리를 도와주는 도구로, 다수의 컴포넌트 또는 App 전체의 상태를 다룰 수 있도록 도와준다. 그런데 이런 점에서 보면 context 로도 충분하지 않나라는 생각이 들 수도 있다. 그렇다면 context가 있는데 redux를
overview 이번에 진행하는 airbnb 클론 코딩미션을 관련해서 양방향 레인지 버튼을 구현했다. input 값을 range로 관리하고 이러한 인풋을 두개 만들어 겹치고, div 를 위에 올리고 재미있었다. 그런데 타입스크립트로 코드를 수정하는 중에 useRef를