성장을 위한 기록

이론적인 내용만 정리. 예시 코드는 하단 벨로퍼트 링크에 아주 잘 명시되어 있다. redux는 자바스크립트 상태관리 라이브러리이다. redux 본질은 node.js 모듈이다. redux 기본 개념 단일 소스 동일한 데이터는 항상 같은 곳에서 가지고 나온다. (store) 즉 스토어라는 공간은 하나만 존재한다. 읽기 전용 액션이라는 객체를 통해서만 상태를 변경 할 수 있다. 순수 함수로만 변경이 가능하다. 즉 reducer는 순수 함수여야 한다. store 스토어는 상태가 관리되는 하나만 존재하는 공간이다. 컴포넌트와 별개로 스토어라는 공간이 있어서 필요한 상태를 담는다. 필요한 컴포넌트에서만 스토어에 접근을 한다. action 주문서라고 볼 수 있다. 액션은 앱에서 스토어에 운반할 데이터 다르게 보면 저..

노마드 코더를 보며 typescript 버전으로 정리한 내용 tpyescript 이해도가 부족해 완벽한 내용은 아닐 수 있습니다 훅 export const useInput = ( initialValue: string,validator?: ((value: string) => boolean) | any => { const [value, setValue] = useState(initialValue); const onChange = ( event: ChangeEvent | ChangeEvent) => { let willUpdate = true; if (typeof validator === "function") { willUpdate = validator(value); }//else { ..... 함수가 아닌 다..

recoil 설치 명령어 npm install recoil yarn add recoil recoil vs redux 이번 프로젝트에서 상태관리 라이브러리를 선택하는 과정에서 여러 고민을 했었다. 그 동안 사용했던 익숙한 redux를 사용하는가, 새로운 recoil을 사용해보는가 결과는 처음에는 redux였고, 이제는 recoil이다. 처음 redux를 선택한 이유 개인적으로 상태관리 측면에서만 본다면 원툴이라 생각할 정도로 확실한 상태관리를 할 수 있다. 또한 지금까지 사용하면서 익숙하기 때문에 코드를 빠르게 작성할 수 있다. 그럼에도 recoil로 갈아탄 이유는 ? 우선 전역 상태관리를 해야하는 데이터가 거의 없었다. 클라이언트 데이터도 거의 없고 아직까지 서버 데이터는 없다. 이런 상황에서 비교적 무..

카카오 로그인 이후 이전 페이지로 이동 누군가 보시고 더 좋은 방법이 있다면 제발 댓글 남겨주세요! 카카오 로그인 과정 이건 소스가 많고 또 개발자 페이지에 너무 잘 정리되어 있기 때문에 간략하게 넘어가 보자면, 카카오에서 Rest API 키 Redirect URL을 입력한 URL로 이동을 하면( a태그 또는 window.location.href를 이용했다) 인가 코드를 URL에서 받을 수 있고 그 인가 코드를 백엔드에게 전달해 백엔드에서 토큰을 받는다(정확한 로직은 모른다) 어쨌든 백엔드에서 토큰을 전달받고, 우리는 그 토큰을 가지고 매 요청마다 넣어주면 된다. 본론 로그인 이후 이동을 메인 페이지로 했었는데, client가 어딘지도 모르는 글을 보다 댓글을 달려고 로그인을 했더니 url을 못 찾는다?..

react. env 활용하여 API 키 등 환경 변수 관리하기 간단해 보이고 내용도 많은 이걸 정리하는 이유는 내가 멍청한 삽질을 했고, 혹여나 누가 보거나 미래의 내가 또 이런 어이없는 실수를 저지르지 않기 위함이다. .env를 사용하는 이유! 개발을 진행하면서 서버 포트 혹은 firebase API 키 등 다양한 key를 관리하게 될 것이다. 이걸 git에 올린다면 어떤 일이 벌어질 까? git을 보고 나도 그 API에 요청을 보낼 수 있을 것이다. 필요한 정보가 다 있기 때문에.... 특히 firebase는 많이 사용하면 비용이 발생하는데, API 키를 모두 알고 있다면 내가 그 데이터 베이스에 접근하는 건 어렵지 않을 것이다. 나는 물론 이 사실을 알고 있었지만 .env에 사실을 알지 못했고, 처..

원하는 요소(element)로 스크롤 하기 , 검색 리스트 자동 스크롤 자주 쓰이는 곳은 아마 어떤 버튼을 눌렀을 때 해당 위치로 자동 스크롤하는 경우에 사용하겠지만, 이번에 나는 상황이 달랐다. 이번 프로젝트에서 검색 기능을 작성하고 있었고, 검색 시 내용을 포함하는 항목을 하단 list에 보이는 기능이 있었다. 여기서 네이버 검색처럼 방향키로 요소를 선택하고 싶었고, 작성 후 테스트해보니 처음 화면에 보이는 list 영역을 지나가면 스크롤되지 않고, 안 보이는 화면에서 열심히 선택하고 있었다...... .scrollIntoView() 나는 이 친구를 사용하여 스크롤 조건을 작성했다. 일부 예시 코드 if (e.code === "ArrowDown" && Number(stockIndex) !== stoc..

onKeyDown이 2번 실행되는 이슈 프로젝트를 하면서 검색 기능을 작성하던 중 생긴 이슈가 있다. 검색창 하단에 나타내는 목록을 방향키로 조회를 하는데, 처음에 2번 실행돼 첫 번째 항목이 아닌 두 번째 항복으로 바로 갔다. 우선 이렇게 2번 입력되는 원인은 한글은 조합하여 사용하기 때문이라고 생각하고 있다. 영문이나 숫자는 위와같은 이슈가 발생하지 않을 것이다. (공식 문서에서 확인을 못해봤다) 컴퓨터는 작성된 한글이 완성된 단어인지, 작성 중인지 구분할 수 없다 그렇기 때문에 방향키를 누르면, 단어를 완성하면서 실행되고 그 이후에 한 번 더 실행하게 된다. (추측) 이를 해결할 수 있는 방법을 찾다 2가지를 찾게 됐는데, 경우에 따라서는 1가지일 것이다. (제가 이 1가지만 가능했습니다 ) 우선 ..

이 내용은 제일 하단에 있는 링크인 udemy에 있는 "React Query : React로 서버 상태 관리하기"를 보고 요약한 내용입니다. 복습 없이 작성된 내용이고 기억해보기 위한 기록임으로 참고하는 건 좋지만 공식문서를 꼭 확인하고 올바른 방법으로 사용하시길 바랍니다. 혹시나 보시는 분들이 있을까 하여.... useMutation 변이 사용해보기 useQuery와 형태가 비슷해 보이는 게 어떤 차이가 있나? 쉽게 생각하면 useQuery는 get메서드에서 사용하고 useMutation은 그 외 메서드에서 사용할 수 있다. 다른 특징을 보면 query-key가 없다. 당연하게도 일회성 통신이기 때문에 기억할 쿼리 키가 없다. 캐시에 데이터를 저장하지 않는다. thunk에서는 데이터를 받아 reduce..

이 내용은 제일 하단에 있는 링크인 udemy에 있는 "React Query : React로 서버 상태 관리하기"를 보고 요약한 내용입니다. 복습 없이 작성 된 내용이고 기억해보기 위한 기록임으로 참고하는 건 좋지만 공식문서를 꼭 확인하고 올바른 방법으로 사용하시 길 바람니다. 혹시나 보시는 분들이 있을까 하여 .... React-Query , useQuery // 설치 명령어 yarn add react-query query는 비동기 통신을 중점으로 하는 상태관리 라이브러리이다. 기본 개념을 깊게 정리하는 것은 나중으로 미루고, 지금은 빠르게 학습 중에 있어서 내용 정리를 해보고자 한다. useQuery에 장점으로는 무엇이 있을까? 데이터를 캐시에 저장하여 변동되지 않는 다면 그 데이터를 가져와 빠르게 ..