뉴히의 개발 로그

[ 비동기 통신 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 ..

Reducer : 변화를 일으키는 함수 리액트는 state의 변화가 있어야 리렌더링이 된다. 그래서 useState 사용시에 우리는 setState로 상태 변화를 주고 리렌더링이 발생하도록 했다. redux 에서는 reducer가 그 역할을 한다. state를 action의 type에 따라 변경한다. 리듀서는 인자로 state와 action 인자를 받는다. state에는 초기 상태값을 할당해 줘야한다. //초기상태값(state) const initialState = { number: 0 // number라는 state : 초기값 0 }; //리듀서 const counter = (state = initialState, action) => { switch (action.type) { case PLUS_ONE..

React Hooks [useState/useEffect/useRef/useContext/최적화(React.memo, useCallback, useMemo)] useState Hook : 리렌더링이 일어날 수 있게 상태를 변경해주는 Hook useEffect Hook : 컴포넌트가 화면에 보여졌을때, 컴포넌트가화면에 사라졌을때 어떠한 것을 실행하게하는 Hook useRef Hook : DOM 요소에 접근 할 수 있게 하는 Hook useContext : props drilling을 방지하기 위해 전역 데이터를 관리할 수있게 해주는 Hook React.memo : 부모컴포넌트로 인해 자식 컴포넌트들이 전부 리렌더링 되는것을 막는것(컴포넌트 memoization) useCallback : 함수형 컴포넌트의 ..

지난번 팀과제 진행시에 댓글등록 기능을 구현하기 위해 localstorage를 사용하는 팀들도 있었다. 하지만 우리팀은 mongoDB를 이용했기에 사용하지 않았었는데 이번 과제로 localstorage를 하용해야해서 개인과제에 + 기능 구현으로 localstorage를 이용해서 새로고침시에도 화면에 남아 있을수 있도록 구현했다. 기본 사용법은 지난번 글에! localstorage 기본 사용법 https://newheee.tistory.com/27 사용하는 건 생각보다 어렵진 않았다! localstorage 데이터 저장하기 const clickAddTask = () => { const addTaskList = { id: randomID(), title, text, isDone: false }; const ..

warning: in the working copy of 'src/App.css', LF will be replaced by CRLF the next time Git touches it warning: in the working copy of 'src/App.js', LF will be replaced by CRLF the next time Git touches it warning: in the working copy of 'src/index.js', LF will be replaced by CRLF the next time Git touches it CR(Carriage-Return) 현재 커서를 줄 올림 없이 가장 앞으로 옮기는 동작 LF(Line-Feed) 커서는 그 자리에 그대로 둔 상황에서 종이..

터미널에서 새로운 폴더를 생성하고 yarn을 실행했더니 오류가 났다......? 내버전은 18.15 였는데 18.16으로 업데이트하니 오류가 해결되었다 ㅎㅎ 는 내 착각!!!!!!!!!!!!! 해결되지 않음 2)settings.json 파일에 코드 추가 "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, 실패. 3) npm 패키지 추가설치 npm i eslint-plugin-jsx-a11y 실패! 사실, 추가 패키지등의 설치 없이 실행되어야하는게 맞다. 아무것도 안한 프로젝트기 때문에.... 그래서 튜터님께 여쭤보니 yarn 설치 오류등이 은근 많다고 한다. 다른 프로젝트는 잘 열린걸 보니 무언가 프로젝트생성시에 오류인듯... 프로젝트를 ..

명령 프롬프트에서 드라이브 변경을 어덯게 하는지 몰라서 이렇게 저렇게 쳐봣는데 ㅋㅋㅋㅋ 엄청나게 간단했던 ㅎㅎㅎㅎㅎㅎ 드라이브안에서 폴더간 이동은 cd로 가능하지만 드라이브간 이동은 불가하다! 드라이브간 이동은 '드라이브 이름:' 이렇게만 적어주면 바로 이동된다 ㅎㅎ 새로시작한 리액트 폴더를 만들기 위함이었기 때문에 리액트 폴더도 만들어보자 명령 프롬프트에서 ls => 현재 내가 위치하고 있는 곳이 어디인지 확인 cd 폴더이름 => 리액트 프로젝트를 생성하고 싶은 폴더로 이동 yarn create react-app week-1 => week-1 폴더명을 가진 프로젝트 생성! 알아서 엄청 막 설치가 된당 ㅎ 해당 폴더로 들어가보면 이렇게 폴더 구조가 알아서 만들어져 있다! 명령 프롬프트에서 아래명령어로 프..