본문 바로가기

분류 전체보기

 (255)
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..
파이썬)구간 합 구하기 - BOJ(세그먼트 트리) https://www.acmicpc.net/problem/2042 2042번: 구간 합 구하기 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000,000)과 M(1 ≤ M ≤ 10,000), K(1 ≤ K ≤ 10,000) 가 주어진다. M은 수의 변경이 일어나는 횟수이고, K는 구간의 합을 구하는 횟수이다. 그리고 둘째 줄부터 N+1번째 줄 www.acmicpc.net 우선 세그먼트 트리의 경우 힙 정렬 알고리즘과 상당히 비슷하다. 대신 단순히 트리를 만들어 정렬하는 힙정렬 알고리즘과 달리 세그먼트 트리는 구간 합, 최소, 최대를 구하는데 최적화가 되어있다. 이번 백준 2042번 구간 합 구하기는 도저히 스스로 풀 수가 없어서 다른 이의 코드를 참조했다. 우선 코드를 보자. import sys input..
파이썬)숨바꼭질3 -BOJ https://www.acmicpc.net/problem/13549 13549번: 숨바꼭질 3 수빈이는 동생과 숨바꼭질을 하고 있다. 수빈이는 현재 점 N(0 ≤ N ≤ 100,000)에 있고, 동생은 점 K(0 ≤ K ≤ 100,000)에 있다. 수빈이는 걷거나 순간이동을 할 수 있다. 만약, 수빈이의 위치가 X일 때 www.acmicpc.net 우선 이 문제는 BFS로 분류되어 있는 문제이기도 하고, "최소"시간을 구하는 문제이니 BFS가 효율적이라 생각했다. 하지만 어떻게 BFS를 구현할까 생각했다. from collections import deque n, k = map(int, input().split()) visit = [-1] * 100001 visit[n] = 0 q = deque() an..

티스토리툴바