react

[React] React 배포하기 (EC2, S3)

프로젝트 빌드하기 이 글을 보고계신 분들은 이미 리액트 프로젝트가 있을거라고 생각한다. 빌드 명령어를 통해서 파일을 빌드한다. $ npm run build $ yarn build CRA를 사용했다면 build 폴더가 생성되면서 빌드 파일들이 들어있다. index.html과 js로 파일들이 변환된다. 이 상태로 서버에 올려봤자 서버에 접속한 사용자는 어떤 화면도 볼 수 없다. 서버에 접속할 때 사용자는 index.html을 볼 수 있도록 설정을 해주어야 한다. S3 이용하기 이 때 S3의 정적 웹사이트 배포를 이용하면 접속할 때 index.html과 js를 브라우저에서 확인할 수 있도록 할 수 있다. 이 기능을 이용하면 따로 해주어야하는 것이 없기 때문에 React를 배포할 때 대부분 S3서버를 이용한다...

[React] Github Actions로 CI/CD 적용하기

S3 서버 CI/CD를 적용하기 이전에 배포할 서버부터 만들어야 한다. 배포 서버는 S3를 이용하도록 하겠다. S3관련해서 글을 정리할려고 했지만 이 글 만큼 정리가 잘 되어있는 글은 없는 것 같다. AWS S3로 React 배포하기 AWS S3, CloudFront, Route 53을 사용해서 React 배포하기 velog.io S3배포가 마치면 CI/CD도 설정하러 가보자 CI/CD CI/CD는 Continuous Integration / Continuous Deployment의 약자이다. 지속적 통합과 지속적 배포가 하나가 되어야 하기에 자동 배포로만 이해했다면 반만 이해했다고 볼 수 있다. Github Actions라는 너무 좋은 기능이 나와서 대부분 요즘에는 이것을 사용하는 것 같다. CI/C..

[Vite] vite로 이유 모르게 웹소켓 통신이 안되는 경우(ws, sockjs)

springboot로 만든 시그널링 서버와 react의 클라이언트 연결을 시도하는 중에 이유를 알 수 없게 연결이 되지 않았다. 여러 차례 다시 확인해봐도 코드 상으로 전혀 문제가 없는데, 연결이 전혀 되지 않았다. 이상한 느낌이 들어서 똑같은 코드를 cra해서 만들어보고 실행해보았다. 딱 한가지의 차이점이 있었는데 vite쪽 웹 소켓을 vite-hmr이라는 프로토콜을 사용하고 있었다. switching protocols가 발생하면서 cra는 /ws가 붙지만 vite는 붙지 않는다. 물론 cra로 진행한쪽은 통신이 잘된다. HMR은 Hot Module Replacement의 약자로 애플리케이션을 다시 시작하지 않고도 일부 컨텐츠만을 갱신할 수 있다는 vite의 특징이자 장점이다. 하지만 통신 프로토콜과는..

json-server 커스텀하기

json-server 커스텀이 필요했던 이유 react를 redux-toolkit을 공부하면서 간단하게 crud를 실습해야했기 때문에 간단하게 json-server를 이용하기로 했다. json-server에서 지원해주는 기능으로 간단한 crud는 손쉽게 이용할 수 있다. 필요한 것도 db로 필요한 것도 json파일 하나 뿐이기 때문에 어려울 것이 없다. 당연하게도 이 간단한 기능에는 한계가 있었는데 GET으로는 read만 가능하고 POST로는 생성만 가능했던 것. 그게 왜 문제냐고 할 수 있는데, 비밀번호가 맞는지 확인한다고 하면, GET 방식으로 query string에 비밀번호를 넣어서 보내야하는 치명적인 문제점이 발생하게 된다. (물론 실습이니까 그냥 넘어갈 수도 있었는데 용납할 수가 없었다.) 사..

[React] Lifecycle과 메소드 그리고 Hook

React Life-cycle 출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ (각각의 메소드 버튼들이 리액트 공식문서로 연결되니 사이트에 들어가서 확인해봅시다.) 🕵️‍♂️클래스 컴포넌트 Mount 1. constructor() 컴포넌트가 마운트되기 전에 호출됩니다 초기 state 값을 세팅하기 위해 호출합니다. constructor(props) { super(props); // 여기서 this.setState()를 호출하면 안 됩니다! this.state = { counter: 0 }; this.handleClick = this.handleClick.bind(this); } 2. static getDerivedStateFromP..

[React] Redux-toolkit 입문하기

redux로 구성되어 있던 카운터 프로젝트를 redux-toolkit으로 바꿔보면서 무엇이 다른지 알아보겠습니다. 🔍카운터 코드로 비교하기 // Action Value const ADD_NUMBER = "ADD_NUMBER"; const MINUS_NUMBER = "MINUS_NUMBER"; // Action Creator export const addNumber = (payload) => { return { type: ADD_NUMBER, payload, }; }; export const minusNumber = (payload) => { return { type: MINUS_NUMBER, payload, }; }; // Initial State const initialState = { number: ..

[React] 카운터로 시작하는 Redux

👨🏻‍💻MVC 패턴과 FLUX 패턴 이렇게 어렵고 복잡한 MVC패턴의 문제점이었던 양방향 바인딩으로 인해서 state의 관리에 어려움을 겪었다. 단방향 바인딩을 위해서 FLUX패턴이 등장하게 되었다. View는 MVC 패턴과 달리 데이터를 직접 변경시키지 않고 Action만을 넘겨준 후, View에서 이뤄진 Action은 반드시 Dispatcher를 거쳐 데이터 변경을 진행하게 됩니다. 데이터 변경이 이뤄진 이후, Store에 값을 저장하는 과정을 통해 View는 변경된 데이터를 Store를 통해서 전달받게 됩니다. 위와 같은 과정을 통해 이뤄진 데이터 변경은 뷰와 모델 사이의 state 전이를 간편화해주고 기존에 흐름을 파악하기 어려웠던 관리에 예측이 가능하게 해주어, 더욱 편리한 state 변경 방법..

[React] gh-pages 배포하기

👀gh-pages란? github는 계정당 하나씩 배포용 도메인을 사용가능하도록 지원하고 있습니다. 이렇게 {username}.github.io의 형태의 도메인은 깃허브에서 지원해주는 도메인이라고 생각하면 됩니다. https://jojoldu.github.io/ 서버 백엔드 엔지니어 이력서 jojoldu.github.io 보통은 이걸 이용해서 개발블로그로 이용하시는 분들이 많고, 주어진 도메인 안에서 레포지토리별로 배포가 가능합니다. 프로젝트를 배포하게 되면 도메인은 이런 형태가 됩니다. {username}.github.io.{repo} 다만 정적 웹페이지만 배포할 수 있기 때문에 동적인 기능이 들어갔다면 배포가 제한적일 수 있습니다. 이제 프로젝트를 배포하러 가봅시다 📤github repo 만들고 업로..