목록전체 글 (141)
뉴히의 개발 로그
[ 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..
Learned | 이번주 배운 것 리액트 리덕스/파이어베이스를 사용해서 앱을 만들었다. firebase API를 가져다 쓰는게 처음에 너무 어렵고 ㅠㅠ힘들었다. 그런데 쓰다보니 API를 가져와서 쓰기만 하면 되는 거라 너무 편리해질듯 싶다. Keep | 다음 프젝에도 유지했음한다 막히는 부분은 팀원들과 vs 라이브쉐어를 통해서 같이 코드를 만들어갔다. 혼자서는 오래 고민해도 해결되지 않던부분도 팀원과 함께 해결하니 훨씬 수월하게 해결 할 수 있었다. Problem | 이번프젝 문제점/해결방안 컬렉션을 각각 다르게 만들었고 나중에 그걸 비교해서 매칭해서 사용하려니 어려웠다. 결국은 필드에 비교할 수있는 중복값을 각각 넣어서 매칭을 시켰는데 이게 좋은 방법인지는 의문이다! 일단은 매칭이 가능하게 해결은 됬다..