lyuna's story

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 를 클릭하면  이러한 코드가 나오는데 이걸 복사 한 후에  그대로 붙여넣으면 된다. 변경사항 저장을 누르..

여태까지 프로젝트들을 모두 vercel로만 배포해봤기에이번 사이드 프로젝트는 AWS로 배포해보기로 도전~!! 우선 AWS로 리액트 배포하기 검색했을 때 제일 많이 나오는 방법이 EC2 아니면 S3였다.이 둘의 차이점이 뭘까 여기저기 검색해 본 정보를 간단하게 공유해보겠다. 특성EC2S3배포 방식서버 기반 애플리케이션 운영정적 웹 애플리케이션 호스팅비용사용 시간에 따라 비용 발생, 상대적으로 높음저장 공간과 요청량에 따라 비용 발생, 상대적으로 저렴유지 보수서버 관리 필요별도 관리 필요 없음사용 사례SSR 및 백엔드 통합이 필요한 경우SPA와 정적 사이트 호스팅성능서버 리소스 기반, 확장성 있음정적 파일 제공, CloudFront 사용 시 성능 최적화 가능 백엔드분들은 Spring 을 사용하고, EC2로 ..

1장 리액트 개발을 위해 꼭 알아야 할 자바스크립트 자바스크립트의 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖고있고, 이 데이터 타입은 크게 원시 타입과 객체 타입으로 나뉩니다. 원시 타입boolean : 참(true)과 거짓(false)만을 가질 수 있는 데이터 타입. 주로 조건문에서 많이 쓰인다.                   null : 아직 값이 없거나 비어 있는 값을 표현할 때 사용한다.undefined : 선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값.number : (2^53-1) 과 2^53-1 사이의 값을 저장할 수 있다.string : 텍스트 타입의 데이터를 저장하기 위해 사용된다. ( '' , "" , `` ) 으로 표현할 수 있..

1.7.1 타입스크립트란? 타입스크립트 ㄴ기존 자바스크립트 문법에 타입을 가미한 것. 자바스크립트는 기본적으로 동적 타입의 언어이기때문에 대부분의 에러를 코드를 실행했을 때만 확인할 수 있다는 문제점이 있다. typeof를 적용하여 문제점을 방지할 수 있지만 너무 번거롭고 코드의 크기를 과도하게 키우게 된다. 타입스크립트는 이러한 자바스크립트의 한계를 벗어나 타입 체크를 정적으로 런타임이 아닌 빌드 타임에 수행할 수 있게 해준다.   1.7.2 리액트 코드를 효과적으로 작성하기 위한 타입스크립트 활용법 any 대신 unknown을 사용하자 any는 불가피할 때만 사용해야하는 타입. 타입을 any로 설정하면 타입스크립트가 에러를 발생시키지 않는다고 하더라도 실행 시 에러가 발생할 것이다.이는 타입스크립트를..

1.6.1 구조 분해 할당 구조 분해 할당배열 또는 객체의 값을 말 그대로 문해해 개별 변수에 즉시 할당하는 것이다.어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용한다. 배열 구조 분해 할당 배열의 구조분해 할당은 ,의 위치에 따라 값이 결정된다.const array = [1, 2, 3, 4, 5]const [first,second, third ...arrayRest] = array //first 1//second 2//third 3//arrayRest[4,5] 이 예제에서 중간 인덱스에 대한 할당을 생략하고 싶다면const array = [1, 2, 3, 4, 5]const [first, , , , fifth] = array first // 1fifth // 5이..

1.5.1 싱글 스레드 자바스크립트 자바스크립트는 싱글 스레드 언어이다.하나의 프로그램에는 하나의 프로세스만 할당되기 때문에 하나의 프로그램에서 동시에 여러 개의 복잡한 작업을 수행하기 위해 더 작은 실행 단위인 스레드(thread)가 탄생했다. 하나의 프로세스에서는 여러 개의 스레드를 만들 수 있다.스레드끼리는 메모리를 공유할 수 있어 여러 가지 작업을 동시에 수행할 수 있다.  자바스크립트가 싱글 스레드 라는 것은 ? 자바스크립트 코드의 실행이 하나의 스레드에서 순차적으로 이루어진다는 것  Run-code-completionㄴ 하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는다. 자바스크립트의 모든 코드는 '동기식'으로 한 번에 하나씩 순차적으로 처리된다. '비동기' 란? async..

1.4.1 클로저의 정의 MDN 의 클로저 정의 : 함수와 함수가 선언된 어휘적 환경의 조합                                                                     ㄴ  변수가 코드 내부에서 어디에 선언됐는지 클로저는 어휘적 환경을 조합해 코딩하는 기법이다. 1.4.2 변수의 유효 범위, 스코프 스코프는 변수의 유효범위이다. 전역 스코프전역 레벨에 선언하는 것이다.이 스코프에서 변수를 선언하면 어디서든 호출할 수 있다.var global = 'global scope'function hello() { console.log(global)}console.log(global) // global scopehello() // global scopeconsole...

1.3.1 클래스란 무엇인가? 자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념이다.즉, 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것이다.  constructor생성자. 객체를 생성하는 데 사용하는 특수한 메서드이다.단 하나만 존재할 수 있고, 여러 개를 사용한다면 에러가 발생한다. 프로퍼티클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값을 의미한다.인스턴스 생성 시 constructor 내부에 빈 객체에 프로퍼티의 키와 값을 넣어 활용할 수 있다.#을 넣어 private를 선언할 수 있다.class Car { constructor(name) { // 값을 받으면 내부에 프로퍼티로 할당된다. this.name = name }}const myCa..

1.2.1 함수란 무엇인가? 자바스크립트에서 함수란  '작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감사 실행 단위로 만들어 놓은 것 '  // 함수의 기본적인 형태function sum(a,b) { return a + b}sum(10,24) //34 function 뒤에 오는 것이 함수명함수수의 입력값으로 받는 a,b를 각각 매개변수라 하고, return으로 작성된 것이 반환값이다. 리액트에서 컴포넌트를 만드는 함수도 이러한 기초적인 형태를 따른다. function Component(props) { return {props.hello}} Component라고 하는 함수를 선언하고 매개변수로는 일반적으로 props라고 부르는 단일 객체를 받으며return 문으로 J..