Hoo_Dev

Next.js 프로젝트를 처음 생성하면 기본적으로 제공되는 _document와 _app이 제공된다. 오늘은 이 두 페이지의 사용 목적에 대해 알아보려고 한다. _app _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 루트 컴포넌트이다. 페이지에 적용 할 공통 레이아웃을 정의 할 때 사용 할 수 있다. ex) import '@/styles/globals.css' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { return } 가장 초기 생성 된 _app의 코드를 확인해보면 1. Component 속성 값은 서버에 요청한 페이지가 된다. 아래 예시를 보게 된..

A const NoSSR = () => { return width: {window.innerWidth}; }; export default NoSSR; B import type { NextPage } from 'next'; import dynamic from 'next/dynamic'; import NoSSR from '../../components/section1/NoSSR'; const Example: NextPage = () => { return ( SSR에서 윈도우 객체 불러오기 no SSR ); }; export default Example; 보통 React를 사용 할 때 A컴포넌트를 B컴포넌트에서 사용 할 때 일반적인 import를 통해 가져오게 된다. 하지만 Next에서 위와 같은 방식으로 w..

getServerSideProps getServerSideProps는 이전 게시물에 말했듯이 두 가지 pre-rendering 기능 중 하나를 의미한다. pre-rendering의 뜻을 다시 한 번 짚고 간다면 사전에 미리 HTML을 렌더링 하는 것인데 즉, HTML을 미리 생성하고 최소한의 js를 연결 시킨 후 클라이언트에서 요청이 들어오면 해당 HTML을 로드하면서 나머지 js를 불러와 화면에 렌더링 해주는 방법이다. getServerSideProps 예시코드 import type { GetServerSideProps, NextPage } from 'next'; interface Props { data: number; } const Example: NextPage = ({ data }) => { re..

def solution(n): def changeBinary(n): arr = [] x = n while x >= 1: arr.append(x%2) x //= 2 return arr for i in range(n+1, 1000001): if changeBinary(i).count(1) == changeBinary(n).count(1): return i answer = 0 return answer 10진법을 2진법으로 변환하는 함수를 작성하고 입력받은 값보다 큰 수 부터 순회하는 for문을 통해 해당 숫자를 2진법으로 변환 후 1의 개수를 비교한다.

def solution(n): answer = 0 stack = [0, 1] for i in range(100001): stack.append(stack[-1] + stack[-2]) if i == n: answer = stack[n] % 1234567 break return answer 스택에 미리 정의 된 0, 1 번째 수를 작성하고 피보나치 수는 맨마지막 값과 그 마지막 값의 전 값을 더하기 때문에 해당하는 값을 스택에 추가해준다. 그리고 n의 값과 더해준 값의 인덱스가 같다면 break를 해줘서 효율성을 높여준다. 나는 범위를 문제에 맞게 100000 까지 순회하고 해당 인덱스에서 break하는 식으로 작성했지만, 범위를 range(n+1)로 설정한다면 좀 더 좋은 코드를 작성 할 수 있었을 것 ..

def solution(n): answer = 0 for i in range(1, n+1): cnt = 0 for j in range(i, n+1): cnt += j if cnt >= n: answer += 1 break elif cnt > n: break return answer 이중포문을 통해 풀이. 누적합의 값이 n보다 커지면 break (효율성)

위 개념을 먼저 알기 전에 PreRendering에 대해 먼저 짚고 넘어가려 한다. PreRendering이란? Next.js에서는 두 가지 PreRendering 방식을 제공하는데, Static Generation(정적 생성 방식)과, Server-Side Rendering 방식이다. Next.js에서는 Static Generation을 권장한다. Next.js에서 Static Generation 을 사용하는 법을 예제를 통해 간단히 알아보자. getStaticProps import type { NextPage } from 'next'; interface Props { data: number; } const Example: NextPage = ({ data }) => { return ( getStati..

from itertools import product def solution(A,B): answer = 0 A.sort() B.sort(reverse=True) for i in range(len(A)): answer += A[i] * B[i] return answer 두 배열 중 최솟값을 만들려면 한 배열의 가장 작은 원소 * 또 다른 배열의 가장 큰 원소 의 곱으로 이루어져야 한다. 각 배열을 sort 후 풀이

쿠키란? 쉽게는 흔히들 아는 헨젤과 그레텔 이야기 처럼 쿠키를 바닥에 떨어뜨려 자신의 흔적을 남기는 것과 같다고 생각하면 된다. 즉, 서버에 요청한 클라이언트의 정보를 일시적으로 key : value 모양으로 담게 된다. - 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일. - 클라이언트의 상태 정보를 클라이언트에 저장했다가 참조. - 한 개에 4KB 까지 저장, 최대 300개 까지 저장 할 수 있는 텍스트 파일 - 사용자가 따로 요청을 보내지 않아도 브라우저가 Request 시 Request Header에 넣어서 자동으로 서버에 전송한다. - 만료 날짜 지정이 가능 하다는 특성에 의해 n일 동안 보지 않기, 재방문시 아이디/비밀번호 자동입력 등 특정 시간이 지나면 다시 띄워주는 팝업 구현..

def solution(citations): answer = 0 citations.sort(reverse=True) for i, j in enumerate(citations): if i >= j: return i return len(citations) https://www.ibric.org/myboard/read.php?Board=news&id=270333 [연구논문을 위한 핵심 10단계] H-지수(H-Index) 란 무엇인가? 일반적으로 특정 연구원의 연구성과를 평가하기 위해 얼마나 많은 논문을 발표 하였는지를 보게됩니다. 그러나 단순히 발표한 논문 수로만 그 연구원의 연구 업적을 평가 하기에는 발표한 논문 www.ibric.org 문제 이해를 위해 위 링크에서 참고했다. 내림차순 정렬 후 enumer..