Stack/React

[React / 스터디] 영화 평점 사이트 구현하기

-- 만들 사이트 https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org -- API https://developers.themoviedb.org/3/getting-started/introduction API Docs developers.themoviedb.org -- Git https://github.com/React-Study/movie-trailer GitHub - React-Study/movie-trailer Contribute to React-Study/movie-trailer develo..

[React / 스터디] 모두의 일기장 클론 코딩

https://github.com/Star-Think/react-today-story GitHub - Star-Think/react-today-story Contribute to Star-Think/react-today-story development by creating an account on GitHub. github.com -- 원본사이트 https://todaysdiary.net/everydiary/ 오늘의 일기 세상에서 가장 재미있는 일기쓰기 todaysdiary.net

[React] 고객관리 사이트에 이미지 업로드 부분 추가

2022.07.21 - [Coding/React] - [React] 고객관리 사이트 (Client) redux로 구현하기 [React] 고객관리 사이트 (Client) redux로 구현하기 2022.07.07 - [Coding/React] - [React] 고객관리 사이트 구현 (Client) [React] 고객관리 사이트 구현 (Client) green_customer_client Header Footer CustomerList Customer DetailCustomer - 라이브러리 설치 a.. 7ingout.tistory.com 2022.08.03 - [Coding/React] - [React] 회원가입 기능 구현 (MySQL / bcrypt / 쿠키) [React] 회원가입 기능 구현 (MySQL..

[React] 회원가입 기능 구현 (MySQL / bcrypt / 쿠키)

2022.07.21 - [Coding/React] - [React] 고객관리 사이트 (Client) redux로 구현하기 [React] 고객관리 사이트 (Client) redux로 구현하기 2022.07.07 - [Coding/React] - [React] 고객관리 사이트 구현 (Client) [React] 고객관리 사이트 구현 (Client) green_customer_client Header Footer CustomerList Customer DetailCustomer - 라이브러리 설치 a.. 7ingout.tistory.com 1. MySQL 데이터베이스에 table 생성 2. 서버 구현 1) join 경로 post 요청시 customer_members 테이블에 데이터 추가하기 비밀번호는 암호화하..

[React] 고객관리 사이트 (Client) redux로 구현하기

2022.07.07 - [Coding/React] - [React] 고객관리 사이트 구현 (Client) [React] 고객관리 사이트 구현 (Client) green_customer_client Header Footer CustomerList Customer DetailCustomer - 라이브러리 설치 axios react-dom react-router-dom react-daum-postcode material-ui https://mui.com/material-ui/getting-start.. 7ingout.tistory.com * 리덕스 모듈 초기값, 액션 타입, 액션 생성 함수, 리듀서 modules -> customers.js customers: { data, error, loading }, a..

[React] json-server을 이용하여 데이터 받아오기

2022.07.14 - [Coding/React] - [React] Redux Middleware - 리덕스 미들웨어 [React] Redux Middleware - 리덕스 미들웨어 리덕스 미들웨어 1. 미들웨어 만들기 2. thunk 미들웨어 사용하기 dispatch => 미들웨어 => reducer const middleware = store => next => action => { } function middleware(store) { return function(next){ .. 7ingout.tistory.com npm install axios npx json-server ./data.json --port 4000 api/posts.js // n 밀리세컨드동안 기다리는 프로미스를 만들어주는 함수..

[React] Redux Middleware - 리덕스 미들웨어

리덕스 미들웨어 1. 미들웨어 만들기 2. thunk 미들웨어 사용하기 dispatch => 미들웨어 => reducer const middleware = store => next => action => { } function middleware(store) { return function(next){ return function(action) { 하고싶은 작업 } } } npx create-react-app redux-middleware npm install redux npm install react-redux yarn add redux-devtools-extension npm install redux-thunk yarn add react-router-dom // npm으로 설치하든 yarn으로 설치하..

[React] Redux - 리덕스

redux는 스토어를 사용. state 1. 하나의 애플리케이션은 하나의 스토어가 있다. 2. 상태는 읽기 전용이다. 3. 변화를 일으키는 함수 리듀서를 사용해서 이전의 상태를 절대로 변경하지 않고 새로운 상태객체를 만들어서 반환한다. 똑같은 파라미터로 호출된 리듀서 함수는 똑같은 결과값을 나타내야한다. new Date() / Math.random() / axios.get { // return { // type: INCREASE // } // } // 화살표 함수에서 return을 생략한다면 const decrease = () => ({ type: DECREASE }) const changeText = (text) => ({ type: CHANGE_TEXT, text // text: text 위에처럼 t..

[React] HTML / 자바스크립트로 Redux 맛보기

https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org https://github.com/reduxjs/redux-devtools/tree/main/extension GitHub - reduxjs/redux-devtools: DevTools for Redux with hot reloading, action replay, and customizable UI DevTools for Redux with hot reloading, action replay, and customizable UI - GitHub - reduxjs/redux-devtools: DevTo..

[React] git clone 한 뒤, 오류 없이 npm start 하는 방법

1. git clone ~~~ 을 해준다. 2. clone한 폴더를 열고 터미널에 npm ci 3. npm start // git clone 후 npm install을 바로 하면 package-lock.json 파일이 변경되어서 npm start가 안된다구 한다 // npm ci를 하면 package-lock.json 파일이 변경되지 않고 node_modules 폴더가 잘 설치된다.