뉴히의 개발 로그

리액트 심화주차로 접어들었다 호오 시간이 너무 빠르고 할것은 넘쳐나고 ㅎㅎㅎㅎ 잠은 계속 오고 ~ 리덕스 툴킷과 미들뭬어(Thunk, React Query), json-server 등 을 배웠는데 강의를 듣는데 상당히 오래 걸렸다. 내용도 어렵고 다시봐도 또 새로운듯한 ㅎㅎㅎ 정주행을 2회독 했는데 아직도 어렵고 추가적으로 공부해야할게 많은듯 하다! 그래도 2회독을 차근차근 진행하니 조금은 이해가 된것도 같다. 실제 프로젝트에 얼마나 잘 사용할 수 있을지가 의문이지만!!! 추가로 궁금한 부분의 서칭도 많이해보고 튜터님께도 좀 질문을 하러 가야겠다ㅎㅎ 개인과제 2개의 단계를 금요일까지 제출해야하는데 과제를 진행하면서 더 공부하고 익숙해져야 할것 같다.

[ Throttling ] Leading Edge : 이벤트가 일어난 첫번째에 function을 일으킴 Trailing Edge : 이벤트가 일어났을 때 어느정도 Delay를 두고 마지막에 function을 일으킴 Leading & Trailing Edge : dealy의 처음과 마지막에 function을 일으킴 const throttle = (delay) => { if (timerId) { // timerId가 있으면 바로 함수 종료 return; } setState(!state); console.log(`API요청 실행! ${delay}ms 동안 추가요청 안받음`); timerId = setTimeout(() => { console.log(`${delay}ms 지남 추가요청 받음`); timerId ..

[ 비동기 통신 axsios ] 대표적인 비동기 통신 방법 axios / fetch axios란? Promise기반 http 클라이언트 : http를 이용해서 서버와 통신하기 위해 사용하는 패키지 // 사용방법, url 필수 axios.get(url[, config]); axios.post(url[, data[, config]]); axios.delete(url[, config]); axios.patch(url[, data[, config]]); config 옵션 -> https://axios-http.com/kr/docs/req_config 가공한 axios instance 사용하기 // App.jsx const fetchTodos = async () => { const { data } = await ..

프로그래머스 문제를 풀고 다른사람 답변들 보던중 댓글에 의견이 많이 달린 글을 보다가 관심이 생겨서 가져왔다 ㅎㅎ 나는 for문을 썻는데 reduce를 사용한 답변 function solution(absolutes, signs) { return absolutes.reduce((acc, val, i) => acc + (val * (signs[i] ? 1 : -1)), 0); } 답변에 짧고 간결해서 좋다는 의견과 이코드는 for문이 더 빠르고 가독성이 좋고 멋있는코드와 좋은코드를 생각해봐야 한다는 등 의견이 분분했다 $.each(제이쿼리 객체) < map < filter == forEach < reduce < for loop 순 이라는데 그래서 찾아보다가 잘 정리되어 있는 글이 있어서 가져왔다 [ for문..

Redux DevTools $ yarn add redux-devtools-extension 위 명령어로 패키지 설치 import { composeWithDevTools } from "redux-devtools-extension" const store = createStore(rootReducer, composeWithDevTools()); 리덕스 store 파일에 가서 createStore에 두번째 인자로 composeWithDevTools() 함수를 넣어 실행해서 리덕스 개발자 도구를 활성화 시켜서 사용하면된다! 리덕스 디버깅 하기 좋은 ! 데브툴스!! 액션타입 중복값 조심! 그리고 리덕스 복습을 했는데! 다시한번 되새기게된!! dispatch를 보내면 store안에 모든 리듀서들은 실행이된다! 그러기..

json-server --whatch 에러 해결 $ yarn add json-server json 서버 설치후 port지정해서 서버실행! $ json-server --watch db.json --port 4000 그런데 포트를 지정해서 연결하려하는데 계속 오류가 뜸ㅜㅜ package.json - dependencies 에 json-server가 잘 들어가 있는데...? 서칭해보니 전역 설치로 하면 해결이 된다고해서 ㅎㅎㅎ global로 설치 후 실행하니까 잘 연결된다! \{^_^}/ hi! # npm 글로벌 사용법 npm install -g # yarn 글로벌 사용법 yarn global add + 다른 프로젝트 생성했을땐 글로벌로 설치 안해도 잘되었다...?ㅎㅎㅎㅎ처음에 패키지 설치가 무언가 잘못 되었..

회원가입을 github 아이디로 진행했다 로그인하니 이런화면이 뜨는데 깃허브 레포만 선택해주면 바로 임포트 빠박!! root directory는 src 바로 위 디렉터리 순식간에 배포끝~??? ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ + firebase 서버 사용했을시 env 파일 처리했을경우 서버연결! vercel 사이트에서 키값을 따로 다 넣어주고 여기서 import에 env 파일 추가해주면 된다고하는데 아직 안해봤음!

발표를 끝으로 일주일간의 팀 프로젝트가 끝이났다! 끝은 아니겠지만.. 무튼 생각보다 기획의 디테일한부분, 구현 시 고려해야할부분 UX등등! 칭찬도 많이 받았고 힘들었떤만큼 뿌듯하고 만족스럽지만 아쉬운 부분도 많이 있기에 더 추가로 기능 구현을 하고싶은 부분도 있고 팀프로젝트에는 내가 막 push 하기에는 혹시나 피해가 될 수 있고 내 개인레포에도 기록을 남기고 싶어서 커밋까지 그대로 복사할 수 있는 방법을 찾아보았다. oranizations 레포주소와 내 개인 레포 주소만 있으면된다! 복사 명령어 git clone --bare cd -> 기본 레포정보를 다운받은 내 로컬폴더로 이동 git push --mirror -> 빈 레포를 생성해준뒤 push 해야함 원래 다른 데서는 git clone --mirro..