실습 진행하면서 웹페이지에 그림 그려가며 설명하기 좋은 도구
대한민국 행정구역(SVG) 다운로드
대한민국의 행정구역을 SVG(Scalable Vector Graphics) 형식으로 내려받을 수 있습니다. 보고서 및 웹앱 개발에 유용하게 사용할 수 있는 데이터로 (주)지오서비스에서 직접 가공하여 제공됩니다. 최신 자료는 GEOSERVICE-WEB의 아카이브를 통해 다운로드 받을 수 있고 아래와 같습니다.
향후 지속적으로 보완 되며 찾는 자료가 없거나 커스터마이징이 필요할 경우 문의하시기 바랍니다. 아래는 그 샘플입니다.
node.js로 서버 개발 환경 설정 (with TypeScript)
package.json 파일 생성 등의 프로젝트 생성
npm init -y
개발에 필요한 패키지 설치
npm i -D typescript ts-node nodemon
tsconfig.json 파일 생성을 위해 다음 명령 수행
npx tsc --init
tsconfig.json에 다음 내용 추가
{
...
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
...
}
dist와 src 폴더를 생성하고 src에 index.ts 파일 생성
packagejson에 다음 내용 추가
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node dist/index.js",
"build": "tsc -p .",
"dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/index.ts"
},
...
}
개발 시작
npm run dev
index.ts에 다음 코드를 입력하면 터미널에 그 결과가 바로 반영됨
groupBy API
JS에서 어떤 데이터를 표현하는 객체의 형태를 변경하는 일은 매우 자주 있고 이에 대한 코드를 작성하는 것은 한번 정도는 도전 정신이 발휘 되기도 하지만 그 다음부터는 짜증스럽기도 합니다. 아래와 같은 데이터가 있다고 가정해 봅시다.
[
{ name: "Jim", age: 48, sex: "F" },
{ name: "Kyle", age: 28, sex: "M" },
{ name: "Sally", age: 28, sex: "F" },
{ name: "Jane", age: 32, sex: "M" },
{ name: "Tom", age: 48, sex: "F" }
]
이 데이터의 필드 중 sex는 성별을 나타내는 것으로 이를 기준으로 데이터를 다음처럼 구성하려고 합니다.
{
"F": [
{"name":"Jim","age":48,"sex":"F"},
{"name":"Sally","age":28,"sex":"F"},
{"name":"Tom","age":48,"sex":"F"}
],
"M": [
{"name":"Kyle","age":28,"sex":"M"},
{"name":"Jane","age":32,"sex":"M"}
]
}
데이터의 표현을 F, M으로 구분해 다시 구성한 형태입니다. 이를 위한 목적을 이루기 위해 JS는 하나의 API 제공하고 있는데 다음과 같습니다.
const people = [
{ name: "Jim", age: 48, sex: "F" },
{ name: "Kyle", age: 28, sex: "M" },
{ name: "Sally", age: 28, sex: "F" },
{ name: "Jane", age: 32, sex: "M" },
{ name: "Tom", age: 48, sex: "F" }
]
const groupBySex = Object.groupBy(people, person => {
return person.sex
})
Object.groupBy가 핵심인데 이 API는 입력 데이터는 변경하지 않고 새로운 데이터를 만들어 반환합니다.