CSR CSR이란? Client Side Rendering 페이지의 내용을 브라우저에서 그려준다. 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 방식 CSR의 단점 사용자가 페이지 요청을 했을 때 보여지기까지 시간이 오래걸릴 수 있다. SEO(Search Engine Optimiztion) CSR은 처음에 HTML에 아무 내용도 없기 때문에 웹 크롤러가 읽어갈 수 있는 정보가 없다. 따라서 검색엔진들이 웹페이지를 분석하기에 CSR은 나쁘다고 할 수 있다. SSR SSR이란? Server Side Rendering 서버에서 사용자에게 보여줄 페이지를 모두 구성해 보여주는 방식 기존 CSR의 느린 페이지 로딩과 SEO 문제 해결 SSR의 단점 서버 과부화 발생 가능 TTV(Time To View)와 TTI..
S3란 Amazon Simple Storage Service(Amazon S3) 인터넷 스토리지 서비스 웹 규모 컴퓨팅 작업을 수행하는 데 필요한 데이터 저장 공간 S3 사용 예 웹 사이트 호스팅 멀티미디어 파일 저장 및 스트리밍 애플리케이션 데이터 저장 백업 및 복원 아카이브 S3의 장점 높은 내구성, 가용성, 안정성 손쉬운 사용 및 관리 보안성 높은 확장 S3 Bucket 데이터를 저장하는 가상 상위 레벨의 폴더 형태의 컨테이너 객체에 대한 접근 권한을 설정하기 위한 위치 객체에 대한 이벤트 알림을 설정하기 위한 위치 버킷 및 객체 사용에 대한 비용 추적 및 모니터링을 위한 위치 네이밍 컨벤션 : 대문자 금지, 언더스코어 금지 Bucket Policy JSON 형식의 문서 버킷의 모든 객체에 대한 엑..
TypeScript의 장점 변수 타입을 컴파일 시간에 결정한다. VS Code에 입력하는 순간 타입이 체크된다. tsc 컴파일러 역할 소스코드의 정적 타입 검사 TypeScipt => JavaScript로 코드 변환 tsc --init tsc index.ts tsc src/*.ts .d.ts 파일 TypeScript 타입 정의 파일 JavaScript로 작성된 라이브러리를 사용할 수 있게 해준다. 타입 가변적인 타입의 데이터를 저장할 때는 any, unknown, union을 사용한다. any는 가급적 사용하지 않는 것이 권장된다. 유틸리티 타입 Partial : 기존 타입의 일부 속성만 제공하는 객체 생성 시 사용한다. Required : T 타입 객체에 정의된 모든 속성이 반드시 전부 제공되는 개체 ..
Route 53 DNS Domain Name System 주소를 사용자가 쉽게 이해하고 시억할 수 있는 도메인 이름으로 변환해주는 시스템 모든 기기들은 IP 주소를 갖고 있으나 사용자가 기억하기 어렵기 때문에 변환할 필요가 있다. URL Top Level Domain Second Level Domain Subdomain Protocol ISP KT, SK, LG U+ DNS 서비스는 계층적으로 구성된 분산 시스템 Root DNS Server 가장 상위 도메인의 TLD DNS Server의 주소를 알아낸다. 인터넷 서비스 제공 업체들에 의해 운영된다. TLD DNS Server .com / .net / .kr 등의 TLD를 관리하는 서버 해당 도메인 이름이 속한 SLD DNS Server 주소를 알려준다...
소인수분해 자연수 n이 매개변수로 주어질 때 n의 소인수를 오름차순으로 담은 배열을 return하는 solution 함수 만들기 문제 풀이 function solution(n) { var answer = []; for (let i = 2; i 1)) { isMinor = false; break; } } if (isMinor) { answer.push(i); } n = n / i; } } return answer; } 소수는 1을 제외하고, 본인 이외의 수로 나누어지지 않는 숫자이다. 풀이 순서 1..
TypeScript로 기본 세팅하기 yarn add redux react-redux @reduxjs/toolkit configureStore.ts 파일 생성 todoSlice.ts 파일 생성 configureStore.ts state의 타입 지정 (10번째 줄) RootState로 이름을 지어서 그냥 state와 헷갈리지 않도록 했다. dispatch의 타입 지정 (11번째 줄) 다른 블로그를 참고했을 때 지정하는 과정이 있어서 똑같이 작성했는데, 굳이 타입을 지정해주지 않아도 오류가 나지 않아서 주석처리 했다. 주석처리를 풀어도 오류가 없다. dispatch의 타입에 대해서는 더 공부해봐야 할 거 같다!🔥 todoSlice.ts initailState의 타입을 interface로 미리 지정하고 타입을 ..
리액트 프로젝트 세팅하기 프로젝트 생성 yarn create react-app my-app --template typescript 프로젝트 실행 yarn start 자식 컴포넌트로 props 내려주기 내려받는 props의 타입을 지정해줘야 함 타입을 지정해주지 않을 경우 타입스크립트의 IntrinsicAttributes 에러 발생 가능 props를 인자로 받는 부분에 인라인으로 하나씩 작성할 경우 props가 한 개일 때 const TodoList = ({ todos}: { todos: Todo[]; }) => { props가 여러개일 때 const TodoList = ({ todos, isDone, setTodos }: { todos: Todo[]; isDone: boolean; setTodos: an..
enum과 객체 리터럴 enum 상수 값을 그룹화해서 관리할 때 사용 컴파일 시에 자동으로 숫자 값으로 매핑되기 때문에 값을 할당할 필요 없 객체 리터럴은 복잡한 구조와 데이터 타입을 사용해야 할 때 사용 어떤 타입의 값도 대입 가능 유틸리티 타입 Partial 기존 타입의 일부 속성만 제공하는 객체 생성시 사용 기존 속성이 name, age일 경우 >> name / age / name, age 세 가지 경우 가능 Required T 타입 객체에 정의된 모든 속성이 반드시 전부 제공되는 객체 생성시 사용 Readonly 타입 T의 모든 속성을 읽기 전용으로 만듦 : 완전한 불변 객체 취급 Pick 타입 T에서 K 속성들만 선택하여 새로운 타입을 만듦 Omit 타입 T에서 K 속성들만 제외하여 새로운 타입..
