전체 글 (131) 썸네일형 리스트형 Pre-Fetching 1. Pre-Fetching Pre-Fetching : 페이지를 미리 불러온다. 현재 사용자가 보고 있는 페이지에 있는 링크나 버튼들로 갈 수 있는 페이지들의 번들파일을 불러와 pre-fetching한다.-> 빠른 페이지 이동이 가능 ※ 프리페칭이 필요한 이유!리액트에서 빈 화면 이후에 페이지 렌더링 시 JS코드를 번들링해서 받을 때 현재 페이지에 필요한 JS 코드들만 전달 받음.넥스트에서 모든 페이지의 번들파일을 받을 경우 용량이 커지며 하이드레이션이 늦어짐 -> 리액트와 같은 방식으로 현재 페이지의 번들 파일만 받게 되지만 페이지 이동시 다시 번들 파일을 받아야 함. -> 이때 필요한 것이 프리페칭! 아래 사진에서 현재 페이지에 Link로 페이지 이동이 가능한 페이지에 필요한 JS코드를 프.. 네비게이팅 1. 클라이언트 사이드 방식의 링크 생성● a태그서버에게 새로운 페이지를 요청하는 방식으로 페이지 이동함 ● Link컴포넌트// href에 경로를, 태그 사이에 화면에 표시할 텍스트를 작성indexsearch ● 이벤트 핸들러 함수 컴포넌트 내부에서 특정 조건이 만족했을 때, 함수 내부에서도 페이지를 CSR방식으로 이동할 수 있다.const onClickButton = () => { router.push("/test");}; return ( /test 페이지로 이동 ) router.push: 페이지 이동router.replace: 뒤로가기를 방지하며 페이지 이동router.back: 뒤로가기 Page Router 1. Page Router 실습 전 넥스트 앱 만들기npx create-next-app@14 section2 npx(node-package-execute)npmjs.com에 있는 최신 버전의 노드 패키지를 다운로드 없이 실행시키는 명령어 /src/pages/_app.tsx와 /src/pages/_document.tsx파일은 페이지역할을 하지 않고 넥스트 앱의 모든 페이지에 공통적으로 적용될 로직이나 레이아웃, 데이터를 다루기 위한 파일이다 . /src/pages/_app.tsx은 리액트에서 app컴포넌트(root컴포넌트)와 같은 역할을 함./src/pages/_document.tsx은 리액트에서 index.html과 비슷한 역할을 함.모든 페이지에 공통적으로 적용되어야 하는 넥스트 앱의 html코드를 설.. Next.js 렌더링 리액트 렌더링유저가 요청하면 서버에서 빈껍데기가 만들어지고 브라우저에서는 빈 화면이 렌더링 됨.그 이후 모든 자바스크립트 코드들이 번들링 되어 한번에 브라우저로 전달되고 브라우저에서 자바스크립트 코드들이 실행되어 내용이 렌더링되어 유저가 볼 수 있다.이 모든 과정이 이루어지는데 걸린 시간을 FCP라고 함. 그리고 리액트는 FCP가 길다고 볼 수 있다. 대신 초기 접속 이후의 페이지 이동은 빠름! FCP : 요청 시작부터 컨텐츠가 화면에 처음 나타나는데 걸린 시간성능을 나타내는 데 중요한 시간3초 이상 이탈률 32% 증가, 5초 이상 이탈률 90% 증가, 6초 이상 이탈률 106% 증가, 10초 이상 이탈률 123% 증가 Next.js의 사전 렌더링유저가 요청하면 서버에서 자바스크립트 코드가 html로 렌.. 240711 [BOJ/백준] 29700. 우당탕탕 영화예매 https://www.acmicpc.net/problem/29700문제도은이는 동아리 문화의 날을 맞이하여 동아리원들과 함께 좌석이 M행 N열의 직사각형 모양으로 배치되어 있는 영화관에서 영화를 보기로 했다. 도은이는 동아리원의 유대감을 중요하게 생각하기 때문에 이미 예매가 완료된 좌석을 피해 동아리원들이 모두 가로로 이어서 앉을 수 있도록 자리를 예매하고 싶어 한다. 도은이를 도와 모든 동아리원들이 가로로 이어서 앉을 수 있도록 예매하는 경우의 수는 총 몇 가지가 있을지 구해보자. 단, 예매한 좌석은 동일하지만, 각 사람이 앉는 위치만 바뀌는 경우는 한 가지로 본다.입력첫째 줄에 영화관 세로줄의 개수 N(1≤𝑁≤1000)과 가로줄의 개수 M(1≤𝑀≤5000), 영화를 관람할 동아리원 수 K(1≤𝐾.. 240710 [BOJ/백준] 9655. 돌 게임 https://www.acmicpc.net/problem/9655문제돌 게임은 두 명이서 즐기는 재밌는 게임이다.탁자 위에 돌 N개가 있다. 상근이와 창영이는 턴을 번갈아가면서 돌을 가져가며, 돌은 1개 또는 3개 가져갈 수 있다. 마지막 돌을 가져가는 사람이 게임을 이기게 된다.두 사람이 완벽하게 게임을 했을 때, 이기는 사람을 구하는 프로그램을 작성하시오. 게임은 상근이가 먼저 시작한다.입력첫째 줄에 N이 주어진다. (1 ≤ N ≤ 1000)출력상근이가 게임을 이기면 SK를, 창영이가 게임을 이기면 CY을 출력한다.제출 코드n = int(input())if n % 2 == 1: print('SK')else: print('CY')결과돌을 1개나 3개를 갖고갈 수 있다고 해서 어차피 3미만의 .. 240703 [BOJ/백준] 2108. 통계학 https://www.acmicpc.net/problem/2108문제수를 처리하는 것은 통계학에서 상당히 중요한 일이다. 통계학에서 N개의 수를 대표하는 기본 통계값에는 다음과 같은 것들이 있다. 단, N은 홀수라고 가정하자.산술평균 : N개의 수들의 합을 N으로 나눈 값중앙값 : N개의 수들을 증가하는 순서로 나열했을 경우 그 중앙에 위치하는 값최빈값 : N개의 수들 중 가장 많이 나타나는 값범위 : N개의 수들 중 최댓값과 최솟값의 차이N개의 수가 주어졌을 때, 네 가지 기본 통계값을 구하는 프로그램을 작성하시오.입력첫째 줄에 수의 개수 N(1 ≤ N ≤ 500,000)이 주어진다. 단, N은 홀수이다. 그 다음 N개의 줄에는 정수들이 주어진다. 입력되는 정수의 절댓값은 4,000을 넘지 않는다.출력.. 240702 [BOJ/백준] 3986. 좋은 단어 https://www.acmicpc.net/problem/3986문제이번 계절학기에 심리학 개론을 수강 중인 평석이는 오늘 자정까지 보고서를 제출해야 한다. 보고서 작성이 너무 지루했던 평석이는 노트북에 엎드려서 꾸벅꾸벅 졸다가 제출 마감 1시간 전에 깨고 말았다. 안타깝게도 자는 동안 키보드가 잘못 눌려서 보고서의 모든 글자가 A와 B로 바뀌어 버렸다! 그래서 평석이는 보고서 작성을 때려치우고 보고서에서 '좋은 단어'나 세보기로 마음 먹었다.평석이는 단어 위로 아치형 곡선을 그어 같은 글자끼리(A는 A끼리, B는 B끼리) 쌍을 짓기로 하였다. 만약 선끼리 교차하지 않으면서 각 글자를 정확히 한 개의 다른 위치에 있는 같은 글자와 짝 지을수 있다면, 그 단어는 '좋은 단어'이다. 평석이가 '좋은 단어' .. 이전 1 2 3 4 ··· 17 다음
