성장을 위한 기록

MVP개발을 하는 3주 동안 어떤 기술을 다뤄봤나 상태 관리를 위한 redux와 react-query github action 배포 recoil 1. 상태 관리를 위한 redux와 react-query 이번 프로젝트에서는 상태관리를 위해 redux와 react-query를 사용했다. redux를 선택한 이유는 무겁긴 하지만 상태 관리에 확실하며 thunk를 써야 하는 것이 아니라면 redux를 사용하는 것도 크게 나쁘지 않을 것 같다고 판단했다. 가장 큰 이유는 내게 익숙하기 때문이다. react-query를 사용한 이유는 우선 전역 상태관리를 할 데이터가 많지 않기 때문에 redux-thunk는 쓸데없는 코드를 많이 작성할 것 같다는 생각이 들었고, 새로운 기술을 학습해보고자 선택을 했다. 또한 프로젝..

가장 헤맷던 부분 특정 조건에서 query 사용하기 이번 주차를 진행하면서 가장 오래 걸렸고 가장 헤멧던 부분은 특정 조건에서 query를 작성하는 부분이 있었다. 나는 검색기능에서 검색을 실행했을 때 query를 요청하는 방법에 대해 아직도 고민을 하고 있다. mutate를 사용하는 방법도 있지만, 캐시 데이터를 관리하기 위해 query가 적절하다 생각했고 이 방법을 탐구하고 있다 생각한 방법 자세한 트러블 슈팅은 깃 이슈에서 정리하고 있다. 이번 이슈 정리 깃 enabled를 false로 두고 refetch를 사용하는 방법 mutate를 사용하고 redux로 전역상태관리 하는 방법 이 밖에 테스트 해보지 않은 생각하는 방법 1. enabled를 false로 두고 refetch를 사용하는 방법 useS..

카카오 로그인 이후 이전 페이지로 이동 누군가 보시고 더 좋은 방법이 있다면 제발 댓글 남겨주세요! 카카오 로그인 과정 이건 소스가 많고 또 개발자 페이지에 너무 잘 정리되어 있기 때문에 간략하게 넘어가 보자면, 카카오에서 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에 사실을 알지 못했고, 처..

가장 헤맸던 부분 "form 양식" 이번 주차를 진행하면서 가장 오래 걸렸고 가장 헤멧 던 부분은 form 양식을 작성하는 부분이 있었다. onKeyDown 2번 실행되는 문제 자동 스크롤이 되지 않는 문제 enter를 눌렀을 때 submit이 되는 문제 내가 구현 하려고 목표했던 기능은 검색창을 입력하면 그 검색과 일치하는 항목 리스트가 보이며, 방향키로 선택을 하여 해당 검색어를 입력하는 과정이었다. 1. onKeyDown 2번 실행되는 문제 한글로 "삼성"이라는 키워드를 입력하고 downArrow를 입력하면 처음에 onKeyDown함수가 2번 실행이 됐다. 처음에는 왜 두 번만 실행되는지 원인을 찾기 위해 여러 테스트를 해봤는데, 영문, 숫자 는 한 번만 실행되고, 한글만 두 번 실행된다는 사실을 ..

원하는 요소(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..

7주차 Week I Learn (클론 프로젝트) 이번 주 키워드 이번 주차를 진행하며 내가 가장 신경 쓴 부분/기술에 대한 정리 이번 주차를 진행하며 내가 가장 신경 쓴 부분/기술에 대한 정리 이번 주차를 진행하면서 목표가 있었다. 협업 시 프론트 간의 약속을 정해 잘 이행하기 미니프로젝트 기간에도 시도는 했지만 나 역시 적응하지 못했고, 기능구현에 정신이 팔려 잘 이뤄지지 못했다고 생각해서 실전 대비 한 번더 연습하는 시간을 갖고자 했다. 결론적으로는 성공적이라고 할 수 없었던 것 같다...... 컴포넌트를 쪼갰지만 너무 공통되는 부분이 많아서 충돌없이 협업하는 부분도 어려웠고 시간에 쫓겨 빠르게 코드를 작성하다 보니, 세세한 규칙을 따라갈 수 없었다 ...... 반응형 CSS 이번 주차를 진행하면서 ..