FrontEnd/React

이전 포스팅에서 Docker와 AWS EC2를 활용하여 http 배포에 성공하였다. 그런데 만약 코드에서 수정사항을 배포된 주소에 반영하려면 다시 재배포 해야하는데, 이를 수동으로 하려면 생각만하도 너무 귀찮다. 이런 상황을 위해 Github Actions를 활용하여 CI/CD를 적용해보자. 최종 배포될 브랜치는 main 브랜치이므로 main 브랜치에 push가 감지되면 실행할 작업(Workflow)를 설정해야 한다. github 레포로 가서 루트 경로의 .github/workflows 위치에 yml 파일을 생성해준다. 나는 prod.yml 파일을 해당 경로에 생성해 주었다. name: Docker on: push: branches: [main] jobs: build: runs-on: ubuntu-lat..

이전 포스팅에서는 도커파일을 통해 도커 이미지를 생성한 후 Docker hub에 올리는 방법을 알아보았다. 이제 해당 이미지를 AWS EC2 에서 사용하기 위해 AWS에 접속 후 인스턴스를 생성해보자. ✅패키지 매니저: npm ✅윈도우(Windows) ✅React(Create React App) AWS에 접속한 뒤 인스턴스 시작을 클릭한다. 우선 인스턴스 이름을 입력해준다. 그리고 스크롤을 내리면 위와 같이 키 페어를 생성하는 항목이 나온다. 새 키 페어 생성을 누른 뒤 키 페어 이름을 입력하고 키 페어 유형은 RSA 그대로 냅둔다. 우리는 putty에 접속하여 인스턴스에 접근할 것이므로 키 파일 형식을 .ppk로 체크한 뒤 생성해준다. 다운로드 된 키 페어를 잘 저장해준다. 그 후 해당 페이지에서 인스..

졸업 프로젝트를 진행하며 플젝 배포 링크를 제출해야했다. 우리는 백과 프론트를 따로 배포하고 있어 그냥 vercel 같은 편리한 배포 사이트를 이용해도 되었지만, 복습할 겸 도커와 EC2 로 배포를 결정했다.(백 프론트 같이 배포할때를 대비하여 도커 적응은 필수...) ✅패키지 매니저: npm ✅윈도우(Windows) ✅React(Create React App) 우선 현재 프로젝트의 루트 경로에 도커파일을 작성해줘야 한다. 위와 같이 루트경로에 Dockerfile.prod 파일을 생성해 주었다. 내부 코드는 아래와 같다. FROM node:14 AS builder # set working directory WORKDIR /app # install app dependencies #copies package..

Input 태그에 onChange 함수를 적용해보며 Throttle 과 Debounce 함수에 대해 알아보는 시간이다~!! 먼저 Styled-components 를 활용하여 나만의 Input 태그를 꾸며준다. 그 후 onChange 함수를 통해 input에 변화가 있을 때 마다 콘솔에 출력해보자. function App() { const textInputted = (e: React.ChangeEvent) => { console.log(e.target.value); }; return ; } const Input = styled.input` width: 300px; height: 50px; background-color: wheat; border-radius: 10px; font-size: 20px; `; ..