뉴히의 개발 로그

리덕스를 사용하지 않고 json-server에 데이터 저장후 리액트 쿼리로 app.jsx에 로 감싸주면 전체 파일에서 query에 접근해서 사용할 수 있다. // App.jsx const queryClient = new QueryClient(); const App = () => { return ( ); }; api폴더에 전체 모듈을 모아 작성해주고 // axios 요청이 들어가는 모든 모듈 import axios from 'axios'; //조회 const getTodos = async () => { const response = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`); return response.data; }; // 추가 const..

[ 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 + 다른 프로젝트 생성했을땐 글로벌로 설치 안해도 잘되었다...?ㅎㅎㅎㅎ처음에 패키지 설치가 무언가 잘못 되었..

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

특강시간에 ThemeProvider를 이용한 전역스타일링 관리를 실습했다. 페어프로그래밍으로 실습을 진행했는데 팀원분중에 상당한 실력자분이 계셔서 아주 나이스하게 마무리했다. styled-component에서 제공하는 ThemeProvider는 테마를 만들어 관리해줄 수 있는데 예를 들어 팀프로젝트에 포인트컬러, 서브컬러, 타이틀 사이즈등을 일괄적으로 정해두고 그걸 수정할 시에 한곳에서 수정하면 한번에 관리가 가능하다. 다크/라이트모드 관리 폰트컬러와 배경색을 지정해두고 다크모드/라이트모드 관리가 가능하다. //첫번째 코드 const darkTheme = { backgroundColor: 'black', fontColor: 'white' }; const lightTheme = { backgroundCol..