본문 바로가기

분류 전체보기

 (257)
Next.js 시작하기(4) Assets, meta data and Css Next.js는 최상위 public폴더아래 이미지와 같은 정적 컨텐츠를 제공할수 있습니다. 일반적으로 태그를 이용하여 이미지를 html에 넣는 것과 달리 next에서는 태그를 이용해 이미지를 렌더합니다. Next.js는 기본적으로 이미지 최적화도 지원합니다. 이를 통해 브라우저가 지원하는 경우webp와 같은 최신 형식으로 이미지 크기 조정, 최적화 및 제공이 가능합니다 . 이렇게 하면 뷰포트가 더 작은 장치에 큰 이미지를 전달하는 것을 방지할 수 있습니다. 또한 Next.js는 미래의 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다. 자동 이미지 최적화는 모든 이미지 소스에서 작동합니다. 이미지가 CMS와 같은 외부 데이터..
Next.js 시작하기(3) 라우팅 우선 시작하기에 앞서 npx로 Next앱을 만들거나 혹은 아래 명령어를 입력해 프로젝트를 다운받아야한다. 나는 명령어를 이용해 프로젝트를 다운받았다. npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/navigate-between-pages-starter" 이후 npm run dev Next.js에서 pages폴더내에 생성한 파일 이름을 기반으로 라우팅을 실행합니다. 예를들어, pages/index.js는 '/', pages/posts/first-post.js는 /posts/first-post와 같이 라우팅됩니다. 우선 pages폴더에 posts..
Next.js 시작하기(2) Next.js앱 만들기 Next.js앱을 만드려면 터미널을 열고 cd명령어로 앱을 만들 디렉터리로 이동한 후 다음 명령어를 실행하세요. npx create-next-app "project name" 해당 명령어를 실행하면 자동으로 Next.js앱을 만들 수가 있다. 하지만 버전에따라, 특히 최신버전은 typescript, ESLint등의 사용을 묻는 창이 발생하고, Next.js프로젝트 루트폴더에 pages폴더가 존재하지 않을 수 있다. 따라서 npx이후 나오는 설정들을 사진과 같이 설정한다면 루트 폴더에 pages폴더가 존재한다.
Next.js 시작하기(1) 이번 nextjs의 기초와 관련된 포스팅은 next.js 공식문서를 기반으로 작성되었습니다. Next.js를 들어가기 전 HTML, CSS, JS를 넘어 리액트와 타입스크립트까지. 나는 1년이 넘는 시간동안 리액트를 사용했었고, 반년 전부터 현재까지 타입스크립트를 도입하면서 타입스크립트 & 리액트를 사용해왔다. 리액트는 SPA라는 신기한 앱을 만드는데 특화되어있었고, 실제로 현재까지도 여전히 인기있는 프레임워크 중 하나이다. 리액트는 CSR(Client Side Rendering)이라는 방식을 사용해 개발자가 작성한 코드의 렌더링이 서버가 아닌 클라이언트(사용자)의 환경에서 렌더링 되도록 하였다. 실제로 리액트는 매우 유용하다. JSX라는 문법을 통해 자바스크립트코드와 HTML을 한 파일안에서 작성할 수..
파이썬) 보물섬-BOJ https://www.acmicpc.net/problem/2589 2589번: 보물섬 보물섬 지도를 발견한 후크 선장은 보물을 찾아나섰다. 보물섬 지도는 아래 그림과 같이 직사각형 모양이며 여러 칸으로 나뉘어져 있다. 각 칸은 육지(L)나 바다(W)로 표시되어 있다. 이 지도에서 www.acmicpc.net 이 문제는 조금 난해했다. 우선 문제를 읽자마자 풀이 방법을 떠올렸고 그대로 코드로 옮겼다. from collections import deque import sys input = sys.stdin.readline n, m = map(int, input().split()) arr = [] answer = 0 for i in range(n): str = input() arr.append(str) dx ..
심심해서 혼자서(with MDN)만들어본 드래그 앤 드롭 개요 드래그 앤 드롭이 뭔데? 흔히들 아는 그 기능이 맞다. 바로 이런 기능이다. 마우스로 무언가(예를들면 이미지 또는 엘리먼드)를 끌어 잡아 지정한 이벤트를 발생시키는 기능이다. 생각해보니 나는 드래그 앤 드롭을 라이브러리는 커녕 직접 구현해 본 경험이 없어서 심심한 김에 구글링을 하지 않고 (But Mdn...)을 만들어보았다. 나는 그대르 앤 드롭으로 div 엘리먼트를 옮기는 기능을 만들고 싶었다. 우선은 대충 만들어봤다. 회색 박스안에 있는 엘리먼트를 왼쪽 오른쪽으로 이리저리 옮기는 것이다. 첫 번째 도전... 예로부터 모든 이벤트는 이벤트 리스너로부터 시작한다 하였다... 그것이 바닐라 자바스크립트든 리액트든간에... 그래서 시도해보았다. 짜잔...! 그런데 문제점! 클릭 이벤트는 마우스를 눌렀..
파이썬) 구간 합 구하기 4 -BOJ https://www.acmicpc.net/problem/11659 import sys input = sys.stdin.readline n, m = map(int, input().split()) arr = list(map(int, input().split())) seg_tree = [0 for _ in range(n * 4)] def build_tree(x, left, right): if left == right: seg_tree[x] = arr[left] return seg_tree[x] mid = (left + right) // 2 left_v = build_tree(x * 2, left, mid) right_v = build_tree(x * 2 + 1, mid + 1, right) seg_tree[..
파이썬) 최소값 -BOJ https://www.acmicpc.net/problem/10868 10868번: 최솟값 N(1 ≤ N ≤ 100,000)개의 정수들이 있을 때, a번째 정수부터 b번째 정수까지 중에서 제일 작은 정수를 찾는 것은 어려운 일이 아니다. 하지만 이와 같은 a, b의 쌍이 M(1 ≤ M ≤ 100,000)개 주어졌을 때는 www.acmicpc.net import sys n, m = [int(x) for x in sys.stdin.readline().split()] num = [] for _ in range(n): num.append(int(sys.stdin.readline())) seg_tree = [0 for _ in range(4*n)] def build_tree(x, left, right): if le..

티스토리툴바