기록하는 개발자 기록하는 개발자

나중에 보고 또 참고할 수 있도록 단계별로 정리를 하려고 한다. 1. Router 만들기 - yarn add react-router-dom 설치 - src폴더 안에 pages, shared 폴더 생성 - pages 폴더 안에 Main.jsx, Detail.jsx 파일 생성 - shared 폴더 안에 Router.js 파일 생성 코드 작성 import { BrowserRouter, Routes, Route } from 'react-router-dom' import Main from '../pages/Main'; import Detail from '../pages/Detail'; const Router = () => { return ( {/*뒤에 어떤 값이 오더라도 id로 가지고 있을 수 있다.*/} ); ..

미들웨어란? dispatch를 해서 action이 리듀서로 전달되고, 리듀서는 새로운 state를 반환한다. 미들웨어를 사용하면 이 과정 사이에 하고싶은 작업을 넣을 수 있다. 예를 들어, counter 프로그램에서 + 더하기 버튼을 클릭했을 때 바로 +1을 하지 않고, 3초를 기다렸다가 +1이 되도록 구현할 수 있다. 미들웨어를 사용하는 이유 서버와의 통신을 위해서 사용하는 것이 대부분 Thunk란? 가장 많이 사용하고 있는 미들웨어 중 하나. dispatch를 할 때 객체가 아닌 "함수"를 dispatch 할 수 있게 해준다. 즉, dispatch(객체) 가 아니라 dispatch(함수)를 할 수 있게 된다. 그래서 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행 된..

button 컴포넌트를 재사용 할 수 있게 style 몇개를 props해서 사용했다. Button함수의 인자에 구조분해할당으로 props 이름들을 가져온다. return문에 저런식으로 인자들을 적어준다. styled component에 ${(props) => props.인자이름}; 을 적어준다 절대 하지 말아야 하는 것 styled component는 컴포넌트 안이 아닌 항상 바깥에 적어줄 것

react-redux-dom 페이지를 구현할 수 있게 해주는 패키지 설치하기 yarn add react-router-dom 명령어로 설치 사용하기 페이지 component를 만들어준다. router.js를 만들어서 router 설정코드 작성 app.jsx에 import하고 이것을 적용해본다. src에 pages 폴더 만들기 pages 폴더 안에 생성할 페이지.jsx 만들어준다. 각 페이지마다 컴포넌트 템플릿을 적용해준다. 이런 식으로 말이다. src 안에 shared 폴더 생성 shared 폴더 안에 Router.js 파일 생성 Route 뼈대 생성 각 페이지 import 하기 Routes 컴포넌트 안에 각 페이지 route들 추가해주기 어.. 이 코드 어디서 많이 봤는데.. 지옥이였던 파이어베이스 프로..

Axios Axios란 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있음. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하면 됨 Axios tjfcl yarn add axios Axios 공식문서 요청 config에 어떤게 들어갈 수 있는지 확인할 수 있다. https://axios-http.com/kr/docs/req_config json-server 공식문서 Get요청 config에 어떤게 들어갈 수 있는지 확인할 수 있다. https://www.npmjs.com/package/json-server 백엔드 개발자와 협업 할 때에는 백엔드 개발자와 소통을 해서 요청방법을 알아낼 수 있는데, json-..

json-server DB와 API 서버를 생성해주는 패키지 json-server가 필요한 이유 백엔드에서 서버 구축을 해주면, 그것과 연결 했을 때 살아있는 듯한 하나의 어플리케이션이 완성된다. 그런데 백엔드에서 서버 구축을 해줄 때 까지 넋놓고 기다릴 수 없기에 백엔드가 하고 있는 작업을 기다리지 않고 프론트엔드 로직과 화면을 구성할 수 있다. 즉, 임시적인 서버 json-server를 이용하여 개발을 할 수 있다. json-server 설치 yarn add json-server json-server 실행 ( react서버와 따로 실행시켜줘야 함) yarn json-server --watch db.json --port 3001 db.json 이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠..

리덕스툴킷 설치 yarn add react-redux @reduxjs/toolkit 일반 리덕스 → 리덕스툴킷으로 코드 수정 수정 전 수정 후 리덕스툴킷으로 변경 하고있었는데 오류남. 객체 리턴 시 ()소괄호로 감싸줘야하는데 간과함. 해결완료 devtools 확장플러그인 : 디버깅에 엄청 도움이 된다. 이건 redux toolkit에 포함되어있는 기능임. 크롬에서 확장프로그램 설치 리덕스 사용 안하는 웹에서는 활성화가 안됨 리덕스 사용하는 웹에서는 초록색으로 활성화 개발자도구 > Redux 클릭 하고 그 웹에서 state에 어떠한 변화가 생기면 어떻게 변화가 생겼는지 diff에 나타남

action creator 사용해야하는 이유 오타 방지 : 액션객체의 type value를 상수로 만들어놓았기 때문에, vscode에서 자동완성 등 기능을 지원받을 수 있음. 그래서 의도치않은 에러(오타)를 없앨 수 있음 유지보스의 효율성 증가 : 내가 만든 ction creator가 만약 100군데에서 쓰이고 있는 상태에서, 그것을 바꾸어야 하는 상황이 오더라도 단 한번의 수정으로 100군데에 모든 수정사항을 반영할 수 있음 코드 가독성 : 모듈 파일에서 Action creator가 일목요연하게 정리가 되어있으면, 내가 아닌 다른 개발자가 보았을 때 해당 모듈이 가지고 있는 모든 ction들을 한눈에 알 수 있게 된다. 즉, 그 자체가 action들의 리스트업을 해주는 역할을 갖게 된다. 위 코드는 c..

Redux 상태관리 라이브러리 전역상태관리 이전에 배운대로라면 props를 통해서 부모->자식 에게로만 정보를 전달 할 수 있었다. 그 한계 때문에 여러 문제가 생기기 때문에 Redux라는 라이브러리를 사용하게 된다. 즉, 전역으로 상태관리를 할 수 있게 만들어주고 어떤 컴포넌트이던지 쉽게 접근할 수 있게 만들어주는게 Redux 이다. 1번 컴포넌트를 4번컴포넌트 에게 props를 통해서 값을 보내줘야 할때는, 불필요하게 2번,3번 컴포넌트를 거쳐서 값을 전달해줘야 했다.(props Drilling) 이런 불편함을 해소하기 위해 나온게 Redux이다. 중앙관리소를 만들어서 전역에서 관리가 가능하게 만드는 거시다. Redux 설치하기 명령어 실행 yarn add redux react-redux 설치가 완료..

useEffect useEffect가 속한 component가 화면에 렌더링 될 때 마다, 특정 작업을 수행 할 수 있게 해주는 hook useEffect 사용하기 useState와 동일하게, import 해줘야 사용할 수 있다. 이렇게 코드를 작성해주었다. Home이 화면에 렌더링 될 때 마다, 콘솔이 출력되는데 두번씩 출력되는건 코드가 2번 실행이 되는게 아니라, strictmode가 적용되어있기 때문이다. strictmode : 리액트 공식문서에 따르면, "StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다." 라고 소개되어 있으며, 잠재적인 문제의 종류로는 다음과 같은..