성장을 위한 기록

실전 프로젝트 마무리하며 실전 주차가 마무리되고 이제 지원 주차에 들어왔다. 실전 프로젝트를 돌아보는 시간을 갖고자 한다. 왜 stockhub인가? 리더님에 아이디어였다. 나는 별다른 아이디어도 없었고, 프로젝트에 아이디어가 단순 게시판 형식만 아니면 됐다. 주식을 주제로 하다 보니 차트 구현 등 재밌는 그림도 있을 것 같아서 그대로 진행하기로 했다. websocket만 추가 의견을 냈다. 사용 기술 몇 가지만 살펴보자면 cloudFront 배포, reactquery, recoil 정도 있는 것 같다. CloudFront배포는 사실 욕심이였다. 처음에는 Amplify로 배포했었다. CloudFront로 변경한 이유는 자동으로 https 환경으로 배포가 되기 때문에 백엔드에서 https로 배포하기 전까지 ..

이번 주를 진행하면서 기술적으로 막혔던 부분 도메인 주소와 S3 주소에 버전이 다른 이슈 문제 상황 소켓 테스트를 위해 몇몇 컴포넌트를 주석으로 변경하여 배포를 한 후 동작하는 것을 확인하고 완성된 파일을 build 하여 S3에 배포하였다. 도메인에서는 변경사항이 제대로 반영되지 않았고, s3 도메인에서는 변경사항이 반영됐다. 문제 원인 가설 1. 도메인까지 연결되는 시간이 걸림으로 기다려야 한다. 가설 2. s3 배포를 할 때 도메인에도 올리기 위해서는 추가적으로 어떤 행동을 해야 한다. 가설 확인 가설 1 확인 . 단순히 기다려봤다. 가설 2 확인 . 가설 1을 확인하기 위해 기다리면서 검색을 진행했다. s3와 도메인에 차이에는 route 53과 cloudfront에 영향을 받았고, 만일 두 버전에 ..

실전 프로젝트를 진행하며 기술적으로 막혔던 부분 특정 상황에서 useQuery로 API 요청하기 자세한 정리는 github 링크로 대체 GitHub Issue 실제로 사용하지는 않았지만, 사용하기 위해 다양한 방법으로 많은 시도를 한 주제이다. 단순히 react-query를 사용하지 못하는 것일 수 있으나, 내가 찾은 공식 문서에 옵션과 지금까지 습득한 지식을 가지고 해결하기 위해 많은 노력을 했다. 물론 해결방법은 구글링을 더 깊게 한다면 금방 찾을 수 있을 것 같다. 고민하게 된 이유는 옵션을 하나 찾았을 때 충분히 배운 지식으로도 더 좋은 방법이 아닐 수는 있지만, 구현 할 수 있다는 생각이 들었고, 내가 지금 수준에서 할 수 있는 방법 중에 어떤 방법이 제일 효율적일지 찾기 위해 다양한 방법으로 ..

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..

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

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

6주차 Week I Learn (미니 프로젝트) 이번 주 키워드 첫 협업을 진행하며 느낀 아쉬운 점, 뿌듯한 점 첫 협업을 진행하며 느낀 아쉬운 점, 뿌듯한 점 첫 백엔드와의 협업을 해봤다. 아쉬운 점 너무 아쉬운 부분이 많았다. 프로젝트를 진행하면서 더 효율적인 방법으로 협업을 할 수 있었을 것 같다는 생각과, 프론트 엔드와도 효율적으로 작성 할 수 있을 지 않을 까 하는 생각이 들었다. 우선 프론트 엔드끼리 컴포넌트 쪼개는 부분에서 아직 미숙한 것 같다. 공통되는 컴포넌트를 정하고 페이지 관련 컴포넌트, 폴더를 쪼개는 규칙, 코드 순서 등 있어보이기 위해 정하고 시작했지만, 대충 정하다보니 지켜지지 않는 경우가 허다했다. 내가 정했지만 나도 못 지키겠더라.... 백엔드와도 마찬가지이다. 모두가 API..

3주차 Week I Learn (주특기 1주차) 이번 주 키워드 axios axios axios는 비동기 HTTP 통신을 할 때 사용된다. javascript에서는 보통 ajax , fetch, axios를 사용하는데 이 장단점을 비교해보자 ajax - Asynchronous JavaScript And XML 자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신이다. XMLHttpRequest 객체를 이용해 전체 페이지가 아닌 필요한 데이터만 불러 올 수 있다. 장점 Jquery를 통해 쉽게 구현이 가능하다. Error, Success, Complete의 상태를 통해 실행 흐름을 조절할 수 있다. 단점 Jquery를 사용해야만 간편하게 구현 할 수 있고 호환성을 보장 받을 ..