군붕이의 메모장

우선 현재 클라이언트의 경우 인프라가 아래처럼 구성되어 있다. 만약 클라이언트에서 코드를 몇줄만 수정해도 아래 과정을 거쳐서 다시 배포해야 한다. 1. 리액트 프로젝트 빌드 2. S3에 업로드 3. CloudFront 캐시 무력화 변경 작업은 유지보수를 하면서 계속해서 일어나게 되는데 매우 비효율적으로 생각됬다. 그래서 repository에 push될 경우 github actions를 사용하여 위 과정을 자동화해서 배포가 되도록 구성했다. ● Github Actions Github Actions의 경우 가장 최상위 개념인 Workflow가 존재한다. Workflow는 특정 로직을 자동화해둔 파일(과정)이라고 생각하면 된다. 프로젝트 루트폴더 안에 ./github/workflows/main.yaml 형식으..

리액트 클라이언트를 배포하는 방법은 다양하게 있다. AWS EC2에 직접 배포하거나 다른 PaaS 플랫폼을 활용하여 배포할수도 있다. 많은 방법중에서 AWS S3 정적 웹 호스팅을 활용하여 배포한 이유는 아래와 같다. 간편하다 : 설정이 매우 단순하고 간편해서 쉽게 배포가 가능하다 확장성이 좋다 : CDN을 통해서 다른 국가에서도 빠른 속도로 접근이 가능하다 비용 : S3 자체의 비용이 매우 저렴한편이고 웹호스팅을 위한 S3 비용이 매우 저렴했다 ● AWS IAM 사용자 권한부여 우선 IAM 사용자에게 S3 서비스에 대한 사용권한(AmazonS3FullAccess)을 부여해준다. 해당 방법은 이전에 S3 이미지업로드 구현하는 글에서 적어뒀으니 링크로 대체한다. https://iamiet.tistory.c..

● 문제상황 마크다운 에디터에서 이미지 삽입시 인코딩되어 본문의 길이가 길어지는 상황 약 4kb의 이미지 삽입시 약 5100자의 문자열이 삽입된다. 본문의 길이가 늘어날수록 DB에서 차지하는 공간이 커지게되며, 삽입/삭제 등 데이터의 크기가 늘어날수록 더 많은양의 네트워크 트래픽을 요구하게된다. ● 해결방안 이미지 삽입 차단 : 커뮤니티를 주제로 잡은 프로젝트이므로 이미지 삽입 차단은 말이 안되는 해결책이였다. 이미지 개별 저장 : Firebase Storage, AWS S3 등 저장공간에 저장 위 처럼 2가지의 해결방안이 생각났다. 아무래도 가장 최선의 방법은 2번째 방법인 이미지를 개별의 저장공간에 보관하는 것이였다. ● 이미지 개별 저장 구현방식 우선 프로세스에 대해서 생각을 했을때 아래처럼 떠올랐..

리액트를 사용할때 styled-component 라이브러리를 통해서 전역 스타일 지정이 가능하다. 전역스타일은 모든 html 요소에 대해서 공통적인 스타일을 가지는것이다. 예시로는 아래와 같다 모든 li 태그에서 list-style 제거하기 a 태그에서 text-decoration 제거하기 button 태그에 cursor: pointer 지정하기 만약 전역스타일을 사용하지 않는다면 각 페이지 마다 일일히 list-style: none, text-decoration: none 등을 적용해야된다. 1. styled-component 설치 -- 자바스크립트 환경에서의 설치 yarn add styled-components -- 타입스크립트 환경에서의 설치(추가설치필요) yarn add styled-compone..