Next.js 13 이후 도입된 App Router로, 파일 시스템 기반 라우팅을 담당한다. /app ├── layout.tsx # 공통 레이아웃 ├── page.tsx # '/' 경로 (홈 페이지) ├── about │ └── page.tsx # '/about' 경로 ├── blog │ ├── page.tsx # '/blog' 경로 │ └── [id] │ └── page.tsx # 동적 경로: '/blog/:id' └── not-found.tsx # 404 페이지 react-router-dom 에서 사용하던 router 가 Next.js 에서는 필요하지 않다.Next.js 는 파일 시스템을 기반으로 라우팅하기 때문에, 파일 경로가 곧 ..

1. Hydration서버에서 렌더링된 HTML을 클라이언트에서 JavaScript와 연결하여 인터랙티브한 웹 페이지로 만드는 과정 SSR (서버 사이드 렌더링) 된 HTML 은 정적인 상태이므로, JavaScript 없이 동적인 동작을 할 수 없다. 예를 들어, 버튼을 클릭할 때마다 숫자가 올라가는 간단한 이벤트가 있는 웹 페이지가 있다고 가정해 보자.이 경우 버튼과 카운팅이 계산될 숫자는 렌더링되어 사용자에게 보이지만,버튼을 클릭해도 아무런 이벤트가 발생하지 않는 것이다. 클라이언트에서 JavaScript가 실행되면서 인터랙티브한 기능을 추가해 주는데,서버에서 렌더링된 HTML을 재사용하여 React 컴포넌트와 연결한다.2.  주요 기본 파일들2-1. page각 라우트에 대응하는 페이지 컴포넌트로, ..

TypeScript 를 어느 정도 잘 사용할 수 있겠다는 생각이 들어서, 이제는 다음 스텝인 Next.js 공부를 시작했다.Next.js 프레임워크의 가장 큰 특징 중 하나인 SSR 에 대해 헷갈려서 정리해 보기로...!종류설명SSR (Server Side Rendering)서버에서 렌더링CSR (Client Side Rendering)클라이언트에서 렌더링 1. SSR (서버 사이드 렌더링)서버에서 HTML을 만들어서 클라이언트로 전송한다. 작성한 코드를 서버에서 HTML로 변환한 뒤, 브라우저에 렌더링하는 동안 JavaScript를 로드하여 인터랙티브한 웹을 완성한다.이는 기존 React의 전통적인 방식인 CSR 를 짚고 나면, 더 잘 이해할 수 있다.2. CSR (클라이언트 사이드 렌더링)서버에서 H..

최근 알고리즘 문제를 풀면서 기본기가 많이 부족하다는 걸 몸소 느끼는 중인데, 그중 하나가 자료구조!매일 쓰는 List (그것도 ArrayList 만) 와 Map (그것도 HashMap 만) 말고는 전혀 사용하지 않았는데...알고리즘 문제 풀이에서 훨~ 씬 쉽게 풀 수 있는 걸 저 두 개로만 풀어내려고 하니까 어렵기도 하고 비효율적이기도 하고그래서 자료구조를 정리해 보려고 한다 1. List 리스트순서가 있는 중복 가능한 컬렉션 요소들이 인덱스로 접근할 수 있기 때문에 순서가 중요한 데이터를 다룰 때 유용하다. 대표 구현체종류설명ArrayList동적 배열 기반, 인덱스 접근이 빠르지만 삽입 및 삭제가 비교적 느리다LinkedList연결 리스트 기반, 삽입 및 삭제가 빠르지만 인덱스 접근이 비교적 느리다2..

리액트에서 드래그 앤 드롭을 쉽게 구현할 수 있는 라이브러리가 있다.react-beautiful-dnd 로, 드래그 앤 드롭 기능뿐만아니라 반응형 UI 및 애니메이션도 기본적으로 제공한다.npm install react-beautiful-dndnpm install --save-dev @types/react-beautiful-dnd  return ( {(provided) => ( {items.map((item, index) => ( {(provided) => ( {item} ..

렌더링에 필요하지 않은 값을 참조할 수 있는 Reack Hook import { useRef } from 'react';const ref = useRef(initialValue); initialValue : ref 객체의 current 프로퍼티 초기 설정값 useRef 란?리렌더링을 유발하지 않으면서 값을 저장하고 유지할 수 있는 방법을 제공한다.예를 들어, useRef 로 저장된 값이 변하더라도 컴포넌트가 리렌더링되지 않아 성능면에서 유리하다. 반환값useRef 는 단일 프로퍼티를 가진 객체를 반환한다. 관련하여브라우저 API에서 제공하는 document.querySelector() 와 비슷한 역할을 한다.React 에서는 직접 document 를 사용하는 것보다 useRef를 사용하는 것이 권장되는데..

calc()css 상에서 사용할 수 있는 함수로, 간단한 계산이 가능함calc() 외, 자주 사용하는 CSS 함수종류설명예시clamp()최소값, 최적값, 최대값 설정font-size: clamp(1rem, 2.5vw, 2rem);min()여러 값 중 가장 작은 값 선택width: min(50vw, 500px);max()여러 값 중 가장 큰 값 선택height: max(100px, 10vh);미디어 타입orientation portrait 또는 landscape 감지color 기기의 색상당 비트 수color-index 출력 기기의 색상 테이블 수aspect-ratio 디스플레이 영역의 너비와 높이의 비율미디어 쿼리미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 ..

meta name="viewport" content="width=device-width, initial-scale=1.0" />기기의 너비에 맞춰서 초기 스케일을 잡겠다는 viewport 기본 설정em, remem 부모 요소의 글꼴 크기rem 루트 (최상위, html) 요소의 글꼴 크기vw, vh, vmin, vmaxvw  화면 크기에서 너비의 n/100 vh 화면 크기에서 높이의 n/100 vmin  너비와 높이 중에서 작은 것에 맞춤 vmax 너비와 높이 중에서 큰 것에 맞춤 box-sizing : border-boxbox-sizing CSS에서 요소의 크기를 계산하는 방식을 결정border-box 지정한 width와 height 값이 패딩과 테두리를 포함한 전체 크기로 유지%부모요소를 기준으로 ..

feedback.reportErrorfeedback.reportError("⚠️ 자료를 찾을 수 없습니다.", fatalError=True) feedback의 reportError 함수를 사용하여 프로세스를 즉시 중단할 수 있다.fatalError를 True로 설정하면 치명적인 오류로 간주된다.하지만 종료되더라도 QGIS는 프로세싱 알고리즘이 반드시 딕셔너리 형태의 결과를 반환해야 하므로,빈 딕셔너리 (return {}) 혹은 종료시 반환되길 바라는 특정 딕셔너리를 return 해 준다.updateExtentlayer.updateExtents() QgsVectorLayer 객체에서 사용되는 메소드로, 레이어의 지리적 범위를 업데이트한다.레이어에 새로운 피처를 추가하거나 기존 피처를 수정한 뒤 변경사항을 ..

3. shortHelpStringdef shortHelpString(self): return """ 알고리즘 설명 """ 위처럼 알고리즘 설명을 기재하면, QGIS 내에서 알고리즘을 실행했을 때 설명이 같이 출력된다.4. displayNamedef displayName(self): return "예제 파일" 화면에 출력될 알고리즘의 이름을 설정할 수 있다.5. groupdef group(self): return "예제 그룹" 어떤 그룹에 해당하는지 설정할 수 있다.../그룹/파일 같은 경로로 이해하면 된다.6. groupIddef groupId(self): return "example" group과 groupId가 같은 알고리즘끼..