Wodndb's blog

개발을 시작하겠다고 한 지 몇 주가 지났는데 진척이 없다. 그 이유는 개발자 입장에서 가독성 높은 노선도를 그리는 작업이 어렵기 때문이다. 그림. 작업중인 노선도 이 노선도를 그리기 위해서 1주일에 평균 4시간 정도 투자하고 있다. 그러나 예쁘게 그리기란 정말 어려웠다. 노선도의 선을 그릴 때는 보통 수평선, 수직선, 대각선, 역대각선을 사용한다. 그런데 그 선을 맞추면서 역들을 표시한다는 것이 어려웠다. 그리고 벡터 그래픽 툴인 잉크스케이프를 다루는 일도 익숙하지 않아서 상당히 고생하고 있다. 노선도 디자인은 역시 개발자가 아닌 디자이너의 역할인 것 같고, 개발자는 노선도에 정보를 동적으로 표시할 수 있는 기능을 추가하는 역할인 것 같다. 그런데 나와 함께 일할 디자이너는 없기 때문에, 그냥 시간을 갈아넣어서 노선도를 만들어야겠다. 대신 예쁘게 그리기는 포기했다. 나름 사대문안과 강남 지역은 상대적인 위치에 맞게 역을 적절히 배치한 것 같아 만족한다.

노선도를 만들자 웹 개발을 연습하면서 내 철도 덕심을 자극하기 위해 리액트로 수도권 전철 노선도를 만들어보기로 했다. 개발을 시작하기에 앞서 웹에서 지하철 노선도를 어떻게 구현해야 하는 지 고민되었다. 애초에 관련된 기술이나 지식이 없었기 때문에 일단은 가장 간단하게 만들 수 있는 방법을 선택해야 한다. 다른 사람들은 어떻게 구현했는지 살펴봤다. 카카오맵은 canvas를 베이스로 지하철 노선도를 구현 네이버맵은 svg를 기반으로 지하철 노선도를 구현 만약 canvas를 사용한다면 이전에 회사에서 사용해본 적이 있는 konvajs를 활용할 것이다. canvas 기반 2d 그래픽을 다룰 수 있는 가장 강력한 툴 중 하나다. 한편 svg를 사용한다면 inkspace를 활용하여 svg로 노선도 경로 좌표를 편집하고, 리액트 컴포넌트로 분해해서 노선도의 굵기나 색상 등을 커스터마이징할 수 있도록 할 것이다. svg를 태그 속성 값으로 편집하기에는 너무 비효율적인 측면이 있다. 지하철 노선도는 다이어그램에 가깝기 때문에 단순한 점과 선과 면은 svg로 처리하는 것이 합리적이라고 생각한다. 그래서 고민 끝에 svg 기반으로 노선도를 렌더링하기로 했다. 계획 1차 목표 1. svg로 수도권 전철 노선도 작성 (3주) 2. 웹에서 svg 노선도를 배경으로 역 도형과 역명 추가 (3주) 2차 목표 4. 최단거리 환승 알고리즘 구현 (3주) 5. 최단거리 환승 경로 노선도 표시 (3주) 3차 목표 6. 각 노선 별 운행 계통에 따른 노선도 구현 (3주) P.S. 노선도 그리기는 너무 고통스럽다... 그림. Inkscape에서 그리고 있는 노선도

그동안 Unity 3D와 C#을 위주로 개발을 했는데, 갑작스럽게 프론트엔드와 백엔드까지 하게 되었다. 평소 공부할 때는 MS Word에 정리하지만, 프론트엔드와 백엔드는 오픈된 기술이라 블로거에 정리해보기로 하였다. React + TypeScript 기반으로 프론트엔드와 백엔드를 개발해야 하는데, 개인적으로는 윈도우보다는 리눅스에서 개발 환경을 쉽게 구축할 수 있었다. 최근 윈도우에 탑재된 WSL을 사용하면 편리하게 우분투를 사용할 수 있다는 소식을 접하고 개발 환경을 설치해봤다. 결론적으로 매우 만족스럽게 사용하고 있다. VMWare나 VirtualBox에 비해 압도적으로 사용하기 좋았다. 1. WSL (Windows Subsystem for Linux) 설치 먼저 윈도우에 WSL이라고 하는 것을 설치해야 한다. 쉽게 말해 윈도우에서 제공하는 Linux 가상 머신이다. 근데 윈도우에 맞게 약간 커스텀이 되어 있는 것 같다. 최신 버전은 WSL 2이며, 설치 방법은 Microsoft 웹페이지에서 확인할 수 있다. Windows 10에 Linux용 Windows 하위 시스템 설치 가이드 2. Ubuntu 설치 <그림> Microsoft Store에 등록된 Ubuntu Ubuntu를 설치하는 방법은 Microsoft Store에서 Ubuntu를 원하는 버전을 선택하여 설치하는 것이다. WSL이 설치되어 있어야 동작한다는 점에 유의한다. 3. node.js, npm (node package manager) 설치 React를 사용하려면 node.js 10.16 이상 버전과 npm 5.6 이상 버전이 설치되어 있어야 한다. 다음과 같이 커맨드를 입력한다. 1 2 $ sudo apt update $ sudo apt install npm cs npm을 설치하면 node.js도 같이 설치된다. 설치 후에 react를 사용할 수 있는 node, npm 버전인지 확인해야 한다. 다음과 같이 커맨드를 입력한다. 1 2 $ node  - - version $ npm 

유니티는 폴더명이 곧 프로젝트 명으로 동작하는 것같다. 폴더명을 변경하면 JetBrain Rider로 소스코드를 열수 없다. 설령 연다고 해도 소스코드만 열리지 프로젝트를 인식하지 못한다. 가장 확실한 해결방법은 Unity 프로젝트 폴더에서 sln 파일을 제거한 뒤에 Unity>Edit>Preferences>External Tools에서 External Script Editor 항목을 Visual Studio 2017 또는 2019를 선택하고 Unity를 통해서 소스코드를 열어서 sln을 재생성하는 것이다. sln이 재생성되었음을 확인했으면 다시 External Script Editor를 Jetbrain Rider로 변경한 뒤에 Unity를 통해서 소스코드를 열어본다. 문제가 해결되었을 가능성이 높다.

콜백(Callback) 함수. 이름만 들어보면 무슨 말을 하는 건지 모르겠다. 대부분 인터넷에서 찾아볼 수 있는 글은 콜백 함수를 어떻게 사용하는가에 대해 설명할 뿐, 콜백이 뭔지는 설명해주지 않는다. 그래서 계속 검색을 하던 중에, 스택오버플로우에서 이 콜백 함수의 개념을 잘 설명해준 글을 찾았다. ( https://stackoverflow.com/questions/824234/what-is-a-callback-function ) 콜백 함수는 다른 함수에 의해 접근 가능하고, 첫 번째 함수가 종료가 되고 난 다음에 호출되는 함수 를 의미한다. 다른 함수에 의해 접근 가능하다는 말은 전역이나 static 함수에 접근한다는 뜻이 아니라, C/C++의 함수 포인터나, C#의 델리게이트 같은 걸로 함수를 다른 함수의 매개변수로 건네는 방식으로 어느 객체의 멤버함수에 접근한다는 뜻이다. 물론 마음만 먹으면 전역으로 만든 함수도 매개변수로 건네줄 수 있지만, 전역이면 매개변수로 접근하지 않고 그냥 호출하는게 편하다. 그리고 함수가 종료되고 난 다음에 호출한다는 것은, 매개변수로 받은 콜백 함수를 맨 마지막에 작업이 종료되는 시점에 호출한다는 뜻이다. 좀 더 기억하기 쉽게 생각하려면, Call ed at the back 을 떠올려보자. 한줄로 요약하면 콜백 함수는 어떤 함수가 작업을 다 끝낼 때 호출되는 함수다. 이걸 할려면 함수에 콜백 함수를 인자로 넣어야 하며, C/C++에서는 함수 포인터, C#에서는 델리게이트를 사용한다.

작성중 초안: 2019-05-12 1차 수정: 2019-06-27 개요 자료(data)는 정수, 실수, 문자, 등으로 구분할 수 있는 것들이다. 이 자료들을 효율적으로 저장하거나, 저장된 자료들을 활용하기 위해 자료구조라는 것이 등장하였다. 자료구조란 메모리에 자료를 저장하고, 메모리로부터 불러오는 방식을 의미한다. 보통 자료구조에 저장되는 자료를 원소(element)라고 부른다. 자료 구조의 기본 형태 대표적으로 배열(Array)과 연결 리스트(Linked List)가 있다. 배열 <그림 1. 배열의 논리적 구조> <그림 2. 메모리 공간에 배치된 배열> 배열의 특징은 다음과 같다. 동일한 타입의 자료를 저장. 메모리 상에 자료가 연속적으로 저장이 되어 있음. Index라고 불리는 키(key)값으로 배열에 저장된 자료, 즉 원소(element)에 임의 접근 이 가능함. 일반적으로 프로그램 실행 중에 크기를 변경할 수 없음. 즉, 정적 인 특성을 지님. 연결리스트에 구조가 간단하고 구현이 쉽다. 연결 리스트 <그림 3. 연결 리스트의 논리적 구조> <그림 4. 메모리 공간에 배치된 연결리스트> 연결리스트의 특징은 다음과 같다. 동일한 타입의 자료를 저장 메모리 상에 자료가 연속적으로 저장되어 있지 않으며, 하나의 원소는 다음 원소의 주소를 가지고 있음. 원소(element)에 접근하기 위해서 모든 원소를 순회해야 하는 순차 접근 이 필요함. 프로그램 실행 중에 크기를 변경할 수 있음. 즉, 동적 인 특성을 지님. 배열에 비해 구조가 복잡하고 구현하기 어렵다. 추상 자료형 한편 자료구조에서 수행되는 연산과 동작만 정의한 것을 추상 자료형 (Abstract Data Type; ADT)라고 부르며, 추상 자료형은 배열 또는 연결리스트를 기반으로 구현된다. 선형 자료 구조 선형