on&on

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

목차 redux-persist란? redux-persist 적용하기 redux-persist란? redux-toolkit을 사용하여 store에 저장한 상태를 관리하다 보면 새로고침을 했을 때 상태가 모두 초기화된다. 이러한 경우 redux-persist를 사용하면 해당 문제를 해결할 수 있다. redux-persist를 사용하면 redux의 상태를 유지하고 지속성을 갖도록 도와주는 라이브러리다. 해당 라이브러리를 사용하면 로컬 스토리지, 세션 스토리지 등의 옵션을 선택하여 상태를 저장하고 새로고침 또는 애플리케이션을 종료해도 상태가 사라지는 것을 막을 수 있다. # 설치 방법 npm i redux-persist yarn add redux-persist redux-persist 적용하기 // sessio..

aws S3로 배포한 후, Github Actions를 활용하여 배포 자동화까지의 과정을 정리해봤다. S3로 배포하는 방법은 이전에 정리했기 때문에 이번에는 자동화를 하는 과정에서 겪었던 오류에 대해서 정리해보려고 한다. 가장 먼저 aws S3 배포 시, 필요한 내용을 github settings 탭의 secret에 저장한다. settings 탭에 들어가 Secrets and variables에서의 Actions에 들어가 이미지 우측 상단에 있는 New repository secret을 누르고 키를 입력하면 된다. 다음으로 actions 탭에서 yml 파일을 작성했다. name: React build on: push: branches: - main jobs: build: runs-on: ubuntu-la..

진행중인 프로젝트를 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." 어떻게 해결해야 하는지 공식문서를..