분류 전체보기 (172) 썸네일형 리스트형 [Typescript] 유틸리티 타입 Pick 직접 구현하기 Pick 타입?객체 타입 T에서 원하는 key(K)만 뽑아서 새로운 타입을 만드는 기능이다. 예시interface Todo { title: string description: string completed: boolean}type TodoPreview = Pick 이렇게 하면 TodoPreview 타입은 다음과 같이 변환된다.{ title: string completed: boolean} Todo에서 'title'과 'completed'만 뽑아온 것이다. Pick을 직접 구현해보자type MyPick = { [P in K]: T[P]} K는 반드시 T의 키 중 일부여야 한다.keyof 키워드는 T의 모든 키 이름들을 유니온 타입( "title" | "description" | "complet.. [AWS] AWS SAA 개념 정리 (2) 클라우드 컴퓨팅 모델 책을 읽고 직접 정리한 글입니다. On-Promise- 서버, 데이터베이스, 네트워크 장비 등을 모두 구매해서 구축하고 운영하는 서비스- 일반적으로 IDC(Internet Data Center)에 서버를 설치하고 전용 네트워크를 통해서 운영하는 시스템 형태- On-Promise에 시스템을 구축하려면 시설 및 서버 구매 등의 비용 발생, IDC 운영하기 위한 각종 부대비용 및 인력 비용 발생 => AWS는 전 세계에 리젼을 두고 AWS에서 이러한 IDC를 구축하고 서비스=> AWS 사용자는 원하는 시스템을 빠르고 저렴하게 구축할 수 있음클라우드 컴퓨팅 종류1) Private Colud: 기업 내부에서 기업 내부 조직원들을 위한 서비스 제공2) Public Cloud: 인터넷을 사용해서 제공 - AWS, A.. [AWS] AWS SAA 개념 정리 (1) 클라우드 컴퓨팅 개요 책을 읽고 직접 정리한 글입니다. 클라우드 컴퓨팅이란?- 컴퓨터를 구매하고, 컴퓨터에 운영체제를 설치하는 과정을 서비스 형태로 제공- 오직 인터넷에서 제공하는 서비스를 호출하여 즉시 필요한 자원(서버, 네트워크, 스토리지, 소프트웨어 등)을 사용할 수 있는 것 * 대표적인 클라우드 서비스: Amazon AWS, Microsoft Azure, Google Cloud PlatformOn demand 서비스와 SLAOn demand(주문형 서비스): 클라우드 컴퓨팅 서비스 사용자가 요청한 만큼 서비스를 제공하고 비용을 청구하는 모델- 예를 들어 IBM의 서버를 구매하지 않고 CPU 4개에 주기억장치 8Giga byte가 필요하면 IBM에 요청하고 서버를 제공받는 것- 이 때 IBM은 대용량 자원의 일부만 제공.. [Javascript] 지수 표기법으로 출력되는 JavaScript 숫자, 왜 그럴까? (feat. Number vs BigInt) 최근에 자바스크립트로 팩토리얼을 계산하는 코드를 짜다가 흥미로운 문제를 마주했다.팩토리얼 계산 결과가 지수 표기법으로 출력된 것이다. function extraLongFactorials(n) { let answer = 1; for(let i = n; i >= 1; i--){ answer *= i; } console.log(answer); // 1.5511210043330984e+25}1.5511210043330984e+25 같은 숫자. 이게 도대체 뭘까?🔍 지수 표기법이란?1.5511210043330984e+25는 15511210043330985984000000와 같은 숫자다.e+25는 "10의 25제곱을 곱한다"는 뜻이고, 자바스크립트는 너무 큰 숫자를 간단하게 표.. [삽질기록] Linter가 코드를 링크로 인식한ㄷㅏ?! (CI 통과시키는 꼼수) MDN 문서 번역 오픈소스에 기여하며 CI 과정에서 예상치 못한 lint 에러가 발생했다.https://github.com/mdn/translated-content/pull/28472 [ko] meta programming 신규 번역 by minseonkkim · Pull Request #28472 · mdn/translated-contentDescription 한국어로 존재하지 않던 문서 Web/JavaScript/Guide/Meta_programming 를 신규 번역합니다. Motivation Additional details Related issues and pull requestsgithub.com 🚨 문제 상황기존 영어 문서에 이러한 코드가 포함되어 있었고, 번역할 때 코드 부분에는 손을 대지.. [Next.js] CSS Module React에서 했던 것처럼 index.tsx에 관한 CSS 파일을 index.css로 만들어서 import './index.css'로 import 하면 다음과 같은 에러가 발생한다.Global CSS cannot be imported from files other than your App.(전역 CSS는 App 파일 이외의 파일에서는 import할 수 없습니다.) 이는 Next.js가 _app.tsx의 App 컴포넌트가 아닌 다른 파일에서 CSS 파일을 그대로 불러오는 걸 제한하고 있기 때문이다.이렇게 제한하는 이유는 다른 페이지에 작성된 CSS 클래스명과 충돌을 일으킬 수 있기 때문이다. 예를 들어, 아래와 같은 CSS 파일이 있다고 하자.index.css.h1 { color: red;}test.cs.. [Next.js] 프리페칭(Pre-fetching) 프리페칭은 Pre(사전에, 미리)-Fetching(불러온다) 즉, 사용자가 현재 보고 있는 페이지에서 링크로 연결된 모든 페이지를 사전에 불러오는 기능이다. 페이지 이동을 빠른 속도로 지체없이 처리하기 위해 만들어진 기능이다. 그런데..! Next.js의 사전렌더링 방식에 대해 알고 있다면 의문이 들 수 있다. Next.js는 서버가 브라우저에 사전 렌더링된 HTML 페이지를 응답한 후, 후속으로 모든 JS 파일을 번들 파일로 전달한다. 이 때문에 초기 접속 요청이 종료된 이후의 페이지 이동은 서버에 별도의 요청 없이 브라우저 측에서 직접 JavaScript 코드를 실행시켜 컴포넌트를 교체하는 방식(CSR)으로 이루어진다. CSR을 사용하는데 왜 Pre-Fetching이 필요할까?Next.js는 모든.. [Next.js] 사전렌더링 React의 CSR사전렌더링을 알아보기에 앞서, React의 CSR(Client Side Rendering) 방식을 되짚어보자. 이 방식은 초기 요청 시 서버로부터 받은 JS Bundle 안에 이 서비스에서 접근 가능한 모든 컴포넌트 코드가 존재한다. 그래서 페이지 이동이 있더라도 서버에게 새로운 페이지를 요청하지 않고 브라우저가 자체적으로 앱을 실행해서 컴포넌트를 갈아끼우기 때문에 초기 접속 이후의 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다. 하지만 초기 요청 시 서버로부터 모든 코드가 들어있는 JS Bundle을 받고 JS를 실행하고 컨텐츠를 렌더링하기까지 오랜 시간이 소요되므로 초기 접속 시간(FCP, First Contentful Paint)가 느리다. Next.js의 사전렌더링Next... 이전 1 2 3 4 ··· 22 다음
