Next.js - Assets, Metadata, CSS
·
✏️ Study/🔭 Next.js
📍/public - root의 /public는 /pages 처럼 앱 내에서 참조 가능 - /public 폴더에는 이미지같은 static assets을 보관 📍기존 이미지 로드 방식의 한계 엘리먼트는 아래 사항을 직접 조절해야 함 - 사이즈 크기에 따라 이미지 크기를 직접 조절 (반응형 대응) - 이미지 최적화를 위해 타사 라이브러리를 사용 - viewport에 들어올 때만 이미지 로딩 가능 📍Image 컴포넌트 - 예시 import Image from 'next/image'; const YourComponent = () => ( ); 디폴트 옵션 - 리사이징, 최적화 및 다양한 포맷 지원 - 빌드 타임에 최적화하지 않고 요청받을 때 최적화 실행 (따라서 일반적 ssg에 비해 빌드 타임이 증가하지 않음 -..
create-next-app으로 시작하기, 라우팅
·
✏️ Study/🔭 Next.js
📍create-next-app - 터미널에서 Next.js 앱을 빠르게 만드는 툴 체인 - cli 에서 프로젝트 완성에 필요한 정보를 전달 npx create-next-app@latest docs에서 제공하는 스타터 템플릿 npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter" 📍라우팅 📂/pages - 파일명으로 route가 정해진다 - /pages/index.js 가 root page. 즉, / 에 해당 - /pages/posts/first-post.js 파일은 /posts/first-post ..
fast refresh, code splitting
·
✏️ Study/🔭 Next.js
📍Fast Refresh 란? - Next.js 개발서버에서 파일을 변경하면 브라우저에 바로 업데이트 - 새로고침이 필요 없이 변경하는 즉시 적용된다 📍Code Splitting - Next.js는 자동으로 코드 스플리팅을 수행 - 따라서 각 페이지는 해당 페이지에 필요한 것만 로드 - 수많은 페이지를 가진 앱이라도 첫 페이지를 빠르게 로드하는 장점이 있음
백준 1912 < 연속합 > JavaScript
·
✏️ Study/⚙️ 알고리즘 & 자료구조
📍문제 링크 https://www.acmicpc.net/problem/1912 1912번: 연속합 첫째 줄에 정수 n(1 ≤ n ≤ 100,000)이 주어지고 둘째 줄에는 n개의 정수로 이루어진 수열이 주어진다. 수는 -1,000보다 크거나 같고, 1,000보다 작거나 같은 정수이다. www.acmicpc.net 📍알고리즘 분류 - DP 📍문제 풀이 정수가 N개 주어질 때, 연속하는 정수들로 구성된 최댓값을 구하라 DP를 써서 O(N)에 해결할 수 있다 📍의사 코드 주어진 배열을 순회하며, memo 배열에는 arr[i] 까지의 연속합을 저장한다 (단, 더했을때 오히려 마이너스가 되면, 다음에 나오는 수로 업데이트) 예를 들면, 10 -4 3 1 5 6 -35 12 21 -1 배열에서 10 10 -4 10..
#18 매핑된 타입을 사용하여 값을 동기화하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅매핑된 타입을 사용하여 새로운 프로퍼티가 있을 때 인터페이스에 추가를 강제하게 할 수 있다 (값과 타입을 동기화) 📍컴포넌트 최적화 1 : fail close 예를 들어 산점도 컴포넌트를 그릴 때 - 산점도에 필요한 데이터가 바뀌면 리렌더링해야 하지만, - 컴포넌트의 props로 전달되는 클릭 이벤트 핸들러는 같아도 상관없다 (하지만, 익명함수이므로 아예 비교를 배제해줘야 리렌더링 방지가 가능) - 예시 코드 interface ScatterProps { // The data xs: number[]; ys: number[]; // Display xRange: [number, number]; yRange: [number, number]; col..
[Python] range(a, b) 에서 a == b 인 경우 주의하기
·
✏️ Study/🐍 Python
for loop를 쓸 때 range(1, 1) 처럼 수가 같은 경우, for loop가 동작하지 않는다 📍예시백준 1292번 쉽게 푸는 문제start, end = map(int, input().split())sequence = []def solution(s, e, arr): count = 0 for i in range(1, e + 1): # 1 1 이 입력으로 주어졌을 때 range(1, 1) 이면 반복문 실행 안됨 for j in range(i): arr.append(i) count += 1 if count == end: return sum(arr[s - 1:e])print(solution(..