React

[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..

[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 만들고 업로..