먼저, welcome page 이후에 마주하는 main page는 크게 4개의 파트로 구성할 예정이다. 대충 jsx로 이런 느낌이다. export default function Home() { return ( ); } 오늘은 그 첫번째인 intro 파트를 어떻게 자연스럽게 welcome page와 연결시키는지이다. # Welcome to Intro Intro 파트는 앞서 가구현한 welcome page를 지나면 처음으로 마주하는 페이지이다. 그렇기 때문에 welcome page와 intro page가 연속성있게 연결되어 라우팅 과정이 자연스럽게 느껴지기를 원했다. 이를 위해서 내가 택한 방법은 1. welcome page에서 클릭하면 가속되는 것을 이용해 사용자가 클릭을 오래 하고 있게끔 유도한다. 2...
앞선 글에서도 말하였듯이 아래 코드펜 프로젝트를 기반으로 welcome page를 제작하였다. https://codepen.io/akm2/pen/RwQXLdP # 조금 더 구체적인 컨셉 그렇다고 저걸 그대로 가져다 쓰기에는 허전하다. 저 파티클은 우주 컨셉의 배경일 뿐, 주인공이 될 수는 없다. 그렇다면 메인 모델은 누가 되어야 할 것인가? 나는 주인공을 혜성으로 정했다. 우주를 자유로이 유영하는 아름다운 천체이자 미지의 세계로 두려움없이, 또 끊임없이 나아가는 낭만을 품은 천체이다. 또한 여러 공부를 하다보면 마주치는 'deep dive'란 용어에 가장 잘 어울리는 존재이며 아름다운 꼬리를 남기는 모습이 끊임없이 탐구하며 발자취를 남겨가는 모습과 닮았다고 느껴졌다. 그럼 이 각설하고, # 구현 코드펜 ..
# 시작하기에 앞서 Next.js로 뭘 만들까 하다가 아이디어가 없어 한동안 알고리즘 공부만 하고 있었는데, 가장 중요한걸 빠뜨리고 있었다. 프론트엔드 개발자라면 자기 페이지 하나 쯤은 있어야 하는데, 그게 없다...! 고로 만든다. (이걸 이제야 생각하는 나 자신 반성하자...) # 프로젝트 구상 크게 두 페이지로 구성할 계획이다. 1. Welcome page 뭐든지 첫 인상이 가장 중요하다고 하였다. 여러 프론트엔드 개발자 분들의 포트폴리오를 검색해봤고, 그 중 아래 페이지가 가장 인상깊었다 . http://parkjin.com/ 방문자와 상호작용할 수 있는 welcome page를 준비하고 해당 상호작용을 자연스레 자신의 스토리와 연결짓는 말 그대로 순식간에 방문자를 자신의 이야기 속으로 빨아들이는..
# 플로이드 워셜 알고리즘 (Floyd-Warshall Algorithm) 플로이드 워셜 알고리즘은 모든 지점에서 다른 모든 지점까지의 최단 경로를 필요로 할 때 사용한다. 특정 시작점에서 다른 지점까지의 최단 경로를 탐색하는 다익스트라 알고리즘보다 넓은 범위를 탐색하는 만큼 시간 복잡도는 O(N3)으로 매우 느리지만 구현이 매우 간편하다. 따라서 모수가 작으며 여러 지점 사이 거리를 파악해야 하는 상황에서 사용할 만 하다. 플로이드 워셜 알고리즘은 두 노드 사이 다른 노드를 거쳐 갔을 때 더 작은 비용이 발생하는지 확인하는 작업을 반복 수행한다. Dynamic programming의 일종으로 볼 수 있으며 점화식으로 나타내면 다음과 같다. $$ D_{ab}=min(D_{ab}, D_{ak} + D_{k..
# 다익스트라 알고리즘 (Dijkstra's algorithm) 다익스트라 알고리즘은 한 노드에서 다른 모든 노드까지의 최단 경로를 찾는 알고리즘이다. 모든 간선의 값이 0 이상일 때, 즉 음의 간선이 없을 때에만 사용할 수 있는 알고리즘이다. 가장 비용이 적은 노드를 선택해 임의의 과정을 반복하기 때문에 그리디 알고리즘으로 분류된다. 다익스트라 알고리즘은 아래와 같은 순서로 진행된다. 출발 노드 선택 최단 거리 테이블을 초기화 방문하지 않은 노드 중 최단 거리가 가장 짧은 노드를 선택 선택한 노드에서 다른 노드로 가는 비용 계산 및 테이블 업데이트 종료 조건까지 3, 4번 반복 3번에서 최단 거리가 가장 짧은 노드를 선택하는 방법에 따라 시간 복잡도가 달라진다. 최단 거리 테이블을 단순히 선형 탐색하는..
readline module은 Node.js의 한 줄 단위로 readable stream을 처리할 수 있게 해주는 모듈이다. 다른 많은 사람들이 그렇듯이 JavaScript 코딩 테스트를 준비하며 이 모듈을 처음 접하게 되었고, 사용법을 정리해놓을 필요가 생겼다. # 공식 문서 https://nodejs.org/api/readline.html # readline 사용법 모듈 불러오기 및 인터페이스 생성 공식문서에서는 CommonJS와 ES modules 방법을 제시해주고 있으나, 현재 사용중인 프로그래머스에서는 ESM, 즉 'import'를 사용하는 방법을 지원하지 않는다. 따라서 CommonJS 방식만 살펴보겠다. const readline = require('readline'); const rl = ..
