on&on

[React] AWS EC2에 React 무중단 배포하기 목차 AWS EC2(Elastic Compute Cloud)란? EC2 인스턴스 생성하기 EC2로 React 프로젝트 배포하기 AWS EC2(Elastic Compute Cloud)란? EC2는 AWS에서 제공하는 클라우드 컴퓨팅 서비스이다. 클라우드 컴퓨팅은 인터넷(클 ekdms5566.tistory.com 만약 EC2에서 배포를 하기 위해 npm run build를 한 지 몇 분이 지나도 빌드가 되지 않는다면...? 나는 Creating an optimized production build... 이 문구만 십 몇분을 보고만 있었던... 그렇다면 왜 빌드가 안되는 것인가... 그 이유인 즉슨 빌드 규모 대비 램 크기가 작아서 그랬던 것이다... ..

목차 AWS EC2(Elastic Compute Cloud)란? EC2 인스턴스 생성하기 EC2로 React 프로젝트 배포하기 AWS EC2(Elastic Compute Cloud)란? EC2는 AWS에서 제공하는 클라우드 컴퓨팅 서비스이다. 클라우드 컴퓨팅은 인터넷(클라우드)를 통해 서버, 스토리지, 데이터베이스 등의 컴퓨팅 서버를 제공하는 것을 말한다. 즉, 독립된 컴퓨터를 임대해주는 서비스다. EC2는 서버를 직접 구축하는 것보다 쉽게 서버를 구축할 수 있다. 초기 구입이나 세팅비가 필요없고 사용한만큼 결제하는 것이 가능하다. 용어 정리 인스턴스 : 가상 컴퓨팅 환경 AMI(Amazon Machine Image) : 서버에 필요한 운영체제와 여러 소프트웨어들이 적절히 구성된 상태로 제공되는 템플릿 ..

목차 WebP(Web + Picture) SVG 형식 사용 이미지 스프라이트(Image Sprite) SVG 스프라이트(SVG sprite) WebP(Web + Picture) WebP란? WebP은 인터넷에서 이미지가 로딩되는 시간을 단축하기 위해 Google이 출시한 파일 포맷 WebP를 사용하면 웹 사이트에서 고품질 이미지를 표현할 수 있지만 PNG, JPEG 등 기존 포맷보다 파일 크기가 작아진다. WebP 파일을 저장할 때 압축 방식(무손실 압축, 손실 압축)을 선택할 수 있으므로 데이터 손실 없이 또는 중요하지 않은 정보의 일부만 손실하면서 이미지를 압축할 수 있다. WebP 파일을 사용해야 하는 이유 이미지는 서버에서 많은 공간을 차지한다. WebP를 사용하면 PNG, JPEG보다 크기가 작..

진행중인 프로젝트를 aws S3를 사용해 배포해보려고 한다. IAM 사용자 만들기 일단 S3에 배포하기 위해서는 IAM 권한이 있어야하기 때문에 IAM 대시보드에서 사용자를 추가한다. 사용자 이름을 지정하고 사용자 탭에 지정한 이름으로 탭을 눌러보면 아래와 같은 탭을 확인할 수 있다. 이제 보안 자격 증명 탭에서 액세스 키 파트로 들어가 액세스 키를 발급받으면 된다. 액세스 키는 나중에 사용될 것이기 때문에 키를 복사해서 본인의 메모장에 저장하거나 .csv 파일로 받아놓는 것이 좋다. S3 버킷 만들기 이제 S3 탭으로 들어와 버킷 만들기 버튼을 누르면 버킷을 만들 수 있는데, 본인이 원하는 버킷 이름을 지정해주고 AWS 리전은 서울로 지정해주면 된다. 객체 소유권은 ACL 활성화됨 으로 선택하고 객체 ..

콘텐츠의 길이에 따라 브라우저 사이즈의 크기가 변화하는 것을 막기위해 GlobalStyle로 다음과 같이 지정하였다. :root { min-width: 1000px; overflow-y: scroll; } 그리고 useModal custom Hook의 open 함수와 close 함수를 아래와 같이 구현하였다. const open = useCallback(() => { setIsOpen(() => true); document.body.style.overflow = "hidden"; }, []); const close = useCallback(() => { setIsOpen(() => false); document.body.style.overflow = "unset"; }, []); 모달이 open일 때 o..

이용약관 동의 페이지를 만들던 중에 기본 체크박스의 형태를 바꿔야 했는데 styled-components를 활용하여 체크박스를 커스텀해본 적이 없기 때문에 이번 기회에 방법을 찾아보면서 공부해봤다. html 코드는 아래와 같다. 두마켓의 이용약관 및 개인정보처리방침에 대한 내용을 확인하였고 동의합니다. 실행화면 (크롬에서 제공하는 기본 UI 체크박스) HTML 삽입 미리보기할 수 없는 소스 appearnce 속성 활용하기 appearance | MDN appearance CSS 속성은 운영 체제 테마를 기반으로 하는 UI 컨트롤의 기본 모양을 제어하는 ​​데 사용된다. appearance : none;을 설정하면 네이티브 디자인을 해제할 수 있다. 그리고 원하는 형태의 디자인으로 속성을 설정하면 된다. ..

react-hook-form을 사용하여 validation을 구현하던 중에 error를 경고창으로 처리할 경우, input에 포커스되면서 입력창이 초기화되는 형태로 구현하기 위해 찾다가 setFocus와 reset을 발견했다. 처음에는 shouldFocusError를 사용해보려고 했지만 ref를 사용해서 나중에 input을 customInput으로 뺀 후에 forwardRef를 통해 쉽게 ref를 처리하는 형태로 사용해보려고 한다... react-hook-form을 사용하는 것이 목적이었기 때문에 일단은 setFocus와 reset을 사용해서 구현했다. 이러한 형태의 email을 입력하는 input이 있다. if (!response.message) { // 응답에 성공했을 때 } else { alert(..

모듈화한 버튼을 Link로 사용하고자 하는데 적용이 안되는 경우 버튼을 모듈화해서 사용하다가 Link로 사용하려고 하는데 아래와 같은 에러가 발생했다. 모양은 똑같은데 다른 태그에서는 적용이 안되는 건지에 대한 해답을 찾아보았다. import Button from "../src/module/Button/Button" // 모듈화한 버튼을 import 한다. function App(){ return ( {/* 여기서 모듈화한 Button과 Link를 함께 사용해야 하는 상황 */} ) } export default App; "Button is not a styled component and cannot be referred to via component selector." 어떻게 해결해야 하는지 공식문서를..