개발/React

[React] express 서버와 연결하기

1. /front 폴더에 react 설치 2. /backend 폴더에 서버를 설치 const express = require("express"); const app = express(); const server = app.listen(8000, () => { console.log("server start"); }); 3. 데이터 주고 받기 (1) cors 보안정책 cors 보안정책 때문에 하나의 브라우저에서 다른 도메인/포트의 서버로 요청하면 에러가 나타난다. 프론트와 백 두개의 서버를 동시에 실행하려면 cors로 접근을 허용해 줘야 한다. 이와 같이 하는 이유는 해킹과 보안문제 때문이다. 누구나 접근할수 있다면 데이터 전송을 가로채 보안에 문제가 생김 const cors = require("cors")..

[React] middleware 쓰기(thunk)

1. 미들웨어를 사용해야 하는 이유 리덕스의 플로우차트 : UI -> Dispatch -> Action -> Store(Reducer)(state) -> UI 리덕스는 동기적으로 처리가 되는데 변경값이 있으면 바로 동작해서 API 같은 데이터를 불러올때 비동기 작업이 힘들다. API 데이터를 받은 이후에 작업을 해야하기 때문에 미들웨어를 사용해야 한다. 2. 미들웨어란 미들웨어는 양 쪽을 연결해주고 데이터를 주고 받을수 있도록 중간에서 매개 역할을 담당하는 소프트웨어다. 컴퓨터에 있는 프로세스들에게 어떤 서비스를 사용할수 있도록 연결해주는 소프트웨어를 말한다. 리덕스 미들웨어에는 saga, thunk 등이 있다. 그 중 thunk가 적용하기도 쉽고 많이 사용한다. 3. thunk thunk 참고 사이트 ..

[React] 게시판만들기(Redux)

GitHub - TeTedo/react_project Contribute to TeTedo/react_project development by creating an account on GitHub. github.com 기존 게시판에서 useState를 전부 Redux로 바꿨다. 기능도 추가했다. 수정하기, 삭제하기 기능 추가

[React] Redux

1. 리덕스란? 리액트에서 사용할수 있는 하나의 라이브러리이다. 라이브러리라는건 없어도 리액트로 작엄물을 만들수 있지만 편하게 작업하려고 쓰는것이다. 실무에서 리덕스를 안쓰면 매우 불편하기 때문에 필수로 사용한다. 리액트는 자식 컴포넌트에 props로 전달은 가능한데 다른 컴포넌트에서 직접 데이터 공유가 불가능하다. 그래서 공유해야할 데이터를 공유받는 자식 컴포넌트들의 공통부모에서 State를 만들어서 자식 컴포넌트에게 전달한다. 리액트는 데이터 흐름이 단방향이기 때문에 이러한 작업이 필요하다. 그래서 작업을 하다보면 부모 컴포넌트에 무척 많은 props가 생기는데 이런 단점을 보완하기 위해서 리덕스를 사용한다. 리덕스는 state를 저장해주는 store(저장소) 각각의 컴포넌트가 어느 컴포넌트던 사용할..

[React] 게시판 만들기

GitHub - TeTedo/react_project Contribute to TeTedo/react_project development by creating an account on GitHub. github.com 리액트로 백앤드를 쓰지 않고 useState함수를 사용하여 게시판을 만들어봤다. 1. 로그인 기능 user라는 배열안에 배열 형태로 정보들을 넣어놨고 회원가입을 할때에 useState 로 user의 배열에 새로운 user값들을 추가해줬다. 로그인을 했을때 login = true로 설정하고 loginUser에도 해당 로그인한 아이디를 넣어줬다. 2. 로그아웃 기능 loginUser로 로그인을 했을때 현재 로그인되어있는 아이디를 받아온다. loginUser를 빈값으로 만들어주고 login을 f..

[React] 라우터 사용

1. React에서 router사용하기 리액트는 페이지가 하나인데 어떻게 여러개의 페이지를 보여줘야 할까? 페이지도 컴포넌트, 하위 컴포넌트들을 모아서 페이지의 형태로 구성을 하고 페이지 컴포넌트를 url의 경로에 맞춰서 보여주면 된다. 한페이지에 내용이 교체되면서 페이지가 이동된것처럼 보여주는 것이다. 리액트는 새로고침되지 않는 어플리케이션이기 때문에 리액트의 페이지 이동은 눈속임이다. 리액트 라우터 라이브러리가 해주는일 : url이 바뀔때 컴포넌트를 바꿔줌 router 설치 https://reactrouter.com/en/v6.3.0#welcome-to-react-router Docs Home v6.3.0 Official assets for things like articles and video tu..