분류 전체보기 (173) 썸네일형 리스트형 [삽질기록] Tailwind에서 w-1/3과 w-[33%]는 왜 다를까? 🚨 문제 상황테이블 컬럼을 비율 단위(ex. w-1/16)로 설정했을 때, 전체 컬럼의 합이 1이지만 가로 스크롤이 생기는 현상이 발생했다. 리뷰 번호 체험학습명 작성자 onSort("rating")} > 평점 리뷰 내용 onSort("date")} > 작성일 onSort("reply")} > 답변 여부 🤔 원인Tailwind의 fraction 단위(w-1/3, w-1/16 등)는 빌드 시점에 고정된 소수점 계산값으로 변환된다.예를 들어 w-1/16은 실제로 아래와 같이 CSS로 바뀐다..w-1\/16 { width: 6.25%; } 하지만 이런 수치를 여러 개 합치면 6.2.. [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 를 신규 번역합니다. Related issues Fixes #28471github.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는 모든.. 이전 1 2 3 4 ··· 22 다음
