본문 바로가기
반응형

전체 글281

[Nextra] Next.js 링크 사용하기 Nextra에서 Next.js 링크 사용하기모든 Markdown관련 링크는 자동으로 Next.js 링크로 변환되고 대상 페이지가 prefetch됨을 의미한다.링크를 클릭하면 전체 페이지를 로드하지 않고 SPA처럼 클라이언트 측에 페이지가 로드된다. 루트 아래의 링크인 홈 (/)으로 링크 시켜주는 코드를 생성해보자.사용방법은 아래와 같다.## `[here](/)` 사용Click [here](/) to read more.출력결과 위 코드는 아래와 같이 동작한다.import Link from 'next/link'## `here` 사용Click here to read more.출력결과 하지만 Nextra에서는 위 출력결과에서 보면 알다싶이 here에 하이퍼링크가 표시되지 않는다. (here을 누르면 동작은 된다.. 2023. 6. 23.
[Nextra] FileTree, Steps, Mermaid사용 Nextra에서 FileTree, Steps, Mermaid사용FileTree 컴포넌트의 사용방법import { FileTree } from "nextra-theme-docs"; 출력결과Steps 컴포넌트의 사용방법import { Steps } from "nextra-theme-docs"; ### Step1Step1의 내용이다.### Step2Step2의 내용이다.출력결과Mermaid```mermaidgraph TD;subgraph AA [Consumers]A[Mobile app];B[Web app];C[Node.js client];endsubgraph BB [Services]E[REST API];F[GraphQL API];G[SOAP API];endZ[GraphQL A.. 2023. 6. 22.
[Nextra] Callout 컴포넌트 Nextra에서 Callout 컴포넌트Nextra에서 Callout 컴포넌트는 읽는 사람에게 중요한 정보를 보여주는 기본 제공 컴포넌트이다. Callout 컴포넌트의 사용방법 Default(기본)import { Callout } from 'nextra/components' **스페이스 인베이더**는 니시카도 토모히로가 개발한 1978년 아케이드 게임입니다.출력결과Info(정보)import { Callout } from 'nextra/components' 오늘은 금요일이에요.출력결과Warning(경고)import { Callout } from 'nextra/components' 이 API는 곧 더 이상 사용되지 않습니다.출력결과Error(에러)import { Callout } from 'next.. 2023. 6. 21.
[Next.js] Nextra 파일 구성 [Next.js] Nextra에서 파일 및 페이지 구성Nextra는 먼저 페이지 디렉토리에서 모든 Markdown 파일 및 구성을 수집한 다음 전체 사이트의 "페이지 맵 정보"를 생성하여 아래의 탐색 모음 및 사이드바와 같은 항목을 렌더링한다. 기본 동작기본적으로 페이지 맵에는 모든 .md 및 .mdx 파일 이름과 디렉토리 구조가 알파벳 순으로 정렬되어 있다. 그런 다음 Nextra는 제목 패키지를 사용하여 파일 이름에서 형식이 지정된 페이지 이름을 가져온다.예를 들어 다음과 같은 구조를 가진 경우pages/ contact.md index.mdx about/ legal.md index.mdx 페이지 맵은 다음과 같다. (모든 이름이 알파벳 순으로 정렬된다.)[ { "name": ".. 2023. 6. 20.
[Next.js] Nextra를 사용한 문서화 [Next.js] 문서화를 위한 Nextra를 설치 및 시작Nextra는 Next.js를 기반으로 하는 프레임워크로 컨텐츠 중심의 웹사이트를 구축할 수 있다.Next.js의 모든 기능과 Markdown 기반 컨텐츠를 쉽게 생성할 수 있는 추가 기능이 있다. 1. Next 프로젝트 설치Next.js, React, Nextra 및 Nextra Docs Theme를 설치해야 한다.먼저 프로젝트를 설치하고자 하는 디렉토리에서 아래 명령어를 실행하여 Next.js 프로젝트 폴더를 설치한다.# npx 사용npx create-next-app@latest "프로젝트 이름"# pnpm 사용pnpm create next-app "프로젝트 이름"# yarn 사용yarn create next-app "프로젝트 이름" 이후 아.. 2023. 6. 19.
[Github] 새 SSH 키 생성 및 ssh-agent에 추가 Github의 private인 repository에 사용하는 SSH키 생성 및 ssh-agent에 추가하기 SSH 키 암호정보SSH를 사용하여 Github.com의 리포지토리에서 데이터에 접근할 수 있다.SSH를 통해 연결할 때 로컬 머신에서 private 키 파일을 사용하여 인증한다.새 SSH 키 생성Git Bash에 본인의 Github 이메일 주소로 아래 코드를 입력한다.$ ssh-keygen -t ed25519 -C "your_email@example.com" Ed25519알고리즘을 지원하지 않는 레거시 시스템을 사용하는 경우 다음을 사용한다.$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com" 결과: 제공된 이메일을 레이블로 새 SSH 키가 생성된다... 2023. 6. 18.
[Github] master, main branch 병합하는 방법 (master -> main, main -> master) master, main 브랜치 병합하는 방법 (master -> main, main -> master)1. "There isn't anything to compare. Nothing to compare, branches are entirely different commit histories"에러 발생시2. 프로젝트에서 branch가 master, main 분리되어있을 때 병합하는 방법 예 1: master -> main으로 병합하는 방법1. 병합을 원하는 프로젝트에서 아래 명령어를 실행한다.git checkout mastergit branch main master -fgit checkout maingit push [ssh-연결된 이름 or origin] main -f - master에 있는 걸 main에.. 2023. 6. 18.
[알고리즘] 동적 계획법(Dynamic Programming, DP), 분할 정복(Divide and Conquer) 동적 계획법(Dynamic Programming, DP), 분할 정복(Divide and Conquer)의 차이와 정의 1. 정의 및 특징 1) 분할 정복(Divide and Conquer) 정의: 상위 문제를 나눌 수 없을 때까지 분할하여 각 하위 문제를 풀고 다시 합병하여 상위 문제의 답을 얻는 방식의 알고리즘이다. 특징 - 하향식 접근법: 상위 문제의 답을 구하기 위해, 아래로 내려가면서 하위의 해답을 구하는 방식. 즉, 상위 문제의 답을 구하기 위해 이전에 수행해야 하는 절차를 수행하는 방식이다.(재귀함수로 구현) - 문제를 쪼갤 때, 부분 문제의 중복이 없다. 예: 병합 정렬, 퀵 정렬 등 1) 동적 계획법(Dynamic Programming, DP) 정의: 하나의 큰 문제를 해결하기 위해, 큰.. 2023. 6. 17.
[알고리즘] 타뷸레이션(Tabulation) 타뷸레이션(Tabulation)의 정의와 메모이제이션(Memoization)과의 차이 타뷸레이션(Tabulation)이란? 1. 동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 저장해 두었다가 재사용하여 중복 계산을 방지할 수 있게 하는 기법이다. 2. 중복 계산을 방지하여 전체 실행 속도를 빠르게 한다. 3. 앞으로 계산할 모든 값에 대해 저장하여 초기화 오버헤드가 크다. 4. 초기화 이후에 계산해둔 값을 사용할 때 더 이상의 계산이 필요하지 않다. 5. Table + ulation으로 테이블에 미리 값을 적어놓는다고 생각하자. 차이점 1. 메모이제이션과 비슷하지만, 값을 미리 계산해둔다는 차이점이 있다. 2. 메모이제이션 결과가 필요해질 때 계산한다.(Lazy-Evaluation) - .. 2023. 6. 17.
[알고리즘] 재귀(recursion), 재귀함수(recursive function) 재귀(recursion) 및 재귀함수(recursive function), 팩토리얼을 구하는 함수 예제코드 1. 재귀 자기자신을 호출한다는 말로 자기자신을 반복해서 돌아간다라는 의미를 가지고 있다. 2. 재귀함수 재귀를 하는 함수로 정의 단계에서 자신을 재참조하는 함수를 뜻한다. 재귀함수의 예시로 팩토리얼을 구하는 함수가 있다. 예제코드 const factorial = function(number) { if (number > 0) { return number * factorial(number - 1); } else { return 1; } }; console.log(factorial(10)); 1. factorial 함수는 재귀함수로 factorial함수에서 factorial 함수를 또 호출한다. (자기.. 2023. 6. 16.
반응형

티스토리툴바