본문 바로가기

전체 글

 (85)
2024.2.28 기록 ( 협업과정 중 패키지를 관리하기 ) npm install (혹은 i ) 터미널에서 패키지를 설치할 떄 기본적으로 이런 방식으로 설치하게 된다. npm install --save 기존에는 이런 방식으로 작성을 했는데, package.json 내부에 존재하는 depandencies 항목에 추가하기 위함이다. 기본적으로 깃허브를 통해 협업을 진행할 때는 node_module 자체를 깃허브에 공유를 하지않기 때문에 패키지를 추가하면, package.json에 dependencies 라는 key값으로 저장해두고 자료를 받았을 때 기록된 패키지들을 npm install 명령어를 통해 인스톨하는 과정을 거치게 된다. 중요한 부분은 기존에 --save를 더이상 추가해주지 않아도 되는 부분이다. npm5버전부터는 save기능을 내부에 포함하고 있다.
2024.2.27 기록 git을 관리하는 방법중 유용한 것 (git stash) 통상적으로 브랜치를 이동 할 때, 작업했던 자료를 보존하기 위해 commit을 요구한다. 하지만 작업 할 브랜치를 잘못 입력 한 경우, commit을 할 수 없기 때문에 곤란한 상황이 더러 존재한다. 그때 사용 할 수 있는게 git stash이다 일종의 임시저장 기능인데, 간단하게 흐름을 적어보자면 다음과 같다. git stash →git switch ‘이동할 브랜치’ → git stash apply → git stash clear(터미널에서 제거하기 위함) git stash를 작성한 순간, 작성한 자료는 임시저장이 되고, apply를 한 순간 이동한 브랜치에서 작성한 것처럼 된다. 다만, 터미널에는 이력이 남기 때문에 clear를 통해 stash의 흔적을 지워주는 부분이 깔끔하다.
2024.2.26 기록 (코드카타 문자열 다루기 기본) 문자열 s의 길이가 4혹은 6이고, 숫자로만 구성되어있는 지 확인해주는 함수 solution을 완성하기. ex) a234 = false , 1234 = true 우선 문자열의 길이가 4 혹은 6이어야 대전제 조건이 성립한다. if ( s.length === 4 || s.length === 6 ){} 다음 숫자로만 되어있는 지 확인하기 위해서 숫자가 아니라면 false를 반환하거나, 위의 조건과 동시에 숫자로만 이루어져있어야 한다. parseInt를 사용하여 숫자여부를 판단하기로 하였다. parseInt() - JavaScript | MDN parseInt() 함수는 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다. developer.mozilla.org func..
2024.2.23 기록 (새로운 팀 프로젝트) 오늘은 프로젝트 발제와 기획에 대부분의 시간을 사용했다. 특히 코드컨벤션과 깃허브 룰을 신경써서 제작했다. 기능을 압축했다. 카카오 지도 API를 이용해 필수구현 과제를 빠르게 채우고, 남는 시간을 길게 가져가서 선택사항을 구현하고자 한다. 이 부분에서 supabase의 Realtime 기능을 사용 해볼 거 같다. 스타일링은 CSS Module을 사용해서 진행하고, 카카오 지도의 API의 기능들을 충분히 활용하는 시간을 가지려고 한다.
2024.2.22 기록 (react-query) 리액트 미들웨어 청크 (thunk) 쿼리 (react-query) 오늘은 이 중에서 리액트 쿼리에 대해서 알아보는 시간을 가졌다. 청크에 비해서 굉장히 짧고 편함.. 핵심 query = Read mutation = Create, Update, Delete query Invalidation = 이전 값 무효화 = 최신데이터로 갱신함 선행되어야 모듈 설치 yarn add axios yarn add json-server 실행하기 yarn json-server --watch 파일.json --port 포트 상위 컴포넌트에 redux provider 를 설정했던 것처럼 설정해주기 const 쿼리클라이언트 = new QueryClient(); 이렇게 되면 작업 전역에서 사용이 가능하다. DB를 별도로 분리하고 (a..
2024.2.21 기록 (redux-thunk에 대한 짧은 이야기) 이번에 프로젝트를 마감하면서.. 시간이 많이 모자랐던 것과는 별개로 이것 저것 많은 정보가 쏟아졌던 것 같다. 그 중 axios와 redux-thunk는 환장의 콜라보를 이뤘는데, 짚고 넘어가야 하는건 비동기 통신의 상태라고 할 수 있는 3가지 상태이다. pending, fufliled, rejected 각각 요청, 수행, 거절됨 정도로 요약이 가능한데 비동기 통신은 기본적으로 주고 받아야 하나의 사이클인 점에서 이 부분들을 여러가지 방법으로 지켜주고 있다. async/ await가 그 방법중 가장 많이 사용하는 방법이었다. 또한 반드시 실패하는 일을 고려해서 try / catch , then, catch를 사용하여 어떠한 이유로 비동기 통신이 실패했는지, 알아두고 넘어가는 부분은 굉장히 중요하다는 것을..
2024.2.20 기록 (프로젝트를 하며 나온 자잘한 실수) 깃허브에 push 할 때 발생 할 수 있는 오류 새로운 프로젝트를 진행하면서 보통 마주하는 오류이다. 보통 리포지토리 생성을 조금 늦게 진행하는 경우 발생, reject가 발생하기 때문에 git pull을 진행 한 후 재차 git push를 하게 된다. * branch main -> FETCH_HEAD fatal: refusing to merge unrelated histories 그 때 이런 오류가 발생하는데, 원인은 깃허브에서 생성한 히스토리와 로컬에서 진행한 히스토리의 충돌(없는 기록)이 발생하기 때문에 발생하게 된다. 따라서 다음과 같이 진행해주면 해결이 된다. git pull origin main --allow-unrelated-histories 이후 다시 git push를 진행하자 vite을 ..
2024.2.19 기록 (비동기통신을 위한 Json-server 라이브러리와axios) react 비동기통신을 위한 라이브러리 axios 먼저 Json-server 를 설치함. 그 이전에 선행되어야 할 항목 vite으로 진행 시 → yarn create vite@latest → 경로이동 → yarn install → yarn add axios CRA로 진행 시 yarn add axios json서버와 개발자 브라우저를 동시에 실행하기 위해서는 터미널을 2개 사용 yarn json-server --watch 데이터베이스이름.json --port 원하는포트 ex) yarn json-server --watch db.json --port 4000 다른 터미널에서는... yarn run dev CRUD CRUD는 각각 post, get, patch, delete를 사용하였다. db.JSON { "t..

티스토리툴바