본문 바로가기

전체 글

 (254)
파이썬) 암기왕 -BOJ https://www.acmicpc.net/problem/2776 from bisect import bisect_left t = int(input()) def find(): n = int(input()) arr = list(map(int, input().split())) m = int(input()) arr2 = list(map(int, input().split())) arr.sort() for i in range(len(arr2)): target = arr2[i] start = 0 end = n-1 while start arr[mid]: start = mid + 1 else: end = mid - 1 if start > end: print(0) for _ in range(t): find()
파이선) 기타 레슨- - BOJ https://www.acmicpc.net/problem/2343 2343번: 기타 레슨 강토는 자신의 기타 강의 동영상을 블루레이로 만들어 판매하려고 한다. 블루레이에는 총 N개의 강의가 들어가는데, 블루레이를 녹화할 때, 강의의 순서가 바뀌면 안 된다. 순서가 뒤바뀌는 경 www.acmicpc.net n, m = map(int, input().split()) arr = list(map(int, input().split())) result = sum(arr) start = 0 end = sum(arr) while start
파이썬) 구슬탈출 -BOJ https://www.acmicpc.net/problem/13460 13460번: 구슬 탈출 2 첫 번째 줄에는 보드의 세로, 가로 크기를 의미하는 두 정수 N, M (3 ≤ N, M ≤ 10)이 주어진다. 다음 N개의 줄에 보드의 모양을 나타내는 길이 M의 문자열이 주어진다. 이 문자열은 '.', '#', 'O', 'R', 'B' www.acmicpc.net from collections import deque import sys input = sys.stdin.readline # 빠른 입출력 위한 코드 n, m = map(int, input().split()) graph = [] for i in range(n): graph.append(list(input())) for j in range(m): if..
Next.js 시작하기(5) Pre-Rendering Data Fetching에 대해 이야기하기 전에 Next.js의 가장 중요한 개념중 하나인 Pre-rendering에 대해 이야기를 해보겠습니다. 기본적으로 Next.js는 모든 페이지를 미리 렌더링합니다. 이는 Next.js가 클라이언트 측 JavaScript로 모든 작업을 수행하는 대신 각 페이지에 대해 미리 HTML을 생성한다는 것을 의미합니다. 사전 렌더링을 통해 성능과 SEO가 향상될 수 있습니다 . 즉, 자바스크립트를 실행하기 전, 미리 HTML을 생성하기 때문에 검색엔진(구글 등)에서 웹사이트를 크롤링함에 있어서 웹사이트에 대한 정보를 가져오기가 수월하다는 의미이다. 생성된 각 HTML은 해당 페이지에 필요한 최소한의 JS코드와 연결됩니다. 브라우저가 페이지를 로드하..
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..
파이썬)구간 합 구하기 - 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..
파이썬) 가장 큰 정사각형 찾기 - 프로그래머스 https://school.programmers.co.kr/learn/courses/30/lessons/12905 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이 문제를 처음 접했을때 무조건 bfs혹은 dfs로 풀어야겠다 생각했다. 우선 가장 넓은 범위를 구하기 위해 bfs를 사용했다. 그리고 정사각형을 어떻게해서 찾을 것인지 생각해보았다. 단순이 상하좌우가 1인 것만 찾는다면 "정"사각형을 찾지는 못한다. 그래서 생각해낸 방법이 바로 위, 바로 왼쪽, 왼쪽 대각선이 모두 1인 경우를 정사각형이라 보고 그 왼쪽 대각을 q에 담는다. 아래는 위 생각을 그..

티스토리툴바