profile
함께 성장하는 개발자

SPA Framework의 Router 구현해보기 - (3)

지금까지 History Web API의 History.pushState를 활용하여 Router를 구현했다. 그런데 이 방법 외에도 SPA Framework의 Router를 구현할 수 있는 방법이 있다. 바로 hash를 활용하는 방법이다. Vue Router - Has

2022년 3월 9일
·
0개의 댓글

SPA Framework의 Router 구현해보기 - (2)

Router Router를 다음과 같이 구현했다. router.js Router를 App에 적용시켜보자. App.js 예제 https://piuvoo.csb.app/ !codesandbox[lucid-wilson-piuvoo?fontsize=14&hiden

2022년 3월 9일
·
0개의 댓글

SPA Framework의 Router 구현해보기 - (1)

먼저 예제를 위해 필요한 파일들을 생성해보자. index.html App.js index.js 페이지 만들기 페이지는 메인 페이지, 상세 페이지, 404 페이지 세개를 구현한다. 페이지는 모두 다음과 같은 형식을 갖추고 있다. 현재 URL에 따라 페이지 불러오기 URL에 대한 정보를 받기 위해 location Web API의 pathname ...

2022년 3월 9일
·
0개의 댓글

집합 - Knapsack

배낭에 물건을 담을 때, 물건의 무게와 가치를 고려하여 가장 높은 가치를 가질 수 있는 경우의 수를 구하는 알고리즘물건의 개수가 1개인 경우(0/1)과 물건의 개수가 제한되어 있는 경우(Bounded), 물건의 개수가 제한되어 있지 않은 경우(Unbounded)가 있다

2022년 3월 4일
·
0개의 댓글

집합 - 최장 증가 부분순열(LIS)

최장 증가 부분순열은 순열의 부분순열 집합에서 오름차순으로 정렬된 부분순열 중에 길이가 가장 긴 부분순열의 길이를 구하는 알고리즘

2022년 3월 2일
·
0개의 댓글

집합 - 최장 공통 부분순열(LCS)

최장 공통 부분순열은 두 순열의 각 부분순열 집합에서 공통으로 속하면서 길이가 가장 긴 부분순열을 찾는 알고리즘최장 공통 부분문자열과의 차이점은 부분문자열과 다르게 부분순열 문제에서는 순서만 일치한다면 값의 연속성을 고려하지 않아도 된다.최장 공통 부분순열을 해결하기

2022년 3월 2일
·
0개의 댓글

문자열 - KMP 알고리즘

길이가 M인 문자열 내에 길이가 N인 단어가 있는지 확인하는 알고리즘단어 내에 동일한 패턴의 문자가 반복될 경우, 이미 확인이 끝난 패턴의 재확인을 피하기 위해 패턴 테이블을 만든다.패턴 테이블단어: abcaby인덱스 0의 경우: 앞에 문자가 없으므로 0인덱스 1의 경

2022년 3월 1일
·
0개의 댓글

문자열 - Z 알고리즘

문자열 T 내에 단어 W가 몇번 사용되는지 확인하는 선형 시간복잡도(O(|W|+|T|)) 알고리즘Z 배열문자열 T에서 인덱스 k까지의 하위 문자열이 k 이후의 하위 문자열에서 몇번 반복되는지를 계산한 배열문자열: aabcaabxaaazZ배열: \[0, 1, 0, 0,

2022년 3월 1일
·
0개의 댓글

문자열 - 레벤슈타인 거리

두 문자열이 있을 때, 한 문자열을 다른 문자열로 변환할 때 필요한 최소한의 작업(추가, 삭제, 치환) 횟수추가 : m -> me삭제 : me -> m치환 : me -> my두 문자열을 각각 행, 열로 가지는 행렬을 생성하고, 그 위치에서 한 문자열을 다른 문자열로 변

2022년 2월 24일
·
0개의 댓글

문자열 - 해밍 거리

동일한 길이를 가지는 두 순열이 있을 때, 한 순열을 다른 한 순열로 변환하는데 필요한 최소한의 작업 횟수

2022년 2월 24일
·
0개의 댓글

TIL - 5일차

requestAnimationFrame은 브라우저에 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출한다.requestAnimationFrame과 비교할 수 있는 방법으로는 setInterval이 있다. 특정

2022년 2월 3일
·
0개의 댓글
post-thumbnail

Next.js - Data Fetching

Next.js에서 데이터 요청은 애플리케이션 사용 방식에 따라 다른 방식으로 콘텐츠를 렌더링한다. 이는 사전 렌더링에 속하는 Static Generation 또는 Server-side Rendering 뿐만 아니라 런타임 시에 콘텐츠를 생성 및 변경하는 Incremen

2022년 1월 18일
·
0개의 댓글
post-thumbnail

Next.js - Pages

Next.js에서 페이지는 pages 디렉토리 내의 js, jsx, ts, tsx가 내보내는 리액트 컴포넌트다. 페이지 파일의 경로는 페이지의 라우트가 된다.예시: pages/about.js 페이지 파일을 생성하면 이 페이지의 경로는 /about이 된다.동적 라우트를

2022년 1월 17일
·
0개의 댓글
post-thumbnail

NEXT.js 목차

Next.js Next.js는 리액트 프레임워크로 개발자에게 많은 내장 기능들을 제공한다. 페이지 기반의 직관적인 라우팅 시스템(동적 라우팅도 함께 지원) 각 페이지를 기반으로 사전 렌더링(Static Generation, Server-Side Rendering)

2022년 1월 17일
·
0개의 댓글

TIL - 4일차

비동기적으로 JS를 사용해서 데이터를 받아와 동적으로 DOM을 갱신 및 조작하는 웹 개발 기법XMLHttpRequest일반적으로 XMLHttpRequest 객체를 사용하여 인스턴스를 생성한 후, open, send 등의 메소드를 이용한다.Fetch APIfetch 함수

2022년 1월 13일
·
0개의 댓글

TIL - 3일차

HTML 문서상의 요소들을 하나의 직사각형 박스로 정의하는 모델콘텐츠(Content): 글, 이미지, 비디오 등 콘텐츠의 실제 영역내부 여백(Padding): 콘텐츠와 경계선 사이의 영역경계선(Border): 콘텐츠를 감싸는 내부 여백과 외부 여백을 구분하는 선외부 여

2022년 1월 12일
·
0개의 댓글

Redux Saga

Redux Saga는 Redux 사용 중에 필요한 비동기 작업을 쉽게 처리하도록 도와주는 라이브러리select: redux 저장소에서 값을 가져올 때 사용call: 비동기 요청 함수를 실행할 때 사용put: redux 저장소의 값을 업데이트하는 action을 dispa

2022년 1월 12일
·
0개의 댓글

React Query

React Query는 React App에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를

2022년 1월 12일
·
0개의 댓글

TIL - 2일차

BOM(Browser Object Model)브라우저의 창이나 프레임을 프로그래밍으로 제어할 수 있게 해주는 객체 모델. 전역 객체는 window이며, 하위 객체로 location, navigator, document, screen, history가 포함된다.DOM(D

2022년 1월 11일
·
0개의 댓글

TIL - 1일차

DOCTYPE Document Type 문서의 타입(DTD, Document Type Definition)을 정의할 때 사용한다. 브라우저는 DOCTYPE이 정의되어 있으면 표준(standard) 모드로, 정의되어 있지 않다면 호환(quirks) 모드로 문서를 렌더링한

2022년 1월 10일
·
0개의 댓글