next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Error Handling error.js 이용 React Error Boundary에서 경로 세그먼트와 중첩된 자식을 자동으로 래핑 파일 시스템 계층 구조를 사용하여 특정 세그먼트에 맞춤화된 오류 UI를 생성하여 세분성을 조정 나머지 앱 기능을 유지하면서 영향을 받는 세그먼트에 대한 오류를 격리 전체 페이지를 다시 로드하지 않고 오류 복구를 시도하는 기능이 있음 error.tsx 'use client'; // Error components must be Client components import { useEffect } from 'react'; export default function Error({ error, reset, }: { ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Loading UI 인스턴스 로딩 상태 스켈레톤이나 스피너와 같은 로딩 표시기나 표지 사진, 제목등을 미리 렌더링 할 수 있음. loading.tsx export default function Loading() { // You can add any UI inside Loading, including a Skeleton. return } 같은 폴더에서 loading.js는 layout.js 안에 중첩됨. page.js 파일과 그 아래의 모든 하위 파일을 경계로 감쌈. 탐색은 서버 중심 라우팅에서도 즉각적임 네비게이션은 중단 가능 공유 레이아웃은 새 경로 세그먼트가 로드되는 동안 유지됨 서스펜스 경계 수동 정의 리액트의 fallback 활용

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Linking and Navigating 요소 기본 import Link from 'next/link'; export default function Page() { return Dashboard; } 동적 세그먼트에 연결 import Link from 'next/link'; export default function PostList({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ); } useRouter() 훅 'use client'; import { useRouter } from 'next/navigation'; export default function Page() { c..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Pages and Layouts 페이지 페이지는 경로에 고유한 UI export default function Page() { return Hello, Next.js!; } 페이지는 항상 경로 하위 트리의 리프임. .js, .jsx, .tsx 파일 확장자 사용가능 경로 세그먼트에 공개적으로 액세스 하려면 page.js 필요 페이지는 기본적으로 서버 컴포넌트지만 클라이언트 컴포넌트로 설정할 수 있음 페이지는 데이터를 가져올 수 있음 레이아웃 레이아웃은 여러 페이지간에 공유되는 UI (리렌더링이 안되고 중첩가능) export default function DashboardLayout({ children, // will be a page or ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Defining Routes 경로 생성 폴더를 만들고 page.js, page.jsx, page.tsx 등을 넣어라 UI 만들기 page.js내에 리액트 컴포넌트를 추가하고 export default로 내보내기 Path Group 규칙 ()로 묶어서 생성. 이름은 별 의미 없음. 다른 URL path랑 겹치면 안됨 여러 루트 레이아웃을 탐색하면 전체 페이지 로드가 발생함.(다중 루트 레이아웃 시)) URL 구조에 영향을 주지 않고 경로 구성 ex) /(marketing)/about/page.js 특정 경로 세그먼트에 레이아웃 적용 ex) /(marketing)/layout.js 애플리케이션을 분할하여 다중 루트 레이아웃 만들기 ex) /의..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Fundamentals 용어 트리 : 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 하위트리 : 새 루트(첫번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부 루트 : 루트 레이아웃 같은 트리 또는 하위 트리의 첫번째 노드 리프 : 자식이 없는 하위 트리의 노드 URL 세그먼트 : 도메인이 아닌 /로 구분된 URL 경로의 일부 URL path : 도메인 뒤에 오는 URL의 일부 (세그먼트로 구성) app 디렉토리 새 라우터는 app 디렉토리에서 동작 기존 pages 경로와 함께 사용가능하나 URL path가 겹치면 안됨 기본적으로 컴포넌트는 서버 컴포넌트임. 클라이언트 컴포넌트를 사용할수도 있음. ( “use client”..

Obsidian Ollama 플러그인 사용에 필요한 설정 정리 설치 ollama 설치 https://ollama.com/ 에서 다운로드 후 설치 ollama 실행 실행 ollama run llama2 처음 실행하면 모델을 다운로드하고 실행됨 실행 후 아래 명령어를 입력하여 터미널 종료 /bye 다른 모델 사용시 아래 주소 참고 https://ollama.com/library 옵시디언 ollama 플러그인 설치 플러그인 검색 - 설정 -> 커뮤니티 플러그인 -> ollama 검색 - 혹은 링크 클릭 obsidian://show-plugin?id=ollama hinterdupfinger의 ollama 플러그인 설치 후 활성화 ️ 사용 기본 사용법 텍스트를 선택한 후 팔레트에서 ollama를 검색하여 필요한 ..

서버 설치 openvpn 자동설치 쉘 스크립트 다운로드 wget https://git.io/vpn -O openvpn-install.sh 파일 실행 권한 부여 sudo chmod +x openvpn-install.sh 실행 sudo bash openvpn-install.sh 질문에 답을 하여 설치 This server is behind NAT. What is the public IPv4 address or hostname? Public IPv4 address / hostname []: IP주소 Which protocol should OpenVPN use? 1) UDP (recommended) 2) TCP Protocol [1]: 1 What port should OpenVPN listen to? Port..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 네임스페이스와 모듈 모듈 사용하기 모듈에는 코드와 선언 둘 다 포함 될 수 있음 모듈은 모듈로더에 대한 의존성이나 ES모듈이 지원하는 런타임을 가지고 있음 Node.js의 경우 모듈이 기본이 기본적인 방법임 모듈 사용을 권장함 네임스페이스 사용하기 네임스페이스는 코드를 구성하는 TS만의 고유한 방법 전역 네임스페이스에서 JS 객체로 이름 붙여짐 모듈과 달리 여러개의 파일을 포괄할 수 있으며, --outFile을 사용해 연결할 수 있음. 네임스페이스와 모듈의 위험성 /// 를 사용한 모듈 모듈 파일을 참조하기 위해 import 문 대신 /// 구문을 사용하는 실수 i..

typescript 핸드북 학습내용 정리 https://typescript-kr.github.io/pages/the-handbook.html 네임스페이스 첫번째 단계 단일 파일 검사기 interface StringValidator { isAcceptable(s: string): boolean; } let lettersRegexp = /^[A-Za-z]+$/; let numberRegexp = /^[0-9]+$/; //정규식 검사기 class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } //우편번호 검사기 class ZipCodeValidator imple..