- 먼저 github에 레포지토리를 생성한다.
- 작업 폴더를 만든다.
- 만든 작업 폴더를 VS.Code에서 연다.
- 터미널에서 “git clone URL 생성할폴더”을 입력해서 깃허브의 레포지토리에 연결한다.
- VS.Code에서 푸시(push)할 파일을 복사한다.
- commit하고 push한다.
Vite React(또는 바닐라), shader 코드를 별도의 파일로 분리하기
이를 위해서는 vite가 쉐이더 코드를 이해하는 척 해야 하는데, 이를 위해 다음 패키지를 설치합니다.
npm i -D vite-plugin-glsl
그리고 vite.config.js(파일이 없으면 직접 생성해야 함)의 코드를 수정합니다. 기존 코드에서 변경된 부분은 3번과 7번 줄입니다.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import glsl from "vite-plugin-glsl"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), glsl()],
})
이제 다음처럼 별도의 파일로 지정한 쉐이더 코드를 import할 수 있고 사용할 수 있습니다.
import { shaderMaterial, useGLTF } from '@react-three/drei'
import { extend } from '@react-three/fiber'
import stripesVertex from "./stripes.vertex.glsl"
import stripesFragment from "./stripes.fragment.glsl"
const StripesShaderShaderMaterial = shaderMaterial(
{},
stripesVertex,
stripesFragment
)
extend({ StripesShaderShaderMaterial })
크롬 확장 기능 – 웹 페인트 도구
실습 진행하면서 웹페이지에 그림 그려가며 설명하기 좋은 도구
대한민국 행정구역(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에 다음 코드를 입력하면 터미널에 그 결과가 바로 반영됨
