lyuna's story

HTTPS는 암호화된 통신을 제공하지만 HTTP는 그렇지 않는다. 만약 프론트가 HTTPS로 제공되는데, 백엔드가 HTTP로 제공된다면 이를 "Mixed Content"로 간주하여 요청을 차단한다.  현재 리액트에서의 yarn dev시 테스트 환경은 http://localhost:3000/ 이라이걸 https 로 변경해서 테스팅 해보려한다. mkcert로 localhostSSL 인증서를 생성한다. mkcert는 개발환경에 SSL 인증서를 만들어주는 라이브러리 이다. 우선 터미널에서 brew로 mkcert를 설치한다.brew install mkcert  React 어플리케이션 루트 폴더로 들어가 mkcert를 실행하고 localhost SSL 인증서를 만들어준다. mkcert -install mkcert..

3.2.1 사용자 정의 훅 사용자 정의 훅서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것.리액트에서만 사용할 수 있는 방식반드리 use로 시작하는 함수를 만들어야 한다.(해당 함수가 리액트 훅이라는 것을 인식할 수 있다)사용자 정의 훅으로 분리하지 않는다면 fetch로 API를 호출해야 하는 모든 컴포넌트 내에서 각각 선언해서 구현해야 할 것이다.useReducer을 사용하더라도 useEffect가 필요하기 때문에 훅을 중복해서 사용해야 할 것이다. 훅은 함수 컴포넌트 내부 혹은 사용자 정의 훅 내부에서만 사용할 수 있기 때문에 use로 시작하지 않거나 대문자로 시작하지 않는 함수 내부에서 훅을 호출한다면 에러가 발생한다.  3.2.2 고차 컴포넌트 컴포넌트 자체의 로직을 재..

3.1.8 useImperativeHandle 실제 개발 과정에서는 자주 볼 수 없는 훅으로 널리 사용되지는 않는다. useImperativeHandle를 이해하기 위해서는 먼저 React.forwardRef에 대해 알아야 한다. forwardRef 살펴보기ref는 useRef에서 반환한 객체로, 리액트 컴포넌트의 props인 ref에 넣어 HTMLElement에 접근하는 용도로 흔히 사용된다.ref를 상위 컴포넌트에서 하위 컴포넌트로 전달하고 싶다면? 그러나 직접 props로 넣어 사용할 수 없다면? forwardRef를 사용하면 네이밍의 자유가 주어진 props보다 더 확실하게 ref를 전달할 것임을 예측할 수 있고,사용하는 쪽에서도 안정적으로 받아 사용할 수 있다. const ChildCompone..

3.1.5 useRef useRef와 useState는 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장한다는 공통점이 있다. useState와 구별되는 큰 차이점 두 가지useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있다.useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다.useRef로 useState를 흉내내도 렌더링이 되지 않는다.  useRef가 왜 필요할까? useRef는 컴포넌트가 렌더링될 때만 생성되고, 컴포넌트 인스턴스가 여러 개라도 각각 별개의 값을 바라본다. useRef의 가장 일반적인 사용 예는 DOM에 접근하고 싶을 때 이다.function RefComponent () { const inputRef = useRef(..

AWS IAM 사용자 추가하기 귀찮아서 IAM 사용자를 추가하지 않고 root 사용자인 상태로 자동화 작업을 하고싶었는데서치를 해보니 Root 사용자 계정은 모든 리소스에 대한 완전한 접근 권한을 가지고 있어보안 위협이 될 수 있기 때문에 절대 절대 권장되지 않는다고 한다,,  바아로 만들어보자. !  IAM 이란 AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스이다. IAM > 액세스 관리 > 사용자 사용자 생성을 클릭한다.   사용자 이름을 작성한다.  기존 정책 직접 연결을 선택하고 AmazonS3FullAccess와 CloudFrontFullAccess를 선택한다.  생성 완료 후에 액세스 키 만들기를 클릭  AWS 외부에서 실행되는 애플리케이션 선택  액세스 키와 비밀 액세스 키..

S3 버킷 만들기 고유한 버킷 이름을 설정한 후, 나머지 설정은 기본 세팅으로 건들지 않고 버킷 만들기를 누른다. S3에 빌드 파일 업로드   나는 vite로 react 프로젝트를 생성했기 때문에 dist라는 build 파일들이 생성되었다.(Create-React-App 으로 생성하며녀 build라는 이름의 폴더가 생성될 것이다.) 이 dist 폴더의 파일들을 모두 업로드 해준다. 버킷 정책 설정하기 만들어둔 버킷에 권한으로 가서 버킷 정책을 편집한다. 정책 생성기를 눌러 정책을 생성한다 (버킷 ARN 복사해두기)모두 입력한 후에 Add Statement 를 클릭 , 후에 Generate Policy 를 클릭하면  이러한 코드가 나오는데 이걸 복사 한 후에  그대로 붙여넣으면 된다. 변경사항 저장을 누르..