1. 간단한 자기소개

비전공자 출신으로 C++를 2년 정도 쓰다가 Spring 웹 개발자로 전향해서 현재 3년차가 되었다. 이전에 스파르타 코딩 클럽에서 운영하는 항해99 과정에서 리액트를 배운 경험이 있다. 위메이드에서 진행하는 블록체인 부트캠프도 참여한 적이 있으니 나름 다양한 기술과 다양한 부트 캠프를 경험해 왔다.

2. 항해 플러스에 들어오기 전, 현업에서 고민했던 점

'AI가 개발자를 대체할 것이다' 흔하게 듣는 말이다. AI가 점점 중요한 기술이 되고 있다는 것은 알고 있었지만, 어디서부터 시작해야 할지 막막했다. 온라인 강의나 책을 통해 이론을 익힐 수는 있었지만, 다양한 AI를 사용해보자니 무엇부터 해야하는지 막막함이 가장 큰 고민이었다.

3. 항해 플러스를 선택하게 된 결정적 계기

이전에 항해99과정을 참여했기 때문에 추가 할인을 받을 수 있었다. 나름대로 가격을 고려한 합리적인 선택이었다. 또한 기존 항해99과정에서 느꼇던 스스로 몰입하는 과정과 새롭게 플러스 과정에 추가된 성적 시스템이 마음에 들었다.

4. 항해 플러스 AI 코스의 장점

✅ 딥러닝 기초 개념부터 LLM 활용까지 다루는 커리큘럼

기초적인 신경망 학습부터 Transformer 모델까지 배우며, 단계별로 AI 과정을 따라 갈 수 있다.

✅ AI 서비스 개발 경험

단순한 코딩 실습이 아니라, AI를 기반으로 실제 프로젝트를 진행하는 경험을 얻을 수 있다. 즉 포트폴리오가 하나 남는다.

✅ 현직 AI 종사자 코치진의 멘토링

현업에서 AI를 활용하는 방법에 대한 조언을 받을 수 있었고, AI 개발자로 살아가려면 어떻게 준비해야하는지, 현업에 경험을 들을 수 있다.

✅ 단계별 과제 해결을 통한 실력 인증 시스템

매주 나오는 과제를 수행하는 것으로 끝이 아닌 책점과 피드백을 기반으로 실력 인증 시스템이 있다.

5. 항해 플러스 이전과 이후 어떻게 달라졌나

가장 중요한 것은 최소한 내가 뭘 모르는지 알게 되는 것과 내가 시작을 했다는 것이다. 과정이 끝나고 돌이켜 보면 이미 AI를 배워가는 과정중에 있기 때문에 다음 스텝을 밟을 수 있게 된다.

6. 항해 플러스에 투자한 시간, 돈이 아깝지 않은 이유

독학으로 배우기 어려운 AI 경험을 쌓을 수 있다.

이론 + 실습 + 프로젝트를 모두 포함한 과정이라 학습 효율이 높다.

이제 살면서 내가 AI를 배웠다고 할 수 있다. 이력서에 적을 내용 늘리는 것은 돈만 준다고 되는게 아니다.

7. 항해 플러스 코스를 고민하고 있는 개발자들에게 한마디

중요한 것은 무슨 코스를 하느냐가 아니다. 본인의 마음가짐이 가장 중요하다. 하는 만큼 얻는 것이다.

8. 수료생 추천 할인 혜택 안내

항해 플러스 AI 코스를 등록할 때 수료생 추천 할인 코드를 입력하면 20만 원 할인이 적용된다.

할인 코드는 오픈 채팅이나 비밀 댓글로 공유해 드릴 수 있으니, 관심 있는 분들은 댓글을 달아주길 바란다.

우린 Clean을 사용한다.

Maven 구성을 쓴다고 가정하면 Clean은 다음과 같이 구분 할 수 있다.

Maven - Clean Project - Clean Tomcat - Clean

Maven Clean

Maven 자체 빌드 생명주기에서 동작해 이전 빌드에서 생성된 target 디렉토리를 초기화함 주로 .jar 또는 .war 파일과 같은 컴파일된 출력물을 제거

Eclipse Project Clean

IDE에서 제공되는 기능으로 프로젝트 빌드 경로 내 파일을 삭제하고 재 컴파일함 IDE 내부 빌더를 사용해 생성된 클래스 파일, 기타 빌드 산출물을 관리하는 방법

Tomcat Clean

Maven, Elipse Clean과 다른 개념으로 Tomcat에서 관리하는 애플리케이션을 서버에서 실행하기 위한 컨테이너에 배포된 임시 파일, 캐시, 컴파일된 JSP 등을 삭제

public class BoardDTO {
    private int boardId;
    private String title;

    public int getArticleId() {
        return articleId;
      }

    public void setArticleId(int articleId) {
        this.articleId = articleId;
      }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }
}

나는 이 DTO에 데이터를 담아 JSP에서 사용하기 위해 request.setAttribute("boardDTO", boardDTO)를 사용했다.

이때 JSP에서는 값을 가져와 보여주는 2가지 방법이 있다.

${articleDTO.getTitle()}
${articleDTO.title}

getTitle()은 public이고 우리가 익숙한 메소드다. title은 우리가 명시해주었지만 private다

어떻게 jsp는 private 변수에 접근이 가능한 걸까?

궁금해서 찾아봤지만 해답은 간단했다. JSP는 DTO 구문을 해석해 변수명이 명시되면 해당 변수에 매칭되는 get 메소드를 호출시킨다 결국 title은 getTitle()로 변환되어 실행되는 것이다.

좀더 명확히는 JSP가 Java 객체의 속성에 액세스 할때 JavaBeans의 사양을 사용한다. JavaBeans 사양에 따라 property를 해석하며 public getter가 있다고 판단하는 것이다

Java 객체가 setAttribute()로 설정되면 JSP 컨테이너는 원래 객체를 래핑하는 proxy object를 생성한다. 이 프록시 객체는 원본 객체에 대한 getter, setter 메소드에대한 접근을 제공한다. 즉 프록시 객체는 인터페이스 역할을 해준다.

여기 UTF-8로 돌아가는 JSP페이지가 있다. 한글 검색도 된다.

List.jsp?searchWord=한글&pageNum=1

이 페이지에서는 한글을 처리하기 위해 다양한 노력을 한다

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>
// JSP 처리에 대한 설정
// contentType: JSP가 처리되고 생성할 문서에 대한 타입 지정
// charset: 브라우저가 받아볼 인코딩 형식 즉 생성될 문서의 인코딩
// pageEncoding: JSP 파일 자체 인코딩 방식

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
// 현재 html파일의 인코딩을 알려주는 태그
// 웹브라우저가 html파일을 화면에 그려주기 위해 처리시 어떤 문자 표현 방식을 사용하는지 알려주기 위해 지정
// 위에 두 코드는 동일한 역할을 가지며 버전 차이가 존재
// HTML 4.01: meta http-equiv 방식 사용
// HTML%: meta charset 방식 사용

request.setCharacterEncoding("UTF-8");
// JSP에서 값을 post 방식으로 서버에 전달할때 적용
// List에서 get 방식으로 검색하는 지금 예제에는 의미없지만 인코딩 설정할때 같이 많이 써서 넣음
// get 방식은 Tomcat에서 알아서 UTF-8 설정해줌

만약 이 설정들이 없다면 어떻게 될까?

인코딩 설정이 없다면

전체적으로 난장판이 된다. JSP의 인코딩 정보도, 브라우저가 받는 인코딩 정보도 다 사라졌다

사실 중요한건 <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %> 이 구문 하나다.

해당 JSP 설정에 대한 구문이 생성될 html에 대한 인코딩 타입까지 포함하고 있기 때문이다.

하지만 어떤 일이 생길지 모르니 다른 설정도 같이 세트로 묶어두는게 좋다.

include로 모듈화

그렇다면 저 설정들을 모든 페이지에 공통적으로 반영하면 좋지 않을까?

<%@ include file = "페이지" %> JSP에서 include 하는 방법은 여러가지 있지만, 결과만 가져오냐 내용 자체를 합치냐 차이가 존재한다. @ incloud 방식은 해당 파일 자체를 대상 파일에 합쳐버린다. 즉, include 페이지에 인코딩 설정을 넣고, 다른 jsp에 포함시키면, 인코딩 설정을 공통적으로 할 수 있지 않을까?

// Encode.jsp 페이지
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%
  request.setCharacterEncoding("UTF-8");
%>

// List.jsp
<%@ include file="/common/Encode.jsp" %>

대환장 파티가 펼쳐진다.

분명하게도 html에 인코딩을 망가졌다. html을 처리하는 과정에 이 파일에 대한 인코딩을 결정하지 못한 것이다.

하지만 include에 page가 적용안된걸까? 테이블 내용을 바라보면 세종대왕이라는 한글이 보인다. 이전에 모든 내용이 망가지는 것과는 다른 결과다.

인코딩 설정이 영향을 미치지만, 제대로된 반영이 안되는 것으로 보인다. 어차피 결론은 존재한다. 인코딩 설정을 공통적으로 하고 싶다면 include 대신 Spring이나 servlet에서 설정하는 방안이 있다.

web.xml에 encodingfilter 방식, mvc-dispatcher-servlet.xml 수정 등 다양한 대안이 존재한다.

현재 JSP에 초점을 맞춰서 include 방식을 알아봤지만, 제대로된 반영이 안됨을 확인할 수 있다. include 방식을 통한 모듈화는 html 관련 요소를 설정할때 사용하고, java 처리 관련 사항은 다른 다양한 대안이 존재한다.

@ page 설정은 JSP 파일마다 성실하게 하자

console.log(true ? true : false && false);
// 결과: true

처음 로직을 짤때 내 생각은 이랬다. '삼항연산자로 앞에서 조건을 필터링하고 그 결과를 논리(&&) 연산자로 다시 검증해야지'

위 로직이 내가 생각한대로 삼항연산자를 먼저 실행시키려면 괄호()를 이용해야한다.

true ? true : false && false // true
(true ? true : false) && false // false

괄호를 치지 않는다면 다음과 같은 순서로 실행이 된다.

true ? true : (false && false)
// false && false => false
// 다음과 같이 변환됨 => 
true ? true : false // true

mdn docs를 확인해보자 연산자 우선순위

왼쪽에 번호는 실행 우선순위로 조건(삼항) 연산자의 우선순위는 3으로 논리 AND 연산자(5)보다 낮은 것을 확인할 수 있다.

연산자와 조건을 섞어 사용할때는 괄호()를 활용하거나 우선순위를 잘 고려하도록 하자

먼저 다음과 같이 vite.config.ts에서 절대 경로를 잡아준다.

  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "@components": fileURLToPath(
        new URL("./src/components", import.meta.url)
      ),
    },
  },

tsconfig.json 또는 tsconfig.app.json에도 다음과 같이 동일하게 경로를 잡아준다.

"compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"]
    }
  }

그리고 import를 통해 경로를 찾으려 하지만 다음과 같은 오류가 발생한다 Could not find a declaration file for module '예시경로/MainHeader.vue'. '예시경로/MainHeader.vue.js' implicitly has an 'any' type.ts(7016)

vue 파일을 연결했지만, vue.js를 찾는다. typescript 환경에서는 <script setup lang="ts">와 같이 lang="ts"를 설정해줘야지 js 경로를 인식한다. 호출단과 호출되는 파일 모두에 lang 설정을 함으로써 해결할 수 있다.

본 예제에서는 기본적으로 [githubId].github.io가 이미 만들어졌다고 가정합니다. 예제에서는 [githubId].github.io/[repoName] 형식으로 github Page를 할당합니다.

Node.js와 Vue가 설치가 되있음을 전제합니다.

프로젝트 init

https://v3-docs.vuejs-korea.org/guide/quick-start.html#with-build-tools Vue 공식문서를 참조하여 커맨드로 초기 프로젝트를 설정 프로젝트 폴더를 생성하고자 하는 상위 폴더에서 다음의 커맨드를 입력

npm init vue@latest

프로젝트 초기화를 진행하면 세부 요소에 대해서 선택이 가능(상황과 선호에 맞춰서 자유롭게 설정)

생성된 프로젝트 내부 구조를 확인하면 Webpack 대신 Vite를 사용함 배포 관련 설정을 위해 Vite.config.ts를 Open하고 base 내용을 추가 ![] 만약 https://<USERNAME>.github.io/ 형태로 배포하는 경우는 생략하거나 기본값 /으로 지정하면 됨 https://<USERNAME>.github.io/<REPO>/ 형태로 배포하는 경우 /<REPO>/로 지정 이 값은 추후에 생성할 github 레포지토리 명과 동일해야 하며, 추후에 배포될 하위 주소명과 동일해야함

이제 프로젝트에 대한 npm install 및 lint를 진행

# 만들어진 프로젝트 명 따라서 진입 
cd pratice-vue
npm install
npm run lint

git repo 생성

설치가 끝났다면 실제 github에 올리기 위해 github repository 생성

Repository name는 base에 설정한 값과 일치해야함

Repository이 생성 되었다면 주소를 복사해 remote로 연결 진행

# git 레포지토리 초기화
git init
# 생성한 레포지토리를 remote로 연결
git remote add origin <복사해둔 github repo 주소>
# 현재 변경 내용을 저장
git add .
# 저장된 변경 내용을 commit해 반영
git commit -m "커밋 메시지"
# commit 내용을 연결해둔 remote로 전송
git push origin master

git pages

여기까지 완료하면 레포지토리가 잘 등록됨을 확인 할 수 있음 Setting을 클릭해 page 설정을 진행

왼쪽의 Pages를 클릭하고 설정 내용중 중앙에 Source(Deploy from a branch)를 클릭하면 GitHub Actions를 선택 가능

Github Actions을 선택하면 구성이 바뀌며, Static HTML을 선택해 진행

Action workflow 등록을 위한 페이지가 열리며 내용을 다음과 같이 수정

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["master"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          # cache: 'npm'

      - run: npm ci --legacy-peer-deps
      - run: npm run build
        env:
          CI: false
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          # Upload entire repository
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

차이점을 비교해보면 다음과 같음

배포(deploy) 과정에서 node를 setup하고 build하는 과정을 추가, 이후 upload-pages-artifact 과정에서 배포할 대상 위치를 build 결과물이 있는 ./dist 경로로 수정

내용 작성 후 commit을 반영해 파일을 생성

workflows가 반영 되면 Actions 탭에서 확인 가능

deploy가 완료되면 https://<github아이디>.github.io/<repo이름>/ 주소로 접근해서 확인 가능

Vue init에서 제공되는 페이지가 표시되며, 이후 commit시 build한 결과물이 반영됨

병행성

• 동시 처리의 논리적인 개념(구조, 설계)
• 단일(또는 멀티) 코어에서 스레드 여러 개가 시간을 쪼개어 순차적(시분할)으로 실행됨
• 사람이 느끼기에 동시로 느껴짐

병렬성

• 동시 처리의 물리적인 개념(실행)
• 작업을 여러 CPU에 나눠서 동시에 처리하는 상태
• 실제로도 실행이 동시적인 시점을 가짐

동시성(병행성)은 두 개 이상의 작업이 동시에 진행되도록 프로그램을 구성하는 것과 관련됨 병렬성은 두 개 이상의 작업이 동시에 실행되도록 함 병렬 처리에는 둘 이상의 프로세서나 스레드가 필요하지만 동시성은 필요 없음

다음은 동시성의 예제

2개의 Task를 Processor에서는 번갈아 가면서 진행함 두 Task 사이에 전환 시간은 매우 짧음으로 인간이 느끼기에 동시에 실행된다고 느껴짐

다음은 병행성에 예제

여러개의 프로세스를 통해 여러개의 문제를 동시에 실행함(물리적, 시간적으로 동시) 병렬성을 사용해 복잡한 한개의 문제를 작은 조각으로 나눠 동시에 실행해 전체 문제가 해결되는 속도를 높일 수 있음 만약 단 1개의 프로세서만 존재한다면, 순차적으로 처리됨

Go의 동시성

Go에서 동시성을 활용하기 위해 고루틴을 사용함 고루틴은 자체 스레드 또는 프로세스에서 실행되지 않음 Go 런타임은 고루틴을 계속 실행하기 위해 필요에 따라 스레드에 고루틴을 동적으로 다중화 함

다음은 동시성을 테스트하기 위한 예제

package main
import (
  "fmt"
  "time"
)
func numSearch(targetVal int) {
  searchList := []int{1, 2, 3, 4, 5, 6, 7, 8, 9, 10}
  time.Sleep((time.Duration(targetVal) * 100) * time.Millisecond)
  for _, num := range searchList {
    if num == targetVal {
      fmt.Printf("I found the targetVal: %d \n", targetVal)
      return
    }
  }
  fmt.Println("targetVal not found :(")
}
func main() {
  numSearch(10)
  numSearch(1)
  // time.Sleep(10000 * time.Millisecond) 
  fmt.Println("The program has finished executing.")
}

// 실행 결과
I found the targetVal: 10
I found the targetVal: 1
The program has finished executing.

마지막 두번쨰 줄 time.Sleep을 주석 상태로 실행하면 코드가 순차적으로 실행됨을 확인 가능 numSearch 함수를 확인하면 time.Duration에 넘겨지는 targetVal이 높을 수록 나중에 실행됨을 알 수 있음 즉, 매개변수를 1을 전달할 때보다 10을 전달할 때 실행하는 데 더 오래걸림 하지만 함수 호출이 순차적으로 실행 되기 때문에 두 번째 호출은 첫 번째 호출이 완료될 떄까지 시작되지 않음

만약 numSearch 함수를 고루틴으로 바꾸면 다른 결과가 나옴

package main
import (
  "fmt"
  "time"
)
func numSearch(targetVal int) {
  searchList := []int{1, 2, 3, 4, 5, 6, 7, 8, 9, 10}
  time.Sleep((time.Duration(targetVal) * 100) * time.Millisecond)
  for _, num := range searchList {
    if num == targetVal {
      fmt.Printf("I found the targetVal: %d \n", targetVal)
      return
    }
  }
  fmt.Println("targetVal not found :(")
}
func main() {
  go numSearch(10) // 고루틴으로 변경
  go numSearch(1) // 고루틴으로 변경
  time.Sleep(10000 * time.Millisecond) // 주석 해제
  fmt.Println("The program has finished executing.")
}

// 실행 결과
I found the targetVal: 1
I found the targetVal: 10
The program has finished executing.

결과를 보면 두번째로 호출된 numSearch(1)의 결과가 먼저 출력되었는데 고루틴을 통해 첫 번째 호출인 numSearch(10)의 결과를 기다리지 않았기 때문

위는 간단한 예제로 동시성의 이점을 살릴 수 있는 상황중 하나를 예시로 설명하고자 함 사용자 요청을 처리하기 위한 서버가 여러개로 분산화 되어있는 상황 순차적으로 처리하는 경우, 1번 서버, 2번 서버에 요청을 보내고 대기하면서 해당 서버가 요청이 처리 가능한 판별 순차적 방식은 효율적인 선택을 보장하지 못함 처리 가능한 느린 2번 서버와 빠른 5번 서버가 존재하는 경우, 먼저 응답을 받은 2번 서버를 선택

동기적으로 처리하는 경우 만약 10개의 서버가 존재한다면, 10개 서버에 동시에 요청을 보내고 대기, 이후 응답이 돌아온 서버 중 사용자 요청을 처리 가능하면서 가장 빨리 응답이 되돌아온 서버를 선택하고, 기존 미해결 프로세스(다른 서버에 요청을 보내고 대기하는 등..)를 종료 가능

동시성은 작업을 수행하기 위해 병렬성을 사용할 수 있지만 병렬성이 동시성의 궁극적인 목표는 아님 동시성은 독립적인 여러 작업을 한 번에 수행하도록 설계하는 쪽에 무게를 둔 개념 병렬성은 하나의 작업을 설계된 대로 분할해서 동시에 수행하는 쪽에 무게를 둔 개념

Concurrency is about dealing with lots of things at once. Parallelism is about doing lots of things at once

동시성은 여러 가지 일을 한 번에 처리 하는 것 병렬성은 여러 가지 일을 한 번에 수행 하는 것

• Go Concurrency Patterns, Rob Pike -

for...in

for...in 명령문은 상속된 열거 가능한 속성들을 포함해서 객체에서 문자열로 지정된 모든 열거 가능한 속성에 대해 반복

var obj = {
    'a':1,
    'b':2,
    'c':3,
    1:4
}
var arr = [1,2,3]

console.log(obj)
console.log(arr)

console.log("print for in obj")
for (var item in obj) {
    console.log(item)
}

console.log("print for in arr")
for (var item in arr) {
    console.log(item)
}

실행 결과는 다음과 같음

{ '1': 4, a: 1, b: 2, c: 3 }
[ 1, 2, 3 ]
print for in obj
1
a
b
c
print for in arr
0
1
2

예제에서 보다시피 obj에 경우 for in 방식 사용시 문자열로 구성된 Key 값을 출력 숫자 1의 경우 obj에 포함되는 순간 문자열로 변경되어 문자열 key로 출력 arr에 경우 내부 value 대신 0부터 시작하는 index 값을 출력

for...in은 열거 가능한 속성을 타겟으로 하기 때문에, array(배열)의 값이 아닌 열거 가능한 index를 기준으로 함

for...of

for...of 명령문은 반복가능(Iteration)한 객체에 대해서 반복하고 각 개별 속성값에 대해 루프를 생성 여기서 객체는 Array, Map, Set, String, TypedArray, arguments가 포함됨

var arr = [1,2,3]

console.log(arr)

console.log("print for of arr")
for (var item of arr) {
    console.log(item)
}

실행 결과는 다음과 같음

[ 1, 2, 3 ]
print for of arr
1
2
3

for...in과 다르게 출력의 대상이 index가 아닌 개별 속성값임 obj는 이번 예제에 포함되지 않았는데, 객체는 반복가능(iterator) 속성이 없기 때문에 오류가 발생

TypeError: obj is not iterable

obj와 비슷한 Map 구조를 사용하면 for...of를 사용가능

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}

for (let [key, value] of iterable) {
  console.log(key,":",value);
}

실행 결과는 다음과 같음

[ 'a', 1 ]
[ 'b', 2 ]
[ 'c', 3 ]
a : 1
b : 2
c : 3

Map에 경우 추출한 값에 Key, Value의 맵구조를 보유하고 있음 받는 변수의 개수를 2개로 나누면, Key와 Value가 별도로 대입되는 구조를 가짐

차이

for...of와 for...in에 차이를 둔다면 배열과 객체라는 사용 대상의 차이를 둘 수 있음

Vue3에는 다음의 main hook이 존재하며 다음의 순서를 가짐 beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeUnmount ->unmounted

beforeCreate

다른 hook 처리전 인스턴스가 초기화될 때 호출됨 data()와 computed hook이 호출하기 전에 호출됨 beforeCreate 호출 후 Options API에 대한 초기화가 진행됨

created

인스턴스가 모든 state 관련 options(예, Data(), computed)을 처리한 후에 호출 됨 created 후 beforeMount를 호출하기 전에 컴파일 된 템플릿에 여부를 확인해 템플릿을 컴파일함

beforeMount

컴포넌트가 마운팅 되기 전에 호출됨 컴포넌트가 관련된 state에 대한 설정을 마쳤지만, DOM node가 생성되기 전 단계 beforeMount 이후 처음으로 DOM render를 실행하고 DOM node를 구성

mounted

컴포넌트와 인스턴스가 마운트 된 후 호출 됨 컴포넌트의 렌더링 된 DOM 요소에 접근해야할 때 사용 mounted가 실행된 이후는 데이터 변화에 따른 re-render에 따라서 다른 hook을 호출함

beforeUpdate

데이터 변화에 따라 re-render 및 patch가 발생할 때 컴포넌트가 DOM tree를 업데이트하기 직전(즉 반영하기 전)에 호출됨

Vue가 DOM을 업데이트 하고 반영되기 전에 DOM에 상태에 접근하거나 전처리를 하는데 사용 가능

updated

beforeUpdate 처리 후 Vue가 DOM tree를 업데이트 한 이후에 호출 됨 상태 변화가 반영 된 이후에 호출되기 때문에 updated에서 DOM을 조작하거나 update 하는 방법은 권장되지 않음 만일 updated 내부에서 DOM을 변경하거나 조작하는 경우 렌더링이 중복될 수 있음

beforeUnmount

컴포넌트가 unmount 되기 직전에 호출됨 컴포넌트 제거 전에 정리 작업에 유용한 훅 interval, event listener 등의 의존관계를 정리하는데 좋음

unmounted

컴포넌트가 마운트 해제/제거 된 이후에 호출되는 라이프 사이클의 마지막 단계 컴포넌트에 내부에 존재하던 변수는 이 단계에서 사용 불가능함

다음 명령어로 필요한 패키지를 다운받도록 하자 npm install --save @nestjs/config @nestjs/typeorm typeorm mysql2 joi cross-env

먼저 package.json에서 구동을 위한 scripts 부분을 수정한다.

// package.json
    "start:dev": "cross-env NODE_ENV=dev nest start --watch",
    "start:debug": "cross-env NODE_ENV=dev nest start --debug --watch",
    "start:prod": "cross-env NODE_ENV=prod node dist/main",

cross-env를 사용해 NODE_ENV 정보를 설정한다.

NODE_ENV에 설정한 dev, prod(이름은 자유롭게 줘도 됨)에 맞춰서 .env파일을 각각 생성한다. 설정한 이름에 맞춰서 네이밍을 줘야하며 예시로 .dev.env와 .prod.env를 생성하고 내용은 다음과 같이 설정하자

// 아래 내역은 본인 mysql 환경에 맞춰서 변경
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USERNAME=user
DB_PASSWD=password
DB_DATABASE=db

생성된 .env는 gitignore에 등록해 잘못 공유되지 않도록 설정한다.

 # 아래 내용 추가하기
*.env

이제 등록한 .env 파일을 불러와야 하며, app.module.ts을 설정해보자

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { ConfigModule } from '@nestjs/config';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import * as Joi from 'joi';

@Module({
  imports: [
    ConfigModule.forRoot({
      envFilePath: process.env.NODE_ENV == 'dev' ? '.dev.env' : '.prod.env',
      isGlobal: true,
      validationSchema: Joi.object({
        NODE_ENV: Joi.string().valid('dev', 'prod').required(),
        DB_HOST: Joi.string().required(),
        DB_PORT: Joi.string().required(),
        DB_USERNAME: Joi.string().required(),
        DB_PASSWD: Joi.string().required(),
        DB_DATABASE: Joi.string().required(),
      }),
    }),
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: process.env.DB_HOST,
      port: +process.env.DB_PORT,
      username: process.env.DB_USERNAME,
      password: process.env.DB_PASSWD,
      database: process.env.DB_DATABASE,
      entities: [__dirname + '/../**/*.entity.{js.ts}'],
      synchronize: true,
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

조금씩 나누어 알아보자

// 설정을 하는데 중요한 모듈은 아래와 같다.
import { TypeOrmModule } from '@nestjs/typeorm'; // DB 연결을 위한 모듈
import { ConfigModule } from '@nestjs/config'; // config 설정을 위한 모듈

ConfigModule은 환경변수 설정을 위해 사용한다.

    ConfigModule.forRoot({
      // 환경 설정을 가져올 경로를 뜻하며, package script에서 설정한 NODE_ENV 내용에 따라 .dev.env를 가져올지, .prod.env를 가져올지 결정
      envFilePath: process.env.NODE_ENV == 'dev' ? '.dev.env' : '.prod.env',
      isGlobal: true,
      // 가져올 환경설정에 대한 유효성 검사 과정
      validationSchema: Joi.object({
        NODE_ENV: Joi.string().valid('dev', 'prod').required(),
        DB_HOST: Joi.string().required(),
        DB_PORT: Joi.string().required(),
        DB_USERNAME: Joi.string().required(),
        DB_PASSWD: Joi.string().required(),
        DB_DATABASE: Joi.string().required(),
      }),
    }),

TypeOrmModule은 실질적으로 mysql과 연결하는데 사용되는 모듈로, 환경변수로 등록된 연결 정보를 참조해서 넣어준다.

    TypeOrmModule.forRoot({
      type: 'mysql',
      // .env 파일에서 명시한 네이밍을 이용해 연결 정보를 가져온다.
      host: process.env.DB_HOST,
      port: +process.env.DB_PORT,
      username: process.env.DB_USERNAME,
      password: process.env.DB_PASSWD,
      database: process.env.DB_DATABASE,
      entities: [__dirname + '/../**/*.entity.{js.ts}'],
      synchronize: true,
    }),

error TS1002: Unterminated string literal. 단순하게 문자열을 적고 마지막에 ' 또는 "을 사용해 닫지 않으면 발생 종종 백틱을 쓰는걸 까먹고 여러줄에 쓰다가 발생하는 경우가 있음

// 에러남
const text = '텍스트

// 좋은 예
const text1 = '잊지말고 닫기';

const text2 = '여러줄은' +
      '꼬박꼬박 닫고 넘기기';
const text3 = `편하게
    백틱 사용하기`;

TS1016

error TS1016: A required parameter cannot follow an optional parameter. 선택적 매개변수를 필수 매개변수 앞으로 두면 보게되는 에러 컴포넌트에 들어가는 매개변수를 너무 늘리다가 정신 놓으면 보게됨

// 나쁜 예
function fun1(v1: string, v2?: string, v3: number) {
  // ...
}
// 좋은 예
function fun2(v1: string, v2?: string, v3?: number) {
  // ...
}

function fun3(v1: string, v3: number, v2?: string) {
  // ...
}

TS1109

error TS1109: Expression expected. 표현식과 명령문을 혼동하거나 변수에 담아야 할 것을 헷갈리면 발생

// 나쁜 예
const data = throw new Error('Data Missing');

// 좋은 예
const data = undefined;
if (!data) {
  throw new Error('Data Missing');
}

TS2304

error TS2304: Cannot find name ‘world’. 알수 없는 런타임 환경이나 다른 라이브러리 접근시 발생 가능 TypeScript가 알 수 있도록 주변 환경을 선언해주는 방식 필요

// 에러 발생 가능
console.log(world.name);

// 해결
declare var world: {
  name: string;
};

console.log(world.name);

TS2322

error TS2322: Type ‘string’ is not assignable to type ‘number’. 반환값 지정하고 number 계산시켰는데 백틱을 사용해 조합하는 경우 종종 예외처리를 놓치는 에러

// 나쁜 예
export function add(a: number, b: number): number {
  return `${a + b}`;
}
// 좋은 예
export function add(a: number, b: number): number {
  return parseInt(`${a + b}`, 10);
}

TS2345

error TS2345: Argument of type ‘number‘ is not assignable to parameter of type ‘TimerHandler‘. 에러랑 연관 깊은 상황은 아니지만, setTimeout 사용시 첫번째 매개변수를 함수로 다이렉트로 꽃아서 발생함 함수 실행 결과인 계산된 number가 반환되고, setTimeout은 callback을 원하니 타입이 일치하지 않아 발생

function add(a: number, b: number): number {
  return a + b;
}

// 나쁜 예
setTimeout(add(1000, 337), 5000);
// 좋은 예
setTimeout(() => add(1000, 337), 5000);

TS2531

error TS2531: Object is possibly ‘null’. 가능성을 고려해 null일 수 있다는 의견 제시하는 에러 예외처리를 해줘야함

type Data = {
  value1: {
    value2: string;
  } | null
}

// 나쁜 예
function checkData(data: Data): void {
  console.log(data.value1.value2);
}

// 좋은 예
function checkData(data: Data): void {
  console.log(data.value1?.value2);
}

TS2532

error TS2532: Object is possibly ‘undefined’. 가능성을 고려해 undefined일 수 있다는 의견 제시하는 에러 예외처리를 해줘야함

type Data = {
  value: string;
}

// 나쁜 예
function checkData(data?: Data): void {
  console.log(data.value);
}
// 좋은 예

function checkData(data?: Data): void {
  if(data)
      console.log(data.value);
}

function checkData(data?: Data): void {
  console.log(data?.value);
}

마우스로 drag 하기

HTML

<div class="container"> 
  <div class="draggable" id="dragMe">Drag me</div>
</div>

CSS

.container {
  /* 중앙 정렬 */
  align-items: center;
  display: flex;
  justify-content: center;

  /* 높이 지정 */
  min-height: 32rem;
}
.draggable {
  /* 커서를 이동형식으로 주고, 위치를 절대형식으로 지정 */
  cursor: move;
  position: absolute;
  user-select: none;

  /* 중앙 정렬 */
  align-items: center;
  display: flex;
  justify-content: center;

  /* 디자인 */
  border: 1px solid #cbd5e0;
  height: 8rem;
  width: 8rem;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  // 마우스의 위치값 저장
  let x = 0;
  let y = 0;

  // 대상 Element 가져옴
  const ele = document.getElementById('dragMe');

  // 마우스 누른 순간 이벤트
  const mouseDownHandler = function (e) {
    // 누른 마우스 위치값을 가져와 저장
    x = e.clientX;
    y = e.clientY;

    // 마우스 이동 및 해제 이벤트를 등록
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
  };

  const mouseMoveHandler = function (e) {
    // 마우스 이동시 초기 위치와의 거리차 계산
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    // 마우스 이동 거리 만큼 Element의 top, left 위치값에 반영
    ele.style.top = `${ele.offsetTop + dy}px`;
    ele.style.left = `${ele.offsetLeft + dx}px`;

    // 기준 위치 값을 현재 마우스 위치로 update
    x = e.clientX;
    y = e.clientY;
  };

  const mouseUpHandler = function () {
    // 마우스가 해제되면 이벤트도 같이 해제
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
  };

  ele.addEventListener('mousedown', mouseDownHandler);
});

!codepen[sugarghost/embed/qBKZJOo?default-tab=html%2Cresult]

출처

drag 영역 나누기

단순히 위치만 옮겨다니는 Drag 대신 영역을 지정해 붙는 형식이 필요하다 HTML

<div style="align-items: center; display: flex; justify-content: center; padding: 4rem 0">
  <div id="list">
    <div class="draggable">A</div>
    <div class="draggable">B</div>
    <div class="draggable">C</div>
    <div class="draggable">D</div>
    <div class="draggable">E</div>
  </div>
</div>

CSS

.draggable {
  /* 커서를 이동형식으로 줌*/
  cursor: move;
  margin-bottom: 1rem;
  user-select: none;

  /* 중앙 정렬 */
  align-items: center;
  display: flex;
  justify-content: center;

  /* 크기 지정 */
  height: 4rem;
  width: 16rem;

  /* Misc */
  border: 1px solid #cbd5e0;
}
.placeholder {
  background-color: #edf2f7;
  border: 2px dashed #cbd5e0;
  margin-bottom: 1rem;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  // list div element를 가져옴
  const list = document.getElementById('list');

  let draggingEle;
  let placeholder;
  let isDraggingStarted = false;

  // 마우스 위치값을 위해 선언
  let x = 0;
  let y = 0;

  // 노드의 위치를 바꾸는 함수
  const swap = function (nodeA, nodeB) {
    // 상위 컨테이너 요소를 가져옴
    const parentA = nodeA.parentNode;
    // nodeA에 형제(다음 요소)가 nodeB라면 nodeA, 아닌 경우 다음 요소를 담음
    // sibling에서 조건처리하는 이유는 placeholder와 drag element의 위치를 조정하기 위해서
    const siblingA = nodeA.nextSibling === nodeB ? nodeA : nodeA.nextSibling;

    // nodeA를 nodeB의 뒤로 삽입
    nodeB.parentNode.insertBefore(nodeA, nodeB);

    // nobeB를 nodeA에 형제(다음요소) 뒤에 넣음
    parentA.insertBefore(nodeB, siblingA);
  };

  // nodeA가 nodeB 위에 존재하는지 확인하는 함수
  const isAbove = function (nodeA, nodeB) {
    // 각 node의 위치정보를 가져옴
    const rectA = nodeA.getBoundingClientRect();
    const rectB = nodeB.getBoundingClientRect();

    // top을 기준으로 A가 B보다 작으면 화면 위치상 A는 B보다 상위에 존재함으로 above가 성립
    return rectA.top + rectA.height / 2 < rectB.top + rectB.height / 2;
  };

  const mouseDownHandler = function (e) {
    // 현재 이벤트가 발생한 element를 저장
    draggingEle = e.target;

    // 선택된 element의 위치를 중심으로 마우스 클릭 위치를 계산
    const rect = draggingEle.getBoundingClientRect();
    x = e.pageX - rect.left;
    y = e.pageY - rect.top;

    // mouse 움직임, 해제 이벤트 적용
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
  };

  const mouseMoveHandler = function (e) {
    // 현재 이벤트가 발생한 element의 위치 정보 가져옴
    const draggingRect = draggingEle.getBoundingClientRect();

    // 첫 움직임인 경우 적용
    if (!isDraggingStarted) {
      isDraggingStarted = true;

      // 선택한 element가 움직이는 동안 표시할 placeholder element를 생성
      placeholder = document.createElement('div');
      placeholder.classList.add('placeholder');
      draggingEle.parentNode.insertBefore(placeholder, draggingEle.nextSibling);
      placeholder.style.height = `${draggingRect.height}px`;
    }

    // 드래그 하는 동안 element가 마우스 위치를 따라가도록 설정
    draggingEle.style.position = 'absolute';
    draggingEle.style.top = `${e.pageY - y}px`;
    draggingEle.style.left = `${e.pageX - x}px`;

    // 선택 element에 전 element와 다음 element를 선택함
    // placeholder가 들어가 있기 때문에 순서는 다음과 같음
    // 이전 element
    // drag 중인 element
    // placeholder element
    // 다음 element
    const prevEle = draggingEle.previousElementSibling;
    const nextEle = placeholder.nextElementSibling;

    // 이전 element가 존재하고 drag 중인 element가 이전 element 위에 존재하는 경우
    if (prevEle && isAbove(draggingEle, prevEle)) {
      // 서로의 위치를 바꿈
      // swap을 통해 place와 drag를 바꾸는 이유는 한번 움직이는게 아닌 연속적으로 상위요소로 올라갈 때, preEle 처리전 place와 drag의 위치를 정리하기 위해서임
      swap(placeholder, draggingEle);
      swap(placeholder, prevEle);
      return;
    }

    // 다음 element가 존재하고 drag 중인 element가 다음 element 위에 존재하는 경우
    if (nextEle && isAbove(nextEle, draggingEle)) {
      swap(nextEle, placeholder);
      swap(nextEle, draggingEle);
    }
  };

  const mouseUpHandler = function () {
    // placeholder가 존재하면 지워줌
    placeholder && placeholder.parentNode.removeChild(placeholder);

    // absolute로 움직이던 속성을 다 제거
    draggingEle.style.removeProperty('top');
    draggingEle.style.removeProperty('left');
    draggingEle.style.removeProperty('position');

    // 위치와 element 관련 date를 초기화
    x = null;
    y = null;
    draggingEle = null;
    isDraggingStarted = false;

    // 이벤트 해제
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
  };

  // 모든 draggable 요소에 mouseDown 이벤트 적용
  [].slice.call(list.querySelectorAll('.draggable')).forEach(function (item) {
    item.addEventListener('mousedown', mouseDownHandler);
  });
});

!codepen[sugarghost/embed/eYKZPRE?default-tab=html%2Cresult]

HTML

<div class="container">
    <div class="left">Left</div>
    <div class="resizer" id="dragMe"></div>
    <div class="right">Right</div>
</div>

CSS

.container {
  display: flex;

  /* 영역 구분을 위해 선을 설정 */
  border: 1px solid #cbd5e0;
  height: 16rem;
  width: 100%;
}
.left {
  /* 초기 크기를 절반으로 설정 */
  width: 50%;

  /* 중앙 정렬 */
  align-items: center;
  display: flex;
  justify-content: center;
}
.resizer {
  background-color: #cbd5e0;
  cursor: ew-resize;
  height: 100%;
  width: 2px;
}
.right {
  /* left가 차지하고 남은 공간에 따라 유동적으로 변화 */
  flex: 1;

  /* 중앙 정렬 */
  align-items: center;
  display: flex;
  justify-content: center;
}

JavaScript

// 대상 Element 선택
const resizer = document.getElementById('dragMe');
const leftSide = resizer.previousElementSibling;
const rightSide = resizer.nextElementSibling;

// 마우스의 위치값 저장을 위해 선언
let x = 0;
let y = 0;

// 크기 조절시 왼쪽 Element를 기준으로 삼기 위해 선언
let leftWidth = 0;

// resizer에 마우스 이벤트가 발생하면 실행하는 Handler
const mouseDownHandler = function (e) {
    // 마우스 위치값을 가져와 x, y에 할당
    x = e.clientX;
    y = e.clientY;
    // left Element에 Viewport 상 width 값을 가져와 넣음
    leftWidth = leftSide.getBoundingClientRect().width;

    // 마우스 이동과 해제 이벤트를 등록
    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
};

const mouseMoveHandler = function (e) {
    // 마우스가 움직이면 기존 초기 마우스 위치에서 현재 위치값과의 차이를 계산
    const dx = e.clientX - x;
    const dy = e.clientY - y;

      // 크기 조절 중 마우스 커서를 변경함
    // class="resizer"에 적용하면 위치가 변경되면서 커서가 해제되기 때문에 body에 적용
    document.body.style.cursor = 'col-resize';

    // 이동 중 양쪽 영역(왼쪽, 오른쪽)에서 마우스 이벤트와 텍스트 선택을 방지하기 위해 추가
    leftSide.style.userSelect = 'none';
    leftSide.style.pointerEvents = 'none';

    rightSide.style.userSelect = 'none';
    rightSide.style.pointerEvents = 'none';

    // 초기 width 값과 마우스 드래그 거리를 더한 뒤 상위요소(container)의 너비를 이용해 퍼센티지를 구함
    // 계산된 퍼센티지는 새롭게 left의 width로 적용
    const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
    leftSide.style.width = `${newLeftWidth}%`;
};

const mouseUpHandler = function () {
    // 모든 커서 관련 사항은 마우스 이동이 끝나면 제거됨
    resizer.style.removeProperty('cursor');
    document.body.style.removeProperty('cursor');

    leftSide.style.removeProperty('user-select');
    leftSide.style.removeProperty('pointer-events');

    rightSide.style.removeProperty('user-select');
    rightSide.style.removeProperty('pointer-events');

    // 등록한 마우스 이벤트를 제거
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
};

// 마우스 down 이벤트를 등록
resizer.addEventListener('mousedown', mouseDownHandler);

!codesandbox[resizable-split-views-left-right-lkiqc8?fontsize=14&hidenavigation=1&theme=dark]

Right에 추가로 Top, Bottom으로 나뉜 split 구조에 적용

HTML

<div class="container">
  <div class="left">Left</div>
  <div class="resizer" data-direction="horizontal"></div>
  <div class="right">
    <div class="top">Top</div>
    <div class="resizer" data-direction="vertical"></div>
    <div class="bottom">Bottom</div>
  </div>
</div>

CSS

.container {
  display: flex;

  /* 영역 구분을 위해 선을 설정 */
  border: 1px solid #cbd5e0;
  height: 32rem;
  width: 100%;
}
.resizer[data-direction="horizontal"] {
  background-color: #cbd5e0;
  cursor: ew-resize;
  height: 100%;
  width: 2px;
}
.resizer[data-direction="vertical"] {
  background-color: #cbd5e0;
  cursor: ns-resize;
  height: 2px;
  width: 100%;
}
.left {
  /* 초기 크기를 1/4으로 설정 */
  width: 25%;

  /* 중앙 정렬 */
  align-items: center;
  display: flex;
  justify-content: center;
}
.right {
  /* left가 차지하고 남은 공간에 따라 유동적으로 변화 */
  flex: 1;

  /* 중앙 정렬 및 하위 요소 배치를 column 식으로 내려가듯이 배치*/
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.top {
  /* 초기 높이값 지정 */
  height: 12rem;

  /* 중앙 정렬 */
  align-items: center;
  display: flex;
  justify-content: center;
}
.bottom {
  /* top이 차지하고 남은 공간에 따라 유동적으로 변화 */
  flex: 1;

  /* 중앙 정렬 */
  align-items: center;
  display: flex;
  justify-content: center;
}

JavaScript

import "./styles.css";
const resizable = function (resizer) {
  const direction = resizer.getAttribute("data-direction") || "horizontal";
  const prevSibling = resizer.previousElementSibling;
  const nextSibling = resizer.nextElementSibling;

  //  마우스의 위치값 저장을 위해 선언
  let x = 0;
  let y = 0;
  let prevSiblingHeight = 0;
  let prevSiblingWidth = 0;

  // resizer에 마우스 이벤트가 발생하면 실행하는 Handler
  const mouseDownHandler = function (e) {
    // 마우스 위치값을 가져와 x, y에 할당
    x = e.clientX;
    y = e.clientY;
    // 대상 Element에 위치 정보를 가져옴
    const rect = prevSibling.getBoundingClientRect();
    // 기존 높이와 너비를 각각 할당함
    prevSiblingHeight = rect.height;
    prevSiblingWidth = rect.width;

    // 마우스 이동과 해제 이벤트를 등록
    document.addEventListener("mousemove", mouseMoveHandler);
    document.addEventListener("mouseup", mouseUpHandler);
  };

  const mouseMoveHandler = function (e) {
    // 마우스가 움직이면 기존 초기 마우스 위치에서 현재 위치값과의 차이를 계산
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    // 이동 방향에 따라서 별도 동작
    // 기본 동작은 동일하게 기존 크기에 마우스 드래그 거리를 더한 뒤 상위요소(container)를 이용해 퍼센티지를 구함
    // 계산 대상이 x 또는 y인지에 차이가 있음
    switch (direction) {
      case "vertical":
        const h =
          ((prevSiblingHeight + dy) * 100) /
          resizer.parentNode.getBoundingClientRect().height;
        prevSibling.style.height = `${h}%`;
        break;
      case "horizontal":
      default:
        const w =
          ((prevSiblingWidth + dx) * 100) /
          resizer.parentNode.getBoundingClientRect().width;
        prevSibling.style.width = `${w}%`;
        break;
    }

    // 크기 조절 중 마우스 커서를 변경함
    // class="resizer"에 적용하면 위치가 변경되면서 커서가 해제되기 때문에 body에 적용
    const cursor = direction === "horizontal" ? "col-resize" : "row-resize";
    resizer.style.cursor = cursor;
    document.body.style.cursor = cursor;

    prevSibling.style.userSelect = "none";
    prevSibling.style.pointerEvents = "none";

    nextSibling.style.userSelect = "none";
    nextSibling.style.pointerEvents = "none";
  };

  const mouseUpHandler = function () {
    // 모든 커서 관련 사항은 마우스 이동이 끝나면 제거됨
    resizer.style.removeProperty("cursor");
    document.body.style.removeProperty("cursor");

    prevSibling.style.removeProperty("user-select");
    prevSibling.style.removeProperty("pointer-events");

    nextSibling.style.removeProperty("user-select");
    nextSibling.style.removeProperty("pointer-events");

    // 등록한 마우스 이벤트를 제거
    document.removeEventListener("mousemove", mouseMoveHandler);
    document.removeEventListener("mouseup", mouseUpHandler);
  };

  // 마우스 down 이벤트를 등록
  resizer.addEventListener("mousedown", mouseDownHandler);
};

// 모든 resizer에 만들어진 resizable을 적용
document.querySelectorAll(".resizer").forEach(function (ele) {
  resizable(ele);
});

!codesandbox[resizable-split-views-left-right-top-bottom-nkxdo1?fontsize=14&hidenavigation=1&theme=dark]

출처

// src/hooks/useStore.js
import { nanoid } from "nanoid";
import create from "zustand";

export const useStore = create((set) => ({
  texture: "dirt",
  cubes: [],
  addCube: (x, y, z) => {
    set((prev) => ({
      cubes: [
        ...prev.cubes,
        {
          key: nanoid(),
          pos: [x, y, z],
          texture: prev.texture,
        },
      ],
    }));
  },
  removeCube: (x, y, z) => {
    set((prev) => ({
      cubes: prev.cubes.filter((cube) => {
        const [X, Y, Z] = cube.pos;
        return X !== x || Y !== y || Z !== z;
      }),
    }));
  },
  // texture를 인자로 받아 현재 state에 반영시켜주자
  setTexture: (texture) => {
    set(() => ({
      texture,
    }));
  },
  saveWorld: () => {},
  resetWorld: () => {},
}));

기존 useStore에 작은 수정사항이기에 별다른 어려움은 없다. Texture 선택을 위해서 별도의 파일을 만들자 src/components/ 경로에 TextureSelector.js 파일을 생성하자

// src/components/TextureSelector.js
import { useState, useEffect } from "react";
import { useKeyboard } from "../hooks/useKeyboard";
import { useStore } from "../hooks/useStore";
import { dirtImg, grassImg, glassImg, woodImg, logImg } from "../images/images";

// TextureSelector를 그릴때 내부 구성 Texture만큼 반복하기 위해 선언
const images = {
  dirt: dirtImg,
  grass: grassImg,
  glass: glassImg,
  wood: woodImg,
  log: logImg,
};

export const TextureSelector = () => {
  // TextrueSelector가 보이는지 여부를 관리하는 state
  const [visible, setVisible] = useState(false);
  // 현재 활성화 textrue를 구분하고 선택한 texture를 반영하기 위해 사용
  const [activeTexture, setTexture] = useStore((state) => [
    state.texture,
    state.setTexture,
  ]);
  // 특정 Texture에 해당되는 num(숫자)가 눌렀는지 여부를 담은 상태값
  const { dirt, grass, glass, wood, log } = useKeyboard();

  // 만약 Texture 상태값이 변경(num을 누른 경우)되면 발생하는 Effect
  useEffect(() => {
    const textures = {
      dirt,
      grass,
      glass,
      wood,
      log,
    };
    // textures 오브젝트를 검사해 각 textures 요소 중 값이 true인 경우를 반환
    // 즉, useKeyboard를 통해 input이 발생해 상태가 true가 된 texture가 반환
    const pressedTexture = Object.entries(textures).find(([k, v]) => v);
    if (pressedTexture) {
      // 해당되는(눌려서 true가 된) texture의 key(예: dirt)를 현재 Texture로 설정
      setTexture(pressedTexture[0]);
    }
  }, [setTexture, dirt, grass, glass, wood, log]);

  // num을 통해 Textrue를 선택한 순간 화면에 잠시동안 TextureSelector가 보이게 하기 위한 Effect
  useEffect(() => {
    // 비동기 처리를 이용해 2초후에 visible을 false로 설정한다.
    const visibbilityTimeout = setTimeout(() => {
      setVisible(false);
    }, 2000);
    // visible을 true로 변경시킨다. 2초뒤 setTimeout의 callback이 실행되면, 다시 false가 된다.
    setVisible(true);
    return () => {
      // 2초가 지나기 전에 useEffect가 다시 발생하면 setTimeout이 중첩되어 실행됨
      // 만약 useEffect가 다시 발생하면 clearTimeout을 이용해 setTimeout을 제거해 시간마다 1번의 실행을 보증
      clearTimeout(visibbilityTimeout);
    };
  }, [activeTexture]);
  return (
    // visible 상태에 따라서 TextureSelector를 보이게함
    visible && (
      <div className="absolute centered texture-selector">
          // images 요소만큼 반복해 Texture 이미지를 가져옴 
        {Object.entries(images).map(([k, src]) => {
          return (
            <img
              key={k}
              src={src}
              alt={k}
              className={`${k === activeTexture ? "active" : ""}`}
            />
          );
        })}
      </div>
    )
  );
};

영상에서는 단계를 따라서 조금씩 코드를 불려나갔지만, 글에서는 한번에 통일해서 설명하고자 최종본으로 설명하기에 내용이 조금 길다고 느낄 수 있다. 중요한 내용은 주석으로 설명됬기에 별도의 설명은 생략한다. 코드 마지막에 보면 별도의 className을 정의해 주었다. 이에 맞춰서 src/index.css에 다음과 같은 내용을 추가해주자

/* 크기가 작기에 확장을 시켜줌 */
.texture-selector {
  transform: scale(5);
}
/* 선택된 이미지에 강조를 하기 위한 css */
.texture-selector img.active {
  border: 2px solid red;
}

css 추가가 되었다면 작업사항을 app.js에 반영해 확인해보자

// src/App.js
import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei";
import { Physics } from "@react-three/cannon";
import { Ground } from "./components/Ground";
import { Player } from "./components/Player";
import { FPV } from "./components/FPV";
import { Cubes } from "./components/Cubes";
import { TextureSelector } from "./components/TextureSelector"; // + 만든 selector를 가져오자

function App() {
  return (
    <>
      <Canvas>
        <Sky sunPosition={[100, 100, 20]} />
        <ambientLight intensity={0.5} />
        <FPV />
        <Physics>
          <Player />
          <Cubes />
          <Ground />
        </Physics>
      </Canvas>
      <div className="absolute centered cursor">+</div>
      <TextureSelector /> // + textureSelector를 반영해주자
    </>
  );
}

export default App;

이제 숫자 1, 2, 3, 4, 5를 누를 때마다 Texture selector가 잠시 화면에 보이고, 블럭 설치시 선택한 texture가 반영이 된다.

질감을 선택하고 블록을 설치하다보면 한가지 아쉬운 점이 있다. 내가 현재 어떤 블록에 마우스를 가져다대고 있는지 잘 안보인다는 점과 유리의 질감에 투명도가 없다는 것이다. Cube.js를 수정해 반영을 해보자

// src/components/Cube.js
import { useState } from "react"; // + state 관리를 위해 추가
import { useBox } from "@react-three/cannon";
import { useStore } from "../hooks/useStore";
import * as textures from "../images/textures";
export const Cube = ({ position, texture }) => {
  const [isHovered, setIsHovered] = useState(false); // + 해당 cube가 Hover 중인지 확인용
  const [ref] = useBox(() => ({
    type: "Static",
    position,
  }));

  const [addCube, removeCube] = useStore((state) => [
    state.addCube,
    state.removeCube,
  ]);

  const activeTexture = textures[texture + "Texture"];

  return (
    <mesh
      // 현재 물체에 마우스 Pointer가 움직이는지
      onPointerMove={(e) => {
        e.stopPropagation();
        setIsHovered(true);
      }}
      // 현재 물체에 마우스 Pointer가 벗어났는지
      onPointerOut={(e) => {
        e.stopPropagation();
        setIsHovered(false);
      }}
      onClick={(e) => {
        e.stopPropagation();
        const clickedFace = Math.floor(e.faceIndex / 2);
        const { x, y, z } = ref.current.position;
        if (e.altKey) {
          removeCube(x, y, z);
          return;
        } else if (clickedFace === 0) {
          addCube(x + 1, y, z);
          return;
        } else if (clickedFace === 1) {
          addCube(x - 1, y, z);
          return;
        } else if (clickedFace === 2) {
          addCube(x, y + 1, z);
          return;
        } else if (clickedFace === 3) {
          addCube(x, y - 1, z);
          return;
        } else if (clickedFace === 4) {
          addCube(x, y, z + 1);
          return;
        } else if (clickedFace === 5) {
          addCube(x, y, z - 1);
          return;
        }
      }}
      ref={ref}
    >
      <boxBufferGeometry attach="geometry" />
      <meshStandardMaterial
        // 만약 물체가 Hover중 이라면, 질감에 색상을 추가한다.
        color={isHovered ? "gray" : "white"}
        map={activeTexture}
        // 투명도 적용을 위해 transparent 속성을 true로 설정
        transparent={true}
        // 만약 cube의 질감이 유리라면, opacity 값을 0.6으로 설정
        opacity={texture === "glass" ? 0.6 : 1}
        attach="material"
      />
    </mesh>
  );
};

몇가지 새로운 개념이 보인다. 먼저 물체(mesh)에 새롭게 이벤트가 바인딩 되었는데, onPointerMove와 onPointerOut이다. 두 요소는 react-three-fiber에 Event항목에서 찾아 볼 수 있다.

새롭게 질감 부분에서 transparent, opacity 개념이 추가되었다. transparent는 질감이 투명한지 여부를 정의한다. true로 설정 시 투명해지는 정도는 opacity 속성을 설정해 제어된다.

코드를 반영하면 유리의 질감과 hover시의 색상 반영을 확인 할 수 있다.

이젠 마지막으로 우리가 저장한 block을 저장하고 reset시키는 world 기능을 구현해보자 먼저 useStore.js를 수정해 world 관련 기능을 만들어보자

// src/hooks/useStore.js
import { nanoid } from "nanoid";
import create from "zustand";

// + localStorege를 저장 및 가져오기 위해 선언
const getLocalStorage = (key) => JSON.parse(window.localStorage.getItem(key));
const setLocalStorage = (key, value) =>
  window.localStorage.setItem(key, JSON.stringify(value));

export const useStore = create((set) => ({
  texture: "dirt",
  // 기존 sample 내용은 다 지우고, localStorege에 내용이 존재하면 가져오거나, []을 할당
  cubes: getLocalStorage("cubes") || [],
  addCube: (x, y, z) => {
    set((prev) => ({
      cubes: [
        ...prev.cubes,
        {
          key: nanoid(),
          pos: [x, y, z],
          texture: prev.texture,
        },
      ],
    }));
  },
  removeCube: (x, y, z) => {
    set((prev) => ({
      cubes: prev.cubes.filter((cube) => {
        const [X, Y, Z] = cube.pos;
        return X !== x || Y !== y || Z !== z;
      }),
    }));
  },
  setTexture: (texture) => {
    set(() => ({
      texture,
    }));
  },
  // 저장 시 localStorege에 cubes 내용을 저장
  saveWorld: () => {
    set((prev) => {
      setLocalStorage("cubes", prev.cubes);
    });
  },
  // reset시 현재 state를 초기화
  resetWorld: () => {
    set(() => ({
      cubes: [],
    }));
  },
}));

기능을 만들고 이제 기능을 사용하기 위한 컴포넌트를 만들어보자 src/components/ 경로에 Menu.js 파일을 생성해보자

// src/componenets/Menu.js 
import { useStore } from "../hooks/useStore";

export const Menu = () => {
  const [saveWorld, resetWorld] = useStore((state) => [
    state.saveWorld,
    state.resetWorld,
  ]);

  return (
    <div className="menu absolute">
      <button onClick={() => saveWorld()}>Save</button>
      <button onClick={() => resetWorld()}>Reset</button>
    </div>
  );
};

메뉴 컴포넌트를 App.js에 적용하자

// src/App.js
import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei";
import { Physics } from "@react-three/cannon";
import { Ground } from "./components/Ground";
import { Player } from "./components/Player";
import { FPV } from "./components/FPV";
import { Cubes } from "./components/Cubes";
import { TextureSelector } from "./components/TextureSelector";
import { Menu } from "./components/Menu"; // + 추가

function App() {
  return (
    <>
      <Canvas>
        <Sky sunPosition={[100, 100, 20]} />
        <ambientLight intensity={0.5} />
        <FPV />
        <Physics>
          <Player />
          <Cubes />
          <Ground />
        </Physics>
      </Canvas>
      <div className="absolute centered cursor">+</div>
      <TextureSelector />
      <Menu /> // + 추가
    </>
  );
}

export default App;

마지막으로 world 관련 버튼의 배치를 위해 index.css에 다음과 같이 추가해주자

.menu {
  top: 0px;
  left: 10px;
}

모든 작업이 끝났다면 왼쪽 상단에 save와 reset버튼이 생성된다. 저장되는 cubes의 포멧은 다음과 같이 localStorege에 저장된다.

❮
[
    {
        "key": "0vMyojwn_UVJBKMHNE7lH",
        "pos": [
            1,
            0,
            10
        ],
        "texture": "glass"
    },
    {
        "key": "FPvfypxgz0vEhWBjPuAde",
        "pos": [
            4,
            0,
            10
        ],
        "texture": "dirt"
    },
    {
        "key": "daMnP8g97tQaFFPEBQbGk",
        "pos": [
            2,
            0,
            10
        ],
        "texture": "grass"
    },
    {
        "key": "eHOYl0k1DqFkiqVmULoZU",
        "pos": [
            0,
            0,
            10
        ],
        "texture": "wood"
    },
    {
        "key": "INtx3L7hJFyyfOzgn6xwE",
        "pos": [
            -1,
            0,
            10
        ],
        "texture": "log"
    },
    {
        "key": "akcT8xv966eXj0w7nzwO4",
        "pos": [
            3,
            0,
            10
        ],
        "texture": "dirt"
    },
    {
        "key": "FR7XWyNYRMsn-Vyd97DtU",
        "pos": [
            3,
            0,
            9
        ],
        "texture": "dirt"
    }
]

이걸로 모든 작업이 끝났고, 우리는 원하는 질감으로 블록을 설치해 집을 만들고, 영원히 저장하고 초기화 할 수 있게 되었다.

글의 마무리로는 처음으로 3D를 접하고 threeJS를 써가면서 글을 쓴 감상을 이야기하고자 한다. 단순히 복사해 사용하는게 아닌 이해하면서 사용하기 위해 글을 써봤지만, 생각보다 복잡하고, 생각보다 오래 걸린다는 것을 깨달았다.

하지만 글을 쓰기위해 공식문서를 참조해가고 라이브러리 소스코드를 열어보는 것은 좋은 경험이 되었다. 누군가의 글이나 강의를 글로 써내리는건 좀더 신중해지겠지만, 처음 한번쯤은 익숙해지기 위해서 해볼만 하다.

// src/components/Cube.js
import { useBox } from "@react-three/cannon";
import * as textures from "../images/textures"; 
export const Cube = ({ position, texture }) => {
  const [ref] = useBox(() => ({
    type: "Static",
    position,
  }));

  const activeTexture = textures[texture + "Texture"];

  return (
    <mesh ref={ref}>
      <boxBufferGeometry attach="geometry" />
      <meshStandardMaterial map={activeTexture} attach="material" />
    </mesh>
  );
};

이제는 소스코드가 어느정도 익숙해졌다. Cube는 위치를 위한 position과 질감을 구분할 texture를 인자로 받는다. useBox는 Box 형태의 물리적 충돌을 계산하기 위해 사용한다. 여기서 우리는 type을 Static으로 주었는데, Static은 움직이지 않으며 무한한 질량을 가진 것처럼 동작한다. position에 대한 수정을 통해 움직일 수는 있지만, 속도는 항상 0이다. 우리는 정적인 블록 상태로 사용할 것이기에 중요한 요소는 아니다.

Box 형태의 물리적 요소가 준비되면 실제 물체에 매핑을 시킨다. mesh를 통해 물체를 만들고, geometry, material을 활용해 부피와 질감을 선언한다. 질감을 선언할때 map을 통해 파라미터를 통해 들어온 현재 텍스쳐를 등록한다.

물리적인 블록을 생성하는 컴포넌트를 생성했으니 다수의 블록을 그려주는 컴포넌트와 그 블록들을 전역으로 관리할 hook을 만들어주자 먼저 전역 상태관리를 위해 src/hooks/ 경로에 useStore.js라는 파일을 생성하자

// src/hooks/useStore.js
import { nanoid } from "nanoid";
import create from "zustand";

export const useStore = create((set) => ({
  texture: "dirt",
  cubes: [
    {
      key: nanoid(),
      pos: [1, 1, 1],
      texture: "dirt",
    },
  ],
  addCube: (x, y, z) => {
    set((prev) => ({
      cubes: [
        ...prev.cubes,
        {
          key: nanoid(),
          pos: [x, y, z],
          texture: prev.texture,
        },
      ],
    }));
  },
  removeCube: () => {},
  setTexture: () => {},
  saveWorld: () => {},
  resetWorld: () => {},
}));

처음에 우리가 받아놓고 사용하지 않고있던 라이브러리를 쓰게 되었다. nanoid는 단순히 중복되지 않는 string key를 만들기 위한 라이브러리다. zustand는 전역관리를 위해 사용하며, create로 생성되어 set을 통해 전역 상태를 관리한다. 3D 관련된 요소는 지금은 이정도로 간략히 설명하고 넘어가겠다. 현재 선택된 texture를 관리하기 위해 texture의 상태를 관리한다.(기본값 "dirt") cube는 key,pos,texture로 구성된다. pos는 좌표값의 위치인 position을 뜻하며, texture는 해당 cube의 질감을 담는다. addCube는 좌표값을 받고 set을 통해 기존 cubes 상태에 기존값 + 새로운 {객체}를 추가로 할당한다. 나머지 기능은 나중에 만들자 이제 src/components/ 경로에 Cubes.js 파일을 추가하자

// src/components/Cubes.js
import { useStore } from "../hooks/useStore";
import { Cube } from "./Cube";
export const Cubes = () => {
  // 전역으로 관리되고 있는 cubes를 가져온다.
  const [cubes] = useStore((state) => [state.cubes]);
  // 현재 등록된 cubes 만큼 반복하며 물체 Cube를 그려준다.
  return cubes.map(({ key, pos, texture }) => {
    return <Cube key={key} position={pos} texture={texture} />;
  });
};

이 부분에 대해서는 별다른 부가 설명은 불필요 하기 때문에 넘어가고, 우리가 추가한 cubes를 App.js을 통해서 반영시켜주자

import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei";
import { Physics } from "@react-three/cannon";
import { Ground } from "./components/Ground";
import { Player } from "./components/Player";
import { FPV } from "./components/FPV";
import { Cubes } from "./components/Cubes"; // + Cubes 가져오기

function App() {
  return (
    <>
      <Canvas>
        <Sky sunPosition={[100, 100, 20]} />
        <ambientLight intensity={0.5} />
        <FPV />
        <Physics>
          <Player />
          <Cubes /> // + 물리적 영향을 받기에 Physics에 등록
          <Ground />
        </Physics>
      </Canvas>
      <div className="absolute centered cursor">+</div>
    </>
  );
}

export default App;

우리는 useStore에 cubes에 초기값을 1개 넣어주었고, 실행을 시켜보면 1개의 흙 블록을 확인할 수 있다.

첫번째로, 처음에 우리가 지면을 만들때와 같이 도트가 흐릿해 보이는데, 텍스쳐에 별도로 필터 적용이 필요하기 때문이다. 두번째로, 블럭이 지면에서 약간 뜬 상태로 생성되는데, 이 부분은 지면에 대한 높이값 조정을 통해서 맞춰 줄 수 있다. 먼저 texture에 대해 수정을 해보자

// src/images/textures.js
import { NearestFilter, TextureLoader, RepeatWrapping } from "three"; // + RepeatWrapping를 추가해주자
import { dirtImg, logImg, glassImg, grassImg, woodImg } from "./images";

const dirtTexture = new TextureLoader().load(dirtImg);
const logTexture = new TextureLoader().load(logImg);
const grassTexture = new TextureLoader().load(grassImg);
const glassTexture = new TextureLoader().load(glassImg);
const woodTexture = new TextureLoader().load(woodImg);
const groundTexture = new TextureLoader().load(grassImg);

// 아래의 모든 텍스쳐에 대해서 Filter를 적용시켜주자
dirtTexture.magFilter = NearestFilter;
logTexture.magFilter = NearestFilter;
grassTexture.magFilter = NearestFilter;
glassTexture.magFilter = NearestFilter;
woodTexture.magFilter = NearestFilter;
groundTexture.magFilter = NearestFilter;
groundTexture.wrapS = RepeatWrapping;
groundTexture.wrapT = RepeatWrapping;

export {
  dirtTexture,
  logTexture,
  grassTexture,
  glassTexture,
  woodTexture,
  groundTexture,
};

Texture.js에서 wrapS, wrapT, Filter 적용을 했으니 기존 Ground에 Filter 내용은 지워주어야 한다. Ground를 작업하는 김에 지면의 높이를 재 조정해서 블록과 일치시키고, 새롭게 만든 addCube를 사용하기 위해 onClick 이벤트를 추가해주자.

// src/components/Ground.js
import { usePlane } from "@react-three/cannon";
import { NearestFilter, RepeatWrapping } from "three";
import { groundTexture } from "../images/textures";
import { useStore } from "../hooks/useStore"; // + addCube를 위해 hook을 가져오자

export const Ground = () => {
  const [ref] = usePlane(() => ({
    rotation: [-Math.PI / 2, 0, 0],
    position: [0, -0.5, 0], // 지면의 높이를 조정해 블록과 일치시키자.
  }));
  const [addCube] = useStore((state) => [state.addCube]); // + 가져온 hook에서 addCube 기능을 꺼내주자

  // - Texture와 곂치는 부분 제거
  // groundTexture.magFilter = NearestFilter; 
  // groundTexture.wrapS = RepeatWrapping;
  // groundTexture.wrapT = RepeatWrapping;
  groundTexture.repeat.set(100, 100);

  return (
    <mesh
    // + 기존에 만든 지면 물체에 OnClick 이벤트를 할당하자.
      onClick={(e) => {
        // 이벤트 버블링을 막아 이벤트의 의도치 않은 동작을 막는다.
        e.stopPropagation();
        // 마우스로 좌표를 클릭하면 세밀한 소수점 단위의 좌표가 선택된다. 우리는 블록 단위로 좌표를 구하기 때문에 반올림 해서 x, y, z를 각각 추출한다.
        const [x, y, z] = Object.values(e.point).map((val) => Math.ceil(val));
        addCube(x, y, z);
      }}
      ref={ref}
    >
      <planeBufferGeometry attach="geometry" args={[100, 100]} />
      <meshStandardMaterial attach="material" map={groundTexture} />
    </mesh>
  );
};

자 이제 우리가 원하는 대로 마우스를 클릭하면 블록이 생성되고, 텍스쳐가 잘 적용되었다. 하지만 오로지 지면에서만 추가가 되며, 다른 블록에 연속적으로 설치는 안된다.

Cube.js와 useStore.js를 수정해서 큐브 이어 붙이기와 큐브 삭제 기능을 만들어보자

// src/hooks/useStore.js
import { nanoid } from "nanoid";
import create from "zustand";

export const useStore = create((set) => ({
  texture: "dirt",
  cubes: [
    {
      key: nanoid(),
      pos: [1, 1, 1],
      texture: "dirt",
    },
  ],
  addCube: (x, y, z) => {
    set((prev) => ({
      cubes: [
        ...prev.cubes,
        {
          key: nanoid(),
          pos: [x, y, z],
          texture: prev.texture,
        },
      ],
    }));
  },
  // removeCube는 position 값을 받아와 filter를 이용해 삭제 대상 위치값을 가진 cubes 항목을 걸러준다.
  removeCube: (x, y, z) => {
    set((prev) => ({
      cubes: prev.cubes.filter((cube) => {
        const [X, Y, Z] = cube.pos;
        return X !== x || Y !== y || Z !== z;
      }),
    }));
  },
  setTexture: () => {},
  saveWorld: () => {},
  resetWorld: () => {},
}));

remove Cube에 대해서는 간단한 기능이기에 설명은 넘어가고, useStore 수정이 끝났다면 Cube.js를 수정해보자

// src/components/Cube.js
import { useBox } from "@react-three/cannon";
import { useStore } from "../hooks/useStore"; // + useStore를 호출
import * as textures from "../images/textures"; 
export const Cube = ({ position, texture }) => {
  const [ref] = useBox(() => ({
    type: "Static",
    position,
  }));

  // + hook을 통해 addCube와 removeCube 기능을 가져오자
  const [addCube, removeCube] = useStore((state) => [
    state.addCube,
    state.removeCube,
  ]);

  const activeTexture = textures[texture + "Texture"];

  return (
    <mesh
      // + cube 물체에 onClick 이벤트를 부여
      onClick={(e) => {
        e.stopPropagation();
        // 현재 물체의 이벤트가 발생한 면 Number를 가져온다.
        const clickedFace = Math.floor(e.faceIndex / 2);
        // 물체의 위치값을 가져온다.
        const { x, y, z } = ref.current.position;
        // 만약 이벤트가 alt가 눌린채로 발생했다면 현재 이벤트 발생 위치의 cube를 지워준다.
        if (e.altKey) {
          removeCube(x, y, z);
          return;
        // 이후부터는 이벤트가 발생한 면 Number에 따라서 각 위치에 맞춰 addCube를 발생시킨다.
        } else if (clickedFace === 0) {
          addCube(x + 1, y, z);
          return;
        } else if (clickedFace === 1) {
          addCube(x - 1, y, z);
          return;
        } else if (clickedFace === 2) {
          addCube(x, y + 1, z);
          return;
        } else if (clickedFace === 3) {
          addCube(x, y - 1, z);
          return;
        } else if (clickedFace === 4) {
          addCube(x, y, z + 1);
          return;
        } else if (clickedFace === 5) {
          addCube(x, y, z - 1);
          return;
        }
      }}
      ref={ref}
    >
      <boxBufferGeometry attach="geometry" />
      <meshStandardMaterial map={activeTexture} attach="material" />
    </mesh>
  );
};

새로운 개념이 나왔다. faceIndex 우리가 만드는 블록은 6개의 면을 가지고 있다고 생각하겠지만, threeJs에는 면을 3개의 꼭지점을 가진 삼각형으로 처리한다. 즉 블록의 면 구성은 다음과 같다. 우리가 한 면이라고 생각하는 면은 2개의 face로 구성되어있다. 그래서 소스코드 상으로는 faceIndex를 받아 2로 나눠준 뒤 Math.floor()를 통해서 반내림을 시켜준다. 각 Face의 순서는 지금 이해하려할 필요는 없는 것 같다. 지금은 주어진 소스코드를 그대로 적용시키며 face에 대한 이해만 해두자

자 이제 실행을 해보고 Cube를 설치해보고, 삭제해보자

이제 Cube에 연속적으로 반영이 되는것을 확인 할 수 있다. 다음번에는 마지막으로 텍스쳐를 선택해 반영하고, localStorege에 world 정보를 반영하는 부분으로 마무리 지어보자

먼저 src/components 경로에 Player.js라는 파일을 만들고 다음과 같이 구성하자

// src/components/Player.js
import { useEffect, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useSphere } from "@react-three/cannon";
import { Vector3 } from "three";
export const Player = () => {
  const { camera } = useThree();
  const [ref, api] = useSphere(() => ({
    mass: 1,
    type: "Dynamic",
    position: [0, 0, 0],
  }));

  const pos = useRef([0, 0, 0]);
  useEffect(() => {
    api.position.subscribe((p) => (pos.current = p));
  }, [api.position]);
  useFrame(() => {
    camera.position.copy(
      new Vector3(pos.current[0], pos.current[1], pos.current[2])
    );
  });
  return <mesh ref={ref}></mesh>;
};

일단은 작성한 코드를 반영하기 위해서 App.js에도 Player 사항을 추가해주자

// src/App.js
import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei";
import { Physics } from "@react-three/cannon";
import { Ground } from "./components/Ground";
import { Player } from "./components/Player"; // + 새로 만든 Player를 import

function App() {
  return (
    <>
      <Canvas>
        <Sky sunPosition={[100, 100, 20]} />
        <ambientLight intensity={0.5} />
        <Physics>
          <Player /> // + 물리적인 영향을 받으니 Physics 내부에 추가해준다.
          <Ground />
        </Physics>
      </Canvas>
    </>
  );
}

export default App;

본격적으로 Player에 대해 설명을 시작하면서 선언부 부터 새로운 개념을 하나씩 알아보자 먼저 우리는 @react-three/fiber에 useThree를 통해 camera라는 요소에 접근을 했다. useThree는 기본 렌더러, 장면, 카메라 등의 상태 모델에 액세스를 지원하는 hook이다. camera에 대해서는 나중에 실제 사용 부분에서 좀더 설명을 하겠다. 이제 다음 코드를 살펴보면 useSphere가 사용되었다. threeJs에서 Sphere는 구체 혹은 입체적인 형체를 뜻한다. 다만 cannon 라이브러리에 요소이기 때문에 시각적인 요소가 아닌 물리적 계산에 관련된 개념으로 이해하면 될 것 같다. 우리는 인자값으로 mass, type, position을 준다. mass는 질량을 의미하며 충돌 계산 또는 중력에 의한 물리적 계산에 영향을 미친다. type은 공식 github FAQ에 명시되어 있으며, 우리가 준 dynamic 속성의 경우 유저의 의해 움직일 수 있으며, 0이 아닌 질량을 가진 채로 다른 요소들과 충돌이 가능하다. 즉, 사용자 input에 따라 조작 가능한 요소를 지정할때 알맞은 type이다.

우리는 시야를 위한 camera가 존재하고, 플레이어를 위한 물리적 대상(useSphere)이 존재한다. 이제 이 두가지를 결합하자 먼저 우리는 좌표를 계산하기 위해

  const pos = useRef([0, 0, 0]);

를 선언했다.

useEffect(() => {
  api.position.subscribe((p) => (pos.current = p));
}, [api.position]);

이 구문은 우리가 생성한 물리적인 Player의 위치값을 pos 변수에 지속적으로 update하기 위한 구문이다. api 및 position, subscribe 등의 내용은 github readme를 참조하면 알 수 있다.

그 다음 코드를 살펴보자.

useFrame(() => {
  camera.position.copy(
    new Vector3(pos.current[0], pos.current[1], pos.current[2])
  );
});

useFrame은 effect가 실행되거나 update가 발생하는 등의 모든 frame에 대한 렌더링이 발생하면, 내부에 코드를 실행시킨다.

우리의 예제 상으로는 렌더링이 발생하면 pos에 담긴 Player의 위치값을 camera에 position값으로 복사해준다. 즉, 우리가 Player에 대한 상호작용을 통해 위치값이 변화한다면, 우리의 시점을 Player에 위치값과 일치시켜 시야가 Player를 따라다니도록 하는 것이다.

마지막으로 물리적인 상호작용을 위해서는 실제 물체가 필요하기에 mesh를 선언하고 Player의 물리적인 상태를 ref로 연결해준다.

  return <mesh ref={ref}></mesh>;

이제 실제로 어떻게 동작하는지 실행을 해보자 상호작용은 아직 불가능 하지만 우리는 Player를 생성했다. 처음 실행을 시켜보면 위로 튀어오르고, 다시 땅으로 내려오는 모습을 보게 될 것이다.

Player에 위치값을 0으로 설정하면서 지면과 충돌이 발생해 반발력에 의해 위로 튀어오르고, 질량(mass)에 의해서 중력에 영향으로 다시 아래로 떨어지기 때문이다.

높이에 대한 처리를 위해 Player.js를 다음과 같이 변경하자

// src/components/Player.js
import { useEffect, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useSphere } from "@react-three/cannon";
import { Vector3 } from "three";
export const Player = () => {
  const { camera } = useThree();
  const [ref, api] = useSphere(() => ({
    mass: 1,
    type: "Dynamic",
    position: [0, 1, 0], // position에 높이에 해당되는 두번째 인자를 1로 변경
  }));

  // + 추후에 Player에 대한 Event 처리를 위해 아래에 코드를 추가하자
  const vel = useRef([0, 0, 0]);
  useEffect(() => {
    api.velocity.subscribe((v) => (vel.current = v));
  }, [api.velocity]);

  const pos = useRef([0, 0, 0]);
  useEffect(() => {
    api.position.subscribe((p) => (pos.current = p));
  }, [api.position]);

  useFrame(() => {
    camera.position.copy(
      new Vector3(pos.current[0], pos.current[1], pos.current[2])
    );
  });
  return <mesh ref={ref}></mesh>;
};

간단히 Player의 position 값을 변경해주는 것으로 튕기는 현상은 사라졌다. 새롭게 추가된 코드 중 velocity가 존재하는데, 우리가 Player에 대한 조작(이동, 점프 등) 시 그 속도를 처리하기 위한 상태값이다.

Player를 준비했으니 이제 key input 관련 상호작용을 만들어보자. src/hooks/ 경로에 새롭게 useKeyboard.js 라는 이름의 파일을 생성하고 다음과 같이 구성하자

// src/hooks/useKeyboard.js
import { useCallback, useEffect, useState } from "react";

  // key Action 종류에 따라서 반환할 값을 Map 형태로 준비
function actionByKey(key) {
  const keyActionMap = {
    KeyW: "moveForward",
    KeyS: "moveBackward",
    KeyA: "moveLeft",
    KeyD: "moveRight",
    Space: "jump",
    Digit1: "dirt",
    Digit2: "grass",
    Digit3: "glass",
    Digit4: "wood",
    Digit5: "log",
  };
  return keyActionMap[key];
}
export const useKeyboard = () => {

 // Key 입력에 대한 상태를 관리하기 위한 State
  const [actions, setActions] = useState({
    moveForward: false,
    moveBackward: false,
    moveLeft: false,
    moveRight: false,
    jump: false,
    dirt: false,
    grass: false,
    glass: false,
    wood: false,
    log: false,
  });

  // Key 입력이 발생하면 해당 Key에 대응되는 actions에 state를 true로 변경
  const handleKeyDown = useCallback((e) => {
    const action = actionByKey(e.code);
    if (action) {
      setActions((prev) => {
        return {
          ...prev,
          [action]: true,
        };
      });
    }
  }, []);

// Key 해제가 발생하면 해당 Key에 대응되는 actions에 state를 false로 변경
  const handleKeyUp = useCallback((e) => {
    const action = actionByKey(e.code);
    if (action) {
      setActions((prev) => {
        return {
          ...prev,
          [action]: false,
        };
      });
    }
  }, []);

  // Key 이벤트를 반영
  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);
    document.addEventListener("keyup", handleKeyUp);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      document.removeEventListener("keyup", handleKeyUp);
    };
  }, [handleKeyDown, handleKeyUp]);
  return actions;
};

이번에는 threeJs 관련된 사항은 없기 때문에 자세한 설명은 생략하겠다. 사용자의 Key 이벤트가 발생하면, 해당 Key의 종류를 판별해 사전에 명시한 keyActionMap의 값을 반환하고, 해당 값을 기준으로 actions state를 true, false를 전환한다. 즉, 특정 키가 눌리면, 해당 key에 대응되는 state를 true로 전환하고, keyup(키가 해제) 되면 해당 key에 대응되는 state를 false로 전환한다.

사용자 input에 대한 처리가 끝났으니 실제로 해당 hook을 가져와 반영을 해보자 src/components/에 Player를 다음과 같이 수정하자

// src/components/Player.js
import { useEffect, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useSphere } from "@react-three/cannon";
import { Vector3 } from "three";
import { useKeyboard } from "../hooks/useKeyboard"; // + 만들어 둔 hook을 추가하자
const JUMP_FORCE = 4; // + Player JUMP 발생시 적용할 힘의 값

export const Player = () => {
  const { camera } = useThree();
  const [ref, api] = useSphere(() => ({
    mass: 1,
    type: "Dynamic",
    position: [0, 1, 0],
  }));


  const vel = useRef([0, 0, 0]);
  useEffect(() => {
    api.velocity.subscribe((v) => (vel.current = v));
  }, [api.velocity]);

  const pos = useRef([0, 0, 0]);
  useEffect(() => {
    api.position.subscribe((p) => (pos.current = p));
  }, [api.position]);

  useFrame(() => {
    camera.position.copy(
      new Vector3(pos.current[0], pos.current[1], pos.current[2])
    );

    // + 가져온 actions hook에서 jump의 값이 true인 경우(key down이 발생한 경우) 실행
    if (actions.jump) {
      // Player의 속도값 중 y축의 값 즉, 높이를 JUMP_FORCE = 4 만큼 적용시킨다.
      api.velocity.set(vel.current[0], JUMP_FORCE, vel.current[2]);
    }

  });
  return <mesh ref={ref}></mesh>;
};

모든 구성이 끝났다면 적용시켜 확인해보자

space를 누르는 순간 Player가 성공적으로 점프를 한다. 다만 한가지 문제가 있다면, Space를 연타해서 누르는 만큼 점프가 멈추지 않고 계속 상위로 올라간 다는 것이다. 우리는 현재 Key input 값이 true인지만 확인하고 true라면 지속적으로 속도값이 update되기 때문이다.

연속적인 jump를 방지하기 위해 Player.js를 다시 수정해주자.

// src/components/Player.js
import { useEffect, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useSphere } from "@react-three/cannon";
import { Vector3 } from "three";
import { useKeyboard } from "../hooks/useKeyboard";
const JUMP_FORCE = 4;

export const Player = () => {
  const actions = useKeyboard();
  const { camera } = useThree();
  const [ref, api] = useSphere(() => ({
    mass: 1,
    type: "Dynamic",
    position: [0, 1, 0],
  }));

  const vel = useRef([0, 0, 0]);
  useEffect(() => {
    api.velocity.subscribe((v) => (vel.current = v));
  }, [api.velocity]);

  const pos = useRef([0, 0, 0]);
  useEffect(() => {
    api.position.subscribe((p) => (pos.current = p));
  }, [api.position]);

  useFrame(() => {
    camera.position.copy(
      new Vector3(pos.current[0], pos.current[1], pos.current[2])
    );

    // + if 제약조건에 Math.abs(vel.current[1]) < 0.05를 추가하자
    if (actions.jump && Math.abs(vel.current[1]) < 0.05) {
      api.velocity.set(vel.current[0], JUMP_FORCE, vel.current[2]);
    }
  });
  return <mesh ref={ref}></mesh>;
};

만약 속도값이 올라가든(+) 내려가든(-) 절대값(Math.abs)을 기반으로 0.05 미만인 경우에만 JUMP_FORCE 속도값을 적용시켜준다. 물론 점프 후 상공에서 속도값이 정지하는 정확한 타이밍에 space바를 누른다면 계속 상승하겠지만 어느정도는 상쇄했다.

이제는 Player에 움직임을 적용할 차례이다. Player.js를 다음과 같이 수정해보자

// src/components/Player.js
import { useEffect, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import { useSphere } from "@react-three/cannon";
import { Vector3 } from "three";
import { useKeyboard } from "../hooks/useKeyboard";
const JUMP_FORCE = 4;
const SPEED = 4; // + 이동 SPEED를 위해 추가
export const Player = () => {
  const { moveBackward, moveForward, moveLeft, moveRight, jump } =
    useKeyboard(); // + 기존에 actions로 통칭되던 요소를 개별요소를 직접 다 가져오도록 변경
  const { camera } = useThree();
  const [ref, api] = useSphere(() => ({
    mass: 1,
    type: "Dynamic",
    position: [0, 1, 0],
  }));

  const vel = useRef([0, 0, 0]);
  useEffect(() => {
    api.velocity.subscribe((v) => (vel.current = v));
  }, [api.velocity]);

  const pos = useRef([0, 0, 0]);
  useEffect(() => {
    api.position.subscribe((p) => (pos.current = p));
  }, [api.position]);

  useFrame(() => {
    camera.position.copy(
      new Vector3(pos.current[0], pos.current[1], pos.current[2])
    );
    // + 여기서부터 새로 추가될 코드들

    const direction = new Vector3();

    // z(정면)축 기준으로 이동 계산
    // 만약 앞+뒤가 동시에 눌리면 -를 통해 값을 0으로 만들어 이동하지 않음
    const frontVector = new Vector3(
      0,
      0,
      (moveBackward ? 1 : 0) - (moveForward ? 1 : 0)
    );

    // x축 기준 이동 계산
    const sideVector = new Vector3(
      (moveLeft ? 1 : 0) - (moveRight ? 1 : 0),
      0,
      0
    );

    direction
      .subVectors(frontVector, sideVector)
      .normalize()
      .multiplyScalar(SPEED)
      .applyEuler(camera.rotation);

    // 이동 속도를 반영
    api.velocity.set(direction.x, vel.current[1], direction.z);
    // 여기까지 추가!

    // 아래 if 조건에서 기존에 actions.jump를 그냥 jump로 대체
    if (jump && Math.abs(vel.current[1]) < 0.05) {
      api.velocity.set(vel.current[0], JUMP_FORCE, vel.current[2]);
    }
  });
  return <mesh ref={ref}></mesh>;
};

새롭게 subVectors, normalize, multiplyScalar, applyEuler 등이 보인다. 하나씩 알아보도록 하자 subVectors는 2개의 Vector3(a와 b)를 인자로 받아 현재 Vector를 a-b의 Vector로 설정한다. 즉 우리는 앞뒤(frontVector) 움직임과 양옆(sideVector)를 움직임을 같이 고려해 대각선의 Vector 이동을 계산하기 위해서 사용한다.

normalize는 현재 Vector를 unit vector로 변경해준다. Vector는 좌표를 나타내기도 하지만, 방향을 나타내기도 한다. 우린 frontVector, sideVector의 subVectors를 통해 Vector의 방향을 가지게 되었다. unit vector는 길이가 1인 vector를 뜻하며, normalize를 통해 우리의 방향을 가진 Vector의 길이는 1이 되는 것이다.

multiplyScalar는 현재 vector에 scalar 값을 곱하는데, vector는 크기와 방향을 가지고, scalar는 방향이 없이 크기만 가지고 있다. 이는 속도(velocity)와 속력(speed)의 차이로, 우리는 SPEED = 4 를 통해 4의 값을 넘겨줌으로, 현재 방향이 계산된 Vector에 4의 속력을 곱해주는 개념이다.

applyEuler는 Euler 객체를 Quaternion으로 변환하고 현재 Vector에 Euler 변화를 적용시킨다. Euler, Quaternion 모두 3D 변환에서 회전을 표현하는 방식이다. Euler 각도는 x,y,z의 3개 축을 기준으로 회전시키는 각도계를 의미한다.

다만 회전 중 같은 방향으로 오브젝트의 두 회전 축이 겹치는 짐벌락 현상이 발생하는 문제가 존재하고, 그 한계를 보완하기 위해 벡터(x,y,z)에 스칼라(w)를 더한 Quaternion이 등장했다. 이 부분은 복잡하고 내 지식이 미흡하기에 간단히 넘어가자면, 우리가 이동을 위해 계산한 Vector에 현재 camera의 회전값을 적용시키는 것으로 이동시 회전 정보를 반영시킨다.

설명이 좀 길어졌으니 이제 실행을 해봐서 테스트를 해보자 별다른 사진은 첨부하지 않았지만, w,a,s,d를 통해서 사용자의 위치를 이동시킬 수 있을 것이다. 다만 우리가 방금 이야기한 camera의 회전값은 적용이 되지 않았는데, camera에 회전 이벤트가 존재하지 않기 때문이다.

이제 Player에 마우스기반 1인칭 뷰를 추가해보자

먼저 src/components/ 경로에 FPV.js 파일을 생성하고 다음과 같이 구성하자

// src/components/FPV.js
import { PointerLockControls } from "@react-three/drei";
import { useThree } from "@react-three/fiber";

export const FPV = () => {
  const { camera, gl } = useThree();

  return <PointerLockControls args={[camera, gl.domElement]} />;
};

또한 새로 추가된 FPV를 반영하기 위해 App.js를 열어 코드를 추가하자

// src/App.js
import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei";
import { Physics } from "@react-three/cannon";
import { Ground } from "./components/Ground";
import { Player } from "./components/Player";
import { FPV } from "./components/FPV"; // + 컴포넌트 추가

function App() {
  return (
    <>
      <Canvas>
        <Sky sunPosition={[100, 100, 20]} />
        <ambientLight intensity={0.5} />
        <FPV /> // + 물리적 영향을 받는 요소가 아니기에 Physics 외부에 추가
        <Physics>
          <Player />
          <Ground />
        </Physics>
      </Canvas>
    </>
  );
}

export default App;

다시 FPV.js로 돌아가 주요 요소에 대해서 알아보자 useThree를 통해 가져온 gl은 Renderer를 참조하는 prop으로 threeJs에 WebGLRenderer type을 기반으로 한다. 추후에 PointerLockControls를 통해 인자로 넘겨지는 gl.domElemnet는 Renderer가 출력을 그리는 canvas다

PointerLockControls은 drei에 제공되는 Control 방식 중, 마우스 포인터를 잠근채로 마우스로 컨트롤을 하는 방식이다. drei의 control들은 ThreeJs의 control을 참조함으로 ThreeJs의 PointerLockControls 과 FirstPersonControls 문서를 첨부하는 것으로 Props에 대한 설명을 생략하겠다.

모든 구성이 끝났다면 우리는 마우스 회전에 따라 시야가 회전하는 Player 컨트롤을 가지게 된다. 하지만 조준점이 없으면 허전하니 조준점을 간단히 추가해보자

// src/App.js
import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei";
import { Physics } from "@react-three/cannon";
import { Ground } from "./components/Ground";
import { Player } from "./components/Player";
import { FPV } from "./components/FPV";

function App() {
  return (
    <>
      <Canvas>
        <Sky sunPosition={[100, 100, 20]} />
        <ambientLight intensity={0.5} />
        <FPV />
        <Physics>
          <Player />
          <Ground />
        </Physics>
      </Canvas>
      <div className="absolute centered cursor">+</div> // + 간단한 조준점을 추가하자
    </>
  );
}

export default App;

조준점에 대한 CSS를 추가해야하니 src/index.css에 가장 아래에 다음과 같은 내용을 추가하자

.centered {
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}
.cursor {
  color: white;
}

드디어 Player 구성이 끝났다. 다음번에는 실제로 마인크래프트 블럭을 설치해보자

먼저 images 폴더에 기본 제공되는 images.js를 열어보자

// src/images/images.js
import dirtImg from './dirt.jpg';
import grassImg from './grass.jpg';
import glassImg from './glass.png';
import logImg from './log.jpg';
import woodImg from './wood.png';

const images = {
    dirtImg,
    grassImg,
    glassImg,
    woodImg,
    logImg,
}

export default images

images라는 이름으로 export 되고있는 코드 구성을 좀더 단순하게 변경해보자

// src/images/images.js
// 내 환경에서는 ESLint를 사용하기에 기존 '으로 구성된 문자열이 "으로 변경됨(필수는 아님)
import dirtImg from "./dirt.jpg";
import grassImg from "./grass.jpg";
import glassImg from "./glass.png";
import logImg from "./log.jpg";
import woodImg from "./wood.png";

export { dirtImg, grassImg, glassImg, woodImg, logImg }; // images라는 통합된 이름 대신 구성요소를 개별로 분할

image 파일들이 export 되었다면 images 폴더에 textures.js 파일을 생성해주고 다음과 같이 구성하자

// src/images/textures.js
import { TextureLoader } from "three"; // 이미지 파일을 Texture로 변환하기 위한 기능
import { dirtImg, logImg, glassImg, grassImg, woodImg } from "./images";

const dirtTexture = new TextureLoader().load(dirtImg); // load()를 호출해 이미지를 할당하고 만들어진 texture 결과를 변수에 할당
const logTexture = new TextureLoader().load(logImg);
const grassTexture = new TextureLoader().load(grassImg);
const glassTexture = new TextureLoader().load(glassImg);
const woodTexture = new TextureLoader().load(woodImg);
const groundTexture = new TextureLoader().load(grassImg);

export {
  dirtTexture,
  logTexture,
  grassTexture,
  glassTexture,
  woodTexture,
  groundTexture,
};

TextureLoader를 통해 각 Texture 변수들에는 각각의 이미지를 활용한 텍스쳐가 담겨있다. 텍스쳐를 생성하고, 이 텍스쳐를 활용한 지면(Ground)을 만들어보자

src 경로에 components 폴더를 만들고 Ground.js 파일을 생성한뒤 다음과 같이 구성하자

import { usePlane } from "@react-three/cannon"; // 평면을 구성하기 위한 기능
import { groundTexture } from "../images/textures";

export const Ground = () => {
  // usePlane을 통해 평면을 구성하고 ref를 통해 접근한다.
  const [ref] = usePlane(() => ({
    rotation: [0, 0, 0], // 평면의 기울기
    position: [0, 0, 0], // 평면의 위치값
  }));
  return (
    // 다음에 mesh, planeBufferGeometry, meshStandardMaterial는 three-types.d.ts에 정의되어 있다.
    <mesh ref={ref}> //mesh는 3D 화면을 구성하는 물체이며 ref를 통해 cannon을 통해 구성한 평면의 물리적인 속성을 적용한다.
    // 물체(mesh)는 부피(Geometry)와 질감(Material)의 정보로 구성된다.
      <planeBufferGeometry attach="geometry" args={[100, 100]} /> 
      <meshStandardMaterial attach="material" map={groundTexture} />
    </mesh>
  );
};

모든것을 code에서 주석으로 설명하는 대신 중요 구성요소에 대해서 별도로 진행하고자 한다. 먼저 usePlane에 대해서 알아보자 cannon 라이브러리 ReadMe를 참조하면, API에 대해 명시가 되어있다. API 링크 API에는 반환값이 API로 표시되어 있기에 react-three-cannon에 명시되어 있는 usePlane 선언부를 가져와보자

// react-three-cannon/src/hooks.ts
export function usePlane<O extends Object3D>(
  fn: GetByIndex<PlaneProps>,
  fwdRef?: Ref<O>,
  deps?: DependencyList,
) {
  return useBody('Plane', fn, () => [], fwdRef, deps)
}

usePlane은 함수를 인자로 받으며, 해당 구성은 PlaneProps를 따른다. PlaneProps는 @pmndrs/cannon-worker-api package로부터 import 되었다.

export type PlaneProps = BodyProps

PlaneProps는 BodyProps를 interface 형식으로 export한 개념이며, 실질적인 타입은 다음과 같다.

export type BodyProps<T extends any[] = unknown[]> = 
  Partial<AtomicProps> &
  Partial<VectorProps> & {
    args?: T
    onCollide?: (e: CollideEvent) => void
    onCollideBegin?: (e: CollideBeginEvent) => void
    onCollideEnd?: (e: CollideEndEvent) => void
    quaternion?: Quad
    rotation?: Triplet
    type?: 'Dynamic' | 'Static' | 'Kinematic'
  }

우리가 넘기고자 했던 rotation에 대한 정보를 받고, position 정보에 대해서는 Partial<VectorProps> 내부에 선언되어 있다. 이러한 과정은 지금 중요한건 아니지만 readMe 상으로는 간략한 정보만 제공되고 상세 document가 안보였기에 잠시 구조를 알아보는 연습을 했다 지금은 간단히 개념만 이해하고 추가로 threeJS 자체에 대한 공부가 선행이 필요할 것 같다.

다음으로 mesh는 실제 3D 환경에서 구현될 물체를 나타낸다. ref를 연결해 cannon을 통한 평면의 물리적 정보를 연결시켜 주었고 추가로 부피(Geometry)와 질감(Material)의 정보를 구성한다. planeBufferGeometry과meshStandardMaterial은 모두 threeJS document를 통해 그 구성을 확인 할 수 있다. threeJS 코드를 확인하면 planeBufferGeometry에 대해 다음과 같이 명시되어있다.

class PlaneBufferGeometry extends PlaneGeometry {
    constructor(width, height, widthSegments, heightSegments) {
        console.warn('THREE.PlaneBufferGeometry has been renamed to THREE.PlaneGeometry.');
        super(width, height, widthSegments, heightSegments);
    }

} // r144

threeJs document를 통해 PlaneGeometry에 대한 내용을 확인해보자

생성자를 통해 받는 인자값을 확인할 수 있으며 우리가 넘겨준 값은 [100,100]으로 각각 width(100)와 height(100)를 구성한다는 것을 알 수 있다. 즉 물체의 크기 100x100(폭x높이)의 구성을 가지게 된다.

MeshStandardMaterial에 대해서는 다음과 같이 Object를 파라미터로 받는다. 우리가 넘겨준 Object는 TextureLoader를 통해 Texture로 변환된 grassImg(잔디)를 넘겨준다.

각각의 PlaneBufferGeometry과 meshStandardMaterial에는 attach라는 속성이 붙어있다. 해당 속성은 react-three-fiber를 통한 속성이며 document에서 확인해 볼 수 있다. 해당 부피와 질감 등의 객체들을 원형이 되는 부모에 연결하기 위한 속성이지만, material 및 geometry로 끝나는 객체는 자동으로 연결이 되기 때문에 생략이 가능하다.

설명이 좀 길어졌지만, 지면을 구성했으면 반영을 위해 App.js에 추가를 해줘야한다.

// src/App.js
import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei";
import { Physics } from "@react-three/cannon"; // 물리적 계산 범위을 지정하기 위한 요소
import { Ground } from "./components/Ground"; // 새롭게 만든 Ground 컴포넌트를 import

function App() {
  return (
    <>
      <Canvas>
        <Sky sunPosition={[100, 100, 20]} />
        <ambientLight intensity={0.5} /> // 물체에 적용될 광원에 밝기
        <Physics> // 물리적인 계산이 필요한 요소는 Physics 내부에 선언한다.
          <Ground /> // 지면은 플레이어 및 블록들과 물리적인 연산이 필요함으로 Physics 내부에 선언
        </Physics>
      </Canvas>
    </>
  );
}

export default App;

새롭게 추가된 코드 중에 ambientLight가 존재한다.

우리는 Sky를 통해 광원을 추가했지만, 광원이 물체에 작용하기 위해서는 빛의 속성을 정의해주어야 한다. AmbientLight는 빛의 방향과는 관계 없이 빛 자체가 물체에 반영되는 작용을 정의한다. 우리는 color에 대해서 지정하지 않고 intensity의 값을 0.5로 주었다. 즉 빛의 강도를 0.5를 기준으로 각 물체에 균일하게 적용시켜준다.

모든 소스코드를 작성하고 반영하면 우리는 다음과 같은 초록색 화면을 보게 된다. 우리가 원했던 것은 다음과 같은 잔디 이미지가 반영이 되는 것이다. 우리가 반영한 잔디 텍스쳐가 100x100에 사이즈에 맞춰서 확장이 되었기 때문에 텍스쳐를 반복시키는 작업이 필요하다. 다시 Ground.js로 돌아가 몇가지 소스코드를 추가해주자.

// src/components/Ground.js
import { usePlane } from "@react-three/cannon";
import { RepeatWrapping } from "three"; // + 텍스쳐 반복을 위해 추가
import { groundTexture } from "../images/textures";

export const Ground = () => {
  const [ref] = usePlane(() => ({
    rotation: [0, 0, 0],
    position: [0, 0, 0],
  }));

  // 아래 3줄의 코드를 추가
  groundTexture.wrapS = RepeatWrapping;
  groundTexture.wrapT = RepeatWrapping;
  groundTexture.repeat.set(100, 100);

  return (
    <mesh ref={ref}>
      <planeBufferGeometry attach="geometry" args={[100, 100]} />
      <meshStandardMaterial attach="material" map={groundTexture} />
    </mesh>
  );
};

groundTexture는 기존에new TextureLoader().load()를 통해 Texture화 되었다. 그렇기에 wrapS와 wrapT의 정보는 threeJs document에 Texture 항목에서 찾을 수 있다.

wrap은 텍스쳐가 래핑되는 방식을 지정하며, S는 수평이자 U, T는 수직이자 V를 뜻한다 UV는 2차원 그림을 3차원 모델로 만드는 UV 매핑을 의미한다. UV 매핑

우리가 지정한 RepeatWrapping은 wrapS와 wrapT를 정의하는 속성으로 텍스쳐를 무한대로 반복시키며 매핑을 하는 방식이다.

groundTexture.repeat.set(100, 100);

텍스쳐를 매핑하는 방식에 대해 정의를 했으면, repeat를 통해서 얼마나 반복을 진행할 것인지 알려준다. 우리는 Geometry를 통해 평면의 부피를 100x100으로 정의해 주었고 그 기준에 맞추어 텍스쳐의 반복을 수평 수직 100,100으로 진행해준다.

코드가 어떻게 동작하는지 실제로 확인해보자 이제 좀더 입체적인 패턴이 보이기 시작했다. 하지만 우리가 원한 네모 도트의 느낌보다는 약간 섞여버린 무언가가 나타났다.

다시 Ground.js로 돌아가 소스코드를 수정해보자

// src/components/Ground.js
import { usePlane } from "@react-three/cannon";
import { NearestFilter, RepeatWrapping } from "three"; // + NearestFilter 추가
import { groundTexture } from "../images/textures";

export const Ground = () => {
  const [ref] = usePlane(() => ({
    rotation: [0, 0, 0],
    position: [0, 0, 0],
  }));

  groundTexture.magFilter = NearestFilter; // Filter를 추가
  groundTexture.wrapS = RepeatWrapping;
  groundTexture.wrapT = RepeatWrapping;
  groundTexture.repeat.set(100, 100);

  return (
    <mesh ref={ref}>
      <planeBufferGeometry attach="geometry" args={[100, 100]} />
      <meshStandardMaterial attach="material" map={groundTexture} />
    </mesh>
  );
};

새롭게 magFilter가 추가되었다. magFilter는 텍스쳐가 중첩되었을 때 샘플링 되는 방식으로 기본값은 4개의 가까운 픽셀을 이용해 보간된다. NearestFilter를 사용하면 가장 가까운 텍스쳐 요소의 값을 반환한다. 그 결과는 다음과 같다. 좀더 자연스러운 픽셀이 표현되었고, 이것으로 지면이 구성되었다. 하지만 우리는 지면을 정면으로 마주보고 있는데, 평면 지면을 위해서 우리는 지면을 회전시켜야한다.

Ground.js의 소스코드를 수정해보자

// src/components/Ground.js
import { usePlane } from "@react-three/cannon";
import { NearestFilter, RepeatWrapping } from "three";
import { groundTexture } from "../images/textures";

export const Ground = () => {
  const [ref] = usePlane(() => ({
    rotation: [-Math.PI / 2, 0, 0], // rotation 값을 수정해 기울기를 조절하자
    position: [0, 0, 0],
  }));

  groundTexture.mapFilter = NearestFilter;
  groundTexture.wrapS = RepeatWrapping;
  groundTexture.wrapT = RepeatWrapping;
  groundTexture.repeat.set(100, 100);

  return (
    <mesh ref={ref}>
      <planeBufferGeometry attach="geometry" args={[100, 100]} />
      <meshStandardMaterial attach="material" map={groundTexture} />
    </mesh>
  );
};

각도를 구할때 기준점은 π(파이)를 사용한다. π/2 는 90도, π는 180도 로 계산할 수 있다. 지면을 회전시킬때, 우리는 x 축을 기준으로 한다. 즉 우리가 정면에서 바라볼때 x축의 각도를 조절하면 앞으로 넘어지거나 뒤로 넘어가는 형식으로 회전할 것이다. 다만 우리는 앞으로 넘어져 뒤집어 지기 보다는, 우리가 보는 그대로 뒤로 넘어져 깔리기를 원한다. 그러니 Math.PI에 -를 주고 /2로 나눠주자 그럼 지면은 뒤로 90도 만큼 누울 것이다. 결과를 보면 지면이 사라진 것처럼 보이지만, 그저 회전을 했을 뿐 지면이라는 요소는 존재한다. 만약 각도를 -Math.PI / 4 정도로 살짝 덜 기울게 한다면 우리는 결과를 볼 수 있다.

이것으로 지면은 끝났다. 다음은 Player에 대한 처리를 진행해보자.

아래의 이미지가 우리가 처음 프로젝트를 실행시키면 보게 될 화면이다.

// App.js
import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <>
      <div>Outside Canvas</div>
      <Canvas>
      </Canvas>
    </>
  );
}

export default App;

다양한 구성요소를 보유하고있는 drei 라이브러리에서는 광원과 하늘을 자연스럽게 표현해주는 Sky 라는 구성요소를 가지고 있다.

<Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} {...props} />

방식으로 사용하며 App.js를 열고 코드를 다음과 같이 수정하자

import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei"; // + drei 라이브러리에 Sky 구성요소를 가져오자

function App() {
  return (
    <>
      // - 기존 <div>Outside Canvas</div>는 지워주자
      <Canvas>
        <Sky sunPosition={[100, 100, 20]} /> // 광원의 위치를 sunPosition을 통해 잡아준다.
      </Canvas>
    </>
  );
}

export default App;

실행시 화면에는 광원과 함께 하늘색의 그라데이션이 표현이 된다. 다음은 Textures와 images를 작업해보자.

!youtube[qpOZup_3P_A]

Demo Starting Code 완성코드

영상의 챕터를 따라서 다음의 듀토리얼 기능을 하나씩 완수해 나갈 수 있다. Boilerplate Sky Textures and images Ground Player Keyboard inputs Movement First person view Gravity State management Cubes Adding cubes Removing cubes Cube type selector Save world in localstorage Hover state on cubes Build a house

Starting Code 링크를 참조해 git 소스코드를 받으면 다음과 같이 구성이 되어있다. 마인크래프트의 블록을 표현하기 위한 images들이 존재하며, package.json을 참조하면 다음과 같은 라이브러리 구성을 가지고 있다.

threeJS는 WebGL을 사용해 웹브라우저에서 애니메이션 3D 컴퓨터 그래픽을 만들고 표시하는데 사용되는 Javascript 라이브러리이다.

조금 생소한 것이 있다면 아마 nanoid, zustand일 것이다. nanoid는 특정 요소에 문자열로 구성 된 식별자를 지정하기 위해 고유 ID를 자동 생성해주는 라이브러리다. zustand는 전역 상태 관리를 위한 라이브러리다. 이번 프로젝트에서는 두 라이브러리가 중요한 역할을 하지는 않으니 넘어가고 react-three 라이브러리에 대해서 설명하고자 한다. react-three/fiber: threejs를 위한 React 렌더러이다. threeJs 연관 컴포넌트를 리액트 state, hooks과 props를 참조하여 사용 할 수 있도록 도와주며, react 환경에서 threeJs를 통한 3D 모델링 및 애니메이션을 만드는 과정을 최적화 해준다. react-three/drei: react-three/fiber에 대한 도우미 라이브러리로, 3D 환경에서 주로 사용하는 기능이나 유용한 일반 구성 요소(또는 기능)을 모아둔 라이브러리다. react-three/cannon: web에서 경량화된(Lightweight) 3D 물리학을 적용시키기 위한 라이브러리다. 즉, threeJs 환경에서 물리 엔진을 담당하며 충돌 감지, 좀더 다양한 형태, 접촉, 마찰과 제약(제동)을 표현하기 위해 사용한다.

라이브러리에 대한 설명은 간단히 진행하고 실제로 강의 영상을 따라서 사용하는 기술별로 설명을 진행할 예정이다. 다음으로 넘어가기 전에 받은 Starting Code 환경에서 npm install을 사용해 필요한 패키지를 다운받고 npm run start를 통해서 프로젝트를 실행시켜 보자.