눈으로 개발하는 블로그

파이썬 장고 사이트 국제화, 시간 설정 - LANGUAGE_CODE, TIME_ZONE, USE_I18N, USE_TZ

carrotweb — Mon, 4 Nov 2024 02:51:36 +0900

장고를 처음 실행하면 영어로 사이트가 보입니다.

사이트에 표시되는 언어를 영어에서 한국어로 변경하고 싶을 경우에는 LANGUAGE_CODE(언어 코드)를 변경하면 됩니다.

Internationalization(국제화) 설정

config 폴더에 있는 settings.py 파일에서 internationalization(국제화) 영역에 있는 LANGUAGE_CODE를 'en-us'에서 'ko-kr'로 변경하면 됩니다.

# 언어 - 한국어
LANGUAGE_CODE = 'ko-kr'

그러면 사이트가 한국어로 표시됩니다.

장고가 제공하는 메인 페이지는 myenv(가상환경) > Lib > site-packages > django > views > templates 폴더에 있는 default_urlconf.html 파일입니다.

메인 페이지(default_urlconf.html)를 보면 상단에 load 템플릿 태그가 있습니다.

{% load i18n %}

이는 internationalization(국제화)를 로드하여 템플릿 페이지에서 번역된 문장열을 사용하겠다는 것입니다.

여기서, i18(또는 대문자로 I18N)이 무슨 단어이기에 국제화라는 걸까요?

i18n은 internationalization의 첫 번째 단어 i부터 끝단어 n사이에 18개의 문자가 있는 것을 합처서 i18n으로 약어를 만든 겁니다.

i nternationalizatio n
  ------------------
                  18

i18n

반대로 localization(지역화 또는 현지화)는 무슨 단어일까요?

네, 예상하신 대로 l10n(또는 대문자로 L10N)입니다.

l ocalizatio n
  ----------
          10

l10n

템플릿 페이지에서 internationalization(국제화)로 번역된 문자열을 사용하고 싶을 때는 translate 템플릿 태그를 사용하면 됩니다.

메인 페이지(default_urlconf.html)처럼 번역된 문자열을 사용하고 싶은 문자열마다 translate 템플릿 태그를 사용하면 됩니다.

<title>{% translate "The install worked successfully! Congratulations!" %}</title>

그럼 번역된 문자열들은 어디에 있을까요?

번역된 문자열들은 myenv(가상환경) > Lib > site-packages > django > conf > locale 폴더에 언어 코드별로 있습니다.

한국어로 번역된 문자열들은 myenv(가상환경) > Lib > site-packages > django > conf > locale > ko > LC_MESSAGES 폴더에 있는 django.po 파일입니다.

원문과 번역문은 msgid와 msgstr로 구성되어 있습니다.

msgid "The install worked successfully! Congratulations!"
msgstr "성공적으로 설치되었습니다! 축하합니다!"

msgid는 translate 템플릿 태그에 있는 문자열입니다.

{% translate "The install worked successfully! Congratulations!" %}
              -------------------------------------------------
                                                          msgid

msgstr은 번역된 문자열입니다.

만약, 국제화를 사용하고 싶지 않을 경우에는 config 폴더에 있는 settings.py 파일에서 internationalization(국제화) 영역에 있는 USE_I18N를 False로 하면 됩니다.

# 국제화를 사용하지 않음
USE_I18N = False

이러면 템플릿 페이지에 있는 문장이 그대로 나옵니다.

우리는 관리자 페이지를 한국어로 표시할 것이기 때문에 USE_I18N은 True로 변경하지 않을 것입니다.

국제화와 번역에 대한 더 자세한 내용 장고 문서 사이트를 참고하시기 바랍니다. (https://docs.djangoproject.com/en/5.1/topics/i18n/, https://docs.djangoproject.com/en/5.1/topics/i18n/translation/)

템플릿 페이지에서 사용할 국제화 생성에 대해서 다음에 앱을 만들고 템플릿 페이지를 만들 때 다시 설명하도록 하겠습니다.

시간 설정

장고는 기본적으로 TIME_ZONE은 UTC(Universal Time Coordinated, 협정 세계시)으로 되어 있습니다.

config 폴더에 있는 settings.py 파일에서 internationalization(국제화) 영역에 있는 TIME_ZONE이 UTC으로 설정되어 있습니다.

TIME_ZONE = 'UTC'

그럼 한국 시간으로 표시하려면 어떻게 해야 할까요?

TIME_ZONE를 Asia/Seoul로 변경하면 됩니다.

# 시간 - 한국
TIME_ZONE = 'Asia/Seoul'

그럼 한국 시간으로 시간이 표시됩니다.

여기서 주의할 점!

데이터베이스에 저장될 때는 UTC로 저장되는 겁니다.

단지 데이터베이스에서 데이터를 가져올 때만 한국 시간으로 변형되는 겁니다.

다음처럼, 현재 한국 시간이 2024년 11월 3일 오후 7시 39분 34초라면 데이터베이스에 저장될 때는 UTC로 변형되어 저장됩니다.

UTC로 저장되는 시간
datetime.datetime(2024, 11, 3, 10, 39, 34, tzinfo=datetime.timezone.utc)

한국 시간으로 처리된 시간
datetime.datetime(2024, 11, 3, 19, 39, 34, tzinfo=<DstTzInfo 'Asia/Seoul' LMT+9:00:00 STD>)

그렇기 때문에 데이터베이스에 저장된 시간은 한국 시간 기준보다 9시간이 느리게 저장이 됩니다.

UTC
Asia/Seoul = UTC + 9

그래서 시스템(서버) 시간이 한국 시간 기준일 경우 데이터베이스에 저장된 시간과 맞지 않아서 서버 프로그램에 개발에 문제가 될 수 도 있습니다.

그럼 데이터베이스에 저장되는 시간을 시스템 시간(한국 시간 기준)으로 하려면 어떻게 해야 할까요?

TIME_ZONE를 사용하지 않으면 됩니다. 그래서 USE_TZ를 False로 변경하면 됩니다.

# TIME_ZONE를 사용하지 않음
USE_TZ = False

TIME_ZONE를 사용하지 않기 때문에 데이터베이스에 저장된 시간은 시스템 시간(한국 시간 기준)이 됩니다.

USE_TZ = True --> UTC 시간으로 저장됩니다.
USE_TZ = False --> 시스템 시간으로 저장됩니다.

만약, 국제화를 사용하지 않고 시스템 시간(한국 시간 기준)을 기준으로 하고 싶을 경우에는 USE_I18N과 USE_TZ를 False로 설정하면 됩니다.

# 국제화를 사용하지 않음
USE_I18N = False

# TIME_ZONE를 사용하지 않음
USE_TZ = False

우리는 시스템 시간(한국 시간 기준)으로 저장할 것이 때문에 USE_TZ를 False로 설정합니다.

파이썬 장고 마이그레이션 - makemigrations, migrate, reversing migrations

carrotweb — Sun, 27 Oct 2024 22:21:31 +0900

장고 기반 프로젝트를 처음 실행하면 터미널(Terminal)에 다음과 같이 붉은색으로 마이그레이션(Migration)에 대한 경고를 보여줍니다.

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

번역하면 적용되지 않은 마이그레이션이 18개 있습니다. 당신의 프로젝트가 앱(admin, auth, contenttypes, sessions)에 대한 마이그레이션을 할 때까지 제대로 작동하지 않을 수 있습니다.

적용하려면 'python manage.py migrate'을 실행하세요.

경고가 발생한 이유는 장고 기반 프로젝트는 기본적으로 관리자 기능이 함께 제공되기 때문입니다. 그래서 관리자 앱(App)에 있는 모델(Model)들과 연동되는 테이블(Table)이 데이터베이스(Database)에 있어야 합니다.

장고 관리자 앱(admin, auth, contenttypes, sessions)은 어디에 있나요?

config 폴더에 있는 settings.py 파일에서 INSTALLED_APPS에 설정되어 있습니다.

관리자 앱들은 myenv(가상환경) > Lib > site-packages > django > contrib 폴더에 있습니다.

그리고 모델(model)들은 앱(admin, auth, contenttypes, sessions) 폴더에 있는 models.py 파일에 있습니다. (messages, staticfiles 앱에는 모델이 없습니다.)

4개의 앱에 있는 모델 클래스가 18개 있습니다. 그래서 마이그레이션 대상이 18개가 있다고 한 겁니다.

마이그레이션에 대한 내용 아래에서 자세히 다루겠습니다.

그럼 데이터베이스는 어디서 설정해야 할까요?

데이터베이스에 대한 설정은 config 폴더에 있는 settings.py 파일에서 DATABASES에 SQLite3로 설정되어 있습니다.

왼쪽 EXPLORER를 보면 db.sqlite3 파일이 추가된 것을 확인할 수 있습니다.

이 추가된 db.sqlite3 파일이 데이터베이스로 사용될 파일입니다.

SQLite3는 Python에 포함되어 있어 별도로 설치할 필요가 없습니다. 그래서 개발할 때 편리하게 사용할 수 있습니다.

만약, 데이터베이스를 MariaDB, MySQL, PostgreSQL로 변경하실 경우에는 settings.py 파일에서 DATABASES를 변경하고 싶은 데이터베이스로 변경하시면 됩니다.

그럼 마이그레이션을 통해 데이터베이스에 관리자 테이블들을 생성해 보겠습니다.

마이그레이션을 하기 위해서는 마이그레이션 파일(마이그레이션 클래스가 있는 파일)을 생성해야 합니다.

마이그레이션 클래스는 앱(app)에 모델(model)이 추가되거나 변경되었을 때 데이터베이스에 테이블을 추가, 수정, 삭제하거나 테이블의 컬럼을 추가, 수정, 삭제할 수 있게 해 줍니다.

모델이 추가되면 migrations.CreateModel
모델이 수정되면 migrations.AlterModelTable
모델이 삭제되면 migrations.DeleteModel
모델에 필드가 추가되면 migrations.AddField
모델에 필드가 수정되면 migrations.AlterField
모델에 필드가 삭제되면 migrations.RemoveField

마이그레이션 클래스에 대한 더 자세한 내용 장고 문서 사이트를 참고하시기 바랍니다. (https://docs.djangoproject.com/en/5.1/ref/migration-operations/)

예를 들어, 모델이 추가되면 마이그레이션 클래스의 오퍼레이션에 migrations.CreateModel 클래스로 테이블과 테이블의 필드를 추가할 수 있습니다. (admin의 LogEntry 모델에 대한 마이그레이션 파일입니다.)

예를 들어, 모델이 수정되면 마이그레이션 클래스의 오퍼레이션에 migrations. AlterField 클래스로 테이블의 필드를 수정할 수 있습니다. (auth의 Permission모델에 대한 마이그레이션 파일입니다.)

앱(App)에 모델(Model)이 있으면 반드시 모델에 대한 마이그레이션 클래스가 있어야 합니다.

하나의 마이그레이션 파일에는 앱에 있는 모델 수만큼 마이그레이션 클래스가 있어야 합니다.

그럼 마이그레이션 클래스를 직접 만들어야 할까요?

아닙니다. 직접 만들 수 있지만 장고에서는 마이그레이션 클래스를 자동으로 생성해 주는 makemigrations 명령어를 지원하고 있습니다.

makemigrations(메이크 마이그레이션)

마이그레이션 클래스를 생성해 주는 명령어인 makemigrations를 터미널(Terminal)에서 실행합니다.

python manage.py makemigrations {앱 이름}

(앱 이름}은 모델이 변경된 앱의 이름입니다.

(앱 이름}이 있으면 해당 앱에서만 추가되거나 변경된 모델이 있는지 확인해서 마이그레이션 클래스를 생성해 줍니다.

(앱 이름}이 없으면 전체 앱을 대상으로 추가되거나 변경된 모델이 있는지 확인해서 마이그레이션 클래스를 생성해 줍니다.

장고 관리자의 앱(admin, auth, contenttypes, sessions)에 대해 하나씩 실행할 수 있지만 전체 앱을 대상으로 실행하겠습니다.

python manage.py makemigrations

makemigrations를 실행하면 터미널(Terminal)에 No changes detected (감지된 변경이 없습니다.)라고 나옵니다.

왜 장고 관리지 앱에 대해 마이그레이션 클래스가 있는 파일이 생성되지 않았을까요?

마이그레이션 파일을 생성한 적이 없는 왜 변경된 게 없다고 할까요?

그 이유는 이미 장고 관리자 앱에는 마이그레이션 클래스가 있는 파일이 생성되어 있고 우리가 관리자 앱에 있는 모델을 수정한 적이 없기 때문입니다.

위에서 마이그레이션 클래스를 설명할 때 예시로 보여드린 화면을 보시면 django의 auth 앱에 migrations 폴더에서 마이그레이션 파일들이 있는 것을 볼 수 있습니다.

다음은 django의 contenttypes 앱에 migrations 폴더에 있는 마이그레이션 파일입니다.

위와 같이 앱에 모델이 있을 경우 makemigrations를 실행하면 앱에 있는 migrations 폴더에 마이그레이션 파일이 생성됩니다.

예를 들어, test라는 앱을 마이그레이션 한다면 test 앱에 있는 migrations 폴더에 0001_initial.py 파일이 생성됩니다.

python manage.py makemigrations test

test/ --> 앱 폴더
    migrations/ --> 마이그레이션 폴더 (앱 생성시 자동으로 생성됩니다.)
        __init__.py --> 초기화 파일 (파일에 내용은 없습니다. 앱 생성시 자동으로 생성됩니다.)
        0001_initial.py --> 처음 생성된 마이그레이션 파일

__init__.py 파일은 마이그레이션을 초기화하기 위해서 생성되는 파일입니다.

생선 된 마이그레이션 파일 명을 보면 앞에 0001_처럼 번호가 있는 것을 볼 수 있습니다.

이 번호는 makemigrations를 실행할 때 앱의 모델이 추가되거나 변경된 것이 있으면 자동으로 번호가 증가하여 마이그레이션 파일 명에 추가됩니다.

다음처럼, auth 앱은 처음 마이그레이션(0001_initial.py) 한 후 11번을 수정(0012_alter_user_first_name_max_length.py) 한 것을 알 수 있습니다.

이 번호는 또한 마이그레이션을 이전 상태로 변경하고 싶을 때 사용됩니다.

그럼 생성된 마이그레이션 파일을 통해 마이그레이션을 실행해 보겠습니다.

Migrate(마이그레이트)

마이그레이션을 실행해 주는 명령어인 migrate를 터미널(Terminal)에서 실행합니다.

python manage.py migrate {앱 이름} {마이그레이션 번호}

(앱 이름}은 마이그레이션을 할 앱의 이름입니다.

(앱 이름}이 있으면 해당 앱에서만 마이그레이션을 실행합니다.

(앱 이름}이 없으면 전체 앱을 대상으로 마이그레이션을 실행합니다.

(마이그레이션 번호}는 마이그레이션을 할 번호입니다.

(마이그레이션 번호}가 있으면 번호로 만들어진 마이그레이션 파일을 실행합니다. (Reversing Migrations - 이전 번호를 입력하면 이전 상태로 되돌아가게 됩니다.)

(마이그레이션 번호}가 없으면 전체 마이그레이션 파일을 실행합니다.

Reversing Migrations는 아래에서 설명드리겠습니다.

우리는 처음 실행하기 때문에 (앱 이름}과 (마이그레이션 번호}를 입력하지 않고 실행하겠습니다.

python manage.py migrate

실행 결과를 보면 장고 관리자의 앱(admin, auth, contenttypes, sessions)에 있는 마이그레이션 파일들이 실행된 것을 알 수 있습니다.

DBeaver로 db.sqlite3 파일을 오픈해 보면 장고 관리자 테이블들이 생성된 것을 확인할 수 있습니다.

Reversing Migrations(리버싱 마이그레이션, 마이그레이션을 이전 상태로 되돌리기)

다음처럼, test앱에서 3번의 마이그레이션을 실행했다고 가정하겠습니다.

test/
    migrations/
        __init__.py
        0001_initial.py
        0002_alter_user_name_max_length.py
        0003_alter_user_email_max_length.py

여기서 모델에 있는 메일의 길이가 수정할 필요가 없어졌다면 어떻게 해야 할까요?

모델에 있는 메일의 길이를 다시 이전 길이로 수정하고 다시 makemigrations를 실행하고 migrate를 실행합니다. (그럼 0004 마이그레이션 파일이 생성되고 실행됩니다.)

또는 이전 마이그레이션(0002)으로 되돌리고 0003 마이그레이션을 삭제합니다.

어떤 방식으로 해도 문제는 없습니다.

여기서는 이전 마이그레이션(0002)으로 되돌리고 0003 마이그레이션을 삭제해 보겠습니다.

마이그레이션을 0002번째로 되돌리기 위해서는 migrate를 실행할 때 test 앱과 0002 번호를 입력하면 됩니다.

python manage.py migrate test 0002

그럼 0002번째 마이그레이션으로 변경됩니다.

Operations to perform:
  Target specific migration: 0002_alter_user_name_max_length, from test
Running migrations:
  Rendering model states... DONE
  Unapplying test.0003_alter_user_email_max_length... OK

그러고 나서 0003_alter_user_email_max_length.py 파일을 삭제하면 됩니다.

마이그레이션 파일을 삭제할 때는 주의를 기울여야 합니다.

왜냐하면, 마이그레이션 파일은 이전 번호 마이그레이션에 의존하게 되어 있습니다.

그래서 중간에 있는 마이그레이션 파일은 임의로 삭제하면 안 됩니다.

다음처럼, auth 앱에 마지막 마이그레이션 파일을 보게 되면 dependencies에 "0011_update_proxy_permissions"과 의존하고 있는 것을 확인할 수 있습니다.

반드시 이전 번호로 Reversing Migrations 한 후에 마이그레이션 파일을 삭제하시길 바랍니다.

마이그레이션에 대한 더 자세한 내용 장고 문서 사이트를 참고하시기 바랍니다. (https://docs.djangoproject.com/en/5.1/topics/migrations/)

그럼 테스트로 auth 앱의 마이그레이션을 0011번으로 Reversing Migrations 한 후에 다시 0012번으로 마이그레이션 해보겠습니다.

python manage.py migrate auth 0011

python manage.py migrate auth 0012

파이썬 장고 설치 및 프로젝트 생성, 실행 - Installing Django, django-admin startproject, manage.py runserver

carrotweb — Sun, 20 Oct 2024 20:59:40 +0900

장고(Django)는 하이 레벨 파이썬 웹 프레임워크(high-level Python web framework)입니다.

웹 개발에 필요한 구성과 환경 설정들을 프레임워크가 처리해 주기 때문에 개발에 더 집중할 수 있습니다.

그리고 무료이며 오픈 소스입니다.

장고(Django)는 프런트엔드(사용자 대면)와 백엔드(데이터베이스 및 로직)를 모두 개발할 수 있는 풀 스택 프레임워크(Full Stack Framework)입니다.

Django에서 D가 묵음이기 때문에 "드장고"가 아닌 "장고"로 읽으시면 됩니다.

더 자세한 내용 장고 사이트를 참고하시기 바랍니다. (https://www.djangoproject.com)

장고 확인

현재 가상 환경에 장고가 설치되어 있는지 확인하기 위해서 Terminal(터미널)에서 다음과 같이 명령어를 실행합니다.

python -m django --version

저는 가상 환경에 장고가 아직 설치되어 있지 않아서 "No module named django(장고라는 모듈이 없습니다.)"라고 나옵니다.

그럼 가상 환경에 장고를 설치해 보겠습니다.

장고 설치

장고를 설치하기 위해 Terminal(터미널)에서 다음과 같이 명령어를 실행합니다.

pip install django=={버전}

현재 작성 당시 버전은 5.1.2입니다.

pip install Django==5.1.2

버전을 입력하지 않으면 현재 최신 버전으로 설치됩니다.

pip install django

장고는 다음처럼 버전에 대한 지원 연도를 알려주고 있습니다.

그래서 특정 연도에 지원이 되지 않는 버전을 사용하고 있을 경우 장고 버전을 업그레이드해야 합니다.

지원이 되지 않는다고 해서 사용할 수 없는 것은 아닙니다. 다만, 보안 관련 이슈나 오류에 대해 더 이상 지원하지 않을 뿐입니다.

더 자세한 내용 장고 사이트를 참고하시기 바랍니다. (https://www.djangoproject.com/download/)

저는 최신 버전을 설치하기 위해 버전을 입력하지 않았습니다.

pip install django

장고를 설치한 후 다시 버전을 확인해 보면 5.1.2이 설치된 것을 알 수 있습니다.

그리고 가상 환경 폴더(myenv)의 Lib 폴더를 보면 장고(django)와 관련 모듈(asgiref, sqlparse, tzdata)들이 설치되어 있는 것을 확인할 수 있습니다.

그럼 장고를 기반으로 하는 프로젝트를 만들어 보겠습니다.

프로젝트 생성

프로젝트 관리 파일(manage.py)과 프로젝트 패키지 파일(settings.py, urls.py, asgi.py, wsgi.py)들을 생성하기 위해 Terminal(터미널)에서 다음과 같이 명령어를 실행합니다.

django-admin startproject {이름} {디렉토리}

django-admin은 장고를 관리하는 명령입니다.

django-admin <command> [options]

django-admin startproject 명령은 프로젝트가 구동될 수 있게 구조를 생성해 줍니다.

{이름}은 프로젝트 패키지 파일들이 들어갈 폴더 이름입니다.

{디렉토리}는 프로젝트를 생성할 디렉터리입니다. (현재 디렉토리에서 생성할 경우 "."를 입력하고 다른 디렉토리로 생성할 경우 디렉토리를 입력하면 됩니다.)

더 자세한 내용 장고 문서 사이트를 참고하시기 바랍니다. (https://docs.djangoproject.com/en/5.1/ref/django-admin/#startproject)

저는 현재 폴더에 프로젝트 구조를 생성할 것이 때문에 "."를 입력하였고 프로젝트 패키지 파일들이 들어갈 폴더 이름은 "config"으로 입력하였습니다.

django-admin startproject config .

EXPLORER를 보면 PROJECT1 폴더에 config 폴더(프로젝트 패키지 파일들이 있는 폴더)와 manage.py(프로젝트 관리 파일)가 생성된 것을 확인할 수 있습니다.

그럼 프로젝트를 실행해 보도록 하겠습니다.

프로젝트 실행(개발 웹 서버 실행)

1. 파이썬에서 제공하는 개발 웹 서버로 프로젝트를 실행하기 위해 Terminal(터미널)에서 다음과 같이 명령어를 실행합니다.

python manage.py runserver

개발 웹 서버는 로컬 컴퓨터에서 실행되기 때문에 도메인이 127.0.0.1로 실행되고 포트를 입력하지 않으면 자동으로 8000으로 설정되어 실행됩니다.

더 자세한 내용 장고 문서 사이트를 참고하시기 바랍니다. (https://docs.djangoproject.com/en/5.1/ref/django-admin/#runserver)

2. 웹 브라우저에서 "http://127.0.0.1:8000/"를 입력합니다.

장고 프로젝트에서 제공하는 기본 페이지가 실행되는 것을 확인할 수 있습니다.

윈도우 파이썬 가상 환경 생성 - Python venv - Creation of virtual environments

carrotweb — Sun, 6 Oct 2024 18:28:31 +0900

파이썬은 프로젝트 별로 파이썬 환경이 독립될 수 있도록 가상 환경(virtual environments)을 제공하고 있습니다.

가상 환경을 생성하면 프로젝트 별로 다른 라이브러리와 버전을 다르게 설치하고 관리할 수 있게 됩니다.

왜 가상 환경을 생성해야 할까요? 그냥 필요한 라이브러리를 설치하면 안 될까요?

여러 프로젝트들이 동일한 환경에서 개발되면 문제가 없겠지만 여러 프로젝트들이 다르게 사용하는 라이브러리가 있거나 다른 라이브러리 버전이 있을 경우에는 문제 됩니다. 그래서, 프로젝트 별로 가상 환경을 생성하고 가상 환경에 라이브러리를 설치하면 이런 문제점들을 해결할 수 있습니다.

더 자세한 내용은 파이썬 문서를 참고하시기 바랍니다. (https://docs.python.org/3/library/venv.html)

(python 사이트 상단에 있는 Docs 클릭 > Python 3.12.7 documentation에서 Library reference 클릭 > The Python Standard Library에서 Software Packaging and Distribution에 있는 venv — Creation of virtual environments 클릭)

가상 환경은 파이썬 3.3에 추가된 기능입니다. (파이썬 3.3.0은 2012년 9월 29일에 릴리즈 되었기 때문에 오래전에 설치하지 않았다면 사용하는 데는 문제가 없을 겁니다.)

설치된 파이썬의 버전을 확인하기 위해서는 콘솔에서 다음과 같이 명령어를 실행합니다.

python --version

저는 Python 3.12.4가 설치되어 있습니다. (파이썬 저장 위치 : C:\workspaces\Python\python312)

현재 PC에 설치된 파이썬 라이브러리를 확인하기 위해서는 콘솔에서 다음과 같이 명령어를 실행합니다.

pip list

저의 PC에는 다른 라이브러리가 설치되어 있지 않습니다. (pip 버전이 24.2로 업그레이드되었다고 알려주네요. 아래에 있는 명령어를 실행하여 업그레이드를 해야겠습니다.)

pip는 파이썬 패키지를 설치하고 관리해 주는 패키지 관리 시스템입니다. (https://pypi.org/project/pip/)

pip는 파이썬 설치 프로그램에서 선택하여 설치할 수 있습니다. (기본적으로 pip는 체크되어 있습니다.)

가상 환경은 콘솔에서 생성할 수 있습니다. 그러나 저는 새로운 프로젝트를 위해 폴더를 생성하고 프로젝트에서 사용할 가상 환경을 생성하도록 하겠습니다. 그리고 개발 IDE로 Visual Studio Code를 사용하겠습니다.

가상 환경 생성

1. 프로젝트 폴더를 생성합니다. (저는 C:\workspaces\projects\project1 폴더를 생성하였습니다.)

2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하여 "C:\workspaces\projects\project1" 폴더로 이동하고 "폴더 선택" 버튼을 누르면 폴더가 오픈됩니다.

보안을 위해 Trust(신뢰) 확인 창이 나타납니다. "Yes, I Trust the authors" 버튼을 누릅니다. 그리고 Welcome 창은 닫습니다.

3. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭합니다. 그리고 가상 환경을 생성하기 위해 Terminal(터미널)에서 다음과 같이 명령어를 실행합니다.

python -m venv {가상 환경 이름 또는 경로를 포함한 가상 환경 이름}

저는 가상 환경 이름을 myenv(my environments)라고 하였습니다.

python -m venv myenv

가상 환경이 생성되면 project1 폴더에 myenv라는 폴더가 생성됩니다.

가상 환경 폴더 구조는 다음과 같습니다.

project1/
    myenv/ --> 가상 환경 풀더
        Lib --> 가상 환경에서 pip로 설치한 라이브러리들이 저장되는 폴더
        Scripts --> 가상 환경을 관리하는 스크립트가 있는 폴더

4. 생성된 가상 환경을 활성화하기 위해서는 myenv의 Scripts 폴더에 있는 activate를 Terminal(터미널)에서 실행해야 합니다.

cd myenv\Scripts                                                               
./activate

가상 환경이 활성화되면 가상 환경 이름인 (myenv)가 표시됩니다.

(myenv) PS C:\workspaces\projects\project1\myenv\Scripts>

이제 새로운 프로젝트를 위한 가상 환경이 생성되었습니다. (가상 환경이 활성화되어 있어야 pip로 설치한 라이브러리들이 가상 환경의 Lib 폴더에 저장이 됩니다.)

가상 환경의 파이썬의 버전을 확인해 보면 Python 3.12.4인 것을 알 수 있습니다.

그리고 설치된 파이썬 라이브러리를 확인하면 pip가 있는 것을 확인할 수 있습니다.

가상 환경을 비활성화하기 위해서는 myenv의 Scripts 폴더에 있는 deactivate를 Terminal(터미널)에서 실행해야 합니다.

deactivate

다른 버전의 파이썬으로 가상 환경 생성

저의 PC에는 다른 파이썬 버전인 3.11.1도 설치되어 있습니다. (파이썬 저장 위치 : C:\workspaces\Python\python311)

1. 프로젝트 폴더를 생성합니다. (저는 C:\workspaces\projects\project2 폴더를 생성하였습니다.)

2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하여 "C:\workspaces\projects\project2" 폴더를 오픈하였습니다.

3. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하고 가상 환경을 생성하기 위해 Terminal(터미널)에서 다음과 같이 명령어를 실행합니다.

py -{파이썬 버전} -m venv myenv

여러 버전의 파이썬이 설치되어 있으면 python 명령어 대신 py 명령어를 사용하여 버전 별로 실행해야 합니다.

저는 3.11 버전으로 가상 환경을 생성하였습니다.

py -3.11 -m venv myenv

4. 생성된 가상 환경을 활성화하기 위해서는 myenv의 Scripts 폴더에 있는 activate를 Terminal(터미널)에서 실행했습니다. 그리고 가상 환경의 파이썬의 버전을 확인해 보았습니다.

가상 환경이 다른 파이썬 버전으로 생성된 것을 확인할 수 있습니다.

py 명령어 대신 다른 파이썬 버전이 설치되어 있는 경로를 이용해서 가상 환경을 생성할 수도 있습니다.

C:\workspaces\projects\project2> C:\workspaces\Python\python311\python.exe -m venv myenv

py 명령어

여러 버전의 파이썬이 설치되어 있을 경우 py 명령어를 사용하여 버전 별로 파이썬을 실행할 수 있습니다.

콘솔에서 다음과 같이 명령어를 실행합니다.

py -h

설치되어 있는 버전으로 파이썬을 실행하기 위해서는 launcher-args(Launcher arguments)에 실행할 버전을 입력하면 됩니다.

py [launcher-args]

설치되어 있는 파이썬 버전인 3.11.1과 3.12.4를 py 명령어를 이용하여 실행하고 3.X 버전 중 마지막 버전으로 실행되게 하였습니다.

py -3.11
py -3.12
py -3

three.js 3D 모델을 glTF 파일로 다운로드하기(.glb or .gltf)

carrotweb — Sun, 29 Oct 2023 19:44:33 +0900

이어서 추출된 glTF 정보를 .glb 파일(바이너리) 또는 .gltf 파일(JSON)로 다운로드하여 저장할 수 있게 헤보겠습니다.

glTF 정보를 스크립트에서 다운로드하기 위해서는 URL.createObjectURL() 메서드를 사용하면 됩니다.

URL.createObjectURL() 메서드에 대한 영문 설명은 다음과 같습니다.

The URL.createObjectURL() static method creates a string containing a URL representing the object given in the parameter.

번역해 보면 URL.createObjectURL() 정적 메서드는 파라미터로 전달받은 객체를 가리키는 URL이 포함된 문자열을 생성합니다.

URL.createObjectURL(object)

object: File, Blob, MediaSource 객체입니다.

즉, File 객체 또는 Blob 객체 또는 MediaSource 객체를 URL로 접근할 수 있게 아래와 같이 Blob URL를 생성하여 리턴하게 됩니다.

blob:http://localhost:5173/c95eb15c-3c2d-4ca1-b327-8e25a8bfe73e

그리고 URL.createObjectURL() 정적 메서드를 사용할 때마다 새로운 Blob URL를 생성되기 때문에 생성된 Blob URL은 URL.revokeObjectURL() 정적 메서드를 사용하여 해제해줘야 합니다.

그러나 생성된 Blob URL를 해제하지 않아도 웹 브라우저가 unload(다른 경로로 이동하거나 웹 브라우저가 종료될 때)가 되면 웹 브라우저가 자동으로 해제해 줍니다.

추가적으로 URL.createObjectURL()와 URL.revokeObjectURL() 정적 메서드로 blob URL를 생성하고 해제하는 방법은 W3C의 Creating and Revoking a blob URL를 참고하시기 바랍니다.

URL.createObjectURL() 정적 메서드로 Blob URL를 생성하기 위해서는 먼저 glTF 정보를 Blob 객체로 만들어야 합니다.

Blob(Binary Large Object, 비랍/블랍)은 대용량의 바이너리로 저장된 객체입니다.

new Blob(array, options)

array: ArrayBuffer[] 또는 TypedArray[] 또는 DataView[] 또는 USVString(UTF-8로 인코딩 된 string[]) 또는 다른 Blob 배열 객체이거나 객체 또는 여러 개의 타입이 혼합된 배열 객체입니다.
options: 데이터의 type과 endings을 설정하는 옵셥입니다.

options은 다음과 같이 설정할 수 있습니다.

type: 저장될 데이터의 MIME 타입입니다. 기본값 ""(빈 문자열)
endings(transparent, native): array 타입이 USVString(UTF-8로 인코딩 된 string[])일 때 개행 문자("\n")를 사용 중인 OS에 맞춰서 개행 문자를 변환할지(native) 아니면 변환하지 않을지(transparent) 선택합니다. 기본값 transparent

그럼 추출된 glTF 정보를 Blob(Binary Large Object, 비랍/블랍)으로 만들고 Blob URL를 생성하여 파일로 다운로드해 보겠습니다.

1. 추출된 glTF 정보를 파라미터로 받아 바이너리 형식과 JSON 형식의 Blob 객체를 만드는 함수를 만듭니다.

바이너리 형식으로 변환하기 위해서 options의 type를 "application/octet-stream"으로 설정합니다.

// 바이너리 형식으로 변환
function downloadBinary(buffer) {
    const blob = new Blob([buffer], {type: 'application/octet-stream'});
    console.log("Blob:", blob);
}

JSON 형식으로 변환하기 위해서 추출된 glTF 정보를 JSON 문자열로 변환하고 options의 type를 "application/json"으로 설정합니다.

// JSON 형식으로 변환
function downloadJSON(buffer) {
    const blob = new Blob([JSON.stringify(buffer)], {type: 'application/json'});
    console.log("Blob:", blob);
}

2. 기존 ExportglTF() 함수에 downloadBinary()와 downloadJSON()를 추가합니다. glTF 정보가 ArrayBuffer[]이면 downloadBinary() 함수를 호출하고 그렇지 않으면 downloadJSON() 함수를 호출하게 합니다.

function ExportglTF() {
    // GLTF익스포트 생성
    const exporter = new GLTFExporter();

    // GLTF익스포트 옵션 - 바이너리 형식으로 추출
    const options = {
        binary: false
    };

    exporter.parse(
        box2,
        function (gltf) {
            if (gltf instanceof ArrayBuffer) {
                console.log("export gltf:", gltf);
                downloadBinary(gltf);
            } else {
                console.log("export gltf:", gltf);
                downloadJSON(gltf);
            }
        },
        function (error) {
            console.error("exporter error:", error);
        },
        options
    );
}

Controls에서 "Export" 버튼을 클릭하면 콘솔에 Blob 객체 정보가 출력됩니다.

만약 glTF 익스포트 옵션의 binry가 flase이면 JSON 형식으로 다음과 같이 콘솔에 출력됩니다.

// GLTF익스포트 옵션 - JSON 형식으로 추출
const options = {
    binary: false
};

3. 파일로 다운로드하기 위해서 Blob 객체를 파라미터로 받는 다운로드 함수를 만듭니다.

다운로드 URL를 생성하기 위해서 URL.createObjectURL() 메서드를 사용합니다.

// 다운로드
function download(blob) {
    const blobURL = URL.createObjectURL(blob);
    console.log(blobURL);
}

기존 downloadBinary()와 downloadJSON()에 다운로드 함수를 추가합니다.

// 바이너리 형식으로 변환
function downloadBinary(buffer) {
    const blob = new Blob([buffer], {type: 'application/octet-stream'});
    console.log("Blob:", blob);
    download(blob);
}

// JSON 형식으로 변환
function downloadJSON(buffer) {
    const blob = new Blob([JSON.stringify(buffer)], {type: 'application/json'});
    console.log("Blob:", blob);
    download(blob);
}

Controls에서 "Export" 버튼을 클릭하면 콘솔에 Blob URL이 출력됩니다.

blob:http://localhost:5173/b8c1b2f5-f4ee-4a9d-b286-7aed8af4dd47

만약 glTF 익스포트 옵션의 binry가 flase이면 JSON 형식으로 다음과 같이 Blob URL이 콘솔에 출력됩니다.

// GLTF익스포트 옵션 - JSON 형식으로 추출
const options = {
    binary: false
};

blob:http://localhost:5173/b86e8950-8d45-4b8c-8822-16703dc678c2

4. 생성된 Blob URL로 다운로드하기 위해서 A 태그를 생성하고 href 속성 값으로 Blob URL를 설정합니다. 그리고 생성된 A 태그를 페이지에 추가하고 click() 메서드로 A 태그를 클릭하여 다운로드하게 합니다. 다운로드 후 생성된 Blob URL를 해제하고 페이지에 추가된 A 태그를 삭제합니다.

// 다운로드
function download(blob) {
    const blobURL = URL.createObjectURL(blob);
    console.log(blobURL);
    // 다운로드를 하기위해 Blob URL로 A 태그 생성
    const link = document.createElement('a');
    link.href = blobURL;
    // 다운로드 파일 명
    link.download = "test.glb";
    // A 태그 추가
    document.body.appendChild(link);
    // A 태그를 클릭하여 다운로드
    link.click();
    // 다운로드 후 Blob URL 해제
    URL.revokeObjectURL(blobURL);
    // A 태그 삭제
    document.body.removeChild(link);
}

Controls에서 "Export" 버튼을 클릭하면 콘솔에 glTF 파일이 다운로드됩니다.

그럼 glTF 익스포트 옵션과 다운로드되는 파일 명을 변경할 수 있게 처리해 보겠습니다.

5. Controls에서 glTF 익스포트 옵션을 변경하고 다운로드 파일명을 변경할 수 있게 객체(exporter1)에 추가합니다.

const exporter1 = {
    ExportglTFFileName : 'test.glb',
    ExportglTFFilebinary : true,
    ExportglTFFunction : ExportglTF
};

그리고 glTF 익스포트 옵션의 binary를 exporter1의 ExportglTFFilebinary로 설정합니다.

function ExportglTF() {
    // GLTF익스포트 생성
    const exporter = new GLTFExporter();

    // GLTF익스포트 옵션 - 바이너리/JSON 형식으로 추출
    const options = {
        binary: exporter1.ExportglTFFilebinary
    };

    exporter.parse(
        box2,
        function (gltf) {
            if (gltf instanceof ArrayBuffer) {
                console.log("export gltf:", gltf);
                downloadBinary(gltf);
            } else {
                console.log("export gltf:", gltf);
                downloadJSON(gltf);
            }
        },
        function (error) {
            console.error("exporter error:", error);
        },
        options
    );
}

그리고 다운로드 함수에서 다운로드 파일명을 exporter1의 ExportglTFFileName으로 설정합니다.

// 다운로드
function download(blob) {
    const blobURL = URL.createObjectURL(blob);
    console.log(blobURL);
    // 다운로드를 하기위해 Blob URL로 A 태그 생성
    const link = document.createElement('a');
    link.href = blobURL;
    // 다운로드 파일 명
    link.download = exporter1.ExportglTFFileName;
    // A 태그 추가
    document.body.appendChild(link);
    // A 태그를 클릭하여 다운로드
    link.click();
    // 다운로드 후 Blob URL 해제
    URL.revokeObjectURL(blobURL);
    // A 태그 삭제
    document.body.removeChild(link);
}

그리고 Controls에 추가합니다.

folder2.add(exporter1, 'ExportglTFFileName');
folder2.add(exporter1, 'ExportglTFFilebinary');
folder2.add(exporter1, 'ExportglTFFunction').name('Export');

그리고 Controls에 ExportglTFFileName과 ExportglTFFilebinary가 추가됩니다.

6. ExportglTFFilebinary가 체크되면 ExportglTFFileName의 확장자를 ".glb"로 변경시키고 ExportglTFFilebinary가 체크되지 않으면 ExportglTFFileName의 확장자를 ".gltf"로 변경되게 함수를 만듭니다.

// 파일 저장 형식에 따른 파일 확장자 변경
function updatesglTFFileName() {
    let fileName = exporter1.ExportglTFFileName;
    const pos = fileName.lastIndexOf('.');
    if (pos > 0) {
        if (exporter1.ExportglTFFilebinary) {
            exporter1.ExportglTFFileName = fileName.substring(0, pos) + ".glb";
        } else {
            exporter1.ExportglTFFileName = fileName.substring(0, pos) + ".gltf";
        }
    }
}

확장자를 변경하는 함수를 ExportglTFFilebinary에서 onChange()로 처리되게 추가하고 Controls에 있는 ExportglTFFileName이 변경된 확장로 변경되도록 listen() 함수를 추가합니다.

folder2.add(exporter1, 'ExportglTFFileName').listen();
folder2.add(exporter1, 'ExportglTFFilebinary').onChange(updatesglTFFileName);
folder2.add(exporter1, 'ExportglTFFunction').name('Export');

Controls에서 ExportglTFFilebinary를 선택할 때마다 ExportglTFFileName의 확장자가 변경되는 것을 확인할 수 있습니다.

그리고 Controls에서 "Export" 버튼을 클릭하면 변경된 확장자로 다운로드되는 것을 확인할 수 있습니다.

three.js 3D 모델 추출하기(glTF JSON or Binary) - GLTFExporter

carrotweb — Tue, 10 Oct 2023 00:10:02 +0900

이어서 우리가 만든 Object(객체, 3D 모델)을 glTF 포맷으로 추출해 보겠습니다.

1. import를 통해 GLTFExporter(GLTF익스포트) 모듈을 가져옵니다. GLTFExporter(GLTF익스포트)는 Scence(씬, 장면)이나 Scence(씬, 장면)에 있는 Object(객체)들을 glTF 포맷으로 추출합니다.

import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';

GLTFExporter(GLTF익스포트) 모듈의 실제 위치는 "\node_modules\three\examples\jsm\exporters\GLTFExporter.js" 입니다.

2. Scence(씬, 장면)이나 Scence(씬, 장면)에 있는 Object(객체)들을 glTF 포맷으로 추출하기 위한 함수를 만듭니다.

function ExportglTF() {
}

3. glTF 포맷으로 추출하기 위해 함수에 GLTFExporter(GLTF익스포트)를 생성합니다.

GLTFExporter()

파라미터는 없습니다.

GLTFExporter(GLTF익스포트)를 생성합니다.

function ExportglTF() {
    // GLTF익스포트 생성
    const exporter = new GLTFExporter();
}

Scence(씬, 장면)이나 Scence(씬, 장면)에 있는 Object(객체)들을 GLTFExporter(GLTF익스포트)의 parse(파서) 함수로 추출합니다.

.parse (input : Object3D, onCompleted : Function, onError : Function, options : Object)

input: 추출할 Scence(씬, 장면) 또는 Scence(씬, 장면)에 있는 Object(객체)입니다.
onCompleted: glTF 포맷으로 추출된 후 호출되는 함수입니다. (함수 파라미터로 glTF JSON 또는 바이너리(ArrayBuffer)를 넘겨줍니다.)
onError: glTF 생성 중에 오류가 발생하면 호출되는 함수입니다. (함수 파라미터로 에러 정보를 넘겨줍니다.)
options: 추출할 때 사용되는 옵션입니다.

input은 다음과 같이 설정할 수 있습니다.

Scence(씬, 장면)를 추출할 경우

// 하나의 Scence(씬, 장면)를 추출할 경우
exporter.parse(scene1, ...)
// 여러 개의 Scence(씬, 장면)를 추출할 경우 (배열로 추가)
exporter.parse([scene1, scene2], ...)

Scence(씬, 장면)에 있는 Object(객체)를 추출할 경우

// 하나의 객체(3D 모델)를 추출할 경우
exporter.parse(object1, ...)
// 여러 개의 객체(3D 모델)를 추출할 경우 (배열로 추가)
exporter.parse([object1, object2], ...)

Scence(씬, 장면)과 Object(객체)를 썩어서 추출할 경우

// 하나 또는 여러개의 Scence(씬, 장면)과 객체(3D 모델)를 썩어서 추출할 경우
exporter.parse([scene1, object1, object2, scene2], ...)

Object(객체)나 Scence(씬, 장면)과 객체를 썩어서 추출할 경우에는 새로운 Scence(씬, 장면)을 생성하여 glTF 포맷으로 추출됩니다.

options은 다음과 같이 설정할 수 있습니다.

trs: 추출되는 로드마다 Matrix 정보 대신 Position(위치), Rotation(회전), Scale(크기) 정보로 내보낼지 여부입니다. 기본값 false
onlyVisible: 보이는 Object(객체)만 추출할지 여부입니다. 기본값 true
binary: 바이너리(.glb) 형식으로 추출할지 여부입니다. 기본값 false
maxTextureSize: 텍스처(이미지)의 최대 크기(너비와 높이를 곱한 값)를 지정된 값으로 제한합니다. 기본값 Infinity(무한대)
animations: 추출할 애니메이션 목록입니다.
includeCustomExtensions: userData.gltfExtensions 속성으로 정의된 사용자 정보를 내보낼지 여부입니다. 기본값 false

우리는 Object(객체, 3D 모델)을 바이너리(.glb) 형식으로 추출하기 위해서 options에 binary를 true로 설정합니다.

function ExportglTF() {
    // GLTF익스포트 생성
    const exporter = new GLTFExporter();

    // GLTF익스포트 옵션 - 바이너리 형식으로 추출
    const options = {
        binary: true
    };
}

그리고 parse 함수로 주사위 객체를 glTF 포맷으로 추출하게 input에 box2를 설정하고 onCompleted에서는 생성된 glTF 포맷 정보를 콘솔 로그로 출력되게 함수를 설정하고 onError에서는 오류 정보가 콘솔 로그로 출력되게 합니다.

function ExportglTF() {
    // GLTF익스포트 생성
    const exporter = new GLTFExporter();

    // GLTF익스포트 옵션 - 바이너리 형식으로 추출
    const options = {
        binary: true
    };

    exporter.parse(
        box2,
        function (gltf) {
            if (gltf instanceof ArrayBuffer) {
                console.log("export gltf:", gltf);
            } else {
                console.log("export gltf:", gltf);
            }
        },
        function (error) {
            console.error("exporter error:", error);
        },
        options
    );
}

5. glTF 추출 함수를 호출하기 위해서 Controls에 별도의 Folder(폴더)를 추가합니다.

// 컨트롤러에 glTF 포맷으로 추출하기 위한 Folder(폴더) 추가
const folder2 = gui.addFolder('GLTFExporter');

Controls에서 버튼을 생성하기 위해서는 객체의 parameters(파라미터)를 값을 function으로 선언하면 됩니다.

const myObject = {
	myFunction: function() { ... }
};

우리는 위에서 만든 ExportglTF() 함수로 객체를 생성하고 Folder(폴더)에 추가합니다.

const exporter1 = {
    ExportglTFFunction : ExportglTF
};

folder2.add(exporter1, 'ExportglTFFunction').name('Export');

6. Controls에서 "Export" 버튼을 클릭하면 콘솔에 바이너리(ArrayBuffer)로 추출된 glTF 정보가 출력됩니다.

만약 JSON 형식으로 추출하고 싶다면 options에서 binary를 false로 설정하면 됩니다.

// GLTF익스포트 옵션 - JSON 형식으로 추출
const options = {
    binary: false
};

그리면 콘솔에 JSON 형식으로 추출된 glTF 정보가 출력됩니다.

이어서 추출된 glTF 정보를 .gltf 파일과 .glb 파일로 다운로드해 보겠습니다.

three.js 3D 모델 불러오기(glTF 파일 로드) - GLTFLoader

carrotweb — Sun, 10 Sep 2023 18:35:01 +0900

이번에는 외부에서 만들어진 3D 모델을 로드하여 Scence(씬, 장면)에 추가해 보도록 하겠습니다.

3D 모델들은 다양한 파일 포맷으로 저장됩니다. 대표적인 3D 파일 포맷으로 OBJ, FBX, glTF, USD가 있습니다.

다양한 파일 포맷 중에서 three.js에서는 glTF 파일 포맷을 사용하는 것을 추천하고 있습니다.

glTF(GL Transmission Format, GL 트랜스미션 포맷)는 응용프로그램에서 3D 장면과 3D 모델을 효율적으로 전송하고 로드시키는 방법에 대한 사양(규격, 명세)으로 로열티가 없는 오픈 소스 파일 포맷입니다.

glTF는 3D Assets(3D 에셋, 3D 자산(모델 정보, 텍스처, 바이너리 데이터))의 파일 크기를 최소화하였습니다. 그리고 3D Assets(3D 에셋)을 사용하기 위해 압축을 풀고 처리하는 런타임 프로세싱을 최소화하였습니다. (이것은 .glb 파일에 적용되는 내용입니다.)

glTF는 제작 작업 절차를 간소화하고 산업 전반에서 콘텐츠가 서로 호환되어 사용(상호운용)이 가능하게 3D 콘텐츠 도구 및 서비스를 위한 확장 가능한 공통 배포 포맷을 정의하였습니다.

자세한 설명은 glTF(https://github.com/KhronosGroup/glTF)를 참조하시기 바랍니다.

그럼 glTF는 어떤 구조로 되어 있을까요?

glTF 2.0 Specification(https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html)를 보면 다음과 같이 glTF의 Asset(에셋)에 대해 설명하고 있습니다.

glTF Asset(에셋, 자산)은 다음과 같이 표현됩니다.

Scence(씬, 장면)에 대한 전체 설명이 담긴 JSON 포맷 파일 (.gltf) : 노드 계층 구조, 머티리얼, 카메라 정보뿐만 아니라 메시, 애니메이션 그리고 기타 구성에 대한 설명자 정보도 포함됩니다.
지오메트리, 애니메이션 그리고 기타 버퍼 기반 데이터가 담긴 바이너리 파일 (.bin)
텍스처 이미지가 담긴 이미지 파일 (.jpg, .png, 등등)

즉, 아래 샘플(https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/BoomBox/glTF)처럼 glTF Asset(에셋, 자산)은 3개의 유형으로 JSON 포맷 파일 (.gltf), 데이터 파일 (.bin), 이미지 파일 (.jpg, .png, 등등)로 구성됩니다.

3D 모델에 대한 정보는 JSON 포맷으로 .gltf 파일로 저장되고 3D 모델의 지오메트리, 애니메이션, 스킨 정보들은 .bin 파일로 저장되고 3D 모델의 머티리얼에서 사용되는 이미지들은 각각의 이미지 파일(.jpg, .png, 등등)로 저장됩니다.

그리고 JSON 포맷 파일(.gltf)에는 데이터가 담긴 바이너리 파일 (.bin)과 이미지 파일 (.jpg, .png)들이 연결되어 있습니다.

또는 JSON 포맷 파일, 데이터 파일, 모든 이미지 파일들이 하나의 바이너리 파일 (.glb)로 결합되어 저장됩니다.

대부분 glTF는 .glb 파일로 저장되고 배포됩니다. 그 이유는 데이터 파일 (.bin)과 이미지 파일 (.jpg, .png, 등등)를 함께 배포하는 것보다 배포가 용이하기 때문입니다.

그럼 glTF 파일을 로드해 보겠습니다.

1. import를 통해 GLTFLoader(GLTF로더) 모듈을 가져옵니다. GLTFLoader(GLTF로더)는 glTF 파일을 로드합니다.

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

GLTFLoader(GLTF로더) 모듈의 실제 위치는 "\node_modules\three\examples\jsm\loaders\GLTFLoader.js" 입니다.

2. GLTF로더로 로드할 모델을 glTF-Sample-Models(https://github.com/KhronosGroup/glTF-Sample-Models/blob/master/2.0/BoomBox/glTF-Binary/BoomBox.glb)에서 다운로드합니다.

그리고 프로젝트에 resources \ textures 폴더 다운로드한 BoomBox 파일(BoomBox.glb)을 추가합니다.

VSCode에서는 glTF 파일을 볼 수 없습니다.

3. GLTFLoader(GLTF로더)를 생성합니다.

GLTFLoader(manager : LoadingManager)

manager(매니저) : GLTF로더가 사용할 LoadingManager(로딩 매니저)입니다. 기본값 THREE.DefaultLoadingManager

기본 로딩 매니저로 GLTFLoader(GLTF로더)를 생성합니다.

// GLTF로더 생성
const loader = new GLTFLoader();

4. resources \ textures 폴더에 있는 BoomBox 파일(BoomBox.glb)을 GLTFLoader(GLTF로더)로 로드합니다.

.load (url : String, onLoad : Function, onProgress : Function, onError : Function)

url: .glb 파일 또는 .gltf 파일의 웹 주소입니다.
onLoad: 로딩이 성공적으로 완료된 후 호출되는 함수입니다. (함수 파라메타로 glTF JSON를 넘겨줍니다.)
onProgress: 로딩이 진행되는 동안 호출될 함수입니다. (함수 파라메타로 로드 정보를 넘겨줍니다. - 옵션)
onError: 로딩 중 오류가 발생하면 호출되는 함수입니다. ( 함수 파라메타로 에러 정보를 넘겨줍니다. - 옵션)

onLoad 함수에서는 콘솔 로그로 로드한 glTF의 JSON 정보를 출력하고 onProgress 함수에서는 콘솔 로그로 로딩 프로세스를 출력하고 onError 함수에서는 콘솔 로그로 오류 정보를 출력하게 합니다.

// glTF 파일 로드
loader.load('resources/textures/BoomBox.glb', 
    function (gltf) {
        console.log(gltf);
    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
	}, 
    function (error) {
        console.error(error);
    })
;

그러면 콘솔 로그에 로딩 프로세스가 출력되고 glTF의 JSON 정보가 출력됩니다.

5. Scence(씬, 장면)에 로드한 모델을 추가하기 위해 onLoad 함수에 glt의 scene를 추가하고 로드한 모델을 보기 위해 Camera(카메라)의 Focus Point(포커스 포인트, 초점)과 Position(포지션, 위치)를 변경합니다.

// glTF 파일 로드
loader.load('resources/textures/BoomBox.glb', 
    function (gltf) {
        console.log(gltf);
        scene.add(gltf.scene);
        // 육면체 옆으로 위치 변경
        gltf.scene.position.set(-2, 0, 0);
        // 카메라 초점 변경
        controls.target.copy(gltf.scene.position);
        // 카메라 위치 변경
        camera.position.set(-2, 1, 2);
    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
	}, 
    function (error) {
        console.error(error);
    })
;

그런데 로드된 모델이 점으로 보입니다. 그 이유는 로드되는 모델마다 크기가 일정하지 않기 때문입니다. 어떤 모델은 크기가 크고 어떤 모델은 크기가 작습니다.

그럼 로드된 모델의 크기가 어떻게 되는지 확인해 보겠습니다.

onLoad 함수에서 로드된 모델의 객체를 가져옵니다. 그리고 객체의 크기를 가져와서 콘솔 로그로 출력합니다.

// 로드된 모델의 크기 확인
var gltfObject = new THREE.Box3().setFromObject(gltf.scene);
var gltfObjectSize = gltfObject.getSize(new THREE.Vector3());
console.log(gltfObjectSize);

콘솔 로그에 보면 크기가 매우 작은 것을 확인할 수 있습니다.

{
    "x": 0.019842308,
    "y": 0.01954326,
    "z": 0.0201524906
}

모델의 크기를 키우기 위해 전체 Scale(스케일)의 크기를 변경합니다. 크기를 100배 정도 크게 하겠습니다.

// glTF 파일 로드
loader.load('resources/textures/BoomBox.glb', 
    function (gltf) {
        console.log(gltf);

        // 로드된 모델의 크기 확인
        var gltfObject = new THREE.Box3().setFromObject(gltf.scene);
        var gltfObjectSize = gltfObject.getSize(new THREE.Vector3());
        console.log(gltfObjectSize);

        // 모델의 스케일 변경
        gltf.scene.scale.x = 100;
        gltf.scene.scale.y = 100;
        gltf.scene.scale.z = 100;

        scene.add(gltf.scene);
        // 육면체 옆으로 위치 변경
        gltf.scene.position.set(-2, 0, 0);
        // 카메라 초점 변경
        controls.target.copy(gltf.scene.position);
        // 카메라 위치 변경
        camera.position.set(-2, 1, 2);
    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
	}, 
    function (error) {
        console.error(error);
    })
;

모델의 Scale(스케일)을 크게 하니 적당한 크기로 보입니다.

three.js GUI Controls - lil-gui, addFolder, geometry.dispose

carrotweb — Sun, 27 Aug 2023 20:40:13 +0900

이전에 만든 Controls에 아래의 three.js 사이트의 doc 처럼 SphereGeometry(스피어 지오메트리, 구 기하 도형)에 대한 속성들을 추가해 보겠습니다. (https://threejs.org/docs/index.html#api/en/geometries/SphereGeometry)

우선 Camera(카메라)의 위치(position)를 구 객체(sphere1) 앞으로 이동시키겠습니다.

현재 OrbitControls(오빗 컨트롤, 궤도 컨트롤)를 사용하고 있습니다. 그래서 항상 Camera(카메라)의 Focus Point(포커스 포인트, 초점)가 {x: 0, y: 0, z: 0} 입니다.

console.log(controls.target);
--> Vector3 {x: 0, y: 0, z: 0}

(OrbitControls(오빗 컨트롤, 궤도 컨트롤)를 사용하면 Camera(카메라)의 lookAt 함수를 사용해도 적용되지 않습니다.)

우선 Camera(카메라)의 Focus Point(포커스 포인트, 초점)을 구 객체(sphere1)의 위치로 조정하겠습니다.

console.log(sphere1.position);
--> Vector3 {x: 2, y: 1, z: -2}

OrbitControls(오빗 컨트롤, 궤도 컨트롤)의 target에 구 객체(sphere1)의 위치 값을 복사하거나 Vector3(백터)로 위치 값을 생성하여 설정합니다.

// 카메라 초점 변경
controls.target.copy(sphere1.position);

또는

// 카메라 초점 변경
controls.target = new THREE.Vector3(2, 1, -2);

그러면 Camera(카메라)의 Focus Point(포커스 포인트, 초점)가 구 객체(sphere1)의 위치로 변경됩니다.

만약, OrbitControls(오빗 컨트롤, 궤도 컨트롤)의 target에 구 객체(sphere1)의 위치 값을 바로 사용하면 OrbitControls(오빗 컨트롤, 궤도 컨트롤)에서 오른쪽 마우스로 Camera(카메라)의 위치를 변경하면 구 객체(sphere1)가 항상 중앙에 위치하게 되어 라인 세그먼트즈 객체와 분리되는 문제가 발생합니다.

controls.target = sphere1.position;

화면에 구 객체(sphere1)가 크게 보이도록 Camera(카메라)의 위치(position)를 조정합니다.

// 카메라 위치 변경
camera.position.set(2, 2.5, -1);

구 객체(sphere1)와 라인 세그먼트즈 객체(sphere1WireframeLine)는 구 그룹(sphere1Group)으로 구성되어 있습니다.

구 그룹(sphere1Group)의 첫 번째 자식은 구 객체(sphere1)이고 두 번째 자식은 와이어프레임을 선으로 그린 세그먼트즈 객체(sphere1WireframeLine)입니다.

console.log(sphere1Group.children);

라인 세그먼트즈 객체(sphere1WireframeLine)는 와이어프레임 지오메트리(sphere1WireframeGeometry)를 parameters(파라미터)로 전달받아 선으로 그립니다. 그리고 와이어프레임 지오메트리(sphere1WireframeGeometry)는 parameters(파라미터)로 구 지오메트리(sphere1Geometry)를 전달받아 와이어프레임을 생성합니다.

위에서 말한 것처럼 parameters(파라미터) 값으로 전달받기 때문에 값을 변경하여도 생성된 객체는 변경되지 않습니다.

console.log(sphere1Group.children[1].geometry.parameters.geometry.parameters.heightSegments);
--> 32

sphere1Group.children[1].geometry.parameters.geometry.parameters.heightSegments = 4;

console.log(sphere1Group.children[1].geometry.parameters.geometry.parameters.heightSegments);
--> 4

즉, 객체를 생성할 때 사용된 정보들은 객체 생성 후 변경되어도 다시 Rendering(렌더링)되지 않습니다.

그래서 Scence(씬, 장면)에 객체를 제거하고 객체를 폐기(Dispose)하고 다시 생성해서 Scence(씬, 장면)에 객체를 추가하면 됩니다. 그러나 너무 번거롭습니다.

그래서 쉽게 처리하는 방법으로 객체의 Geometry(지오메트리, 기하 도형)만 폐기(Dispose)하고 변경되는 정보로 생성하여 객체의 Geometry(지오메트리, 기하 도형)에 적용하는 겁니다.

그럼 테스트를 통해 확인해 보겠습니다.

1. 구 그룹(sphere1Group)에 있는 구 객체(sphere1)와 라인 세그먼트즈 객체(sphere1WireframeLine)의 Geometry(지오메트리, 기하 도형)를 폐기(Dispose)합니다.

// 적용된 지오메트리 폐기
sphere1Group.children[0].geometry.dispose();
sphere1Group.children[1].geometry.dispose();

2. 새로운 SphereGeometry(스피어 지오메트리, 구 기하 도형)의 radius(반지름, 반경)는 기존과 동일하게 1로 하고 widthSegments(수평 세그먼트, 가로 분절 수)와 heightSegments(수직 세그먼트, 세로 분절 수)는 10으로 설정하여 생성합니다.

// 새로운 지오메트리 생성
const sphere2Geometry = new THREE.SphereGeometry(1, 10, 10);

3. 새롭게 생성된 구 지오메트리(sphere2Geometry)를 구 객체(sphere1)의 Geometry(지오메트리, 기하 도형)에 적용시키고 라인 세그먼트즈 객체(sphere1WireframeLine)의 Geometry(지오메트리, 기하 도형)에는 구 지오메트리(sphere2Geometry)로 새로운 WireframeGeometry(와이어프레임 지오메트리)를 생성하여 적용시킵니다.

// 새로운 지오메트리 적용
sphere1Group.children[0].geometry = sphere2Geometry;
sphere1Group.children[1].geometry = new THREE.WireframeGeometry(sphere2Geometry);

그러면 변경된 정보로 변경되는 것을 확인할 수 있습니다.

만약, 구 그룹(sphere1Group)에 있는 구 객체(sphere1)의 Geometry(지오메트리, 기하 도형)는 변경하지 않고 라인 세그먼트즈 객체(sphere1WireframeLine)의 Geometry(지오메트리, 기하 도형)만 변경한다면 구의 객체의 모양과 와이어프레임 모양이 다르기 때문에 와이어프레임 선들이 구의 객체 안으로 들어가게 됩니다.

// 적용된 지오메트리 폐기
//sphere1Group.children[0].geometry.dispose();
sphere1Group.children[1].geometry.dispose();

// 새로운 지오메트리 생성
const sphere2Geometry = new THREE.SphereGeometry(1, 10, 10);

// 새로운 지오메트리 적용
//sphere1Group.children[0].geometry = sphere2Geometry;
sphere1Group.children[1].geometry = new THREE.WireframeGeometry(sphere2Geometry);

그럼 Controls에 SphereGeometry(스피어 지오메트리, 구 기하 도형)의 속성들을 컨트롤러로 추가해 보겠습니다.

위에서 테스트한 것처럼 매번 새로운 SphereGeometry(스피어 지오메트리, 구 기하 도형)를 생성해야 하기 때문에 parameters(파라미터)들을 별도의 객체로 관리해야 합니다.

1. SphereGeometry(스피어 지오메트리, 구 기하 도형)를 생성할 때 사용되는 parameters(파라미터)들로 객체(dataSphere1)를 만듭니다. (기본값으로 설정했습니다.)

const dataSphere1 = {
    radius: 1,
    widthSegments: 32,
    heightSegments: 16,
    phiStart: 0,
    phiLength: Math.PI * 2,
    thetaStart: 0,
    thetaLength: Math.PI
};

2. SphereGeometry(스피어 지오메트리, 구 기하 도형)의 parameters(파라미터)를 객체(dataSphere1)로 변경합니다.

const sphere1Geometry = new THREE.SphereGeometry(dataSphere1.radius, dataSphere1.widthSegments, dataSphere1.heightSegments, dataSphere1.phiStart, dataSphere1.phiLength, dataSphere1.thetaStart, dataSphere1.thetaLength);

3. Material(머티리얼)에서 구 객체의 안쪽에도 렌더링 되도록 side 속성을 THREE.DoubleSide로 추가합니다.

const sphere1Material = new THREE.MeshStandardMaterial({color: 0x0000ff, side: THREE.DoubleSide});

4. 구 그룹(sphere1Group)에 있는 구 객체(sphere1)와 라인 세그먼트즈 객체(sphere1WireframeLine)의 Geometry(지오메트리, 기하 도형)를 폐기(Dispose)하고 새로운 SphereGeometry(스피어 지오메트리, 구 기하 도형)를 생성하여 적용시키는 함수를 만듭니다.

// 구 그룹 지오메트리 변경 함수
function updatesShereGroupGeometry() {

    sphere1Group.children[0].geometry.dispose();
    sphere1Group.children[1].geometry.dispose();

    const newSphereGeometry = new THREE.SphereGeometry(dataSphere1.radius, dataSphere1.widthSegments, dataSphere1.heightSegments, dataSphere1.phiStart, dataSphere1.phiLength, dataSphere1.thetaStart, dataSphere1.thetaLength);

    sphere1Group.children[0].geometry = newSphereGeometry;
    sphere1Group.children[1].geometry = new THREE.WireframeGeometry(newSphereGeometry);
}

위의 예제처럼 구 객체에 있는 속성들 컨트롤러로 추가해 보겠습니다.

5. 구 객체에 있는 속성들을 별도의 그룹으로 분리하기 위해서 Controls에 Folder(폴더)를 추가합니다.

gui.addFolder(title)

title(타이틀) : 폴더의 제목 표시줄에 표시할 이름입니다.

예제처럼 동일하게 폴더에 표시할 이름을 "THREE.SphereGeometry"으로 설정합니다.

// 컨트롤러에 구 그룹 객체를 위한 Folder(폴더) 추가
const folder1 = gui.addFolder('THREE.SphereGeometry');

6. 객체(dataSphere1)로 컨트롤러에 추가합니다.

각각의 컨트롤러에 $1(최소 값, 선택 값), max(최대 값)은 SphereGeometry(스피어 지오메트리, 구 기하 도형)의 기본값으로 설정합니다.
컨트롤러가 변경될 때마다 구 그룹 지오메트리 변경 함수(updatesShereGroupGeometry)가 호출되도록 설정합니다.

// 컨트롤러 추가
// 구 지오메트리의 파라미터들로 추가
folder1.add(dataSphere1, 'radius', 1, 30).onChange(updatesShereGroupGeometry);
folder1.add(dataSphere1, 'widthSegments', 3, 64).step(1).onChange(updatesShereGroupGeometry);
folder1.add(dataSphere1, 'heightSegments', 2, 32).step(1).onChange(updatesShereGroupGeometry);
folder1.add(dataSphere1, 'phiStart', 0, Math.PI * 2).onChange(updatesShereGroupGeometry);
folder1.add(dataSphere1, 'phiLength', 0, Math.PI * 2).onChange(updatesShereGroupGeometry);
folder1.add(dataSphere1, 'thetaStart', 0, Math.PI * 2).onChange(updatesShereGroupGeometry);
folder1.add(dataSphere1, 'thetaLength', 0, Math.PI * 2).onChange(updatesShereGroupGeometry);

다양하게 컨트롤러의 값들을 변경시켜서 구 객체가 변경되는 것을 확인해 보시기 바랍니다.

three.js GUI Controls - lil-gui, gui.add

carrotweb — Sun, 20 Aug 2023 19:10:37 +0900

three.js 사이트의 doc에서 Geometry(지오메트리, 기하 도형)들의 설명을 보면 오른쪽 상단에 Controls가 있습니다. (https://threejs.org/docs/index.html#api/en/geometries/SphereGeometry)

Controls에는 객체의 속성 값들이 표시되고 속성 값을 변경하면 객체가 변경됩니다.

이번에 위의 예제 화면처럼 Controls를 만들어 주사위 객체의 Material(머티리얼)에 있는 alphaTest(알파 테스트) 속성을 변경해 보도록 하겠습니다.

이전에는 Controls를 만들기 위해 dat.GUI를 사용하였으나 최근에는 lil-gui를 대체하여 사용하고 있습니다. three.js에서도 lil-gui를 모듈에 포함하여 배포하고 있습니다.

Controls를 만들기 위해서는 lil-gui(릴 지유아이, 릴 그래픽 사용자 인터페이스) 모듈을 가져와야 합니다.

lil-gui(릴 지유아이, 릴 그래픽 사용자 인터페이스)는 사용자가 웹 페이지에서 객체의 속성 값들을 변경할 수 있게 플로팅 패널(Floating Panel, 떠 있는 패널)로 컨트롤러(Controller) UI를 만들어 줍니다.

자세한 설명은 lil-gui 사이트(https://lil-gui.georgealways.com/)를 참고하시기 바랍니다.

1. import를 통해 lil-gui(릴 지유아이, 릴 그래픽 사용자 인터페이스) 모듈을 가져옵니다.

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

lil-gui 모듈의 실제 위치는 "\node_modules\three\examples\jsm\libs\lil-gui.module.min.js" 입니다.

2. lil-gui(릴 지유아이, 릴 그래픽 사용자 인터페이스)를 생성합니다.

// GUI 생성
const gui = new GUI();

그러면 오른쪽 상단에 Controls가 생성되어 나타납니다.

3. Controls에 컨트롤러를 추가합니다.

gui.add(object, property, [$1], [max], [step])

object(객체) : 컨트롤러가 제어할 객체입니다.
property(프로퍼티, 속성) : 객체에서 제어할 속성 이름입니다.
$1(최소 값, 선택 값) : 숫자 컨트롤러의 최소 값이거나 드롭다운에서 선택 가능한 값입니다.
max(최대 값) : 숫자 컨트롤러의 최대 값입니다.
step(스탭, 간격) : 숫자 컨트롤러의 간격 값입니다.

object(객체)는 주사위 육면체 객체에 적용되어 있는 Material(머티리얼) 배열에서 첫 번째 배열을 설정하고 property(프로퍼티, 속성)는 alphaTest(알파 테스트)로 설정합니다.

// 컨트롤러 추가
// 주사위 육면체 객체에 적용되어 있는 머티리얼 객체, 프로퍼티는 alphaTest로 설정
gui.add(box2Materials[0], 'alphaTest');

그러면 오른쪽 상단에 있는 Controls에 alphaTest라는 이름(속성 이름)으로 숫자 컨트롤러가 추가됩니다.

alphaTest 숫자 컨트롤러에는 현재 alphaTest 속성 값이 나타납니다. (현재 속성 값은 0.1입니다.)

속성 값을 입력하거나 상/하 화살표 키보드를 눌러 값을 변경할 수 있습니다. (상/하 화살표 키보드를 누르면 1 간격으로 변경됩니다.)

맨 위의 예제 화면처럼 숫자 컨트롤러에 슬라이더(Sliders)를 추가하기 위해서는 $1(최소 값)과 max(최대 값)를 추가하면 됩니다.

alphaTest(알파 테스트) 속성 값인 알파 값(0 ~ 1)으로 $1(최소 값)과 max(최대 값)를 설정하고 step(스탭, 간격)으로 0.01로 설정합니다.

// 컨트롤러 추가
// 주사위 육면체 객체에 적용되어 있는 머티리얼 객체, 프로퍼티는 alphaTest로 설정
// 최소 값은 0, 최대 값은 1, 간격은 0.01로 설정
gui.add(box2Materials[0], 'alphaTest', 0, 1, 0.01);

또는 min(), max(), step() 메서드를 사용하여 설정할 수 있습니다.

gui.add(box2Materials[0], 'alphaTest').min(0).max(1).step(0.01);

그러면 alphaTest 숫자 컨트롤러에 슬라이더(Sliders)가 추가됩니다. 그리고 슬라이더(Sliders)를 마우스로 이동시키면 step(스탭, 간격) 값만큼 변경됩니다. (상/하 화살표 키보드를 눌러도 step 값만큼 변경됩니다.)

alphaTest 숫자 컨트롤러의 이름은 name() 메서드로 변경할 수 있습니다. alphaTest 숫자 컨트롤러의 이름을 "알파 테스트"로 변경하겠습니다.

// 컨트롤러 추가
// 주사위 육면체 객체에 적용되어 있는 머티리얼 객체, 프로퍼티는 alphaTest로 설정
// 최소 값은 0, 최대 값은 1, 간격은 0.01로 설정
// 칸트롤러의 이름을 '알파 테스트'로 변경
gui.add(box2Materials[0], 'alphaTest', 0, 1, 0.01).name('알파 테스트');

그러면 alphaTest 숫자 컨트롤러의 이름이 "알파 테스트"로 변경됩니다.

alphaTest 숫자 컨트롤러의 슬라이더(Sliders)를 마우스로 이동시켜 alphaTest 속성 값을 0으로 변경시키면 5번 주사위 이미지가 투명하지 않게 되고 그림자도 투명하지 않게 됩니다.

그리고 alphaTest 속성 값을 1로 변경시키면 5번 주사위 이미지가 투명해지지만 Aliasing(앨리어싱)이 발생되어 5번 주사위 이미지가 각지게 되고 그림자는 없어지게 됩니다. (alphaTest 속성이 1이 되면 흰색까지 투과되지 않습니다.)

alphaTest 속성 값의 변화에 따라 주사위 이미지와 그림자가 변화되는 것을 좀 더 명확하게 확인하기 위해서 주사위 육면체 객체에 적용되어 있는 Material(머티리얼) 배열에서 첫 번째 배열에 있는 alphaMap(알파 맵)을 이전에 추가한 그라데이션된 이미지 파일(dicemap.png)로 변경하여 테스트 헤보겠습니다.

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5.png"), alphaMap: box2TextureLoader.load("resources/textures/dicemap.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true})
];

[alphaTest 속성 값을 0.1로 변경할 경우]

[alphaTest 속성 값을 0.54로 변경할 경우]

[alphaTest 속성 값을 0.9로 변경할 경우]

three.js 텍스처 매핑, 알파 맵과 알파 테스트로 이미지 자르기와 그림자 처리 - alphaMap, alphaTest

carrotweb — Mon, 14 Aug 2023 00:55:48 +0900

이번에는 배경이 투명하지 않는 주사위 이미지를 Material(머티리얼)의 alphaMap(알파 맵) 속성을 사용하여 이미지를 자르고 반투명하게 처리해 보겠습니다. 그리고 alphaTest(알파 테스트) 속성을 사용하여 처리되는 범위를 조정해 보겠습니다. (그림자는 자동으로 이미지에 맞게 처리됩니다.)

그럼 alphaMap(알파 맵) 속성에 대해 간단하게 알아보고 진행하겠습니다.

alphaMap(알파 맵)은 흰색과 검은색 그리고 흰색과 검은색 사이의 회색(밝은 회색부터 어두운 회색까지)으로 구성된 이미지입니다.

alphaMap(알파 맵)에 있는 흰색은 이미지 처리 시 원본 이미지가 그대로 투과됩니다.

alphaMap(알파 맵)에 있는 검은색은 이미지 처리 시 원본 이미지가 투과되지 않습니다. (검은색과 같은 위치에 있는 이미지는 삭제 처리됩니다.)

alphaMap(알파 맵)에 있는 흰색과 검은색 사이의 회색(밝은 회색부터 어두운 회색까지)은 이미지 처리 시 반투명하게 투과됩니다. (회색이 어두울 수 록 투명해집니다.)

즉, alphaMap(알파 맵)은 검은색의 농도에 따라 이미지 처리 시 삭제(검은색)하거나 반투명(밝은 회색부터 어두운 회색까지 농도에 따라 투명도가 달라짐)으로 처리됩니다.

그리고 alphaTest(알파 테스트) 속성 값인 알파 값(0.1 ~ 0.9)에 따라 회색(밝은 회색부터 어두운 회색까지)의 처리되는 범위가 넓어집니다. (기본적으로 alphaTest 속성은 0입니다. 그리고 alphaTest 속성이 1이 되면 흰색까지 투과되지 않습니다.)

즉, 알파 값이 작을수록 alphaMap(알파 맵)에서 어두운 회색들은 투과되지 않습니다. 반대로 알파 값이 클수록 밝은 회색까지도 투과되지 않습니다.

그럼 테스트를 통해 확인해 보겠습니다.

PPT로 alphaMap(알파 맵)으로 사용할 이미지를 간단하게 만들어 보겠습니다.

주사위 이미지와 같은 크기(가로/세로는 3cm)의 도형(직사각형)을 생성합니다.
도형 윤곽선은 "윤곽선 없음"으로 설정합니다.
도형을 선택하고 콘텍스트 메뉴에서 "도형 서식"을 클릭합니다.
도형 서식에서 "그라데이션 채우기"를 선택하고 그라데이션 중지점에서 첫 번째 중지점을 선택하고 색은 검은색으로 선택합니다. 그리고 그라데이션 중지점에서 세 번째 중지점을 선택하고 색은 흰색으로 선택합니다.
도형을 PNG 파일로 저장합니다. (저는 dicemap.png으로 저장하였습니다.)

프로젝트의 resources \ textures 폴더에 alphaMap(알파 맵)으로 사용할 이미지(dicemap.png) 파일을 추가합니다.

테스트를 위해 Material(머티리얼) 배열에서 5번 주사위 이미지를 배경이 투명하지 않는 주사위 이미지(dice5.png)로 변경하고 추가된 이미지 파일(dicemap.png)을 TextureLoader(텍스처로더)로 로드하여 alphaMap 속성 값으로 설정합니다. 그리고 alphaTest 속성 값을 0으로 설정합니다.

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5.png"), alphaMap: box2TextureLoader.load("resources/textures/dicemap.png"), side: THREE.DoubleSide, alphaTest: 0, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true})
];

마우스로 이동해서 보시면 5번 주사위 이미지가 alphaMap(알파 맵)으로 이미지 처리가 되어서 alphaMap(알파 맵)에서 검은색 영역은 삭제처리되고 회색(밝은 회색부터 어두운 회색까지) 영역은 반투명하게 처리되어 나오는 것을 확인할 수 있습니다.

alphaTest(알파 테스트) 속성 값인 알파 값(0.1 ~ 0.9)에 따라 다음처럼 처리됩니다.

그림자도 처리된 이미지에 맞게 나타납니다. (alphaMap(알파 맵) 이미지가 그라데이션으로 되어있어 처리된 이미지 크기만큼 그림자가 나오게 됩니다.)

그럼 5번 주사위 이미지(dice5.png)에 맞게 alphaMap(알파 맵) 이미지를 만들어 처리해 보겠습니다.

5번 주사위 이미지를 만든 PPT에서 도형의 윤곽선 색을 흰색으로 변경합니다. (윤관선 색이 검은색이면 원본 이미지에 있는 윤관선이 투과되지 않기 때문입니다.)
검은색 점 도형은 흰색으로 흰색 배경은 검은색으로 변경합니다. (흰색만 투과되기 때문입니다.)
도형을 PNG 파일로 저장합니다. (기존 파일명에 'm'를 추가하여 dice5m.png으로 저장하였습니다.)

프로젝트의 resources \ textures 폴더에 alphaMap(알파 맵)으로 사용할 5번 주사위 이미지(dice5m.png) 파일을 추가합니다.

Material(머티리얼) 배열에서 추가된 이미지 파일(dice5m.png)로 alphaMap 속성의 값을 변경합니다. 그리고 alphaTest 속성 값을 0.1로 설정합니다. (alphaTest 속성 값을 0으로 설정하면 투명처리가 되지 않습니다.)

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5.png"), alphaMap: box2TextureLoader.load("resources/textures/dice5m.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true})
];

그러면 5번 주사위 이미지가 투명하게 처리되어 보이게 됩니다.

참고로, 어도비 포토샵(Photoshop)에서도 alphaMap(알파 맵)과 같은 방식으로 이미지의 배경을 투명하게 하거나 반투명하게 처리하여 여러 이미지들을 겹칠 때 사용합니다. 이런 방식을 alpha channel(알파 채널)이라고 합니다.

three.js 텍스처 매핑, 이미지 투명처리, 투명한 그림자 처리 - transparent, alphaTest, THREE.DoubleSide

carrotweb — Sat, 5 Aug 2023 23:49:41 +0900

이번에는 주사위의 흰색 배경을 없애고 투명하게 처리해 보겠습니다.

주사위 이미지를 만든 PPT에서 주사위 틀의 도형 채우기를 "채우기 없음"으로 변경합니다.

그리고 각각을 PNG 파일로 저장합니다. (기존 파일명에 't'를 추가했습니다.)

프로젝트의 resources \ textures 폴더에 주사위 이미지 파일을 추가합니다.

추가된 주사위 이미지에 배경이 없는 것을 확인할 수 있습니다. (체크무늬가 투명처리되는 부분입니다.)

Material(머티리얼) 배열에서 기존 이미지를 추가된 주사위 이미지로 변경하고 주사위 이미지의 체크무늬 부분이 투명하게 처리되도록 transparent 속성을 true로 추가합니다. (기본적으로 transparent 속성은 false입니다.)

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5t.png"), transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2t.png"), transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1t.png"), transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6t.png"), transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3t.png"), transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4t.png"), transparent: true})
];

그러면 주사위가 투명하게 처리되어 바닥과 그림자가 보이게 됩니다.

마우스로 이동해서 보면 주사위 뒤에 있는 객체가 보이는 것을 확인할 수 있습니다.

그렇지만, 2가지가 투명하게 처리되지 않았습니다.

첫 번째, 주사위의 그림자가 투명하지 않게 나옵니다.

두 번째, 주사위안이 투명하지 않게 나옵니다. (위를 보면 3번 주사위 왼쪽에 있는 2번, 바닥에 있는 6번, 뒤에 있는 4번 이미지가 보이지 않습니다.)

그럼, 첫 번째 문제인 그림자가 투명한 주사위 이미지에 맞게 투과되어 나오게 하려면 어떻게 해야 할까요?

그림자를 처리하는 방법이 여러 가지 있지만 여기서는 텍스처를 사용하는 Material(머티리얼)에서 처리할 수 있는 방법에 대해 알아보겠습니다.

1. 투명하지 않는 텍스처와 alphaMap(알파 맵), alphaTest(알파 테스트)를 사용하는 방법

2. 투명한 텍스처와 alphaTest(알파 테스트)를 사용하는 방법

주사위 이미지가 투명하기 때문에 우리는 2번째 방법으로 alphaTest(알파 테스트) 속성을 추가하면 간단하게 처리할 수 있습니다.

간단하게 alphaTest(알파 테스트) 속성에 대해 알아보고 진행하겠습니다.

Material(머티리얼)의 alphaTest 속성은 알파 테스트를 실행할 때 사용할 알파 값으로 0.0부터 1.0까지 값을 가질 수 있습니다. (주의할 점은 Material(머티리얼)의 opacity 속성을 사용하고 있다면 opacity 값이 alphaTest 값 보다 작으면 렌더링이 되지 않습니다.)

alphaTest(알파 테스트)는 이미지 조각(픽셀)의 알파 값을 비교하여 조각(픽셀)을 삭제처리 합니다.

alphaTest(알파 테스트)를 위해 주사위 이미지 보다 복잡한 나무 이미지를 사용하여 alphaTest 값에 따라 어떻게 이미지가 삭제 처리되는지 확인해 보겠습니다.

alphaTest(알파 테스트)할 나무 이미지(배경이 투명)입니다.

Material(머티리얼)의 alphaTest 값을 각각 0.1, 0.5, 0.9로 설정하였습니다.

new THREE.MeshStandardMaterial({map: textureLoader.load("resources/textures/tree1.png"), alphaTest: 0.1, transparent: true});

new THREE.MeshStandardMaterial({map: textureLoader.load("resources/textures/tree1.png"), alphaTest: 0.5, transparent: true});

new THREE.MeshStandardMaterial({map: textureLoader.load("resources/textures/tree1.png"), alphaTest: 0.9, transparent: true});

위의 결과처럼 alphaTest 값이 높을수록 더 많은 부분이 삭제가 되는 것을 확인할 수 있습니다.

그리고 계단 현상인 Aliasing(앨리어싱)이 발생되어 이미지가 각지게 됩니다.

그래서 이미지에 맞게 alphaTest 값을 설정해야 합니다. 일반적으로 0.1에서 0.5 이하로 설정합니다.

각각의 Material(머티리얼)에 alphaTest 속성을 0.1로 추가합니다.

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5t.png"), alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2t.png"), alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1t.png"), alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6t.png"), alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3t.png"), alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4t.png"), alphaTest: 0.1, transparent: true})
];

그럼 주사위 이미지가 투과되어 보이게 됩니다.

그러나 자세히 보면 투과된 그림자의 주사위 이미지는 오른쪽에 있는 5번, 바닥에 있는 6번, 뒤에 있는 4번 이미지입니다.

주사위의 1번, 2번, 3번은 왜 투과되어 나오지 않는 걸까요?

이 문제는 위의 두 번째 문제인 주사위안이 투명하지 않게 나오는 현상과 같은 문제입니다.

이유는 렌더링 되는 면에 영향을 받기 때문입니다.

기본적으로 Material(머티리얼)에서는 텍스처를 렌더링 할 때 앞면(THREE.FrontSide)만 처리합니다.

그래서 우리가 사용한 육면체는 전부 앞면만 렌더링 된 겁니다.

그렇기 때문에 뒷면(THREE.BackSide)이 없는 주사위의 1번(위), 2번(왼쪽), 3번(앞쪽)은 그림자로 투과되지 않았습니다. 그리고 주사위의 4번(뒤), 5번(오른쪽), 6번(바닥)도 뒷면(THREE.BackSide)이 없어 주사위안에서 보이지 않았던 겁니다.

그래서 Material(머티리얼)에서 렌더링 할 면을 앞면과 뒷면 둘 다 되게 처리하면 됩니다.

각각의 Material(머티리얼)에서 주사위 이미지가 앞면과 뒷면에서 렌더링 되도록 side 속성을 THREE.DoubleSide로 추가합니다. (기본적으로 side 속성은 THREE.FrontSide입니다.)

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4t.png"), side: THREE.DoubleSide, alphaTest: 0.1, transparent: true})
];

그럼 주사위 안도 그림자도 모두 이미지가 투과되어 보이게 됩니다.

three.js 텍스처 매핑, 이미지 입히기 - TextureLoader

carrotweb — Sun, 16 Jul 2023 21:48:42 +0900

Texture(텍스처)란 객체의 색상과 질감을 표현하는 Material(머티리얼)에서 사용되는 이미지나 비디오를 말합니다.

Texture Mapping(텍스처 매핑)이란 객체의 표면에 색을 칠하거나 이미지를 입히는 것입니다.

객체에 Texture Mapping(텍스처 매핑)하기 위해서는 Texture(텍스처)를 로드해야 합니다.

three.js에서는 TextureLoader(텍스처로더)로 Texture(텍스처)를 로드합니다.

TextureLoader(텍스처로더)는 이미지 (PNG, JPG, GIF, DDS) 또는 비디오 (MP4, OGG/OGV)를 로드합니다.

TextureLoader(manager : LoadingManager)

manager(매니저) : 로딩매니저입니다. 기본값 THREE.DefaultLoadingManage

그럼 두 번째 육면체 객체에 Texture Mapping(텍스처 매핑)을 해보겠습니다.

육면체 객체에 Texture(텍스처 매핑)할 나무 바닥 이미지를 다운로드합니다.

저는 나무 바닥 이미지를 Freepik 사이트에서 무료로 다운로드하였습니다.

다운로드한 나무 바닥 이미지의 크기가 크기 때문에 이미지 크기를 넓이 150px, 높이 100px으로 조정하였습니다.

1. 프로젝트에 resources \ textures 폴더를 생성하고 다운로드한 나무 바닥 이미지 파일(wood1.jpg)을 추가합니다.

2. resources \ textures 폴더에 있는 나무 바닥 이미지 파일(wood1.jpg)을 TextureLoader(텍스처로더)로 로드합니다.

// 텍스처 매핑할 텍스처를 로드
const box2Texture = new THREE.TextureLoader().load('resources/textures/wood1.jpg');

3. 로드한 Texture(텍스처)를 Material(머티리얼)의 map 속성에 설정합니다.

// 육면체에 사용할 색상과 질감의 데이터를 생성
const box2Material = new THREE.MeshStandardMaterial({map:box2Texture});

기존에 있는 color 속성은 삭제합니다. 그 이유는 Texture(텍스처)의 map color가 color 속성 값과 결합되어 변경되기 때문입니다. 글 끝부분에서 테스트로 color 속성과 같이 사용해 보도록 하겠습니다.

4. 두 번째 육면체 객체가 보이도록 Camera(카메라)의 위치를 변경합니다.

// 카메라 위치 변경
camera.position.set(0, 2, 8);

그러면 두 번째 육면체 객체의 모든 면이 나무 바닥 이미지로 변경됩니다.

마우스로 이동해서 보시면 입체적으로 확인할 수 있습니다. 나무 바닥 이미지가 육면체 객체에 잘 어울립니다.

이번에는 주사위 이미지를 만들어서 두 번째 육면체 객체에 Texture Mapping(텍스처 매핑)을 해보겠습니다.

주사위 이미지를 간단하게 PPT로 만들었습니다.

틀은 직사각형으로 가로/세로는 3cm, 도형 채우기는 흰색, 도형 윤곽선은 검은색입니다.

점은 원형으로 가로/가로는 0.6cm, 도형 채우기와 도형 윤곽선은 검은색입니다.

직사각형안의 점선은 중앙을 맞추기 위해서 사용했습니다. 저장하기 전에 점선은 삭제합니다.

각각을 PNG 파일로 저장합니다.

그리고 프로젝트에 resources \ textures 폴더에 주사위 이미지 파일을 추가합니다.

여러 Texture(텍스처)들을 여러 번 로드하기 위해서 TextureLoader(텍스처로더)를 분리하여 생성합니다.

// 텍스처 로드 생성
const box2TextureLoader = new THREE.TextureLoader();

육면체 면마다 텍스처가 다른 Material(머티리얼)을 설정해줘야 합니다.

그래서 6개의 Material(머티리얼)을 생성해서 배열로 전달해야 합니다.

6개의 Material(머티리얼)이 육면체에 매핑되는 순서는 오른쪽(1), 왼쪽(2), 위(3), 아래(4), 앞(5), 뒤(6)입니다. (전개도 모양은 다를 수 있습니다.)

그러나 대부분의 주사위는 1을 기준(1이 위에 있을 경우)으로 다음과 같이 되어 있습니다.

그래서 6개의 Material(머티리얼)로 배열을 만들 때 주사위 위치에 맞게 텍스처(주사위 이미지)를 로드해야 합니다.

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5.png")}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2.png")}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1.png")}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6.png")}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3.png")}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4.png")})
];

6개의 면이 다른 텍스처(주사위 이미지)가 되기 위해서 Material(머티리얼) 배열로 변경합니다.

// 육면체와 색상과 질감의 데이터 배열을 결합하여 육면체 객체 생성
const box2 = new THREE.Mesh(box2Geometry, box2Materials);

그러면 두 번째 육면체 객체의 모든 면이 주사위 이미지로 변경됩니다.

마우스로 이동해서 보시면 입체적으로 확인할 수 있습니다.

위에서 말한 것처럼 Material(머티리얼)의 map 속성과 color 속성이 같이 사용하게 되면 Texture(텍스처)의 map color가 color 속성 값과 결합되어 색이 변경됩니다. map color가 흰색인 경우 color 속성 값이 됩니다.

Material(머티리얼)에 기존 color 속성을 추가합니다.

// 머티리얼 배열
const box2Materials = [
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice5.png"), color:box2Color}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice2.png"), color:box2Color}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice1.png"), color:box2Color}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice6.png"), color:box2Color}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice3.png"), color:box2Color}),
    new THREE.MeshStandardMaterial({map: box2TextureLoader.load("resources/textures/dice4.png"), color:box2Color})
];

그러면 새로고침 할 때마다 주사위의 색상이 변경되는 것을 확인할 수 있습니다.

그 이유는 주사위 이미지가 흰색이기 때문에 변경되는 색상으로 변경됩니다.

흰색이 아닌 다른 색상일 경우 색이 변경되어 보일 겁니다.

three.js 객체 결합 - Group

carrotweb — Sun, 9 Jul 2023 22:58:12 +0900

이전에 만든 육면체 객체의 와이어프레임을 선으로 그린 라인 세그먼트즈 객체를 육면체 객체와 결합해 보겠습니다.

객체들을 결합하기 위해서 Group(그룹)을 사용하면 됩니다.

Group(그룹)은 객체들을 결합시켜 하나의 객체(Object3D)를 생성합니다.

1. 객체를 합치기 전에 육면체 객체(box1)와 라인 세그먼트즈 객체(box1WireframeLine)를 Scence(씬, 장면)에 추가되지 않게 주석처리합니다.

// 장면에 육면체 객체 추가
//scene.add(box1);

// 장면에 라인 세그먼트즈 객체 추가
//scene.add(box1WireframeLine);

2. 라인 세그먼트즈 객체(box1WireframeLine)의 라인 색상을 붉은색에서 짙은 녹색으로 변경하고 위치(position)를 육면체 객체와 동일하게 합니다.

// 선 색상을 짙은 녹색으로 변경
box1WireframeLine.material.color = new THREE.Color(0x006400);
// 육면체 객체와 결합하기 위해 육면체 객체의 위치를 복사하여 라인 세그먼트즈 객체의 위치 설정
box1WireframeLine.position.copy(box1.position);

3. 객체들을 결합하기 위해 Group(그룹)을 생성하고 Group(그룹)에 육면체 객체(box1)와 라인 세그먼트즈 객체(box1WireframeLine)를 추가합니다. 그리고 생성된 Group(그룹)를 Scence(씬, 장면)에 추가합니다.

// 육면체 객체와 라인 세그먼트즈 객체를 결합하기 위한 육면체 그룹 생성
const box1Group = new THREE.Group();
// 그룹에 육면체 객체 추가
box1Group.add(box1);
// 그룹에 라인 세그먼트즈 객체 추가
box1Group.add(box1WireframeLine);
// 장면에 육면체 그룹 추가
scene.add(box1Group);

육면체 객체에 와이어프레임이 결합되어 보입니다.

4. 라인 세그먼트즈 객체(box1WireframeLine)가 육면체 객체와 결합될 때 투명하게 결합되게 설정을 추가합니다.

Material(머티리얼)의 opacity은 0.0에서 부터 1.0까지 값을 가질 수 있습니다. opacity 값이 낮을수록 더 투명해집니다.

// 선이 투명해지게 설정
box1WireframeLine.material.transparent = true;
// 선의 불투명도를 낮게 설정
box1WireframeLine.material.opacity = 0.3;

5. 육면체 그룹 객체가 회전되게 주석처리된 육면체 객체를 육면체 그룹 객체로 변경하고 주석을 해제시킵니다.

// 애니메이팅
function animate() {
    box1Group.rotation.x += 0.01;
    box1Group.rotation.y += 0.01;
    box1Group.rotation.z += 0.01;
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};

구 객체(sphere1)도 라인 세그먼트즈 객체(sphere1WireframeLine)와 결합되도록 처리합니다.

1. 구 객체(sphere1)를 Scence(씬, 장면)에 추가되지 않게 주석처리합니다.

// 장면에 구 객체 추가
//scene.add(sphere1);

2. 라인 세그먼트즈 객체(sphere1WireframeLine)의 라인 색상을 붉은색에서 흰색으로 변경하고 위치(position)를 구 객체와 동일하게 하고 투명하게 결합되게 설정을 추가합니다. 그리고 라인 세그먼트즈 객체(sphere1WireframeLine)를 Scence(씬, 장면)에 추가되지 않게 주석처리합니다.

// 선 색상을 짙은 흰색으로 변경
sphere1WireframeLine.material.color = new THREE.Color(0xffffff);
// 선이 투명해지게 설정
sphere1WireframeLine.material.transparent = true;
// 선의 불투명도를 낮게 설정
sphere1WireframeLine.material.opacity = 0.3;
// 구 객체와 결합하기 위해 구 객체의 위치를 복사하여 라인 세그먼트즈 객체의 위치 설정
sphere1WireframeLine.position.copy(sphere1.position);
// 장면에 라인 세그먼트즈 객체 추가
//scene.add(sphere1WireframeLine);

3. 객체들을 결합하기 위해 Group(그룹)을 생성하고 Group(그룹)에 구 객체(sphere1)와 라인 세그먼트즈 객체(sphere1WireframeLine)를 추가합니다. 그리고 생성된 Group(그룹)를 Scence(씬, 장면)에 추가합니다.

// 구 객체와 라인 세그먼트즈 객체를 결합하기 위한 구 그룹 생성
const sphere1Group = new THREE.Group();
// 그룹에 구 객체 추가
sphere1Group.add(sphere1);
// 그룹에 라인 세그먼트즈 객체 추가
sphere1Group.add(sphere1WireframeLine);
// 장면에 구 그룹 추가
scene.add(sphere1Group);

이제 three.js 사이트의 doc에 있는 예제처럼 보입니다.

각 객체의 Segments(세그먼트, 분절 수)를 변경시켜 변화되는 모습을 보시기 바랍니다.

three.js 와이어 프레임 - WireFrame, WireframeGeometry, LineSegments

carrotweb — Sun, 9 Jul 2023 18:51:46 +0900

three.js 사이트의 doc에서 Geometry(지오메트리, 기하 도형)들의 설명을 보면 생선 된 객체에 선이 포함되어 있는 것을 볼 수 있습니다. (https://threejs.org/docs/index.html#api/en/geometries/BoxGeometry)

위에 코드 예제를 보면 선에 대한 코드가 따로 없는데 말입니다.

우리가 이전에 코딩한 코드와 비교해 봐도 다를 게 없습니다.

그럼 뭐가 다를까요?

그것은 바로 WireFrame(와이어프레임)이 객체와 같이 표현된 겁니다.

WireFrame(와이어프레임)이란 객체의 모양(구조)을 철사(Wire, 와이어)를 사용하여 동일한 모양(Frame, 프레임 - 틀, 구조)으로 만든 것입니다.

여기서 WireFrame(와이어프레임)은 Geometry(지오메트리, 기하 도형)를 구성하는 분할된 면들을 선(Wire)으로 구성한 겁니다.

대부분의 Geometry(지오메트리, 기하 도형)는 생성할 때 파라미터 값으로 Segments(세그먼트, 분절 수)를 사용하고 있습니다.

BoxGeometry(박스 지오메트리, 육면체)는 widthSegments(수평 세그먼트, 가로 분절 수), heightSegments(수직 세그먼트, 세로 분절 수), depthSegments(깊이 세그먼트, 깊이 분절 수)를 파라미터 값으로 받아 면을 분할합니다.

SphereGeometry(스피어 지오메트리, 구) widthSegments(수평 세그먼트, 가로 분절 수), heightSegments(수직 세그먼트, 세로 분절 수)를 파라미터 값으로 받아 구를 분할합니다.

분할되는 부분은 삼각형으로 구성됩니다. 그 이유는 WebGLRenderer(렌더러)가 객체를 렌더링 할 때 삼각형을 사용하여 만들기 때문입니다.

분할되는 수가 많을수록 부드럽게 구현할 수 있지만 CPU나 GPU의 연산이 많아지기 때문에 성능에 문제가 발생합니다.

그럼 이전 육면체 객체와 구 객체를 WireFrame(와이어프레임)으로 보이게 객체가 사용하는 Material(머티리얼)의 wireframe 속성을 true로 설정합니다. (기본적으로 wireframe 속성은 false입니다.)

const box1Material = new THREE.MeshStandardMaterial({color: 0x00ff00});
box1Material.wireframe = true;

const sphere1Material = new THREE.MeshStandardMaterial({color: 0x0000ff});
sphere1Material.wireframe = true;

WireFrame(와이어프레임)을 확인하기 위해서 Camera(카메라)의 위치를 육면체 객체에 가깝게 변경합니다.

// 카메라 위치 변경
//camera.position.set(4, 8, 20);
camera.position.set(1, 2, 3);

그리고 육면체 객체의 회전을 중지시킵니다.

// 애니메이팅
function animate() {
    //box1.rotation.x += 0.01;
    //box1.rotation.y += 0.01;
    //box1.rotation.z += 0.01;
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};

그러면 육면체 객체와 구 객체가 WireFrame(와이어프레임)으로 보입니다.

육면체 객체와 구 객체는 Segments(세그먼트, 분절 수)를 기본값으로 하여 생성하였습니다. 그래서 육면체는 1번이라 분절되지 않았고 구는 가로로 32번, 세로로 16번 분절되었습니다.

그럼 육면체의 전체 Segments(세그먼트, 분절 수)를 2번으로 증가시켜 보겠습니다.

const box1Geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2);

육면체의 가로 Segments(세그먼트, 분절 수)를 증가시키면 다음처럼 분절됩니다.

육면체의 가로와 세로 Segments(세그먼트, 분절 수)를 증가시키면 다음처럼 분절됩니다.

삼각형은 분절된 게 아닙니다. 분절된 가로는 붉은색 선으로 세로는 파란색 선으로 표시했습니다.

그런데 Material(머티리얼)의 wireframe 속성을 true로 설정하면 색상과 질감이 없어집니다.

그럼 three.js 사이트의 doc에 있는 예제처럼 색상과 질감이 유지되면서 WireFrame(와이어프레임)이 보이게 하려면 어떻게 해야 할까요?

바로 Geometry(지오메트리, 기하 도형)를 WireFrame(와이어프레임)으로 만들어 주는 WireframeGeometry(와이어프레임 지오메트리)를 사용하면 됩니다.

WireframeGeometry(와이어프레임 지오메트리)는 Geometry(지오메트리, 기하 도형)를 WireFrame(와이어프레임)으로 만들어 줍니다. 즉 Geometry(지오메트리, 기하 도형)로 부터 프레임을 만들 정보들을 가져옵니다.

WireframeGeometry(geometry : BufferGeometry)

geometry(지오메트리) : WireFrame(와이어프레임)으로 만들 Geometry(지오메트리, 기하 도형)의 BufferGeometry(버퍼 지오메트리)입니다.

BufferGeometry(버퍼 지오메트리)는 모든 Geometry(지오메트리, 기하 도형) 부모로서 메쉬(Mesh), 선(Line), 점(Point)에 대한 정보를 가지고 있습니다. (다음에 좀 더 알아보겠습니다.)

1. 육면체 객체의 Geometry(지오메트리, 기하 도형)를 사용하여 WireframeGeometry(와이어프레임 지오메트리)를 생성합니다.

// 육면체 지오메트리로 와이어프레임 지오메트리 생성
const box1WireframeGeometry = new THREE.WireframeGeometry(box1Geometry);

WireframeGeometry(와이어프레임 지오메트리)를 선으로 그리기 위해서는 LineSegments(라인 세그먼트즈)를 사용해야 합니다.

LineSegments(라인 세그먼트즈)는 Vertex(버텍스, 꼭짓점, 정점) 정보들로 선을 그려줍니다.

LineSegments(geometry : BufferGeometry, material : Material)

geometry(지오메트리) : 선을 그릴 Vertex(버텍스, 꼭짓점, 정점) 정보들이 있는 Geometry(지오메트리, 기하 도형)의 BufferGeometry(버퍼 지오메트리)입니다.
materia(머티리얼) : 선을 그리기 위한 머티리얼입니다. 기본값 LineBasicMaterial(라인 베이식 머티리얼) (입력하지 않으면 기본값으로 설정됩니다.)

2. WireframeGeometry(와이어프레임 지오메트리)를 선으로 그리기 위해 LineSegments(라인 세그먼트즈)를 생성합니다.

// 와이어프레임을 선으로 그리기 위해 라인 세그먼트즈 객체 생성
const box1WireframeLine = new THREE.LineSegments(box1WireframeGeometry);

3. LineSegments(라인 세그먼트즈)의 위치를 육면체 객체 오른쪽에 위치시키기 위해서 육면체 객체 위치를 복사한 후 X축에 1을 더해 줍니다. 그리고 Scence(씬, 장면)에 추가합니다.

// 육면체 객체 오른쪽에 위치 시키기 위해 육면체 위치를 복사하고 X축에 1를 더해 라인 세그먼트즈 객체의 위치 설정
box1WireframeLine.position.copy(box1.position).x += 1;
// 장면에 라인 세그먼트즈 객체 추가
scene.add(box1WireframeLine);

그러면 육면체 객체 옆에 WireFrame(와이어프레임)으로 보입니다.

육면체 객체와 구 객체의 색상과 질감을 위해 객체가 사용하는 Material(머티리얼)의 wireframe 속성을 false로 설정하거나 삭제합니다. 저는 삭제하였습니다.

그리고 라인의 색상이 흰색(기본값)이라 잘 보이지 않습니다. 그래서 라인의 색상을 붉은색으로 변경하겠습니다.

// 선 색상을 붉은색으로 변경
box1WireframeLine.material.color = new THREE.Color(0xff0000);

4. 구 객체도 WireframeGeometry(와이어프레임 지오메트리)으로 LineSegments(라인 세그먼트즈)를 생성하여 구 객체 옆에 위치하도록 하겠습니다.

// 구 지오메트리로 와이어프레임 지오메트리 생성
const sphere1WireframeGeometry = new THREE.WireframeGeometry(sphere1Geometry);
// 와이어프레임을 선으로 그리기 위해 라인 세그먼트즈 객체 생성
const sphere1WireframeLine = new THREE.LineSegments(sphere1WireframeGeometry);
// 선 색상을 붉은색으로 변경
sphere1WireframeLine.material.color = new THREE.Color(0xff0000);
// 구 객체 오른쪽에 위치 시키기 위해 구 위치를 복사하고 X축에 2를 더해 라인 세그먼트즈 객체의 위치 설정
sphere1WireframeLine.position.copy(sphere1.position).x += 2;
// 장면에 라인 세그먼트즈 객체 추가
scene.add(sphere1WireframeLine);

마우스로 이동해서 보시면 WireframeGeometry(와이어프레임 지오메트리)를 입체적으로 확인할 수 있습니다.

이어서 객체와 WireframeGeometry(와이어프레임 지오메트리)를 합쳐보겠습니다.

three.js 조명 시각화, 그림자 잘림 해결 - DirectionalLightHelper, DirectionalLightShadow, OrthographicCamera, CameraHelper

carrotweb — Mon, 26 Jun 2023 00:49:36 +0900

이전에 방향성 조명인 DirectionalLight(디렉셔널 라이트)를 사용하여 객체를 비추도록 하였습니다.

좀 더 조명에 대해 알아보겠습니다.

가끔씩 DirectionalLight(디렉셔널 라이트)가 어디에 있는지 헷갈릴 때가 있습니다. 그래서 DirectionalLight(디렉셔널 라이트)를 시각화를 해주는 DirectionalLightHelper(디렉셔널 라이트 헬퍼)를 사용하여 어느 위치에서 어느 방향으로 빛의 비추어지는지 확인해 보겠습니다.

DirectionalLightHelper(디렉셔널 라이트 헬퍼)는 빛의 위치를 평면으로 빛의 방향을 선으로 구성하여 시각화를 해줍니다.

DirectionalLightHelper(light : DirectionalLight, size : Number, color : Hex)

light(조명) : 시각화할 조명 객체입니다.
size(크기) : 평면의 치수(조명의 크기)입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
color(색상) : 시각화에 사용할 색상입니다. 기본값 조명의 색상 (입력하지 않으면 기본값으로 설정됩니다.)

1. DirectionalLight(디렉셔널 라이트)를 붉은색으로 시각화하기 위해서 DirectionalLightHelper(디렉셔널 라이트 헬퍼)를 생성합니다.

// 방향성 조명을 시각화하여 장면에 표시 
const light1Helper = new THREE.DirectionalLightHelper(light1, 1, 0xff0000);
// 장면에 조명 시각화 객체 추가
scene.add(light1Helper);

그러면 DirectionalLight(디렉셔널 라이트)가 시각화되어 보입니다.

현재 DirectionalLight(디렉셔널 라이트)의 위치(position)가 X축 -1, Y축 1, Z축 1이기 때문에 객체 가까이에 있습니다.

마우스 왼쪽 버튼을 클릭하고 마우스를 이동해서 보시면 DirectionalLight(디렉셔널 라이트)의 위치(position)를 입체적으로 확인할 수 있습니다.

2. 색상이 랜덤인 새로운 육면체 객체를 생성하여 Scence(씬, 장면)에 추가합니다.

// 육면체 지오메트리 생성
const box2Geometry = new THREE.BoxGeometry(1, 1, 1);
// 색상 랜덤
const box2Color = THREE.MathUtils.randInt(0, 0xffffff);
// 육면체에 사용할 색상과 질감의 데이터를 생성
const box2Material = new THREE.MeshStandardMaterial({color: box2Color});
// 육면체와 색상과 질감의 데이터를 결합하여 육면체 객체 생성
const box2 = new THREE.Mesh(box2Geometry, box2Material);
// 육면체에 그림자 생성 활성화
box2.castShadow = true;
// 육면체 위치 변경
box2.position.set(2, 0, 5);
// 장면에 육면체 객체 추가
scene.add(box2);

그리고 Camera(카메라)의 위치(position)를 조금 멀어지게 변경합니다.

// 카메라 위치 변경
camera.position.set(4, 8, 10);

그러면 새로운 육면체가 추가되어 보입니다. 그러나 추가된 육면제에는 그림자가 잘려서 보입니다.

마우스 왼쪽 버튼을 클릭하고 마우스를 이동해서 봐도 그림자가 잘려 보이는 것을 확인할 수 있습니다.

DirectionalLight(디렉셔널 라이트)의 위치(position)가 객체와 너무 가까이에 있어서 그런 걸까요?

DirectionalLight(디렉셔널 라이트)의 위치(position)를 객체로부터 조금 멀어지게 하겠습니다. 그리고 Camera(카메라)의 위치(position)도 변경하여 DirectionalLightHelper(디렉셔널 라이트 헬퍼)가 나오게 하겠습니다.

// 방향성 조명 위치 변경
light1.position.set(-10, 10, 10);

// 카메라 위치 변경
camera.position.set(4, 8, 20);

DirectionalLight(디렉셔널 라이트)의 위치(position)가 멀어져도 추가된 육면제의 그림자가 잘려서 보입니다.

그럼 무엇이 문제일까요?

바로 조명의 그림자를 계산하는 데 사용되는 DirectionalLightShadow(디렉셔널 라이트 쉐도우)에서 사용하는 Camera(카메라) 영역의 크기가 작기 때문입니다.

DirectionalLightShadow(디렉셔널 라이트 쉐도우)의 Camera(카메라)는 OrthographicCamera(오쏘그래픽 카메라)를 사용합니다.

OrthographicCamera(오쏘그래픽 카메라)는 원근법이 적용되지 않는 카메라입니다.

OrthographicCamera(left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number)

left(왼쪽) : 카메라 프러스텀 평면 왼쪽 위치입니다.
right(오른쪽) : 카메라 프러스텀 평면 오른쪽 위치입니다.
top(위쪽) : 카메라 프러스텀 평면 위쪽 위치입니다.
bottom(아래쪽) : 카메라 프러스텀 평면 아래쪽 위치입니다.
near(니어) : 카메라부터 가까운 카메라 프러스텀 평면 거리입니다. 기본값 0.1 (입력하지 않으면 기본값으로 설정됩니다.)
far(파) : 카메라부터 먼 카메라 프러스텀 평면 거리입니다. 기본값 2000 (입력하지 않으면 기본값으로 설정됩니다.)

그래서 객체의 그림자가 평면에 평행하게 투영된 형태(정사영)로 촬영할 수 있습니다.

원근법이 적용되지 않는 OrthographicCamera(오쏘그래픽 카메라)를 사용하는 이유는 DirectionalLight(디렉셔널 라이트)의 빛이 평행하게 비추기 때문입니다.

기본적으로 DirectionalLightShadow(디렉셔널 라이트 쉐도우)에서 사용하는 Camera(카메라)의 영역은 카메라의 중앙을 기준으로 left(왼쪽)은 -5, Right(오른쪽)은 5, Top(위쪽)은 5, Bottom(아래쪽)은 -5, near(니어)는 0.5, far(파)는 500입니다.

DirectionalLightShadow(디렉셔널 라이트 쉐도우)는 DirectionalLight(디렉셔널 라이트)의 Shadow(쉐도우) 속성으로 콘솔 로그로 확인해 보면 확인할 수 있습니다.

console.log(light1.shadow);

그럼 DirectionalLightShadow(디렉셔널 라이트 쉐도우)의 Camera(카메라)를 시각화하여 그림자가 그려지는 영역의 크기를 확인해 보겠습니다.

CameraHelper(카메라 헬퍼)는 카메라의 위치를 평면으로 영역은 선으로 구성하여 시각화를 해줍니다.

CameraHelper(camera : Camera)

camera(카메라) : 시각화할 카메라 객체입니다.

3. Camera(카메라)를 시각화하기 위해서 CameraHelper(카메라 헬퍼)를 생성합니다.

// 방향성 조명의 그림자 카메라를 시각화하여 장면에 표시 
const light1ShadowCameraHelper = new THREE.CameraHelper(light1.shadow.camera);
// 장면에 조명의 그림자 카메라 시각화 객체 추가
scene.add(light1ShadowCameraHelper);

그러면 DirectionalLight(디렉셔널 라이트)의 위치(position)에 Camera(카메라)가 시각화되어 나타나고 Camera(카메라)의 영역이 선으로 표시됩니다.

마우스 왼쪽 버튼을 클릭하고 마우스를 이동해서 보면 Camera(카메라)의 영역 안에만 그림자가 나타나는 것을 확인할 수 있습니다.

DirectionalLightShadow(디렉셔널 라이트 쉐도우)에서 사용하는 Camera(카메라) 영역의 크기가 작아 그림자가 생성되는 부분도 작아져서 그림자가 잘린 겁니다.

그럼 DirectionalLightShadow(디렉셔널 라이트 쉐도우)에서 사용하는 Camera(카메라) 영역의 크기를 조절하여 그림자가 나오도록 하겠습니다.

4. Camera(카메라) 영역을 변경합니다.

// 방향성 조명의 그림자 카메라 영역 크기 변경
light1.shadow.camera.left = -60;
light1.shadow.camera.right = 60;
light1.shadow.camera.top = 60;
light1.shadow.camera.bottom = -60;

그러면 DirectionalLightShadow(디렉셔널 라이트 쉐도우)에서 사용하는 Camera(카메라) 영역이 커져서 나타나고 객채의 그림자가 나타납니다.

(Camera(카메라) 영역은 원하시는 크기만큼 변경하시기 바랍니다.)

그렇지만 줌(Zoom)하여 객체를 보면 그림자가 흐릿하게 보이는 것을 확인할 수 있습니다.

그 이유는 그림자 맵의 크기(mapSize)가 작기 때문입니다.

기본적인 그림자 맵의 넓이(width)와 높이(height)는 각각 512입니다.

console.log(light1.shadow.mapSize);

--> Vector2 {x: 512, y: 512}

5. 그림자가 선명하게 처리되게 DirectionalLightShadow(디렉셔널 라이트 쉐도우)의 맵 크기를 크게 변경합니다.

// 방향성 조명의 그림자 맵 크기 변경
light1.shadow.mapSize.width = 3000;
light1.shadow.mapSize.height = 3000;

그러면 그림자가 선명하게 보이는 것을 확인할 수 있습니다.

(다만, 맵 크기가 커질수록 랜더링에 필요한 자원이 많이 사용되기 때문에 적절한 크기로 사용하시길 바랍니다.)

three.js 카메라 컨트롤 - OrbitControls

carrotweb — Sun, 18 Jun 2023 18:18:19 +0900

OrbitControls(오빗 컨트롤, 궤도 컨트롤)은 Scence(씬, 장면)의 중앙을 기준으로 카메라의 초점(position)에서 수직(상/하), 수평(좌/우)으로 회전하고 확대/축소를 할 수 있습니다. 그리고 카메라의 초점(position)도 이동할 수 있습니다.

1. import를 통해 OrbitControls(오빗 컨트롤, 궤도 컨트롤) 모듈을 가져옵니다.

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

OrbitControls 모듈의 위치는 node_modules에서 three의 package.json 파일을 보면 "./examples/jsm/*"이 "./addons/*"으로도 exports 된 것을 확인할 수 있습니다.

"exports": {
  ".": {
    "import": "./build/three.module.js",
    "require": "./build/three.cjs"
  },
  "./examples/fonts/*": "./examples/fonts/*",
  "./examples/jsm/*": "./examples/jsm/*",
  "./addons/*": "./examples/jsm/*",
  "./src/*": "./src/*",
  "./nodes": "./examples/jsm/nodes/Nodes.js"
}

즉, OrbitControls 모듈의 실제 위치는 "\node_modules\three\examples\jsm\controls\OrbitControls.js" 입니다.

2. OrbitControls(오빗 컨트롤, 궤도 컨트롤)을 생성합니다.

OrbitControls(object : Camera, domElement : HTMLDOMElement)

object(객체) : 제어할 카메라 객체입니다.
domElement(돔 엘리먼트): 랜더러가 렌더링 한 결과의 HTML 엘리먼트입니다.

카메라 객체와 랜더러가 렌더링 한 결과의 HTML 엘리먼트를 사용하여 OrbitControls을 생성합니다.

// 컨트롤 생성
const controls = new OrbitControls(camera, renderer.domElement);

3. OrbitControls(오빗 컨트롤, 궤도 컨트롤)을 업데이트합니다. OrbitControls(오빗 컨트롤, 궤도 컨트롤)은 렌더링 전에 실행되어야 합니다.

// 애니메이팅
function animate() {
    box1.rotation.x += 0.01;
    box1.rotation.y += 0.01;
    box1.rotation.z += 0.01;
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};

OrbitControls(오빗 컨트롤, 궤도 컨트롤)은 마우스와 터치로 컨트롤됩니다.

Orbit(오빗, 궤도, 회전)은 마우스 왼쪽 버튼을 클릭하고 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점을 중심으로 회전하게 됩니다. 터치는 한 손가락으로 화면을 터치한 후 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점을 중심으로 회전하게 됩니다.
Zoom(줌, 확대/축소)은 마우스의 스크롤 휠을 위로 스크롤하면 카메라 초점을 중심으로 확대되고 스크롤 휠을 아래로 스크롤하면 카메라 초점을 중심으로 축소가 됩니다. 터치는 두 손가락으로 화면을 터치한 후 손가락 사이를 펼치면 초점을 중심으로 확대되고 손가락 사이를 붙이면 카메라 초점을 중심으로 축소가 됩니다.
Pan(팬)은 마우스 오른쪽 버튼을 클릭하고 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점이 이동됩니다. 또는 키보드의 Ctrl이나 Shift를 누른 상태에서 마우스 왼쪽 버튼을 클릭하고 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점이 이동됩니다. 터치는 두 손가락으로 화면을 터치한 후 두 손가락을 상/하(수직), 좌/우(수평)로 이동하면 카메라 초점이 이동됩니다.

마우스 왼쪽 버튼을 클릭하고 왼쪽으로 이동하면 카메라가 Y축 중심으로 시계 방향으로 회전합니다.

마우스 왼쪽 버튼을 클릭하고 오른쪽으로 이동하면 카메라가 Y축 중심으로 시계 반대 방향으로 회전합니다.

마우스 왼쪽 버튼을 클릭하고 위쪽으로 이동하면 카메라가 X축 중심으로 위로 회전합니다.

마우스 왼쪽 버튼을 클릭하고 아래쪽으로 이동하면 카메라가 X축 중심으로 아래로 회전합니다.

마우스의 스크롤 휠을 위로 스크롤하면 확대가 됩니다.

마우스의 스크롤 휠을 아래로 스크롤하면 축소가 됩니다.

마우스 오른쪽 버튼을 클릭하고 왼쪽으로 이동하면 카메라의 X 위치가 오른쪽으로 이동됩니다.

마우스 오른쪽 버튼을 클릭하고 오른쪽으로 이동하면 카메라의 X 위치가 왼쪽으로 이동됩니다.

three.js 그림자 만들기 - shadowMap, castShadow, receiveShadow

carrotweb — Sat, 17 Jun 2023 23:29:52 +0900

객체들의 그림자가 보이기 위해서 그림자가 표현될 바닥이 필요합니다.

그래서 평면 객체를 사용하여 바닥을 만들겠습니다.

Scence(씬, 장면)에 추가할 바닥으로 PlaneGeometry(플레인 지오메트리, 평면)을 생성합니다.

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments : Integer)

width(가로, 너비, 폭) : 평면의 가로길이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
height(세로, 높이) : 평면의 세로길이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
widthSegments(수평 세그먼트, 가로 분절 수) : 가로를 분할 면의 수입니다. 기본값 1(입력하지 않으면 기본값으로 설정됩니다.)
heightSegments(수직 세그먼트, 세로 분절 수) : 세로를 분할 면의 수입니다. 기본값 1(입력하지 않으면 기본값으로 설정됩니다.)

가로, 세로가 10인 PlaneGeometry(플레인 지오메트리, 평면)를 생성하고 색상이 흰색인 Material(머티리얼)을 생성하여 평면 객체를 생성하고 Scence(씬, 장면)에 추가합니다.

MeshLambertMaterial(메쉬 램버트 머티리얼)은 반사 하이라이트가 없는 재질로 렌더링 합니다.

// 평면 지오메트리 생성
const plane1Geometry = new THREE.PlaneGeometry(10, 10);
// 반사 하이라이트가 없는 재질
const plane1Material = new THREE.MeshLambertMaterial({color:0xffffff});
// 평면 지오메트리와 메쉬 램버트 머티리얼을 결합하여 평면 객체 생성
const plane1 = new THREE.Mesh(plane1Geometry, plane1Material);
// 장면에 평면 객체 추가
scene.add(plane1);

웹 브라우저에 평면 객체가 녹색의 육면체와 겹쳐 나오게 됩니다.

그래서 평면 객체의 X축을 -90도 회전시켜 눕힙니다. 그리고 평면 객체의 위치(position)를 아래로 이동시킵니다.

// 평면 객체를 바닥처럼 눕히기 위해 X축을 90도 회전 시킵니다.
plane1.rotation.x = Math.PI * -0.5; // (Math.PI/180) * -90;
// 평면 객체를 중앙에서 아래로 위치 설정
plane1.position.set(0, -1, 0);

그러면 평면 객체가 눕혀 저 바닥처럼 보이게 됩니다.

그림자(Shadow) 기능 활성화 하기

그림자를 만들기 위해서는 렌더러(Renderer)와 조명, 생선 된 객체에 그림자 생성 기능이 활성화되어야 합니다. 그리고 그림자가 표현될 객체에 그림자 받기 기능이 활성화되어야 합니다.

렌더러(Renderer)에서 그림자를 만들기 위해서는 shadowMap 속성이 활성화(shadowMap.enabled = true) 되어야 합니다. 기본적으로 비활성화되어 있습니다. (shadowMap.enabled = false)

// 렌더러에 그림자 맵 활성화
renderer.shadowMap.enabled = true;

렌더러(Renderer)는 기본적으로 PCFShadowMap를 사용하여 그림자를 랜더링 합니다.

렌더러(Renderer)의 그림자 타입

BasicShadowMap : 필터링이 적용되지 않은 그림자 맵 (빠르지만 품질이 가장 낮습니다.)
PCFShadowMap : Percentage-Closer Filtering(PCF, 퍼센티지-클로저 필터링)을 사용한 그림자 맵 (그림자 경계에서 보이는 에일리어싱(Aliasing, 일그러짐) 문제를 해결)
PCFSoftShadowMap : PCF에서 발전된 기능을 사용한 그림자 맵 (반그림자(penumbra) 영역을 좀 더 부드럽게 처리, 그림자가 생성될 객체와 그림자가 표현될 객체의 거리에 따른 그림자 처리)
VSMShadowMap : Variance Shadow Map(VSM)을 사용한 그림자 맵

필터의 크기가 커질수록에 계산 속도가 느려지기 단점이 있습니다.

부드러운 그림자를 만들기 위해 렌더러(Renderer)의 그림자 타입을 PCFSoftShadowMap으로 설정하겠습니다.

// 렌더러에 그림자 맵 활성화
renderer.shadowMap.enabled = true;
// 렌더러에 그림자 맵 타입 설정
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

그림자가 만들어지기 위해서는 조명과 객체에 그림자 생성 기능인 castShadow(캐스트 쉐도우)가 활성화되어야 합니다. 기본적으로 비활성화되어 있습니다.

// 조명에 그림자 생성 활성화
light1.castShadow = true;
			
// 육면체에 그림자 생성 활성화
box1.castShadow = true;
// 구에 그림자 생성 활성화
sphere1.castShadow = true;

그리고 그림자가 표현될 객체에는 그림자를 받기 위해서 receiveShadow(리시브 쉐도우)가 활성화되어야 합니다. 기본적으로 비활성화되어 있습니다.

// 평면에 그림자 받기 활성화
plane1.receiveShadow = true;

그림자 기은 설정은 Scence(씬, 장면)에 추가하기 전이나 렌더러(Renderer)가 랜더 하기 전에 추가되어야 합니다.

평면 객체에 그림자가 만들어진 것을 확인할 수 있습니다.

그림자가 다 보이게 평면 객체의 위치(position)를 조정합니다.

// 평면 객체를 중앙에서 아래로 위치 설정
plane1.position.set(1, -1, -3);

또는 평면 객체의 가로, 세로가 10에서 100으로 조정합니다.

// 평면 지오메트리 생성
const plane1Geometry = new THREE.PlaneGeometry(100, 100);
:
// 평면 객체를 중앙에서 아래로 위치 설정
plane1.position.set(0, -1, 0);

저는 평면 객체의 가로, 세로를 조정하였습니다.

DirectionalLight(디렉셔널 라이트)의 위치(position)가 멀어질 수 록 객체들의 그림자가 달라집니다.

DirectionalLight(디렉셔널 라이트)의 위치(position)를 왼쪽으로 더 이동(X축 -1에서 -5로 이동)시키면 그림자가 길어지게 됩니다.

// 방향성 조명
const light1 = new THREE.DirectionalLight(0xffffff, 1);
light1.position.set(-5, 1, 1);
scene.add(light1);

three.js 조명 - AmbientLight, DirectionalLight, MeshStandardMaterial

carrotweb — Mon, 12 Jun 2023 00:38:38 +0900

조명을 사용하여 객체가 좀 더 입체적으로 보이게 하겠습니다.

조명을 사용하기 전에 객체들이 조명에 반응하도록 Material(머티리얼)을 변경해 줘야 합니다.

이전에 생성한 육면체 객체와 구 객체에는 조명에 반응하지 않는 MeshBasicMaterial(메쉬 베이식 머티리얼)을 사용하였습니다.

const box1Material = new THREE.MeshBasicMaterial({color: 0x00ff00});

:

const sphere1Material = new THREE.MeshBasicMaterial({color: 0x0000ff});

그래서 조명에 반응하는 MeshStandardMaterial(메쉬 표준 머티리얼)을 생성하여 변경하겠습니다.

MeshStandardMaterial(메쉬 표준 머티리얼)은 Metallic-Roughness를 사용한 표준 물리 기반 재질로 렌더링 합니다.

그러나 조명이 없으면 객체의 색이 표시되지 않습니다.

MeshStandardMaterial(parameters : Object)

간단하게 color 속성만 설명하겠습니다.

color 속성은 객체에 적용할 색상입니다. 기본값 0xffffff (흰색) (입력하지 않으면 기본값으로 설정됩니다.)

1. 육면체 객체와 구 객체에 사용된 MeshBasicMaterial(메쉬 베이식 머티리얼)은 주석 처리하고 MeshStandardMaterial(메쉬 표준 머티리얼)을 생성합니다.

//const box1Material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const box1Material = new THREE.MeshStandardMaterial({color: 0x00ff00});

//const sphere1Material = new THREE.MeshBasicMaterial({color: 0x0000ff});
const sphere1Material = new THREE.MeshStandardMaterial({color: 0x0000ff});

아직 조명이 없기 때문에 객체의 색이 표시되지 않습니다.

Scence(씬, 장면)에 있는 모든 객체에 빛을 비추기 위해 주변 조명(AmbientLight)을 생성하겠습니다.

AmbientLight(엠비언트 라이트)은 Scence(씬, 장면)에 있는 모든 객체에 빛을 비춥니다.

AmbientLight(color : Integer, intensity : Float)

color(색상) : 조명 색상입니다. 기본값 0xffffff (흰색) (입력하지 않으면 기본값으로 설정됩니다.)
intensity(밝기) : 조명의 강도입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)

2. Scence(씬, 장면)에 있는 모든 객체에 빛을 비추기 위해 흰색의 주변 조명(AmbientLight)을 생성합니다.

// 주변 조명
const ambientlight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientlight);

조명이 모든 객체에 일관되게 적용되기 때문에 조명의 밝기가 1이면 모든 면이 밝아져 입체로 보이지 않는다.

그래서 밝기를 0.5 이하로 설정하고 다른 조명을 추가하여 빛을 비추면 좀 더 입체적으로 보이게 됩니다.

좀 더 명암 대비가 있게 주변 조명의 밝기를 0.3으로 설정하였습니다.

// 주변 조명
const ambientlight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientlight);

그러면 조명의 밝기가 낮아져 어둡게 보입니다.

만약, 육면체 객체와 구 객체가 색을 가지 않고 있다면 조명의 색상에 따라 객체의 색이 변경됩니다.

육면체 객체와 구 객체의 MeshPhongMaterial(메쉬 퐁 머티리얼)에서 색상을 제거하고 AmbientLight(엠비언트 라이트)의 색상을 붉은색으로 변경하면 객체의 색이 조명색으로 보이게 됩니다.

const box1Material = new THREE.MeshPhongMaterial();

:

const sphere1Material = new THREE.MeshPhongMaterial();

:

const ambientlight = new THREE.AmbientLight(0xff0000, 1);

객체들이 입체적으로 보이기 위해 방향성이 있는 조명을 추가하도록 하겠습니다.

DirectionalLight(디렉셔널 라이트)은 특정 방향으로 객체에 빛을 비춥니다. 마치 태양처럼 먼 거리에서 빛이 오는 것처럼 빛을 비춥니다. 그래서 모든 그림자는 평행하게 나타납니다.

DirectionalLight(color : Integer, intensity : Float)

color(색상) : 조명 색상입니다. 기본값 0xffffff (흰색) (입력하지 않으면 기본값으로 설정됩니다.)
intensity(밝기) : 조명의 강도입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)

3. 빛을 비추기 위해 흰색의 방향성 조명(DirectionalLight)을 생성합니다.

// 방향성 조명
const light1 = new THREE.DirectionalLight(0xffffff, 1);
scene.add(light1);

그러면 위에서 아래로 빛이 비추어집니다.

DirectionalLight(디렉셔널 라이트)에 위치(position)를 설정하지 않으면 조명이 위에서 아래로 비추도록 설정됩니다.

위치(position)에서 X 축에만 값을 주면 조명이 오른쪽에서 왼쪽으로 비추도록 됩니다.

light1.position.set(1, 0, 0);

위치(position)에서 Y 축에만 값을 주면 조명이 위에서 아래로 비추도록 됩니다.

light1.position.set(0, 1, 0);

위치(position)에서 Z 축에만 값을 주면 조명이 앞에서 뒤로 비추도록 됩니다.

light1.position.set(0, 0, 1);

조명이 왼쪽에서 오른쪽으로, 위에서 아래로, 앞에서 뒤로 비추도록 설정하겠습니다.

light1.position.set(-1, 1, 1);

그러면 객체들이 조명을 받아 입체적으로 보이게 됩니다.

조명의 위치(position)가 멀어질 수 록 객체들의 위치에 따라 빛의 양도 달라집니다. 그리고 조명의 위치(position)에 따라 객체의 그림자가 달라지게 됩니다.

three.js 카메라 위치 변경, 객체 위치 변경, 애니메이팅 - Camera Position, LookAt, Mesh Position, Animating, AxesHelper, SphereGeometry

carrotweb — Sun, 11 Jun 2023 01:07:36 +0900

Camera(카메라)는 위치(position)를 설정하지 않으면 Scence(씬, 장면)의 중앙을 보게 됩니다.

그래서 Camera(카메라)의 위치(position)는 조정하여 객체가 입체적으로 보이도록 하겠습니다.

1. Camera(카메라)의 Z 위치가 커지면 Scence(씬, 장면)를 중심으로 카메라가 뒤로 이동합니다.

Camera(카메라)의 Z 위치를 2로 설정합니다.

// 카메라 Z 위치를 이동
camera.position.z = 2;

Camera(카메라)의 Z 위치를 5로 다시 설정합니다.

// 카메라 Z 위치를 이동
camera.position.z = 5;

Camera(카메라)의 Z 위치는 Camera(카메라)를 생성할 때 설정한 near(카메라부터 가까운 거리)부터 far(카메라부터 먼 거리) 안의 값으로 설정해야 합니다. (이전 생성할 때 near는 0.1, far는 1000입니다.)

2. Camera(카메라)의 X 위치가 커지면 Scence(씬, 장면)를 중심으로 오른쪽으로 카메라가 이동합니다.

Camera(카메라)의 X 위치를 1로 설정합니다.

// 카메라 X 위치를 이동
camera.position.x = 1;

Camera(카메라)의 X 위치를 2로 다시 설정합니다.

// 카메라 X 위치를 이동
camera.position.x = 2;

3. Camera(카메라)의 Y 위치가 커지면 Scence(씬, 장면)를 중심으로 위쪽으로 카메라가 이동합니다.

Camera(카메라)의 Y 위치를 1로 설정합니다.

// 카메라 Y 위치를 이동
camera.position.y = 1;

Camera(카메라)의 Y 위치를 2로 다시 설정합니다.

// 카메라 Y 위치를 이동
camera.position.y = 2;

Camera(카메라)의 위치(position)를 조정하니 객체가 입체적으로 보입니다.

Camera(카메라)는 위치(position)를 한 번에 설정할 수도 있습니다.

// 카메라 X, Y, Z 위치를 이동
camera.position.set(2, 2, 5);

객체들을 Scence(씬, 장면)에 추가할 때 Scence(씬, 장면)의 중앙이 어디에 있는지 헷갈릴 수 있습니다.

그래서 Scence(씬, 장면)에 3개의 축(X, Y, Z)을 시각화할 수 있습니다.

4. Scence(씬, 장면)에 추가할 축 도우미(AxesHelper, 엑시즈 헬퍼)를 생성합니다.

AxesHelper(size : Number)

size(크기) : 축의 길이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)

축의 길이를 5로 설정하고 Scence(씬, 장면)에 추가합니다.

// 장면에 X, Y, Z 축을 표시 (X : Red, Y : Green, Z : Blue) 
const axes = new THREE.AxesHelper(5);
scene.add(axes);

그러면 Scence(씬, 장면)에 X 축은 붉은색, Y 축은 녹색, Z 축은 파란색으로 표시됩니다.

확실하게 Scence(씬, 장면)의 중앙 위치가 확인됩니다.

이어서 구(Sphere)를 생성하여 위치(position)를 지정하여 추가해 보도록 하겠습니다.

5. Scence(씬, 장면)에 추가할 SphereGeometry(스피어 지오메트리, 구)를 생성합니다.

SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float)

radius(레이디어스, 반지름, 반경) : 구의 반지름입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
widthSegments(수평 세그먼트, 가로 분절 수) : 가로를 분할 면의 수입니다. 최소값 3, 기본값 32 (입력하지 않으면 기본값으로 설정됩니다.)
heightSegments(수직 세그먼트, 세로 분절 수) : 세로를 분할 면의 수입니다. 최소값 2, 기본값 16 (입력하지 않으면 기본값으로 설정됩니다.)
phiStart(파이 시작) : 수평 시작 각도입니다. 기본값 0 (입력하지 않으면 기본값으로 설정됩니다.)
phiLength(파이 길이) : 수평 스위프 각도 크기입니다. 기본값 Math.PI X 2 (입력하지 않으면 기본값으로 설정됩니다.)
thetaStart(세타 시작) : 수직 시작 각도입니다. 기본값 0 (입력하지 않으면 기본값으로 설정됩니다.)
thetaLength(세타 길이) : 수직 스위프 각도 크기입니다. 기본값 Math.PI (입력하지 않으면 기본값으로 설정됩니다.)

파이(Math.PI)는 180도입니다. (호도법, 라디안을 참고하세요.)

그래서 1도 = Math.PI / 180 입니다.

phiStart(파이 시작), phiLength(파이 길이), thetaStart(세타 시작), thetaLength(세타 길이)에서 각도 값을 설정할 때 사용하시면 됩니다.

(Math.PI/180) * 각도

반지름이 1인 구를 생성하고 구의 색상을 파란색으로 하기 위해서 Material(머티리얼)을 생성합니다.

SphereGeometry(스피어 지오메트리, 구)와 Material(머티리얼)을 사용하여 객체를 생성하고 객체의 위치(position)를 기존의 육면체 뒤에 오게 설정하여 Scence(씬, 장면)에 추가합니다.

// 구 지오메트리 생성
const sphere1Geometry = new THREE.SphereGeometry(1);
// 구에 사용할 색상과 질감의 데이터를 생성
const sphere1Material = new THREE.MeshBasicMaterial({color: 0x0000ff});
// 구와 색상과 질감의 데이터를 결합하여 구 객체 생성
const sphere1 = new THREE.Mesh(sphere1Geometry, sphere1Material);
// 구의 X, Y, Z 위치를 이동
sphere1.position.set(2, 1, -2);
// 장면에 구 객체 추가
scene.add(sphere1);

그러면 Scence(씬, 장면)에 구가 나타난 것을 확인할 수 있습니다.

Camera LookAt

Camera(카메라)가 객체를 바라보게 변경해 보도록 하겠습니다.

Camera(카메라)의 lookAt 함수를 사용하면 지정된 위치를 중심으로 렌더링 됩니다.

.lookAt(vector : Vector3)
.lookAt(x : Float, y : Float, z : Float)

Camera(카메라)가 육면체 객체를 중심으로 보게 변경합니다.

// 카메라를 육면체 객체를 보게 변경
camera.lookAt(box1.position);

그러면 육면체 객체가 화면 중앙에 오게 됩니다.

Camera(카메라)가 구 객체를 중심으로 보게 변경합니다.

// 카메라를 구 객체를 보게 변경
camera.lookAt(sphere1.position);

그러면 구 객체가 화면 중앙에 오게 됩니다.

Camera(카메라)가 Scence(씬, 장면)을 중심으로 보게 변경하면 육면체 객체를 중심으로 보게 변경합니다.

그 이유는 육면체 객체의 위치(position)가 X : 0, Y : 0, Z : 0이기 때문입니다.

// 카메라를 장면 중앙을 보게 변경
camera.lookAt(scene.position);

Animating(애니메이팅)

애니메이션처럼 계속 렌더링 되게 처리해 보겠습니다.

변경된 정보로 다시 렌더링 되게 하기 위해서는 HTML5를 지원하는 웹 브라우저의 내장 메서드인 requestAnimationFrame 메서드를 사용합니다.

requestAnimationFrame(callback : Function)

callback : 애니메이션을 업데이트할 시간이 되었을 때 호출할 함수입니다. (설정된 콜백 함수를 일반적으로 초당 60회 호출하지만 브라우마다 조금씩 다를 수 있습니다.)

1. 기존의 렌더러 함수는 주석 처리하고 애니메이션 함수를 생성합니다. 애니메이션 함수에는 렌더링을 위한 렌더러 함수와 애니메이션 함수를 다시 호출하기 위해 requestAnimationFrame 메서드를 추가합니다.

// 랜더링
// renderer.render(scene, camera);

// 애니메이팅
function animate() {
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};

animate();

2. 애니메이션을 위해 육면체 객체가 Scence(씬, 장면)의 X, Y, Z 축을 중심으로 회전(rotation) 시키겠습니다. (단위는 radian(라디안) 입니다.)

rotation.x는 객체가 Scence(씬, 장면)의 X 축을 중심으로 회전하게 합니다.

rotation.y는 객체가 Scence(씬, 장면)의 Y 축을 중심으로 회전하게 합니다.

rotation.z는 객체가 Scence(씬, 장면)의 Z 축을 중심으로 회전하게 합니다.

1 radian(라디안)은 약 57.3도입니다.

그래서 0.01 radian(라디안)은 0.573도입니다.

// 애니메이팅
function animate() {
    box1.rotation.x += 0.01;
    box1.rotation.y += 0.01;
    box1.rotation.z += 0.01;
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
};

그러면 육면체 객체가 Scence(씬, 장면)의 X, Y, Z 축 방향으로 회전하는 것을 확인할 수 있습니다.

three.js 장면, 카메라, 렌더러, 객체, 머티리얼 생성 - Scene, Camera, Renderer, Geometry, PerspectiveCamera, BoxGeometry, MeshBasicMaterial

carrotweb — Wed, 7 Jun 2023 00:14:27 +0900

이전에 설명들인 것처럼 three.js를 개발하기 위해서 NPM과 빌드 도구(Node.js, Vite)를 사용하거나 CDN으로 가져(Import) 오거나 직접 js 파일을 다운로드해서 사용하는 방법이 있습니다.

최근에 NPM과 빌드 도구(Node.js, Vite)를 많이 사용하고 있는 것 같아서 Node기반으로 개발하도록 하겠습니다.

우리는 어떻게 3차원으로 볼 수 있을 까요?

우리는 눈으로 공간에 있는 사물을 볼 수 있습니다. 그리고 우리는 몸을 움직여 공간에서 사물의 앞/뒤, 좌/우, 위/아래를 볼 수 있습니다. 그래서 사물을 입체적(3차원)으로 볼 수 있습니다.

그런데 우리가 움직이지 못한다면 사물이 평면으로 보일까요?

그렇지 않습니다. 그 이유는 공간이 평면이 아니기 때문입니다.

사물이 공간에서 항상 우리의 눈높이와 같은 곳에 있지 않고 상/하, 좌/우에도 있고 우리 중심으로 떨어져 있기도 하기 때문입니다. 그리고 빛이 있어 사물의 밝기가 달라지고 그림자가 생겨 더욱 입체감 있게 보입니다.

우리가 움직이지 못해도 공간 안에서 사물의 위치와 거리, 빛에 따라 우리의 눈에는 입체적(3차원)으로 보입니다.

three.js도 3차원을 만들기 위해서 우리의 눈과 같은 시점에서 구현하고 있습니다.

three.js도 사물이 있을 공간이 필요합니다.

그리고 우리의 눈처럼 사물을 촬영할 카메라(Camera)가 필요합니다.

그리고 카메라(Camera)에서 촬영한 장면(Scene)을 화면으로 볼 수 있게 처리하는 렌더러(Renderer)가 필요합니다.

즉, three.js는 우리의 눈과 같은 카메라(Camera)의 시점에서 촬영한 장면(Scene)을 화면으로 볼 수 있게 처리해 줍니다.

그러나 사물 입장에서는 장면(Scence)은 공간입니다. 그 공간에 있어야 사물이 촬영되기 때문입니다.

그럼 three.js로 3차원을 표현(Rendering, 렌더링) 하도록 하겠습니다.

1. main.js 파일을 오픈합니다.

2. 객체가 있을 공간을 생성하기 위해 Scence(씬, 장면)를 추가합니다.

// 장면 생성
const scene = new THREE.Scene();

3. 촬영할 Camera(카메라)로 원근법이 적용되는 카메라를 추가합니다.

PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)

fov(포브, field of view, 시야범위(각도)) : 화면이 보이는 각도입니다. 기본값 50도 (주로 45 ~ 75도 사이로 설정합니다.)
aspect(애스펙트, aspect ratio, 종횡비, 가로세로비(비율)) : 가로와 세로 비율(영상에서 사물을 둘러싼 공간의 크기)입니다. 웹 브라우저를 통해서 보기 때문에 화면의 너비를 화면의 높이로 나눈 값을 사용합니다.
near(니어, 카메라부터 가까운 거리) : 기본값 0.1 (입력하지 않으면 기본값으로 설정됩니다.)
far(파, 카메라부터 먼 거리) : 기본값 2000 (입력하지 않으면 기본값으로 설정됩니다.)

WebGLRenderer(렌더러)가 Camera의 far 보다 멀리 있는 객체나 near 보다 가까이 있는 객체는 표현(Rendering, 렌더링) 하지 않는다는 뜻입니다.

// 원근법이 적용되는 카메라 생성
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

4. 카메라의 시점으로 공간을 렌더링 하기 위해 WebGLRenderer(렌더러)를 추가합니다.

WebGLRenderer(parameters : Object)

자주 사용하는 속성만 간단하게 설명하겠습니다.

canvas 속성은 렌더러가 렌더링 한 결과가 출력될 canvas 객체입니다. 속성이 설정되지 않으면 canvas 객체를 생성합니다.
antialias 속성은 픽셀로 되어 있는 선들을 부드럽게 만드는 옵션이다.

WebGLRenderer(렌더러) 파라미터에 antialias 속성을 추가합니다.

// WebGL 렌더러 생성
const renderer = new THREE.WebGLRenderer({antialias: true});

웹 브라우저의 크기로 WebGLRenderer(렌더러)가 렌더링 할 화면의 크기를 설정합니다.

// 랜더링할 화면의 크기(width, height) 설정
renderer.setSize(window.innerWidth, window.innerHeight);

WebGLRenderer(렌더러)가 렌더링 한 결과를 <body> 태그 안에 추가합니다.

// 랜더러가 렌더링한 결과를 HTML에 추가 - canvas 생성
document.body.appendChild(renderer.domElement);

만약, index.html에 <canvas> 태그가 있다면 다음 처럼 하시면 됩니다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			#myCanvas {width: 800px; height: 450px;}
		</style>
	</head>
	<body>
		<canvas id="myCanvas"></canvas>
		<script type="module" src="/main.js"></script>
	</body>
</html>

main.js에서 canvas 객체를 가져와 WebGLRenderer(렌더러) 파라미터에 추가합니다.

// canvas 객체
const myCanvas = document.getElementById('myCanvas');
// WebGL 렌더러 생성
const renderer = new THREE.WebGLRenderer({canvas: myCanvas, antialias: true});

그리고 canvas 객체에 설정된 크기로 WebGLRenderer(렌더러)가 렌더링 할 화면의 크기를 설정합니다.

// 랜더링할 화면의 크기(width, height) 설정
renderer.setSize(myCanvas.clientWidth, myCanvas.clientHeight);

5. WebGLRenderer(렌더러)가 Scence(씬, 장면)과 Camera(카메라)을 사용하여 렌더링 하게 추가합니다.

// 랜더링
renderer.render(scene, camera);

그럼, Vite(비트)를 통해 확인해 보겠습니다.

6. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하거나 Ctrl + Shift + `(backtick) 키를 누릅니다. 그리고 Vite(비트)를 실행하기 위해 Terminal(터미널)에서 npx 명령어를 입력하고 Enter 키를 누릅니다.

npx vite

그러면 localhost(로컬호스트, IP가 127.0.0.1)로 포트번호 5173으로 웹 서버가 실행됩니다.

7. Terminal(터미널)에서 Local에 있는 URL(http://localhost:5173/)에 마우스를 이동한 후 Ctrl 키를 누른 후 마우스를 클릭합니다. 그러면 기본 웹 브라우저가 실행됩니다.

아직 Scence(씬, 장면)에 객체가 없기 때문에 아무것도 나타나지 않았습니다.

그럼 Scence(씬, 장면)에 육면체를 추가해 보도록 하겠습니다.

8. Scence(씬, 장면)에 추가할 BoxGeometry(박스 지오메트리, 육면체)를 생성합니다.

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

width(가로, 너비, 폭) : 가로길이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
height(세로, 높이) : 세로길이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
depth(깊이) : 깊이입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
widthSegments(수평 세그먼트, 가로 분절 수) : 가로를 분할 면의 수입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
heightSegments(수직 세그먼트, 세로 분절 수) : 세로를 분할 면의 수입니다. 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)
depthSegments(깊이 세그먼트, 깊이 분절 수) : 깊이를 분할 면의 수입니다 기본값 1 (입력하지 않으면 기본값으로 설정됩니다.)

// 육면체 지오메트리 생성
const box1Geometry = new THREE.BoxGeometry(1, 1, 1);

BoxGeometry(박스 지오메트리, 육면체)에 색상과 질감을 표현하는 Material(머티리얼)을 생성합니다.

MeshBasicMaterial(메쉬 베이식 머티리얼)은 조명을 고려하지 않고 단순하게 면을 렌더링 합니다.

MeshBasicMaterial(parameters : Object)

간단하게 color 속성만 설명하겠습니다.

color 속성은 객체의 면에 적용할 색상입니다. 기본값 0xffffff (흰색) (입력하지 않으면 기본값으로 설정됩니다.)

파라미터에 color 속성을 추가합니다.

const box1Material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

BoxGeometry(박스 지오메트리, 육면체)와 Material(머티리얼)을 사용하여 객체를 생성합니다.

// 육면체와 색상과 질감의 데이터를 결합하여 육면체 객체 생성
const box1 = new THREE.Mesh(box1Geometry, box1Material);

Scence(씬, 장면)에 생성한 객체를 추가합니다.

// 장면에 육면체 객체 추가
scene.add(box1);

main.js를 저장하면 Vite(비트)가 자동으로 웹 브라우저를 갱신해 줍니다.

Scence(씬, 장면)에 객체를 추가했지만 아무것도 나타나지 않았습니다.

그 이유는 Camera(카메라)의 위치가 객체 앞에 있어 렌더링이 되지 않기 때문입니다.

왜 Camera(카메라)가 객체의 앞에 있을 까요?

객체를 Scence(씬, 장면)에 추가할 때 객체의 위치(position)를 설정하지 않으면 Scence(씬, 장면)의 중앙에 추가됩니다.

그리고 Camera(카메라)도 위치(position)를 설정하지 않으면 Scence(씬, 장면)의 중앙을 보게 됩니다. 즉, Camera(카메라)의 Z 좌표가 0 좌표로 됩니다.

객체와 Camera(카메라) 사이의 거리를 계산해 보면 거리가 0이 나옵니다.

console.log(box1.position.distanceTo(camera.position));

그래서 Camera(카메라)의 Z 위치를 이동시켜 렌더링이 되게 합니다.

// 카메라 Z 위치를 이동
camera.position.z = 5;

웹 브라우저를 보면 녹색의 사각형이 나타난 것을 확인할 수 있습니다.

입체적으로 보이지 않는 이유는 Camera(카메라)의 위치가 정면을 바라보고 있기 때문입니다.

이어서 입체적으로 보기 위해 카메라(Camera)의 위치를 변동시키고 객체을 회전시켜서 Animating(애니메이팅)를 해보겠습니다.

three.js three.module.js 파일 사용 - Download, GitHub

carrotweb — Mon, 5 Jun 2023 18:04:35 +0900

three.module.js 파일을 다운로드하기 위해서는 Three.js 사이트에서 three.js-master.zip 파일을 다운로드하거나 GitHub에서 파일을 직접 다운로드하면 됩니다.

three.module.js 파일만 사용할 거면 GitHub에서 파일을 직접 다운로드하는 것이 간편하고 빠릅니다.

다운로드하여 스크립트 모듈로 불러오기

1. Three.js 사이트(https://threejs.org/)에서 왼쪽 메뉴에 있는 download를 클릭하여 three.js-master.zip 파일을 다운로드합니다.

다운로드한 three.js-master.zip 압축 파일을 풉니다.

2. Three.js를 Script으로 불러와 개발하기 위해 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\myworld3" 폴더를 생성하였습니다. 생성된 프로젝트 폴더에 scripts 폴더를 생성합니다.

3. three.js-master.zip 압축 파일을 푼 폴더에서 three.js-master\build 폴더에 있는 three.module.js 파일을 scripts 폴더로 복사합니다.

저는 "C:\workspaces\webstudys\myworld3\scripts 폴더로 복사하였습니다.

또는 GitHub에서 three.module.js 파일을 직접 받을 수 있습니다.

https://github.com/mrdoob/three.js/blob/dev/build/three.module.js

오른쪽에 있는 More file actions("...") 버튼을 눌러 Download를 클릭합니다.

그러면 다운로드됩니다.

다운로드한 three.module.js 파일을 scripts 폴더로 복사합니다.

4. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\myworld3" 폴더로 이동하고 "폴더 선택" 버튼을 누르면 폴더가 오픈됩니다.

보안을 위해 Trust(신뢰) 확인 창이 나타납니다. "Yes, I Trust the authors" 버튼을 누릅니다. 그리고 Welcome(시작) 창은 닫습니다.

5. index.html 파일을 생성하기 위해서 EXPLORER(탐색기)의 MYWORLD3을 선택하고 첫 번째 아이콘(New File...(새 파일))을 클릭하고 입력란에 "index.html"를 입력하고 Enter 키를 눌러 파일을 생성합니다. 그리고 에디터에서 "!"를 입력하고 Enter 키를 누릅니다.

또는 에디터에서 "html:5"를 입력하고 Enter 키를 누릅니다.

그러면 자동으로 HTML5 형식으로 만들어집니다.

에디터에서 <html> 태그에 있는 "lang" 속성은 제거합니다. 그리고 <title> 태그에 있는 "Document"를 제거하고 "My first three.js app"로 입력합니다. 그리고 <style> 태그를 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    
</body>
</html>

6. three.module.js 파일을 불러오기 위해서 스크립트의 module을 추가합니다.

<script type="module" src="scripts/three.module.js"></script>

그리고 <body> 태그 안에 개발을 위한 자바스크립트를 추가합니다.

<script type="module" src="scripts/main.js"></script>

7. main.js 파일을 생성하기 위해서 EXPLORER(탐색기)의 scripts를 선택하고 첫 번째 아이콘(New File...(새 파일))을 클릭하고 입력란에 "main.js를 입력하고 Enter 키를 눌러 파일을 생성합니다. 그리고 import를 통해 three.module.js 모듈을 가져오게 하고 저장합니다.

import * as THREE from './three.module.js';

탐색기에서 index.html 파일을 더블 클릭하여 웹 브라우저에서 실행할 수 있지만 스크립트 모듈들이 보안상의 이유로 정상적으로 작동되지 않을 수 있습니다. 그래서 웹 서버를 통해 실행하는 것이 좋습니다.

웹 서버로 실행하는 방법으로 라이브 서버(Live Server)를 사용하면 됩니다.

라이브 서버(Live Server)로 실행

라이브 서버(Live Server)의 다운로드 및 설치에 대한 자세한 설명은 "VSCode 웹 서버 설치, 포트 변경 - 라이브 서버(Live Server)" 참고하시기 바랍니다.

1. index.html 파일에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Open with Live Server"를 클릭합니다.

또는 index.html 파일 편집기에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Open with Live Server"를 클릭합니다.

2. 기본 브라우저로 설정된 웹 브라우저가 실행됩니다.

localhost(로컬호스트, IP가 127.0.0.1)로 포트번호 5500으로 웹 서버가 실행됩니다. (저는 포트번호를 9000으로 변경하였습니다.)

빈 페이지가 나올 겁니다. 아직 코드가 없어 내용이 없습니다. 정상적으로 three.js 모듈이 로드된 겁니다.

이어서 Scene, Geometry, Camera, Renderer를 사용하여 3D를 만들어 보겠습니다.

참고로, OrbitControls과 GLTFLoader와 같은 모듈들은 별도로 가져와야 합니다.

three.js-master.zip 압축 파일을 푼 폴더에서 three.js-master\examples\jsm 폴더에서 모듈들을 찾을 수 있습니다.

OrbitControls은 three.js-master\three.js-master\examples\jsm\controls 폴더에서 OrbitControls.js 파일입니다.

GLTFLoader은 three.js-master\three.js-master\examples\jsm\loaders 폴더에서 GLTFLoader.js 파일입니다

GitHub에서도 파일을 직접 받을 수 있습니다.

https://github.com/mrdoob/three.js/tree/dev/examples/jsm에서 모듈들을 찾을 수 있습니다.

OrbitControls은 https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/OrbitControls.js

GLTFLoader은 https://github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/GLTFLoader.js

three.js CDN에서 가져오기 - script importmap module, serve, npx

carrotweb — Mon, 5 Jun 2023 18:03:51 +0900

CDN에서 가져오기

1. Three.js를 CDN에서 가져와서 개발하기 위해 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\myworld2" 폴더를 생성하였습니다.

2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\myworld2" 폴더로 이동하고 "폴더 선택" 버튼을 누르면 폴더가 오픈됩니다.

보안을 위해 Trust(신뢰) 확인 창이 나타납니다. "Yes, I Trust the authors" 버튼을 누릅니다. 그리고 Welcome(시작) 창은 닫습니다.

3. index.html 파일을 생성하기 위해서 EXPLORER(탐색기)의 MYWORLD2를 선택하고 첫 번째 아이콘(New File...(새 파일))을 클릭하고 입력란에 "index.html"를 입력하고 Enter 키를 눌러 파일을 생성합니다. 그리고 에디터에서 "!"를 입력하고 Enter 키를 누릅니다.

또는 에디터에서 "html:5"를 입력하고 Enter 키를 누릅니다.

그러면 자동으로 HTML5 형식으로 만들어집니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    
</body>
</html>

4. three.js를 CDN에서 가져오기 위해서 Import Map을 사용합니다.

<script type="importmap">
  // JSON object defining import
</script>

매핑 정보는 imports 객체에 속성(key)-값(vale) 쌍으로 이루어집니다.

{
	"imports" : {
		key : value
	}
}

속성(key)에는 module-name(모듈 명, import form에서 사용할 이름), 값(vale)은 모듈의 절대 또는 상대 경로입니다. (상대 경로는 항상 ./, ../, /로 시작해야 합니다.)

three.js 사이트에 있는 내용을 보면 "three"와 "three/addons/"을 매핑하였습니다.

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
	"imports": {
		"three": "https://unpkg.com/three@<version>/build/three.module.js",
		"three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
	}
}
</script>

"three/addons/"은 "three/example/jsm/"에 있는 모듈들을 사용할 수 있게 매핑되어 있습니다. (속성(key)이 "/"로 끝나고 값(vale)이 "/"로 끝나면 경로 밑에 있는 패키지 전체가 매핑되게 됩니다.) 그래서 controls, loaders, post-processing effects와 같은 기능들을 import에서 "three/addons/"으로 가져오게 됩니다.

three.js를 가져오기 위해서 importmap에 있는 <version>를 three.js의 실제 버전으로 변경해야 합니다.

three.js의 최신 버전은 three 패키지 버전 리스트(https://www.npmjs.com/package/three?activeTab=versions)에서 확인하시기 바랍니다. (2023년 6월 현재 최신 버전은 0.153.0입니다.)

<version>를 "0.153.0"으로 변경하여 <head></head> 태그 안에 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
    </style>
    <script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
    <script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.153.0/build/three.module.js",
            "three/addons/": "https://unpkg.com/three@0.153.0/examples/jsm/"
        }
    }
    </script>
</head>
<body>
    
</body>
</html>

그리고 import를 통해 three.js 모듈을 가져오기 위해 스크립트의 module을 추가하고 저장합니다.

<script type="module">
	import * as THREE from 'three';
</script>

또는 importmap를 사용하지 않고 바로 사용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first three.js app</title>
    <style>
        body { margin: 0; }
    </style>
    <script type="module">
        import * as THREE from 'https://unpkg.com/three@0.153.0/build/three.module.js';
    </script>
</head>
<body>
    
</body>
</html>

importmap에 매핑된 경로를 보면 "https://unpkg.com/"로 되어 있습니다.

잠깐 unpkg에 대해 알아보겠습니다.

UNPKG

패키지(패키지에 있는 파일이나 전체)를 쉽고 빠르게 URL로 로드할 수 있게 해주는 사이트입니다.

https://unpkg.com/:package@:version/:file

three.js는 :package은 "three", :version은 "0.153.0", :file은 "build/three.module.js" 입니다.

https://unpkg.com/three@0.153.0/build/three.module.js

자세한 설명은 UNPKG(https://unpkg.com/)를 참고하시기 바랍니다.

웹 서버로 실행하는 방법은 serve(Node.js 기반) 또는 라이브 서버(Live Server)를 사용하면 됩니다.

serve로 실행

serve가 설치되고 실행되기 위해서는 Node.js가 설치되어 있어야 합니다.

윈도우 Node.js 다운로드 및 설치에 대한 자세한 설명은 "윈도우 Node.js 설치 - Windows Node.js Download & Install - 14.x"를 참고하시기 바랍니다.

1. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하거나 Ctrl + Shift + `(backtick) 키를 누릅니다. 그리고 Vite(비트)를 실행하기 위해 Terminal(터미널)에서 npx 명령어를 입력하고 Enter 키를 누릅니다.

npx serve .

serve가 설치된 적이 없으면 자동으로 최신 버전으로 설치를 진행해 줍니다.

"Ok to proceed? (y)"에서 Enter 키를 누르면 serve가 설치됩니다.

serve가 설치된 후 자동으로 localhost(로컬호스트, IP가 127.0.0.1)로 포트번호 3000으로 웹 서버가 실행됩니다.

2. Terminal(터미널)에서 Local에 있는 URL(http://localhost:3000)에 마우스를 이동한 후 Ctrl 키를 누른 후 마우스를 클릭합니다. 그러면 기본 웹 브라우저가 실행됩니다.

빈 페이지가 나올 겁니다. 아직 코드가 없어 내용이 없습니다. 정상적으로 three.js 모듈이 로드된 겁니다.

라이브 서버(Live Server)로 실행

라이브 서버(Live Server)의 다운로드 및 설치에 대한 자세한 설명은 "VSCode 웹 서버 설치, 포트 변경 - 라이브 서버(Live Server)" 참고하시기 바랍니다.

1. index.html 파일에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Open with Live Server"를 클릭합니다.

또는 index.html 파일 편집기에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Open with Live Server"를 클릭합니다.

2. 기본 브라우저로 설정된 웹 브라우저가 실행됩니다.

localhost(로컬호스트, IP가 127.0.0.1)로 포트번호 5500으로 웹 서버가 실행됩니다. (저는 포트번호를 9000으로 변경하였습니다.)

빈 페이지가 나올 겁니다. 아직 코드가 없어 내용이 없습니다. 정상적으로 three.js 모듈이 로드된 겁니다.

이어서 Scene, Geometry, Camera, Renderer를 사용하여 3D를 만들어 보겠습니다.

three.js NPM으로 설치 - Node.js Vite(비트 - Build Tool)

carrotweb — Mon, 5 Jun 2023 18:03:01 +0900

Node.js 기반으로 개발하기 위해서 윈도우에 Node.js가 설치되어 있어야 합니다.

그리고 Visual Studio Code로 개발을 하겠습니다.

윈도우 Node.js 다운로드 및 설치에 대한 자세한 설명은 "윈도우 Node.js 설치 - Windows Node.js Download & Install - 14.x"를 참고하시기 바랍니다.

Visual Studio Code 다운로드 및 설치에 대한 자세한 설명은 "Visual Studio Code 다운로드 및 설치 - 1.78 Download & Install - April 2023"를 참고하시기 바랍니다.

Visual Studio Code에서 Node 패키지 생성에 대한 자세한 설명은 "VSCode Node 개발 - 패키지 생성 및 실행, npm init"를 참고하시기 바랍니다.

Node 패키지 생성 및 모듈 설치

1. Three.js를 개발하기 위해 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\myworld1" 폴더를 생성하였습니다.

2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\myworld1" 폴더로 이동하고 "폴더 선택" 버튼을 누르면 폴더가 오픈됩니다.

보안을 위해 Trust(신뢰) 확인 창이 나타납니다. "Yes, I Trust the authors" 버튼을 누릅니다. 그리고 Welcome(시작) 창은 닫습니다.

3. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하거나 Ctrl + Shift + `(backtick) 키를 누릅니다. 그리고 Node 패키지를 생성하기 위해 Terminal(터미널)에서 npm init 명령어를 입력하고 Enter 키를 누릅니다.

기본 설정으로 Node 패키지를 생성하였습니다.

(변경하려면 입력하고 Enter 키를 누르면 됩니다. 기본 값을 사용하려면 그냥 Enter 키를 누르면 됩니다.)

package name는 패키지 명입니다. (myworld1)는 기본 값으로 폴더 명입니다. 그냥 Enter 키를 누릅니다.
version는 패키지 버전입니다. (1.0.0)는 기본 값입니다. 그냥 Enter 키를 누릅니다.
description는 패키지에 대한 설명입니다. 저는 간단하게 "my world"를 입력하고 Enter 키를 눌렀습니다.
entry point는 시작 파일 명입니다. (index.js)는 기본 값입니다. 그냥 Enter 키를 누릅니다.
test command는 npm test를 호출할 때마다 실행되는 명령입니다. 그냥 Enter 키를 누릅니다.
git repository는 패키지가 저장되어 있는 Git 저장소의 URL입니다. 그냥 Enter 키를 누릅니다.
keywords는 패키지의 키워드입니다. 그냥 Enter 키를 누릅니다.
author는 작성자의 이름입니다. 저는 계정인 "carrotweb"를 입력하고 Enter 키를 눌렀습니다.
license는 패키지 사용에 대한 라이선스입니다. (ISC)는 기본 값입니다. 그냥 Enter 키를 누릅니다.

"Is tis OK? (yes)"에서 Enter 키를 누르면 package.json 파일이 생성됩니다.

4. Three.js를 설치하기 위해서 Terminal(터미널)에서 npm install 명령어를 입력하고 Enter 키를 누릅니다.

npm install --save three

그러면 node_modules 폴더가 생성되고 Three.js 관련 모듈들이 추가됩니다.

5. vite(비트)를 설치하기 위해서 Terminal(터미널)에서 npm install 명령어를 입력하고 Enter 키를 누릅니다.

npm install --save-dev vite

그러면 node_modules 폴더에 vite 관련 모듈들이 추가됩니다.

Vite(비트)는 개발 중에만 사용하기 위해서 npm install에 옵션을 --save-dev로 하였습니다.

Vite(https://vitejs.dev/)는 빌드 도구(Build Tool)입니다.

자세한 설명은 한글로 설명된 Vite 사이트(https://vitejs-kr.github.io/)를 참고하세요.

Vite(비트)를 사용하면 변경된(작업하여 저장한) 소스 코드가 로컬 웹 서버에 즉시 반영되어 웹 브라우저에서 바로 확인할 수 있습니다.

이제 three.js를 개발할 수 있는 기본 환경이 만들어졌습니다.

Terminal(터미널)를 닫습니다.

기본 HTML과 JS 파일 생성 및 실행

1. index.html 파일을 생성하기 위해서 EXPLORER(탐색기)의 MYWORLD1을 선택하고 첫 번째 아이콘(New File...(새 파일))을 클릭하고 입력란에 "index.html"를 입력하고 Enter 키를 눌러 파일을 생성합니다. 그리고 three.js 사이트에서 있는 샘플 내용을 복사하여 붙여 넣고 저장합니다.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module" src="/main.js"></script>
	</body>
</html>

2. main.js 파일을 생성하기 위해서 EXPLORER(탐색기)의 MYWORLD1을 선택하고 첫 번째 아이콘(New File...(새 파일))을 클릭하고 입력란에 "main.js를 입력하고 Enter 키를 눌러 파일을 생성합니다. 그리고 three.js 사이트에서 있는 샘플 내용을 복사하여 붙여 넣고 저장합니다.

import * as THREE from 'three';

import를 통해 three.js 모듈을 가져옵니다.

그럼, Vite(비트)를 통해 확인해 보겠습니다.

3. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하거나 Ctrl + Shift + `(backtick) 키를 누릅니다. 그리고 Vite(비트)를 실행하기 위해 Terminal(터미널)에서 npx 명령어를 입력하고 Enter 키를 누릅니다.

npx vite

그러면 localhost(로컬호스트, IP가 127.0.0.1)로 포트번호 5173으로 웹 서버가 실행됩니다.

4. Terminal(터미널)에서 Local에 있는 URL에 마우스를 이동한 후 Ctrl 키를 누른 후 마우스를 클릭합니다. 그러면 기본 웹 브라우저가 실행됩니다.

빈 페이지가 나올 겁니다. 아직 코드가 없어 내용이 없습니다. 정상적으로 three.js 모듈이 로드된 겁니다.

이어서 Scene, Geometry, Camera, Renderer를 사용하여 3D를 만들어 보겠습니다.

three.js 소개

carrotweb — Mon, 5 Jun 2023 18:02:23 +0900

Three.js는 자바스크립트 3D 라이브러리(JavaScript 3D library)로 웹 브라우저에서 3D를 표현(Rendering, 렌더링)할 수 있게 해 줍니다.

Three.js 사이트(https://threejs.org/)

Three.js는 오픈 소스 프로젝트로 GitHub에 공개되어 있다. (https://github.com/mrdoob/three.js/)

Three.js는 GitHub에서 다음처럼 설명하고 있습니다.

JavaScript 3D library
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library.

The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available asaddons.

자바스크립트 3D 라이브러리

프로젝트의 목표는 범용 3D 라이브러리로 모든 웹 브라우저(cross-browser)에서 가볍(lightweight)고 쉽게 사용(easy to use)할 수 있게 하는 겁니다.

현재 빌드에는 WebGL 렌더러만 포함되어 있습니다. 그러나 WebGPU(실험적), SVG 그리고 CSS3D 렌더러를 애드온으로 사용할 수 있습니다.

Three.js는 WebGL로 렌더링 됩니다.

WebGL(Web Graphics Library)은 HTML5의 Canvas 요소(<canvas>)에 OpenGL ES 2.0의 3D 그래픽 API를 이용하여 렌더링 합니다.

즉, Three.js는 WebGL를 기반으로 3D 라이브러리를 만든 자바스크립트로 웹 브라우저에서 쉽게 3D를 표현(Rendering, 렌더링)할 수 있습니다.

Three.js를 이용하여 개발하는 방법은 다음과 같습니다.

이어서 개발하는 방법에 대해 설명하겠습니다.

IntelliJ WAR 만들기 - Maven Package, Community Edition

carrotweb — Tue, 30 May 2023 01:25:35 +0900

IntelliJ Community Edition은 Ultimate Edition의 Artifacts에 있는 Web Application, JavaEE Application, EJB Application를 지원하지 않습니다.

그래서 직접 Maven의 package를 실행해줘야 합니다.

메이븐 프로젝트 패키징하기 - WAR 만들기

1. intelliJ IDE의 오른쪽에 세로로 있는 Maven를 클릭합니다.

2. Maven Lifecycle에서 package를 선택하고 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Run 'test2 [package]'"를 클릭합니다.

그러면 target 폴더에 artifact가 출력됩니다.

로그를 보면 target 폴더에 test2 폴더를 생성하여 컴파일된 클래스들과 리소스들을 출력하고 war 파일을 생성합니다.

[INFO] --- maven-war-plugin:2.2:war (default-war) @ test2 ---
[INFO] Packaging webapp
[INFO] Assembling webapp [test2] in [C:\workspaces\studyj\test2\target\test2]
[INFO] Processing war project
[INFO] Copying webapp resources [C:\workspaces\studyj\test2\src\main\webapp]
[INFO] Webapp assembled in [22 msecs]
[INFO] Building war: C:\workspaces\studyj\test2\target\test2.war

target 폴더에 있는 test2 폴더를 복사하거나 war 파일을 복사하여 웹 서버로 옮기면 됩니다.

IntelliJ Maven Project Folder 구조 - Community Edition

carrotweb — Tue, 30 May 2023 01:02:36 +0900

메이븐 프로젝트 폴더 생성

1. intelliJ IDE의 메뉴 File > Project Structure를 클릭하거나 Ctrl + Alt + Shift + S 키를 누릅니다.

2. Project Structure 대화상자에서 Project Settings에 있는 Modules를 선택합니다.

메이븐 프로젝트에서 필요로 하는 폴더가 존재하지 않을 경우 Project Structure 대화상자의 오른쪽에 붉은색으로 필요한 폴더를 보여줍니다.

src\main 폴더에 소스 폴더(java)가 없습니다.

src 폴더에 테스트 소스 폴더(test)가 없습니다.

src\test 폴더에 테스트 리소스(resources) 폴더가 없습니다.

메이븐 프로젝트에서 필요한 폴더를 생성하도록 하겠습니다.

3. java 소스 폴더를 생성하기 위해 src\main 폴더를 선택하고 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "New Directory..."를 클릭합니다.

폴더 명으로 "java"를 입력하고 "OK" 버튼을 누릅니다.

그러면 src\main 폴더에 파란색 폴더 아이콘으로 java 폴더가 생성됩니다. 자동으로 폴더가 소스 폴더(Sources)로 설정됩니다.

생성된 java 폴더를 클릭하면 상단의 Make as에 Sources가 선택된 것을 확인할 수 있습니다. 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 보면 Sources가 체크되어 있습니다.

만약, Make as에 Sources가 선택되어 있지 않는다면 선택하시기 바랍니다.

test 소스 폴더를 생성하기 위해 src 폴더를 선택하고 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "New Directory..."를 클릭합니다.

폴더 명으로 "test"를 입력하고 "OK" 버튼을 누릅니다.

그러면 src 폴더에 녹색 폴더 아이콘으로 test 폴더가 생성됩니다. 자동으로 폴더가 테스트 폴더(Tests)로 설정됩니다.

생성된 test 폴더를 클릭하면 상단의 Make as에 Tests가 선택된 것을 확인할 수 있습니다. 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 보면 Tests가 체크되어 있습니다.

만약, Make as에 Tests가 선택되어 있지 않는다면 선택하시기 바랍니다.

이이서 생성된 test 폴더에 resources 폴더를 생성합니다.

그러면 src\test 폴더에 회색 폴더 아이콘으로 resources 폴더가 생성됩니다. 자동으로 폴더가 테스트 리소스(Test Resources)로 설정됩니다.

생성된 resources 폴더를 클릭하면 상단의 Make as에 Test Resources가 선택된 것을 확인할 수 있습니다. 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴를 보면 Test Resources가 체크되어 있습니다.

Project Structure 대화상자의 "OK" 버튼을 눌러 적용합니다.

4. 다시 intelliJ IDE의 메뉴 File > Project Structure를 클릭하여 Project Structure 대화상자에서 Project Settings에 있는 Modules를 선택해서 보면 붉은색이 없어진 것을 확인할 수 있습니다.

그렇지만 JUnit으로 테스트 클래스를 생성하려면 src\test 폴더에 java 폴더가 있어야 합니다.

그래서 src\test 폴더에 java 폴더를 생성합니다.

src\test 폴더가 테스트 폴더(Tests)로 되어 있기 때문에 Make as로 Tests를 선택하지 않아도 됩니다.

5. 프로젝트를 패키징하여 컴파일된 결과를 출력할 폴더가 필요합니다.

그래서 최상위 폴더를 선택하고 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "New Directory..."를 클릭합니다.

폴더 명으로 "target"를 입력하고 "OK" 버튼을 누릅니다.

그러면 최상위 폴더에 회색 폴더 아이콘으로 target 폴더가 생성됩니다.

이어서 WebApp를 배포하기 위해 WAR로 패키징 하는 방법에 대해 알아보겠습니다.

IntelliJ WebApp Maven Project 생성 - WebApp, maven-archetype-webapp, URI is not registered

carrotweb — Mon, 29 May 2023 23:20:00 +0900

WebApp Maven Project(웹앱 메이븐 프로젝트) 생성하기

1. "New Project"를 클릭합니다.

2. New Project 대화상자에서 Generators에 있는 Maven Archetype를 선택합니다.

저는 프로젝트 이름(Name)을 "test2"로 입력하였습니다.

프로젝트 경로(Location)는 "C:\workspaces\studyj"로 하였습니다. (Git 연동은 다음에 하도록 하겠습니다.)

JDK는 이전에 설치한 "Eclipse Temurin Version 1.8.0_372"를 선택하였습니다. ("Eclipse Temurin Version 1.8.0_372" 버전 JDK 설치는 여기(https://carrotweb.tistory.com/280)를 참고하시기 바랍니다.)

메이븐 카탈로그(Catalog)는 "Internal"를 선택하였습니다.

메이븐 카탈로그(Catalog)는 다음과 같습니다.

Internal: 메이븐 배포판에 있는 시스템 카탈로그
Default Local: 나의 시스템의 .m2 디렉터리에 있는 카탈로그
Maven Central: 메이븐 중앙 저장소에 있는 카탈로그

메이븐 아키타입(Archetype)은 "org.apache.maven.archetypes:maven-archetype-webapp"를 선택하였습니다.

메이븐 아키타입(Archetype)란, 사전적 의미로 "원형"입니다. 이 "원형"은 복사본을 만들 수 있는 "원본"을 뜻합니다.

즉, 메이븐 아키타입(Archetype)을 사용하면 이미 만들어진 구성으로 동일하게 프로젝트를 만들 수 있어 편리합니다.

(메이븐 아키타입(Archetype)은 메이븐 카탈로그(Catalog)에 따라 달라집니다.)

메이븐 아키타입 버전(Version)은 "1.0"를 선택하였습니다.

"Advanced Setting"를 클릭하여 Artifact(아티팩트)를 설정하겠습니다.

"GroupId"는 "com.home.study"으로 입력하였습니다.

"ArtifactId"는 기본적으로 프로젝트 이름(Name)으로 되어 있습니다. 그대로 사용하겠습니다.

"Version"은 기본값인 "1.0-SNAPSHOT"으로 하겠습니다.

"Create" 버튼을 누릅니다.

3. intelliJ IDE에 Maven 프로젝트로 WebApp을 만들 수 있는 샘플 코드와 함께 생성됩니다.

프로젝트가 생성되자마자 maven-archetype-plugin-3.2.1을 다운로드하고 plugin과 관련된 모듈들을 다운로드합니다.

pom.xml를 보면 New Project 대화상자에서 설정한 정보들로 설정된 것을 확인할 수 있습니다.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.home.study</groupId>
  <artifactId>test2</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>test2 Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>
  </dependencies>
  <build>
    <finalName>test2</finalName>
  </build>
</project>

<packaging>는 기본값으로 "war"로 되어 있습니다.

Package는 프로젝트의 패키징 방식으로 다음과 같습니다.

jar(Java Archive)는 여러 개의 자바 클래스나 리소스, 메타데이터 등을 하나의 파일로 압축합니다.
pom(Project Object Model)는 프로젝트의 라이브러리 의존성(dependencies), 모듈(modules), 정보(properties), 저장소(repositories), 빌드(build) 등을 관리하는 관리 파일입니다.
war(Web application ARchive)는 자바 클래스, 서버 페이지(jsp), XML, HTML, 스크립트, 이미지 등 웹 프로젝트의 모든 파일을 하나의 파일로 압축합니다.

<dependencies>를 보면 "junit"이 기본적으로 추가되어 있습니다.

JUnit은 자바 프로젝트에서 생성되는 클래스의 메서드를 테스트하는 단위 테스트 도구입니다. 이름 그래로 "Java Unit Test"입니다.

web.xml를 열어보면 "URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs)" URI가 등록되어 있지 않다는 에러가 있습니다.

이 URI에 마우스를 클릭하고 조금 있으면 붉은색 전구 아이콘이 나타납니다.

또는 붉은색 전구 아이콘이 나타날 때 마우스로 조금 이동하면 툴팁이 나타납니다.

이 아이콘을 클릭하면 에러를 처리할 방법이 나타납니다.

Fetch external resource (외부 리소스 가져오기)
Ignore external resource (외부 리소스 무시)
Manually set up external resource (외부 리소스 수동 설정)

여기서는 "Fetch external resource"를 클릭합니다. 그러면 URI가 등록되고 에러가 없어집니다.

web.xml에는 간단히 웹앱의 이름으로 "Archetype Created Web Application - 아키타입으로 만들어진 웹 애플리케이션"으로 되어 있습니다. 원하시는 이름으로 변경하면 됩니다.

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
</web-app>

index.jsp 파일을 보면 간단하게 "Hello World!"가 출력되게 되어 있습니다.

<html>
<body>
<h2>Hello World!</h2>
</body>
</html>

pom.xml를 열어 <dependencies>에 javax.servlet를 추가합니다.

<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>javax.servlet-api</artifactId>
	<version>3.1.0</version>
	<scope>provided</scope>
</dependency>

오른쪽 상단에 있는 "Load Maven Changes" 버튼을 누르면 Maven이 업데이트됩니다.

Maven이 업데이트되면서 External Libraries(외부 라이브러리)에 "javax.servlet:javax.servlet-api:3.1.0"이 추가가 됩니다.

이제 WebApp를 Maven기반으로 만들 수 있게 되었습니다.

이어서 메이븐 프로젝트을 위한 폴더 구조에 대해 알아보겠습니다.

IntelliJ General Maven Project 생성 - Artifact, maven.compiler.source

carrotweb — Mon, 29 May 2023 23:13:57 +0900

General Maven Project(기본 메이븐 프로젝트) 생성하기

1. "New Project"를 클릭합니다.

2. New Project 대화상자에서 프로젝트 이름(Name)을 입력하고 프로젝트 경로(Location), 개발언어(Language), 빌드 시스템(Build system), JDK를 선택하고 "Create" 버튼을 누릅니다.

저는 프로젝트 이름(Name)을 "test1"로 입력하였습니다.

프로젝트 경로(Location)는 "C:\workspaces\studyj"로 변경하였습니다. (Git 연동은 다음에 하도록 하겠습니다.)

개발언어(Language)는 "Java"로 선택하였습니다.

빌드 시스템(Build system)은 "Maven"를 선택하였습니다.

JDK는 이전에 설치한 "Eclipse Temurin Version 1.8.0_372"를 선택하였습니다.

(이전(https://carrotweb.tistory.com/280)에서 설명한 것처럼 "Eclipse Temurin Version 1.8.0_372"를 선택하기 위해서 "JDK"의 셀렉트박스를 클릭하여 "Add JDK..."를 선택하고 JDK의 홈 디렉터리를 선택하는 대화상자에서 JDK가 다운로드된 폴더를 선택하고 "OK" 버튼을 누릅니다.)

"Advanced Setting"를 클릭하여 Artifact(아티팩트)를 설정하겠습니다.

"GroupId"는 프로젝트 또는 라이브러리를 식별하기 위해 네임스페이스(namespace)로 "Artifact"들이 저장되는 그룹입니다. (다른 그룹과 구분되는 고유 값이어야 합니다.)

대부분 "GroupId"는 회사나 조직 이름 또는 대표 도메인(URL 주소인 도메인을 역순으로 적용)을 많이 사용합니다.

그리고 추가로 사업 명이나 전체 프로젝트 명을 추가하여 사용합니다. '.'(도트)을 이용하여 구분합니다.

개인적인 프로젝트임으로 가상 도메인인 "www.home.com"을 역순으로 적용한 "com.home"과 학습을 위한 프로젝트 임으로 "study"을 결합하여 사용하겠습니다.

저는 "GroupId"를 "com.home.study"으로 입력하였습니다.

"ArtifactId"는 제품명(산출물명)이자 프로젝트 명입니다.

소문자로 작성하며 '-'(하이픈) 또는 '.'(도트)를 포함하여 구분하기도 합니다.

"ArtifactId"는 기본적으로 프로젝트 이름(Name)으로 되어 있습니다. 그대로 사용하겠습니다.

"Create" 버튼을 누릅니다.

3. intelliJ IDE에 Maven 프로젝트로 샘플 코딩과 함께 생성됩니다.

샘플 코딩은 간단하게 문자열("Hello and welcome!")을 출력하는 부분과 for문을 사용하여 1부터 5까지 출력하는 부분으로 되어 있습니다. 그리고 for문에서 출력되는 부분에 디버깅(Debugging)을 위한 Breakpoint(브레이크 포인트, 중단점)가 설정되어 있습니다.

// Press Alt+Enter with your caret at the highlighted text to see how
// IntelliJ IDEA suggests fixing it.
System.out.printf("Hello and welcome!");

// Press Shift+F10 or click the green arrow button in the gutter to run the code.
for (int i = 1; i <= 5; i++) {
    // Press Shift+F9 to start debugging your code. We have set one breakpoint
    // for you, but you can always add more by pressing Ctrl+F8.
    System.out.println("i = " + i);
}

그리고 pom.xml를 보면 New Project 대화상자에서 설정한 정보들로 설정된 것을 확인할 수 있습니다.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.home.study</groupId>
    <artifactId>test1</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

</project>

<Version>은 "Artifact"의 버전입니다.

기본적으로 "1.0-SNAPSHOT"으로 되어 있습니다.

"-SNAPSHOT"은 버전이 개발 버전인 것을 알려줍니다.

그리고 정식 배포 버전이 만들어지면 "-RELEASE"를 붙입니다. ("1.0-RELEASE"), "-RELEASE"는 생략할 수도 있습니다.

<properties>에는 <maven.compiler.source>와 <maven.compiler.target>으로 Java Compiler 버전이 설정되어 있습니다. 그리고 "UTF-8"로 인코딩이 설정되어 있습니다.

Java Compiler 설정에 대한 내용은 "https://maven.apache.org/plugins/maven-compiler-plugin/examples/set-compiler-source-and-target.html"를 참고하시기 바랍니다.

Normal Maven Project(메이븐 프로젝트) 실행(Run)하기

1. intelliJ IDE에서 "Main.java" 파일에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Run 'Main.main()'"를 클릭합니다.

또는 상단 툴바(Toolbar)에서 녹색 실행(Run)을 누릅니다.

2. 하단에 Run 탭이 나타나고 출력문으로 출력된 내용을 확인할 수 있습니다.

샘플 코드에서 "Hello and welcome!"의 출력문으로 System.out.printf 보다는 System.out.println으로 하는 게 맞는 것 같습니다.

Normal Maven Project(메이븐 프로젝트) 디버깅(Debugging)하기

1. intelliJ IDE에서 "Main.java" 파일에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Debug 'Main.main()'"를 클릭합니다.

또는 상단 툴바(Toolbar)에서 녹색 디버그(Debug)를 누릅니다.

2. 하단에 Debug 탭이 나타나고 Debugger 탭에는 Breakpoint(브레이크 포인트, 중단점)가 있는 라인에 대한 정보가 나타납니다. 그리고 Console 탭을 누르면 출력문으로 출력된 내용을 확인할 수 있습니다.

디버그 컨트롤(Debug Controls) 설명 상자는 "Got it"를 누르면 사라집니다.

간단하지만 기본적인 Maven 프로젝트를 생성할 수 있습니다.

IntelliJ JDK 설정 - Eclipse Temurin (AdoptOpenJDK HotSpot) 1.8.0_372, JBR-17.0.6+10-829.9-jcef

carrotweb — Sat, 27 May 2023 22:38:09 +0900

IntelliJ IDEA Community 2023.1을 설치하면 자동으로 JBR-17.0.6가 설치됩니다.

JBR-17.0.6이 설치된 경로는 IntelliJ가 설치된 폴더에 "jbr" 폴더입니다. (저는 "C:\workspaces\IntelliJ\jbr"입니다.)

JBR은 JetBrains Runtime으로 OpenJDK 17.0.6을 기반으로 만들어졌습니다.

즉, JetBrains이 IDE(Integrated Development Environment, 통합 개발 환경)에서 사용할 목적으로 OpenJDK(Open Java Development Kit)를 가져와서 기능을 추가하고 개선한 JDK입니다.

JetBrains Runtime에는 크롬 임베디드 기능과 향상된 클래스 재정의 기능이 포함되어 있습니다.

JCEF(Java Chromium Embedded Framework, 자바 크롬 임베이드 프레임워크)로 JVM 기반 애플리케이션에 크롬 기반 브라우저를 임베드할 수 있게 해 줍니다.
클래스 재정의(Enhanced class re-definition) 기능을 향상시키기 위해서 DCEVM(Dynamic Code Evolution Virtual Machine - 런타임(Runtime)에서 로드된 클래스를 재정의할 수 있는 Java HotSpot VM을 수정하여 만듦) 기술을 이용하여 JVM(Java Virtual Machine)를 다시 시작하지 않아도 변경된 코드가 다시 로드되게 처리하였습니다.

JBR-17.0.6(17.0.6-b829.9)은 2023년 4월 10일에 릴리스 되어 IDE 버전 2023.1에 적용되었습니다.

자세한 내용은 "https://github.com/JetBrains/JetBrainsRuntime/releases"에서 "Release 17.0.6-b829.9"를 참고하시기 바랍니다.

New Project에서 JDK 설정

1. "New Project"를 클릭합니다.

그러면 "New Project" 대화상자 나타납니다.

"New Project" 대화상자에서 "JDK"를 보면 "JetBrains Runtime version 17.0.6"인 것을 확인할 수 있습니다.

여기서는 Eclipse Temurin (AdoptOpenJDK HotSpot) 1.8.0_372 버전을 다운로드하여 설치하겠습니다.

여러분의 프로젝트 환경에 맞게 JDK 버전을 선택하시기 바랍니다.

2. "JDK"의 셀렉트박스를 클릭하여 "Download JDK..."를 선택합니다.

그러면 설치 가능한 JDK의 버전별 리스트를 다운로드합니다.

3. "Download JDK" 대화상자에서 "Version"의 셀렉트박스를 클릭하여 "1.8"를 선택합니다.

"Vendor"의 셀렉트박스를 클릭하여 "Eclipse Temurin (AdoptOpenJDK HotSpot) 1.8.0_372"를 선택합니다.

Eclipse Temurin(이클립스 테무린)란 이클립스 재단에서 OpenJDK를 기반으로 개발한 JDK로 이클립스 재단의 Adoptium(어댑티움) 프로젝트로 진행되고 있습니다.

현재 AdoptOpenJDK 1.8부터 AdoptOpenJDK 2.0까지 릴리즈 되어 있습니다.

설치할 "Location"를 변경하지 않을 경우 "Download" 버튼을 클릭합니다.

저는 "Location"를 "C:\workspaces\adoptopenjdk\temurin-1.8.0_372"로 변경하였습니다.

그러면 "Eclipse Temurin (AdoptOpenJDK HotSpot) 1.8.0_372"이 다운로드됩니다.

다운로드가 완료되면 "JDK"가 "Eclipse Temurin Version 1.8.0_372"로 변경된 것을 확인할 수 있습니다.

그렇지만, "New Project"를 다시 하면 조금 전에 다운로드한 "Eclipse Temurin Version 1.8.0_372"가 보이지 않습니다.

그래서 다운로드한 "Eclipse Temurin Version 1.8.0_372"를 선택하기 위해서 "JDK"의 셀렉트박스를 클릭하여 "Add JDK..."를 선택합니다.

그러면 JDK의 홈 디렉터리를 선택하는 대화상자가 나타납니다. JDK가 다운로드된 폴더를 선택하고 "OK" 버튼을 누릅니다. 저는 "C:\workspaces\adoptopenjdk\temurin-1.8.0_372" 폴더에 선택하였습니다.

"JDK"에 "Eclipse Temurin Version 1.8.0_372"가 추가된 것을 확인할 수 있습니다.

IntelliJ 다운로드 및 설치 - IntelliJ IDEA Download & Install - 2023.1.2

carrotweb — Sat, 27 May 2023 22:36:36 +0900

IntelliJ IDEA 다운로드

1. JET BRANS 사이트(https://www.jetbrains.com/idea/)에 접속합니다.

현재 최신버전은 2023.1.2입니다.

2. 오른쪽 상단에 있는 Download나 페이지에 있는 Download를 클릭하면 Download IntelliJ IDEA 페이지로 이동합니다.

두 개의 버전을 다운로드할 수 있습니다.

Ultimate는 유료 버전으로 입니다. 30일간은 무료로 이용한 할 수 있습니다.

이후에는 라이선스 구매해서 등록해야 사용할 수 있습니다. 현재 개인 라이선스 비용은 1년에 169달러입니다.

Communiry Edition는 무료 버전입니다.

Ultimate에 비해 지원 가능한 개발 언어, 프레임워크, 도구들이 제한되어 있습니다.

그러나 Java나 Kotlin으로 웹 프로그램을 개발하는 데는 Communiry Edition으로도 충분하나 개발 환경(언어, 프레임워크, 도구)에 따라 Ultimate가 아니면 개발하는데 문제가 있을 수 있습니다.

Ultimate와 Communiry Edition를 자세하게 비교해서 설명한 "IntelliJ IDEA Ultimate vs IntelliJ IDEA Community Edition"에서 확인해 보시길 바랍니다.

3. 여기서는 무료버전인 Communiry Edition을 다운로드하겠습니다. Communiry Edition에 있는 Download버튼을 클릭하면 감사페이지로 이동되고 IntelliJ 설치 파일(ideaIC-2023.1.2.exe)이 다운로드됩니다.

IntelliJ IDEA 설치

1. 웹 브라우저 하단에 있는 다운로드된 파일을 클릭하거나 다운로드 폴더에서 다운로드 ideaIC-2023.1.2.exe 파일을 클릭합니다. 그러면 "이 앱이 디바이스를 변경할 수 있도록 허용하시겠어요?"라는 보안 확인 창이 나타납니다. "예" 버튼을 클릭합니다.

그러면 Installer가 실행됩니다. "Next >" 버튼을 누릅니다.

이전에 IntelliJ IDEA를 설치하였다면 이전 버전을 삭제할지 물어봅니다.

이전 버전을 삭제하려면 설치 경로를 체크하고 "Next > " 버튼을 누릅니다.

2. IntelliJ IDEA를 설치할 경로를 선택합니다.

기본적으로 "C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2023.1.2"로 되어 있습니다.

설치 경로를 변경하지 않을 경우 "Next >" 버튼을 누릅니다.

저는 "C:\workspaces\IntelliJ"로 변경하였습니다.

3. 설치 옵션(바탕화면에 바로가기를 생성, 시스템 환경 변수의 PATH에 IntelliJ의 "bin" 폴더 경로 추가, 콘텍스트 메뉴에 추가)을 선택합니다. 그리고 "Next >" 버튼을 누릅니다.

4. 시작 메뉴 폴더명을 입력합니다. 그리고 "Install" 버튼을 누릅니다.

5. 설치가 진행됩니다.

6. 설치가 완료되면 "Finish" 버튼을 누릅니다.

IntelliJ IDEA 실행

1. 바탕화면에서 IntelliJ IDEA Community Edition 2023.1.2를 클릭합니다.

또는 윈도우 시작 버튼을 클릭하고 "IntelliJ"를 입력하고 IntelliJ IDEA Community Edition 2023.1.2 앱을 클릭합니다.

또는 "C:\workspaces\IntelliJ\bin" 폴더에서 idea64.exe를 클릭합니다.

그러면 IntelliJ IDEA Community 2023.1이 실행됩니다.

Welcome 화면이 나타납니다.

VSCode Extension 개발 3 - Clock Extension, Status Bar Item createStatusBarItem context.subscriptions.push

carrotweb — Fri, 19 May 2023 21:27:54 +0900

Visual Studio Code의 Status Bar(상태 표시줄)에 시계를 만들어 추가하겠습니다.

시계 Extension 개발

1. Visual Studio Code의 메뉴 Terminal(터미널)에서 yo code 명령어로 개발할 시계 Extension 정보를 입력하여 Node 프로젝트를 생성합니다. (yo code 명령어에 대한 자세한 설명은 https://carrotweb.tistory.com/277를 참고하시기 바랍니다.)

PS C:\workspaces\webstudys\extension1> yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? Clock
? What's the identifier of your extension? clock
? What's the description of your extension? Clock
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? No
? Which package manager to use? npm

2. package.json 파일을 오픈하여 "command"를 "clock.helloWorld"에서 "clock.MyClock"으로 변경하고 "title"를 "Hello World"에서 "My Clock"으로 변경하고 저장합니다. 그러면 명령 팔레트(Command Palette)에서 "My Clock"으로 실행할 수 있습니다.

"contributes": {
  "commands": [{
    "command": "clock.MyClock",
    "title": "My Clock"
  }]
},

3. extension.js 파일을 오픈하여 "vscode.commands.registerCommand"의 "clock.helloWorld"를 "clock.MyClock"으로 변경합니다.

// The command has been defined in the package.json file
// Now provide the implementation of the command with  registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('clock.MyClock', function () {

그리고 메시지가 노출되는 부분은 주석처리합니다.

// Display a message box to the user
//vscode.window.showInformationMessage('Hello World from Clock!');

Status Bar(상태 표시줄)에 아이템을 추가하기 위해서는 StatusBarItem(상태 표시줄 아이템)를 생성해야 합니다.

StatusBarItem은 createStatusBarItem 함수로 생성할 수 있습니다.

createStatusBarItem(alignment?: StatusBarAlignment, priority?: number): StatusBarItem

createStatusBarItem 함수의 첫 번째 파라미터는 Status Bar(상태 표시줄)에서의 StatusBarItem(상태 표시줄 아이템)의 위치를 설정합니다. 위치는 왼쪽(vscode.StatusBarAlignment.Left) 또는 오른쪽(vscode.StatusBarAlignment.Right)으로 설정할 수 있습니다. 두 번째 파라미터는 StatusBarItem(상태 표시줄 아이템)의 우선순위입니다. 우선순위는 값이 클수록 왼쪽에 위치하게 됩니다.

StatusBarItem(상태 표시줄 아이템)을 왼쪽으로 우선순위 값을 크게 줄 경우

StatusBarItem(상태 표시줄 아이템)을 왼쪽으로 우선순위 값을 낮게 줄 경우

StatusBarItem(상태 표시줄 아이템)을 오른쪽으로 우선순위 값을 크게 줄 경우

StatusBarItem(상태 표시줄 아이템)을 오른쪽으로 우선순위 값을 낮게 줄 경우

우리는 StatusBarItem(상태 표시줄 아이템)을 오른쪽으로 맨 마지막에 위치하게 우선순위 값을 낮게 주겠습니다.

// 상태 표시줄 아이템 생성 - 오른쪽 마지막으로 배정
const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 0);

그리고 생성된 statusBarItem에 시간과 분이 표시되게 하고 말풍선(ToolTip, 툴팁)에는 시간, 분, 초가 표시되게 합니다.

statusBarItem.text = "12:00";
statusBarItem.tooltip = "12:00:00";

그리고 Status Bar(상태 표시줄)에 StatusBarItem(상태 표시줄 아이템)이 표시되게 합니다.

// 상태 표시줄 아이템 표시
statusBarItem.show();

// 상태 표시줄에 추가
context.subscriptions.push(statusBarItem);

4. Visual Studio Code의 메뉴 Run(실행) > Start Debugging(디버깅 시작)를 클릭하거나 기능키 F5 버튼을 누릅니다. 그리고 새로운 Visual Studio Code의 메뉴 View > Command Palette... 를 클릭하거나 Ctrl + Shift + P를 눌러 명령 팔레트(Command Palette)를 실행시킨 후 입력란에서 "My Clock"를 입력하고 검색된 결과에서 "My Clock를 선택합니다.

그러면 Status Bar(상태 표시줄)의 오른쪽에 시간과 분이 표시되는 것을 확인할 수 있습니다.

오픈된 Visual Studio Code를 닫습니다.

StatusBarItem(상태 표시줄 아이템)에는 현재 시간의 시간과 분이 표시되게 하고 말풍선(ToolTip, 툴팁)에는 현재 시간의 시간, 분, 초가 표시되게 처리하겠습니다.

5. 현재 시간을 표시하는 함수를 생성합니다.

function clock(statusBarItem) {
	// 현재 날짜/시간
	let today = new Date();

	// 현재 시
	let todayHours = today.getHours();
	// 현재 분
	let todayMinutes = today.getMinutes();
	// 현재 초
	let todaySeconds = today.getSeconds();

	let todayString = "";
	if (todayHours < 10) {
		todayString += "0";
	}
	todayString += todayHours + ":";

	if (todayMinutes < 10) {
		todayString += "0";
	}
	todayString += todayMinutes;
	
	statusBarItem.text = todayString;
	
	todayString += ":";
	if (todaySeconds < 10) {
		todayString += "0";
	}
	todayString += todaySeconds;
	
	statusBarItem.tooltip = todayString;
}

그리고 현재 시간을 표시하는 함수가 호출되게 변경합니다.

// 상태 표시줄 아이템 생성 - 오른쪽 마지막으로 배정
const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 0);

// 현재 시간 적용
clock(statusBarItem);

// 상태 표시줄 아이템 표시
statusBarItem.show();

// 상태 표시줄에 추가
context.subscriptions.push(statusBarItem);

위의 4번과 같이 디버깅하면 Status Bar(상태 표시줄)의 오른쪽에 현재 시간이 표시되는 것을 확인할 수 있습니다.

오픈된 Visual Studio Code를 닫습니다.

6. 현재 시간으로 StatusBarItem(상태 표시줄 아이템)에 시간과 분이 표시되게 하고 말풍선(ToolTip, 툴팁)에는 시간, 분, 초가 표시되게 1초마다 현재 시간을 표시하는 함수를 호출하게 변경합니다.

// 상태 표시줄 아이템 생성 - 오른쪽 마지막으로 배정
const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 0);

// 현재 시간 적용
clock(statusBarItem);

// 상태 표시줄 아이템 표시
statusBarItem.show();

// 1초 마다 현재 시간 적용
setInterval(() => {
	clock(statusBarItem);
	}, 1000);

// 상태 표시줄에 추가
context.subscriptions.push(statusBarItem);

위의 4번과 같이 디버깅하면 Status Bar(상태 표시줄)의 오른쪽에 현재 시간이 1초마다 변경되면서 표시되는 것을 확인할 수 있습니다.

오픈된 Visual Studio Code를 닫습니다.

7. StatusBarItem(상태 표시줄 아이템)이 Status Bar(상태 표시줄)에서 구분되게 색상과 배경색을 설정합니다. 테마 색상은 https://code.visualstudio.com/api/references/theme-color를 참고하시기 바랍니다.

// 상태 표시줄 아이템 색상
statusBarItem.color = new vscode.ThemeColor('statusBarItem.warningForeground');
statusBarItem.backgroundColor = new vscode.ThemeColor('statusBarItem.warningBackground');

위의 4번과 같이 디버깅하면 StatusBarItem(상태 표시줄 아이템)의 색상이 변경된 것을 확인할 수 있습니다.

VSCode Extension 개발 2 - Hello World

carrotweb — Sun, 14 May 2023 22:04:35 +0900

기본 Extension 개발

1. Extension 개발을 위해 Terminal(터미널)에서 yo code 명령어를 입력하고 Enter 키를 누릅니다.

yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
  New Language Pack (Localization)
  New Web Extension (TypeScript)
  New Notebook Renderer (TypeScript)

What type of extension do you want to create? (어떤 타입의 확장 프로그램으로 만들기를 원하십니까?)

키보드의 상/하 방향키로 선택하면 됩니다.

여기서는 New Extension (JavaScript)를 선택하고 Enter 키를 누릅니다.

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? ()

What's the name of your extension? (확장 프로그램의 이름은 무엇입니까?)

여기서는 "helloworld" 입력하고 Enter 키를 누릅니다.

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? (helloworld)

What's the identifier of your extension? (확장 프로그램의 식별자는 무엇입니까?)

여기서는 기본값인 (helloworld)를 사용하기 위해 Enter 키를 누릅니다.

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? helloworld
? What's the description of your extension? ()

What's the description of your extension? (확장 프로그램에 대한 설명은 무엇입니까?)

여기서는 "Extension Test" 입력하고 Enter 키를 누릅니다.

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? helloworld
? What's the description of your extension? Extension Test
? Enable JavaScript type checking in 'jsconfig.json'? (y/N)

Enable JavaScript type checking in 'jsconfig.json'? ('jsconfig.json'으로 JavaScript 타입을 체크하도록 하락하시겠습니까?)

여기서는 "Y" 입력하고 Enter 키를 누릅니다.

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? helloworld
? What's the description of your extension? Extension Test
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? (Y/n)

Initialize a git repository? (git 저장소를 초기화하시겠습니까?)

여기서는 "N" 입력하고 Enter 키를 누릅니다.

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? helloworld
? What's the identifier of your extension? helloworld
? What's the description of your extension? Extension Test
? Enable JavaScript type checking in 'jsconfig.json'? Yes
? Initialize a git repository? No
? Which package manager to use? (Use arrow keys)
> npm 
  yarn 
  pnpm

Which package manager to use? (사용할 패키지 관리자는 무엇입니까?)

키보드의 상/하 방향키로 선택하면 됩니다.

여기서는 npm를 선택하고 Enter 키를 누릅니다.

그러면 "helloworld'라는 폴더가 생성되고 Node 패키지 관련 모듈과 파일들이 설치됩니다.

설치가 완료되면

? Do you want to open the new folder with Visual Studio Code? (Use arrow keys)
> Open with `code`
  Skip

Do you want to open the new folder with Visual Studio Code? (Visual Studio Code로 새 폴더를 열겠습니까?)

키보드의 상/하 방향키로 선택하면 됩니다.

여기서는 skip를 선택하고 Enter 키를 누릅니다.

여기서 Open with `code`를 선택하고 Enter 키를 누르면 새로운 Visual Studio Code가 오픈됩니다.

그래서 Visual Studio Code의 Terminal(터미널)에서 yo code 명령어를 실행할 경우에는 skip를 선택하시기 바랍니다.

2. Terminal(터미널)를 닫고 EXPLORER(탐색기)에서 "hellowold" 폴더에 있는 'extension.js"를 클릭하여 오픈해 보면 기본적인 코딩이 되어 있는 것을 학인 할 수 있습니다.

// The command has been defined in the package.json file
// Now provide the implementation of the command with  registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('helloworld.helloWorld', function () {
	// The code you place here will be executed every time your command is executed
	// Display a message box to the user
	vscode.window.showInformationMessage('Hello World from helloworld!');
});

기본 코딩은 명령 팔레트(Command Palette)에서 "Hello World"를 입력하고 선택되어 실행되면 메시지 박스가 나타나게 되어 있습니다.

package.json 파일을 오픈하여 보면 "title"이 "Hello World"로 되어 있습니다, 이 부분을 수정하면 명령어가 변경됩니다.

"contributes": {
  "commands": [{
    "command": "helloworld.helloWorld",
    "title": "Hello World"
  }]
}

3. Visual Studio Code의 메뉴 Run(실행) > Start Debugging(디버깅 시작)를 클릭하거나 기능키 F5 버튼을 누릅니다.

그러면 디버깅을 위해 실행될 환경을 선택할 수 있는 창이 나타납니다. Extension를 테스트하기 위해서 "VS Code Extension Development"를 선택합니다.

그러면 새로운 Visual Studio Code가 실행됩니다.

4. 새로운 Visual Studio Code의 메뉴 View > Command Palette... 를 클릭하거나 Ctrl + Shift + P를 눌러 명령 팔레트(Command Palette)를 실행시킨 후 입력란에서 "Hello"를 입력합니다. 그리고 검색된 결과에서 "Hello World"를 선택합니다.

그러면 오른쪽 상태바 위에 메시지 박스가 나타납니다.

기초적인 코딩이지만 Extension를 개발할 수 있게 되었습니다.

VSCode Extension 개발 1 - 실행 정책 변경(Set-ExecutionPolicy), Yeoman, VS Code Extension Generator 설치

carrotweb — Sun, 14 May 2023 20:47:47 +0900

Yeoman과 VS Code Extension Generator 설치

1. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하거나 Ctrl + Shift + `(backtick) 키를 누릅니다. Yeoman과 VS Code Extension Generator를 설치하기 위해 Terminal(터미널)에서 npm install -g yo generator-code 명령어를 입력하고 Enter 키를 누릅니다.

npm install -g yo generator-code

설치가 진행됩니다.

Extension 개발

1. Extension 개발을 위해 작업 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\extension1" 폴더를 생성하였습니다.

2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\extension1" 폴더로 이동하고 "폴더 선택" 버튼을 누릅니다.

3. EXPLORER(탐색기)에 오픈한 폴더의 이름이 대문자(EXTENSION1)로 적용되어 오픈됩니다.

그리고 보안을 위해 Trust(신뢰) 확인 창이 나타납니다. "Yes, I Trust the authors" 버튼을 누릅니다.

4. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하거나 Ctrl + Shift + `(backtick) 키를 누릅니다. 그리고 Extension 개발을 위해 Terminal(터미널)에서 yo code 명령어를 입력하고 Enter 키를 누릅니다.

yo code

그러면 보안 문제(스크립트 실행 제한)로 실행되지 않습니다.

yo : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\carro\AppData\Roaming\npm\yo.ps1 파일을 로드할 수 
없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시
오.
위치 줄:1 문자:1
+ yo code
+ ~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

스크립트 실행 제한 확인 및 변경

PowerShell의 실행 정책은 PowerShell이 구성 파일을 로드하고 스크립트를 실행하는 조건을 제어하는 안전 기능입니다. 이 안전 기능은 악성 스크립트의 실행을 방지하는 데 도움이 됩니다.

1. 현재 PowerShell 세션에 대한 실행 정책을 확인하기 위해 Terminal(터미널)에 Get-ExecutionPolicy 명령어를 입력하고 Enter 키를 누릅니다.

Get-ExecutionPolicy

Terminal(터미널)에 "Restricted"이라고 출력됩니다.

Restricted은 윈도우 클라이언트 컴퓨터에 대한 기본 실행 정책으로 개별 명령을 허용하지만 스크립트는 허용하지 않습니다. 그래서 yo code 명령어가 실행되지 않았습니다.

2. 자세하게 현재 세션에 영향을 주는 모든 실행 정책을 확인하기 위해 Terminal(터미널)에 Get-ExecutionPolicy -List 명령어를 입력하고 Enter 키를 누릅니다.

Get-ExecutionPolicy -List

실행 정책 범위(Scope)로 실행 정책(ExecutionPolicy)이 출력됩니다.

        Scope ExecutionPolicy
        ----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser       Undefined
 LocalMachine       Undefined

PowerShell 실행 정책을 변경하려면 Set-ExecutionPolicy 명령어를 사용해야 합니다. Set-ExecutionPolicy 명령어가 실행되면 변경된 실행 정책으로 즉시 적용됩니다.

특정 실행 정책 범위(Scope)에만 실행 정책을 변경하기 위해서는 매개 변수로 Scope를 사용해야 합니다.

Set-ExecutionPolicy -Scope <scope>

PowerShell 실행 정책 범위 (Scope)

MachinePolicy - 컴퓨터의 모든 사용자에 대한 그룹 정책으로 설정합니다.
UserPolicy - 컴퓨터의 현재 사용자에 대한 그룹 정책으로 설정됩니다.
Process - 현재 프로세스에만 설정됩니다.
CurrentUser - 현재 사용자에게만 설정됩니다.
LocalMachine - 현재 컴퓨터의 모든 사용자에게 설정됩니다.

실행 정책을 변경하기 위해서는 매개 변수로 ExecutionPolicy를 사용해야 합니다.

Set-ExecutionPolicy -ExecutionPolicy <PolicyName>

PowerShell 실행 정책 (PolicyName)

AllSigned - 모든 스크립트에는 신뢰할 수 있는 작성자의 서명이 있어야 스크립트가 실행됩니다.
Bypass - 아무것도 차단되지 않으며 경고 또는 프롬프트 없이 스크립트기 실행됩니다.
Default - 기본 실행 정책으로 윈도우 클라이언트이면 Restricted이 윈도우 서버이면 RemoteSigned으로 설정됩니다.
RemoteSigned - 로컬 컴퓨터에 작성되면 작성자의 서명이 없어도 스크립트 파일이 실행됩니다. 그렇지만 인터넷에서 다운로드한 스크립트 파일은 작성자의 서명이 필요합니다.
Restricted - 개별 명령을 실행되지만 스크립트 파일은 실행을 허용하지 않습니다.
Undefined - 실행 정책이 설정되어 있지 않아서 스크립트가 실행됩니다.
Unrestricted - 서명되지 않은 스크립트를 실행할 수 있습니다.

현재 사용자에게만 실행 정책을 변경하기 위해 <scope>는 CurrentUser로 <PolicyName>은 RemoteSigned으로 설정하겠습니다.

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

3. 실행 정책을 변경하기 위해 Terminal(터미널)에 Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned 명령어를 입력하고 Enter 키를 누릅니다.

만약, <scope>를 LocalMachine으로 할 경우 PowerShell를 관리자 권한으로 실행해야 합니다. 그렇지 않으면 실행되지 않습니다.

Set-ExecutionPolicy -Scope LocalMachine -ExecutionPolicy RemoteSigned

Set-ExecutionPolicy : 레지스트리 키 'HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\PowerShell\1\ShellIds\Microsoft.PowerShell'
에 대한 액세스가 거부되었습니다. 기본(LocalMachine) Scope에 대한 실행 정책을 변경하려면 "관리자 권한으로 실행" 옵션으로
 Windows PowerShell을 시작하십시오. 현재 사용자에 대한 실행 정책을 변경하려면 "Set-ExecutionPolicy -Scope CurrentUser"
를 실행하십시오.
위치 줄:1 문자:1
+ Set-ExecutionPolicy -Scope LocalMachine -ExecutionPolicy RemoteSigned
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : PermissionDenied: (:) [Set-ExecutionPolicy], UnauthorizedAccessException
    + FullyQualifiedErrorId : System.UnauthorizedAccessException,Microsoft.PowerShell.Commands.SetExecutionPolicyCommand

PowerShell를 관리자 권한으로 실행하여 LocalMachine의 실행 정책 변경

1. 윈도우 "시작"(start)버튼을 클릭하고 "PowerShell"를 검색하여 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "권리자 권한으로 실행"을 클릭합니다.

2. 실행 정책을 변경하기 위해 PowerShell에 Set-ExecutionPolicy -Scope LocalMachine -ExecutionPolicy RemoteSigned 명령어를 입력하고 Enter 키를 누릅니다.

Set-ExecutionPolicy -Scope LocalMachine -ExecutionPolicy RemoteSigned

그러면 실행 정책을 변경할 것인지 확인을 합니다. "Y"를 입력하고 Enter 키를 누릅니다.

실행 규칙 변경
실행 정책은 신뢰하지 않는 스크립트로부터 사용자를 보호합니다. 실행 정책을 변경하면 about_Execution_Policies 도움말
항목(https://go.microsoft.com/fwlink/?LinkID=135170)에 설명된 보안 위험에 노출될 수 있습니다. 실행 정책을
변경하시겠습니까?
[Y] 예(Y)  [A] 모두 예(A)  [N] 아니요(N)  [L] 모두 아니요(L)  [S] 일시 중단(S)  [?] 도움말 (기본값은 "N"): Y

3. 실행 정책이 변경 되었는지 확인하기 위해 PowerShell에 Get-ExecutionPolicy -List 명령어를 입력하고 Enter 키를 누릅니다.

Get-ExecutionPolicy -List

LocalMachine에 실행 정책이 변경된 것을 확인할 수 있습니다.

VSCode Node 개발 - 패키지 생성 및 실행, npm init

carrotweb — Sun, 14 May 2023 17:42:39 +0900

Visual Studio Code에서 Node.js 기반의 프로그램을 개발하기 위해서 윈도우에 Node.js가 설치되어 있어야 합니다.

윈도우에 Node.js 다운로드 및 설치

윈도우 Node.js 다운로드 및 설치에 대한 자세한 설명은 "윈도우 Node.js 설치 - Windows Node.js Download & Install - 14.x"를 참고하시기 바랍니다.

(Node.js의 2023년 4월 12일 버전은 18.16.0 LTS입니다.)

Node 패키지 생성

1. Node를 위해 작업 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\node1" 폴더를 생성하였습니다.

2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기)를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\node1" 폴더로 이동하고 "폴더 선택" 버튼을 누릅니다.

3. EXPLORER(탐색기)에 오픈한 폴더의 이름이 대문자(NODE1)로 적용되어 오픈됩니다.

그리고 보안을 위해 Trust(신뢰) 확인 창이 나타납니다. "Yes, I Trust the authors" 버튼을 누릅니다.

Trust Confirm에 대한 자세한 내용은 "VSCode Web Project - Trust Confirm (Do you trust the authors of the files in this folder?)"를 참고하시기 바랍니다.

그리고 Welcome(시작) 창은 닫습니다.

4. Visual Studio Code의 메뉴 Terminal(터미널) > New Terminal(새 터미널)를 클릭하거나 Ctrl + Shift + `(backtick) 키를 누릅니다.

5. Node 패키지를 생성하기 위해 Terminal(터미널)에서 npm init 명령어를 입력하고 Enter 키를 누릅니다.

npm init

npm(Node Package Manager)는 Node.js로 만들어진 모듈을 설치하고 관리해 주는 프로그램입니다.
npm int는 패키지(애플리케이션)를 생성(초기화) 해주는 명령어입니다.

6. 기본 설정으로 처리하겠습니다.
변경하려면 입력하고 Enter 키를 누르면 됩니다. 기본 값을 사용하려면 Enter 키를 누르면 됩니다.

package name는 패키지 명입니다. (node1)는 기본 값으로 폴더 명입니다.
version는 패키지 버전입니다. (1.0.0)는 기본 값입니다.
description는 패키지에 대한 설명입니다.
entry point는 시작 파일 명입니다. (index.js)는 기본 값입니다.
test command는 npm test를 호출할 때마다 실행되는 명령입니다.
git repository는 패키지가 저장되어 있는 Git 저장소의 URL입니다.
keywords는 패키지의 키워드입니다.
author는 작성자의 이름입니다. 여러분의 이름이나 아이디를 입력하면 됩니다.
license는 패키지 사용에 대한 라이선스입니다. (ISC)는 기본 값입니다.

"Is tis OK? (yes)"에서 Enter 키를 누르면 package.json 파일이 생성됩니다.

Node 패키지에 Entry Point 파일 만들기

1. Entry Point 파일인 index.js 파일을 생성하기 위해서 EXPLORER(탐색기)의 NODE1에서 첫 번째 아이콘(New File...(새 파일))을 클릭하고 입력란에 "index.js"를 입력하고 Enter 키를 눌러 파일을 생성합니다.

2. 간단하게 "Hello World!"가 콘솔로 출력되게 만들겠습니다.

Node 패키지 실행하기

1. Terminal(터미널)에서 node index.js를 입력하고 Enter 키를 눌러 실행합니다.

node index.js

그러면 Node가 실행되면서 Terminal(터미널)에 "Hello World!"가 출력됩니다.

Node.js로 REST API 서버 개발에 대한 자세한 개발 설명은 "Node.js"를 참고하시기 바랍니다.

VSCode 웹 서버 설치, 포트 변경 - 라이브 서버(Live Server)

carrotweb — Sun, 14 May 2023 01:34:31 +0900

라이브 서버(Live Server) 설치

1. Visual Studio Code의 왼쪽에 있는 Activity Bar(작업 표시줄)에서 Extensions(학장) 버튼을 클릭하거나 Ctrl + Shift + X를 누릅니다.

2. 라이브 서버를 설치하기 위해 입력란에 "Live Server"를 입력하여 검색합니다. 검색된 결과 리스트에서 "Live Server"를 선택하고 "Install"버튼을 클릭합니다.

3. 설치하는데 조금 시간이 걸립니다. (저는 약 50초 걸렸습니다.) 설치가 완료됩니다.

4. Activity Bar(작업 표시줄)에서 Extensions(학장) 버튼을 클릭하여 닫습니다.

라이브 서버(Live Server) 실행

1. Visual Studio Code의 왼쪽에 있는 Activity Bar(작업 표시줄)에서 Explorer(탐색기) 버튼을 클릭하거나 Ctrl + Shift + E를 누릅니다. 그리고 "index.html"파일에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Open with Live Server"를 클릭합니다.

또는 "index.html"파일 편집기에서 마우스 오른쪽 버튼을 눌러 콘텍스트 메뉴에서 "Open with Live Server"를 클릭합니다.

2. 보안 경고창이 나타납니다. "액세스 허용(A)"버튼을 눌러 차단을 허용해 줍니다.

3. 기본 브라우저로 설정된 웹 브라우저가 실행됩니다.

localhost(로컬호스트, IP가 127.0.0.1)로 포트번호 5500으로 웹 서버가 실행됩니다.

이전 디버깅(Run(실행) > Start Debugging(디버깅 시작))과 다르게 index.html 파일(file:///C:/workspaces/webstudys/web1/index.html)이 아닌 URL(http://127.0.0.1:5500/index.html)로 실행됩니다. 즉 웹 서버가 실행된 겁니다.

4. index.html 파일을 수정하고 저장하면 바로 실행된 웹 브라우저에 반영이 됩니다.

<!-- 변경 전 -->
<h1>Hello World!</h1>

<!-- 변경 후 -->
<h1>Hello World!!</h1>

일반적으로 웹 브라우저에서 새로고침을 해야 변경되지만 Live Server는 파일이 변경되어 저장되면 자동으로 새로고침 됩니다. 이 기능이 Live Server의 장점입니다. (A Quick Development Live Server with live browser reload.)

그리고 상태 표시줄에서 한 번의 클릭으로 서버를 시작하거나 중지할 수 있습니다.

(Start or Stop server by a single click from status bar.)

Live Server가 설치되면 Visual Studio Code의 Status Bar(상태 표시줄)에 "Go Live"로 표시됩니다.

"Go Live"를 클릭하면 현재 편집기의 파일이 Live Server로 실행됩니다.

Live Server가 실행되면 Status Bar(상태 표시줄)에 설정된 포트번호("Port : 5500")로 표시됩니다.

Status Bar(상태 표시줄)에서 포트번호("Port : 5500")를 클릭하면 Live Server가 종료됩니다.

Live Server가 종료되면 Status Bar(상태 표시줄)에 "Go Live"로 표시됩니다.

라이브 서버(Live Server) 포트 변경

1. Visual Studio Code의 메뉴 File(파일) > Preferences(기본 설정) > Settings(설정)를 클릭하거나 Ctrl + , (콤마) 키를 누릅니다.

2. Settings(설정)의 Extensions(학장)에서 Live Server Config를 선택합니다.

Live Server Config에서 Settings: Port로 이동하고 "Edit in settings.json(settings.json에서 편집)"를 클릭합니다.

3. "liveServer.settings.port"에 변경하고 싶은 포트번호를 입력하고 저장합니다.

"liveServer.settings.port"를 0으로 입력하고 저장하면 Live Server가 실행될 때마다 랜덤으로 포트번호가 변경됩니다.

settings.json 파일은 C:\Users\{사용자계정}\AppData\Roaming\Code\User\settings.json에 있습니다.

저는 포트번호를 9000으로 입력하였습니다.

4. 웹 브라우저가 http://127.0.0.1:9000/index.html로 변경되어 실행되는 것을 확인할 수 있습니다.

그리고 Visual Studio Code의 Status Bar(상태 표시줄)에도 "Port : 9000"으로 변경되어 표시됩니다.

포트번호를 기존 5500으로 사용하고 싶을 경우에는 "liveServer.settings.port"를 삭제하시면 됩니다.

Extension 개발을 위해

Visual Studio Code의 Extension 들은 Node.js 기반으로 Yeoman과 VS Code Extension Generator을 사용하여 만들어집니다.

자세한 내용은 Visual Studio Code의 Extension API (https://code.visualstudio.com/api)를 참고하시면 됩니다.

Live Server는 Open Source로 GitHub에 오픈되어 있습니다.

https://github.com/ritwickdey

다음에 Extension를 만들어 보겠습니다.

VSCode Web Project - Trust Confirm (Do you trust the authors of the files in this folder?)

carrotweb — Fri, 12 May 2023 23:17:42 +0900

Visual Studio Code에서 Web Project는 프로젝트가 아닌 파일 단위로 별도의 확장 기능 설치 없이 바로 작업을 할 수 있습니다.

Web Project 생성

1. Web Project를 위해 작업 폴더를 생성합니다. 저는 "C:\workspaces\webstudys\web1" 폴더를 생성하였습니다.

2. Visual Studio Code의 메뉴 File(파일) > Open Folder...(폴더 열기) 를 클릭하거나 Ctrl 키를 누를 상태에서 K, O를 이어서 누릅니다. (Ctrl + K, Ctrl + O) 그리고 "C:\workspaces\webstudys\web1" 폴더로 이동하고 "폴더 선택" 버튼을 누릅니다.

또는 Activity Bar(작업 표시줄)에서 Extensions(학장) 버튼을 클릭한 후 "Open Folder" 버튼을 눌러 작업 폴더("C:\workspaces\webstudys\web1")로 이동하고 "폴더 선택" 버튼을 누릅니다.

3. EXPLORER(탐색기)에 오픈한 폴더의 이름이 대문자(WEB1)로 적용되어 오픈됩니다.

그리고 보안을 위해 Trust(신뢰) 확인 창이 나타납니다.

그 이유는 오픈하려는 폴더에 있는 파일들에 악성 코드가 있을 수 있기 때문입니다. 그래서 파일들의 작성자를 신뢰할 수 있는지 확인이 필요합니다.

확인 창의 내용을 번역하면

Do you trust the authors of the files in this folder?

이 폴더에 있는 파일들의 작성자를 신뢰하십니까?

Code provides features that may automatically execute files in this folder.
코드는 이 폴더에 있는 파일들이 자동으로 실행될 수 있는 기능으로 제공됩니다.

If you dont't trust the authors of these files, we recommend to continue in restricted mode as the files may be malicious.
만약 파일들의 작성자를 신뢰할 수 없다면 파일이 악성일 수 있으므로 우리는 제한 모드로 진행하는 것을 추천합니다.

See our docs to learn more.
더 알아보기 위해서 문서를 참조하세요.

우리는 외부에서 파일을 가져와 오픈하지 않고 직접 코드를 작성할 것이기 때문에 신뢰에 문제가 없습니다.

그래서 "Yes, I Trust the authors" 버튼을 누릅니다.

(만약, 외부 파일을 가져와서 오픈할 경우라면 파일에 문제가 있을 수 있으니 제한 모드인 오픈하기 위해서 "No, I don't trust the authors"버튼을 누르시기 바랍니다.)

그리고 체크 박스는 체크하지 않는 것을 권장합니다.

그 이유는 향후에 외부 파일을 가져와서 작업할 수 있기 때문에 상위 폴더를 신뢰하는 것은 문제가 될 수 있기 때문입니다.

체크 박스의 내용을 번역하면

Trust the authors of all files in the parent folder 'webstudys'
상위 폴더(webstudys)에 있는 모든 파일의 작성자를 신뢰합니다.

그리고 Welcome(시작) 창은 닫습니다.

4. HTML 파일을 생성하기 위해서 EXPLORER(탐색기)의 WEB1에서 첫 번째 아이콘(New File...(새 파일))을 클릭하고 입력란에 "index.html"를 입력하고 Enter 키를 눌러 파일을 생성합니다.

또는 Ctrl + Alt + Windows + N를 누르고 "New File..."의 입력란에 "index.html"를 입력하고 Enter 키를 눌러 파일을 생성합니다.

5. 간단하게 "Hello World!"로 내용을 만들겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Web Project 실행 - Debugging

1. Visual Studio Code의 메뉴 Run(실행) > Start Debugging(디버깅 시작)를 클릭하거나 기능키 F5 버튼을 누릅니다.

2. 그러면 디버깅을 위해 실행될 웹 브라우저를 선택할 수 있는 창이 나타납니다. 크롬으로 할 경우 "Web App(웹앱) (Chrome)"를 선택하고 Edge로 할 경우 "Web App(웹앱) (Edge)"를 선택하면 됩니다. 저는 "Web App(웹앱) (Chrome)"를 선택하겠습니다. (웹 브라우저는 처음 한 번만 물어봅니다.)

또는 Activity Bar(작업 표시줄)에서 "Run and Debug(실행 및 디버그)" 버튼을 클릭하거나 Ctrl + Shift + D를 누른 후 "Run and Debug(실행 및 디버그)" 버튼을 누릅니다. 그러면 디버깅을 위해 실행될 웹 브라우저를 선택할 수 있는 창이 나타납니다.

3. 그러면 크롬 브라우저로 index.html 파일(file:///C:/workspaces/webstudys/web1/index.html)이 실행됩니다.

VSCode 색 테마 변경 - Color Theme, Dark / Light Modern

carrotweb — Fri, 12 May 2023 19:18:51 +0900

색 테마(Color Theme) 변경

1. Visual Studio Code의 메뉴 File(파일) > Preferences(기본 설정) > Theme(테마) > Color Theme(색 테마)를 클릭하거나 Ctrl 키를 누를 상태에서 K, T를 이어서 누릅니다. (Ctrl + K, Ctrl + T)

2. 색 테마를 선택할 수 있는 Picker가 나타납니다. (현재 색 테마가 선택되어 있습니다.)

3. 키보드의 상/하 방향 버튼을 누르면 색 테마가 이동하면서 변경됩니다. 이동한 색 테마에서 Enter 키를 누르면 적용됩니다. 또는 마우스를 색 테마를 선택하면 바로 변경됩니다.

[색 테마 종류]

라이트 - Light (Visual Studio), Light Modern, Light+, Quiet Light, Solarized Light

다크 - Dark (Visual Studio), Dark Modern, Dark+, Kimbie Dark, Monokai, Monokai Dimmed

칼라 - Abyss, Red, Solarized Dark, Tomorrow Night Blue

고대비 - Dark High Contrast, Light High Contrast

Dark (Visual Studio)

Abyss

Light Modern

Light (Visual Studio)

저는 개인적으로 Dark (Visual Studio)가 좋은 것 같습니다.

VSCode 한국어 설정 - 표시 언어 구성(Configure Display Language)

carrotweb — Fri, 12 May 2023 19:18:13 +0900

한국어 언어 팩(Korean Language Pack) 설치

1. Visual Studio Code의 왼쪽에 있는 Activity Bar(작업 표시줄)에서 Extensions(학장) 버튼을 클릭하거나 Ctrl + Shift + X를 누릅니다.

2. 한국어 언어 팩을 설치하기 위해 입력란에 "Korean Language"를 입력하여 검색합니다.

3. "Korean Language Pack for Visual Studio Code"를 선택하고 "Install"버튼을 클릭합니다.

4. 그러면 한국어 언어 팩이 설치됩니다. 그리고 하단에 언어 변경을 위한 "Change Language and Restart"버튼이 나타납니다.

5. "Change Language and Restart" 버튼을 클릭하면 Visual Studio Code가 한국어로 변경되어 실행됩니다.

명령 팔레트(Command Palette)로 설치

1. Visual Studio Code의 메뉴 View > Command Palette... 를 클릭하거나 Ctrl + Shift + P를 눌러 명령 팔레트(Command Palette)를 실행시킨 후 입력란에서 "language"를 입력합니다. 그리고 검색된 결과에서 Configure Display Language(표시 언어 구성)를 선택합니다.

2. 언어 목록에서 한국어를 선택합니다.

3. 그러면 한국어 언어 팩이 설치되고 언어 변경을 위한 Restart 확인이 나타납니다.

4. "Restart" 버튼을 클릭하면 Visual Studio Code가 한국어로 변경되어 실행됩니다.

한국어에서 영어로 변경

1. Ctrl + Shift + P를 눌러 명령 팔레트(Command Palette)를 실행시킨 후 입력란에서 "language"를 입력합니다. 그리고 검색된 결과에서 표시 언어 구성(Configure Display Language)을 선택합니다.

2. 언어 목록에서 English를 선택합니다.

3. 그러면 언어 변경을 위한 Restart 확인이 나타납니다.

4. "다시 시작(R)" 버튼을 클릭하면 Visual Studio Code가 영어로 변경되어 실행됩니다.

Visual Studio Code 다운로드 및 설치 - 1.78 Download & Install - April 2023

carrotweb — Fri, 12 May 2023 19:17:40 +0900

Visual Studio Code 다운로드

1. Visual Studio Code 사이트(https://code.visualstudio.com)에 접속합니다.

현재 최신버전은 1.78입니다.

2. 운영체계가 Windows인 경우 사이트 왼쪽 중간에 있는 "Download for Windows"를 클릭하면 Docs 페이지로 이동하고 설치 파일(VSCodeUserSetup-x64-1.78.2.exe)을 다운로드됩니다.

또는 사이트 오른쪽 상단에 있는 "Download"를 클릭하면 운영체제(OS, Operating System)에 맞게 다운로드할 수 있습니다.

Visual Studio Code 설치

1. 웹 브라우저 하단에 있는 다운로드된 파일을 클릭하거나 다운로드 폴더에서 다운로드 "VSCodeUserSetup-x64-1.78.2.exe"파일을 클릭합니다. 그러면 Installer가 실행되고 사용권계약이 나타납니다. "동의합니다"를 선택하고 "다음(N)" 버튼을 누릅니다.

2. VS Code를 설치할 경로를 선택합니다. 기본적으로 "C:\Users\사용자계정\AppData\Local\Programs\Microsoft VS Code"로 되어 있습니다. 설치 경로를 변경하지 않을 경우 "다음(N)" 버튼을 누릅니다.

저는 "C:\workspaces\VSCode"로 변경하였습니다.

3. 시작 메뉴 폴더를 생성합니다. "다음(N)" 버튼을 누릅니다.

4. 기본 편집기로 등록합니다. "다음(N)" 버튼을 누릅니다.

5. 설치를 위해 "설치(I)" 버튼을 누릅니다.

6. 설치가 진행됩니다.

7. 설치가 완료되면 "종료(F)"버튼을 누릅니다.

Visual Studio Code 실행

1. 윈도우 "시작" 버튼을 클릭하고 "Visual Studio Code"를 입력하고 앱을 클릭합니다.

또는 "C:\workspaces\VSCode"폴더에서 "Code.exe"를 클릭합니다.

그러면 Visual Studio Code가 Dark Modern으로 실행됩니다.

Visual Studio Code를 Light Modern으로 변경하셔도 됩니다.

Menu Bar, Command Center, Layout Controls 숨김 처리

1. Visual Studio Code 상단에서 마우스 오른쪽 버튼을 클릭하여 Menu Bar(메뉴 모음)나 Command Center(명령 센터), Layout Controls(레이아웃 컨틀ㄹ)를 숨기(Hide) 거나 표시(Show)되게 처리할 수 있습니다.

2. Command Center(명령 센터)에서 "Back(돌아가기)" 버튼이나 "Forward(앞으로 이동)" 버튼, Quick Open를 선택하여 숨기(Hide) 거나 표시(Show)되게 처리할 수 있습니다.

저는 Command Center(명령 센터)를 자주 사용하지 않기 때문에 Command Center(명령 센터)를 숨김처리하였습니다.

Spring에 게시물 업데이트, 삭제 처리 - Update, Delete

carrotweb — Mon, 1 May 2023 23:22:35 +0900

이번에는 CRUD의 U(Update)와 D(Delete)로 게시물을 수정하고 삭제하는 UI와 UPDATE / DELETE Query, DAO, Service, Controller를 추가하도록 하겠습니다.

Maven Spring Project의 Board Mapper XML에 Update, Delete Query 추가하기

1. com.home.study.test1.sqlmapl.mappers.mariadb.board 패키지에 있는 BoardMapper.xml 파일을 오픈합니다.

2. INT_BOARD_TB(게시판) Table에 데이터(게시물)를 수정(update) 하기 위해서 <update>으로 쿼리문을 생성하고 데이터(게시물)를 삭제(delete) 하기 위해서 <delete>으로 쿼리문을 생성합니다.

<update>와 <delete>의 id 속성은 update와 delete를 구분하는 식별자로 중복되지 않는 이름으로 입력합니다. id 속성은 DAO에서 구문을 찾을 때 사용됩니다.
<update>와 <delete>안에는 UPDATE와 DELETE구문을 사용하여 데이터베이스에서 게시물의 시퀀스를 기준으로 데이터를 수정하고 삭제하게 합니다.
<update>와 <delete>의 parameterType 속성은 전송된 데이터를 받을 Model(모델) 명을 입력합니다.

<!--
	게시물을 수정합니다.
-->
<update id="updateBoardItem" parameterType="Board">
	UPDATE INT_BOARD_TB
	   SET BRD_SUBJECT = #{subject},
	       BRD_CONTENT = #{content},
	       MOD_ID = #{modificationId},
	       MOD_DTM = NOW()
	 WHERE BRD_SEQ = #{sequence}
</update>

<!--
	게시물을 삭제합니다.
-->
<delete id="deleteBoardItem" parameterType="Board">
	DELETE
	  FROM INT_BOARD_TB
	 WHERE BRD_SEQ = #{sequence}
</delete>

Maven Spring Project의 DAO - Board Interface에 update, delete 메서드 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.dao 패키지에 있는 IBoardDao Interface(인터페이스)를 오픈합니다. (IBoardDao.java)

2. INT_BOARD_TB(게시판) Table에 데이터(게시물)를 수정(update), 삭제(delete) 하기 위해 updateBoardItem, deleteBoardItem 메서드를 선언합니다.

package com.home.study.test1.board.dao;

import java.util.List;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;

public interface IBoardDao {

	int selectBoardListCount(BoardSearch boardSearch);
	
	List<Board> selectBoardList(BoardSearch boardSearch);
	
	int insertBoardItem(Board board);
	
	Board selectBoardItem(Board board);
	
	int updateBoardItem(Board board);
	
	int deleteBoardItem(Board board);
}

Maven Spring Project의 Dao - Board Implement에 update, delete 메서드 구현 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.dao.impl 패키지에 있는 BoardDaoImpl 클래스를 오픈합니다. (BoardDaoImpl.java)

2. BoardDaoImpl 클래스에서 IBoardDao Interface(인터페이스)의 updateBoardItem, deleteBoardItem 메서드를 구현합니다.

package com.home.study.test1.board.dao.impl;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Repository;

import com.home.study.test1.board.dao.IBoardDao;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;

@Repository("BoardDaoImpl")
public class BoardDaoImpl implements IBoardDao {

	protected static final String SQL_FILE_PATH = "com.home.study.test1.board.mapper.mariadb.BoardMapper.";

	@Autowired
	@Qualifier("sqlSessionMariaDB")
	private SqlSession sqlSession;

	@Override
	public int selectBoardListCount(BoardSearch boardSearch) {
		return ((Integer)sqlSession.selectOne(SQL_FILE_PATH + "selectBoardListCount", boardSearch)).intValue();
	}

	@Override
	public List<Board> selectBoardList(BoardSearch boardSearch) {
		return sqlSession.selectList(SQL_FILE_PATH + "selectBoardList", boardSearch);
	}

	@Override
	public int insertBoardItem(Board board) {
		return sqlSession.insert(SQL_FILE_PATH + "insertBoardItem", board);
	}

	@Override
	public Board selectBoardItem(Board board) {
		return sqlSession.selectOne(SQL_FILE_PATH + "selectBoardItem", board);
	}

	@Override
	public int updateBoardItem(Board board) {
		return sqlSession.update(SQL_FILE_PATH + "updateBoardItem", board);
	}

	@Override
	public int deleteBoardItem(Board board) {
		return sqlSession.delete(SQL_FILE_PATH + "deleteBoardItem", board);
	}
}

Maven Spring Project의 Service - Board Interface에 update, delete 메서드 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.service 패키지에 있는 IBoardService Interface(인터페이스)를 오픈합니다. (IBoardService.java)

2. DAO (Board Interface, Implement)을 사용하여 INT_BOARD_TB(게시판) Table에 데이터(게시물)를 수정(update), 삭제(delete) 하기 위해 updateBoardItem, deleteBoardItem 메서드를 선언합니다.

package com.home.study.test1.board.service;

import java.util.List;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;

public interface IBoardService {

	List<Board> selectBoardList(BoardSearch boardSearch);
	
	boolean insertBoardItem(Board board);
	
	Board selectBoardItem(Board board);
	
	boolean updateBoardItem(Board board);
	
	boolean deleteBoardItem(Board board);
}

Maven Spring Project의 Service - Board Implement에 update, delete 메서드 구현 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.service.impl 패키지에 있는 BoardServiceImpl 클래스를 오픈합니다. (BoardServiceImpl.java)

2. BoardServiceImpl 클래스에서 IBoardService Interface(인터페이스)의 updateBoardItem, deleteBoardItem 메서드를 구현합니다.

package com.home.study.test1.board.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.home.study.common.search.Pagination;
import com.home.study.test1.board.dao.IBoardDao;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;
import com.home.study.test1.board.service.IBoardService;

@Service
public class BoardServiceImpl implements IBoardService {

	@Autowired
	IBoardDao boardDao;

	@Override
	public List<Board> selectBoardList(BoardSearch boardSearch) {
		if (boardSearch.getPagination() == null) {
			boardSearch.setPagination(new Pagination());
		}
		
		int count = boardDao.selectBoardListCount(boardSearch);
		boardSearch.getPagination().setRecordTotalCount(count);
		
		List<Board> boardList = null;
		if (count > 0) {
			boardSearch.getPagination().processZero();
			boardList = boardDao.selectBoardList(boardSearch);
		}
		return boardList;
	}

	@Override
	public boolean insertBoardItem(Board board) {
		return (boardDao.insertBoardItem(board) == 1) ? true : false;
	}

	@Override
	public Board selectBoardItem(Board board) {
		return boardDao.selectBoardItem(board);
	}

	@Override
	public boolean updateBoardItem(Board board) {
		return (boardDao.updateBoardItem(board) == 1) ? true : false;
	}

	@Override
	public boolean deleteBoardItem(Board board) {
		return (boardDao.deleteBoardItem(board) == 1) ? true : false;
	}
}

수정 UI은 입력 UI와 동일합니다. 그래서 입력 UI인 boardform.jsp을 그대로 사용할 겁니다.

다만, 입력 모드인지 수정 모드인지 구분하기 위해서 Controller에서 모드를 전달할 수 있게 ModelMap에 추가하고 수정 모드일 때 게시물의 시퀀스를 사용하기 위해서 <form:hidden> 태그를 추가하겠습니다.

먼저 Controller에 추가한 다음 boardform.jsp 파일을 수정하도록 하겠습니다.

Maven Spring Project의 Board Controller에 editBoardForm, editBoard 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.controller 패키지에 있는 BoardController 클래스를 오픈합니다. (BoardController.java)

2. 수정 요청 URL("/board/editform.do")이 왔을 때 실행될 editBoardForm 메서드를 생성합니다. 파라미터로 HTTP 요청을 처리할 수 있는 HttpServletRequest request와 HTTP 응답을 처리할 수 있는 HttpServletResponse response, 게시물 정보를 받아 처리할 수 있게 @ModelAttribute Annotation(어노테이션)이 적용된 Board board, 웹 페이지로 정보를 전달할 수 있는 ModelMap model을 추가합니다.

3. 전달받은 게시물의 시퀀스를 이용하여 게시물을 조회(selete)하고 입력 폼으로 리턴되게 리턴 값으로 "board/boardform"를 입력합니다. 수정 요청이기 때문에 모드(mode)를 수정 모드(editboard)로 model에 추가합니다.

4. 수정 요청 URL이 "/board/editform.do"가 왔을 때 editBoardForm 메서드가 실행될 수 있게 메서드 위에 @RequestMapping Annotation(어노테이션)을 추가합니다.

@RequestMapping(value="/editform", method=RequestMethod.POST)
public String editBoardForm(HttpServletRequest request, HttpServletResponse response,
	@ModelAttribute Board board, ModelMap model) {
	
	Board boardItem = boardService.selectBoardItem(board);
	model.addAttribute("board", boardItem);
	
	model.addAttribute("mode", "editboard");
	return "board/boardform";
}

5. boardService의 updateBoardItem 메서드를 사용하여 데이터(게시물)를 수정하기 위해 editBoard 메서드를 생성합니다. 파라미터로 HTTP 요청을 처리할 수 있는 HttpServletRequest request와 HTTP 응답을 처리할 수 있는 HttpServletResponse response, 게시물 정보를 받아 처리할 수 있게 @ModelAttribute Annotation(어노테이션)이 적용된 Board board(유효성 검사를 하기 위해서 Board board 앞에 @Valid를 추가), 유효성 검사 결과를 리턴 받기 위한 BindingResult bindingResult, 웹 페이지로 정보를 전달할 수 있는 ModelMap model을 추가합니다.

6 전달된 데이터의 유효성 검사 결과에 오류가 있으면 다시 입력 폼(/board/boardform.do)으로 이동시키고 없으면 수정하고 redirect로 index.do로 이동시킵니다.

7. POST 방식으로 요청 URL이 "/board/editboard.do"가 왔을 때 editBoard 메서드가 실행될 수 있게 메서드 위에 @RequestMapping Annotation(어노테이션)을 추가합니다.

@RequestMapping(value="/editboard", method=RequestMethod.POST)
public String editBoard(HttpServletRequest request, HttpServletResponse response,
	@Valid @ModelAttribute("board") Board board, BindingResult bindingResult,
	ModelMap model) {
	if (bindingResult.hasErrors()) {
		return "board/boardform";
	}
	
	board.setModificationId(board.getRegistrationId());
	if (!boardService.updateBoardItem(board)) {
		model.addAttribute("mode", "editboard");
		return "board/boardform";
	}
	
	return "redirect:/index.do";
}

이어서, addBoardForm, addBoard 메서드에 모드(mode)를 입력 모드(addboard)로 model에 추가하겠습니다.

Maven Spring Project의 Board Controller에 addBoardForm, addBoard 수정하기

1. addBoardForm 메서드 안에 모드(mode)를 입력 모드(addboard)로 model에 추가합니다.

@RequestMapping(value="/addform", method=RequestMethod.GET)
public String addBoardForm(HttpServletRequest request, HttpServletResponse response,
		@ModelAttribute("board") Board board, ModelMap model) {
	model.addAttribute("mode", "addboard");
	return "board/boardform";
}

2. addBoard 메서드 안에서 등록되지 않을 경우에 모드(mode)를 입력 모드(addboard)로 model에 추가합니다.

@RequestMapping(value="/addboard", method=RequestMethod.POST)
public String addBoard(HttpServletRequest request, HttpServletResponse response,
		@Valid @ModelAttribute("board") Board board, BindingResult bindingResult, ModelMap model) {
	if (bindingResult.hasErrors()) {
		List<FieldError> fieldsErrors = bindingResult.getFieldErrors();
		for (FieldError fieldError : fieldsErrors) {
			System.out.println(fieldError.getField() + " = " + fieldError.getCode() + " / " + fieldError.getDefaultMessage());
		}
		return "board/boardform";
	}
	
	if (!boardService.insertBoardItem(board)) {
		model.addAttribute("mode", "addboard");
		return "board/boardform1";
	}
	
	return "redirect:/index.do";
}

Maven Spring Project의 Board Controller에 deleteBoard 추가하기

1. 삭제 요청 URL("/board/deleteboard.do")이 왔을 때 실행될 deleteBoard 메서드를 생성합니다. 파라미터로 HTTP 요청을 처리할 수 있는 HttpServletRequest request와 HTTP 응답을 처리할 수 있는 HttpServletResponse response, 게시물 정보를 받아 처리할 수 있게 @ModelAttribute Annotation(어노테이션)이 적용된 Board board, 웹 페이지로 정보를 전달할 수 있는 ModelMap model을 추가합니다.

2. 전달받은 게시물의 시퀀스를 이용하여 게시물을 삭제(delete)하고 삭제가 되지 않으면 다시 뷰 폼(/board/boardview.do)으로 이동시키고 삭제되면 redirect로 index.do로 이동시킵니다.

3. 삭제 요청 URL이 "/board/deleteboard.do"가 왔을 때 deleteboard 메서드가 실행될 수 있게 메서드 위에 @RequestMapping Annotation(어노테이션)을 추가합니다.

@RequestMapping(value="/deleteboard", method=RequestMethod.POST)
public String deleteBoard(HttpServletRequest request, HttpServletResponse response,
	@ModelAttribute Board board, ModelMap model) {
	
	if (!boardService.deleteBoardItem(board)) {
		Board boardItem = boardService.selectBoardItem(board);
		model.addAttribute("board", boardItem);
		return "board/boardview";
	}
	
	return "redirect:/index.do";
}

Maven Spring Project에 Board Form JSP 수정하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈합니다.

2. <form:hidden> 태그의 path 속성에 board 객체의 sequence(시퀀스)를 입력하여 <form:form> 태그 안에 추가합니다. 그리고 입력 모드인지 수정 모드인지 구분하기 위해서 타입이 hidden인 <input> 태그로 모드(mode)를 추가합니다. <input> 태그는 전달되는 값이 아니기 때문에 name은 사용하지 않습니다. (만약, Model에 mode를 추가하였다면 name을 사용하시면 됩니다.)

<form:form modelAttribute="board" autocomplete="off">
<form:hidden path="sequence" />
<input type="hidden" id="mode" value="${mode}" />

3. 기존의 등록 버튼을 모드(mode)에 따라 등록 또는 수정으로 표시되게 수정합니다.

<div class="buttons">
	<div class="right">
		<button id="saveBtn" class="button blue">
			<c:choose>
				<c:when test="${mode == 'addboard'}">등록</c:when>
				<c:when test="${mode == 'editboard'}">수정</c:when>
			</c:choose>
		</button>
		<button id="cancelBtn" class="button">취소</button>
	</div>
</div>

4. 기존의 등록 버튼 클릭 이벤트에서 모드(mode)에 따라 컴펌 메시지가 등록 또는 수정을 변경되게 하고 모드에 따라 등록 URL 또는 수정 URL로 전달되게 수정합니다.

$('#saveBtn').click(function() {
	var mode = $('#mode').val();
	var modeText = "등록";
	var modeUrl = "/board/addboard.do";
	if (mode == "editboard") {
		modeText = "수정";
		modeUrl = "/board/editboard.do";
	}
	var result = confirm(modeText + "하시겠습니까?");
	if (result) {
		var boardForm = $('#board');
		if (!boardForm[0].checkValidity()) {
			boardForm.addClass('was-validated');
		} else {
			boardForm.attr("action", modeUrl);
			boardForm.submit();
		}
	}
});

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 게시물 리스트에서 11번인 "테스트 제목 11"을 클릭한 후 수정 버튼을 누릅니다. 그리고 제목을 "테스트 제목 111"ㄹ 내용을 "테스트 내용 111"로 수정합니다.

3. 수정 버튼을 누르면 게시물이 변경되고 게시물 리스트로 이동하는 것을 확인할 수 있습니다.

4. 게시물 리스트에서 11번인 "테스트 제목 111"을 클릭한 후 삭제 버튼을 누릅니다.

5. 게시물이 삭제되고 게시물 리스트로 이동하는 것을 확인할 수 있습니다.

Spring에 게시물 뷰 처리 - View

carrotweb — Sun, 30 Apr 2023 22:54:56 +0900

이번에는 CRUD의 R(Read)로 게시물을 보는 UI를 생성하고 SELECT Query, DAO, Service, Controller를 추가하도록 하겠습니다.

Maven Spring Project의 main.jsp에 보기 기능 추가하기

1. /src/main/webapp/WEB-INF/views/main/main.jsp 파일을 오픈하여 <tr> 태그에 class와 data-sequence를 추가합니다.

data-sequence의 값으로 게시물(boardItem)의 sequence를 설정합니다.

<c:choose>
	<c:when test="${empty boardList}">
		<tr><td colspan="4">검색된 게시물이 없습니다.</td></tr>
	</c:when>
	<c:otherwise>
		<c:forEach var="boardItem" items="${boardList}" varStatus="status">
		<tr class="board-item" data-sequence="${boardItem.sequence}">
			<td>${boardSearch.pagination.recordTotalCount - ((boardSearch.pagination.pageNo - 1) * boardSearch.pagination.recordCountPerPage) - status.count + 1}</td>
			<td>${boardItem.subject}</td>
			<td>${boardItem.registrationId}</td>
			<td>${boardItem.registrationDateTime}</td>
		</tr>
		</c:forEach>
	</c:otherwise>
</c:choose>

2. <style> 태그에 <tr> 태그 영역에 마우스가 있으면 배경색이 회색으로 변경되고 마우스 커서가 포인터로 변경되도록 CSS를 추가합니다.

.board table tbody tr:hover { background-color: #dddddd; }
.board table tbody tr.board-item { cursor: pointer; }

3. <script> 태그에 <tr> 태그 영역에 대한 클릭 이벤트를 추가합니다.

$('.board-item').click(function() {
	$(location).attr("href", "/board/view.do?sequence=" + $(this).attr("data-sequence"));
});

또는 JQuery의 data()를 사용하시면 됩니다.

$('.board-item').click(function() {
	$(location).attr("href", "/board/view.do?sequence=" + $(this).data("sequence"));
});

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력합니다. (페이지 크기를 10에서 5로 변경하였습니다.) 그리고 게시물 리스트에 마우스를 이동시키면 마우스가 있는 해당 <tr> 태그 영역의 배경색이 회색으로 변경되고 마우스 커서가 포인터로 변경되는 것을 확인할 수 있습니다.

Maven Spring Project의 Board Mapper XML에 Select Query 추가하기

1. com.home.study.test1.sqlmapl.mappers.mariadb.board 패키지에 있는 BoardMapper.xml 파일을 오픈합니다.

2. INT_BOARD_TB(게시판) Table에 데이터(게시물)를 조회(select) 하기 위해서 <select>으로 쿼리문을 생성합니다.

<select>의 id 속성은 select를 구분하는 식별자로 중복되지 않는 이름으로 입력합니다. id 속성은 DAO에서 구문을 찾을 때 사용됩니다.
<select>안에는 SELECT구문을 사용하여 데이터베이스에서 데이터를 조회하게 합니다.
<select>의 parameterType 속성은 전송된 데이터를 받을 Model(모델) 명을 입력합니다.
<select>의 resultMap 속성은 <resultMap>의 id를 입력합니다.

<!--
	게시물을 가져옵니다.
-->
<select id="selectBoardItem" parameterType="Board" resultMap="BoardMap">
	SELECT BRD.BRD_SEQ,
	       BRD.BRD_SUBJECT,
	       BRD.BRD_CONTENT,
	       DATE_FORMAT(BRD.REG_DTM, '%Y-%m-%d %H:%i:%s') AS REG_DTM,
	       BRD.REG_ID,
	       COALESCE(DATE_FORMAT(BRD.MOD_DTM, '%Y-%m-%d %H:%i:%s'), DATE_FORMAT(BRD.REG_DTM, '%Y-%m-%d %H:%i:%s')) AS MOD_DTM,
	       COALESCE(BRD.MOD_ID, BRD.REG_ID) AS MOD_ID
	  FROM INT_BOARD_TB BRD
	 WHERE BRD.BRD_SEQ = #{sequence}
</select>

Maven Spring Project의 DAO - Board Interface에 select 메서드 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.dao 패키지에 있는 IBoardDao Interface(인터페이스)를 오픈합니다. (IBoardDao.java)

2. INT_BOARD_TB(게시판) Table에 데이터(게시물)를 조회(selet) 하기 위해 selectBoardItem 메서드를 선언합니다.

package com.home.study.test1.board.dao;

import java.util.List;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;

public interface IBoardDao {

	int selectBoardListCount(BoardSearch boardSearch);
	
	List<Board> selectBoardList(BoardSearch boardSearch);
	
	int insertBoardItem(Board board);
	
	Board selectBoardItem(Board board);
}

Maven Spring Project의 Dao - Board Implement에 select 메서드 구현 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.dao.impl 패키지에 있는 BoardDaoImpl 클래스를 오픈합니다. (BoardDaoImpl.java)

2. BoardDaoImpl 클래스에서 IBoardDao Interface(인터페이스)의 selectBoardItem 메서드를 구현합니다.

package com.home.study.test1.board.dao.impl;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Repository;

import com.home.study.test1.board.dao.IBoardDao;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;

@Repository("BoardDaoImpl")
public class BoardDaoImpl implements IBoardDao {

	protected static final String SQL_FILE_PATH = "com.home.study.test1.board.mapper.mariadb.BoardMapper.";

	@Autowired
	@Qualifier("sqlSessionMariaDB")
	private SqlSession sqlSession;

	@Override
	public int selectBoardListCount(BoardSearch boardSearch) {
		return ((Integer)sqlSession.selectOne(SQL_FILE_PATH + "selectBoardListCount", boardSearch)).intValue();
	}

	@Override
	public List<Board> selectBoardList(BoardSearch boardSearch) {
		return sqlSession.selectList(SQL_FILE_PATH + "selectBoardList", boardSearch);
	}

	@Override
	public int insertBoardItem(Board board) {
		return sqlSession.insert(SQL_FILE_PATH + "insertBoardItem", board);
	}

	@Override
	public Board selectBoardItem(Board board) {
		return sqlSession.selectOne(SQL_FILE_PATH + "selectBoardItem", board);
	}
}

Maven Spring Project의 Service - Board Interface에 select 메서드 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.service 패키지에 있는 IBoardService Interface(인터페이스)를 오픈합니다. (IBoardService.java)

2. DAO (Board Interface, Implement)을 사용하여 INT_BOARD_TB(게시판) Table에 데이터(게시물)를 조회(select) 하기 위해 selectBoardItem 메서드를 선언합니다.

package com.home.study.test1.board.service;

import java.util.List;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;

public interface IBoardService {

	List<Board> selectBoardList(BoardSearch boardSearch);
	
	boolean insertBoardItem(Board board);
	
	Board selectBoardItem(Board board);
}

Maven Spring Project의 Service - Board Implement에 select 메서드 구현 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.service.impl 패키지에 있는 BoardServiceImpl 클래스를 오픈합니다. (BoardServiceImpl.java)

2. BoardServiceImpl 클래스에서 IBoardService Interface(인터페이스)의 selectBoardItem 메서드를 구현합니다.

package com.home.study.test1.board.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.home.study.common.search.Pagination;
import com.home.study.test1.board.dao.IBoardDao;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;
import com.home.study.test1.board.service.IBoardService;

@Service
public class BoardServiceImpl implements IBoardService {

	@Autowired
	IBoardDao boardDao;

	@Override
	public List<Board> selectBoardList(BoardSearch boardSearch) {
		if (boardSearch.getPagination() == null) {
			boardSearch.setPagination(new Pagination());
		}
		
		int count = boardDao.selectBoardListCount(boardSearch);
		boardSearch.getPagination().setRecordTotalCount(count);
		
		List<Board> boardList = null;
		if (count > 0) {
			boardSearch.getPagination().processZero();
			boardList = boardDao.selectBoardList(boardSearch);
		}
		return boardList;
	}

	@Override
	public boolean insertBoardItem(Board board) {
		return (boardDao.insertBoardItem(board) == 1) ? true : false;
	}

	@Override
	public Board selectBoardItem(Board board) {
		return boardDao.selectBoardItem(board);
	}
}

Maven Spring Project의 Board Controller에 boardView 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.controller 패키지에 있는 BoardController 클래스를 오픈합니다. (BoardController.java)

2. boardService의 selectBoardItem 메서드를 사용하여 데이터(게시물)를 조회하기 위해 boardView 메서드를 생성합니다. 파라미터로 HTTP 요청을 처리할 수 있는 HttpServletRequest request와 HTTP 응답을 처리할 수 있는 HttpServletResponse response, 게시물 정보를 받아 처리할 수 있게 @ModelAttribute Annotation(어노테이션)이 적용된 Board board, 웹 페이지로 정보를 전달할 수 있는 ModelMap model을 추가합니다. 리턴 값으로 JSP 파일 경로인 board/boardview를 입력합니다.

3. GET 방식으로 요청 URL이 "/board/view.do"가 왔을 때 boardView 메서드가 실행될 수 있게 메서드 위에 @RequestMapping Annotation(어노테이션)을 추가합니다.

package com.home.study.test1.board.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.service.IBoardService;


@Controller
@RequestMapping("/board")
public class BoardController {

	@Autowired
	IBoardService boardService;

	@RequestMapping(value="/addform", method=RequestMethod.GET)
	public String addBoardForm(HttpServletRequest request, HttpServletResponse response,
			@ModelAttribute("board") Board board, ModelMap model) {
		return "board/boardform1";
	}

	@RequestMapping(value="/addboard", method=RequestMethod.POST)
	public String addBoard(HttpServletRequest request, HttpServletResponse response,
			@Valid @ModelAttribute("board") Board board, BindingResult bindingResult, ModelMap model) {
		if (bindingResult.hasErrors()) {
			List<FieldError> fieldsErrors = bindingResult.getFieldErrors();
			for (FieldError fieldError : fieldsErrors) {
				System.out.println(fieldError.getField() + " = " + fieldError.getCode() + " / " + fieldError.getDefaultMessage());
			}
			return "board/boardform1";
		}
		
		if (!boardService.insertBoardItem(board)) {
			return "board/boardform1";
		}
		
		return "redirect:/index.do";
	}
	
	@RequestMapping(value="/view", method=RequestMethod.GET)
	public String boardView(HttpServletRequest request, HttpServletResponse response,
		@ModelAttribute("board") Board board, ModelMap model) {
		
		Board boardItem = boardService.selectBoardItem(board);
		model.addAttribute("boardItem", boardItem);
		
		return "board/boardview";
	}
}

Maven Spring Project에 Board View Form JSP 추가하기

1. /src/main/webapp/WEB-INF/views/board 폴더에 boardview.jsp 파일을 생성합니다.

boardItem Model로 전달받은 게시판 제목(subject), 게시판 내용(content), 등록자 아이디(registrationId), 등록 일자(registrationDateTime)로 페이지를 구성합니다.
게시물에 대한 수정과 삭제를 처리하기 위해서 <form> 태그 안에 sequence를 추가합니다.
게시물 수정과 삭제, 이전 게시물 리스트로 이동시키기 위해 하단에 버튼을 추가하고 <script> 태그에 버튼 클릭 이벤트를 추가합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>게시판</title>
		<style type="text/css">
			.boardview { width:800px; margin: 20px auto; }
			.boardview table { width:100%; border-top:2px solid #1d4281; border-spacing:0; }
			.boardview table th { padding:8px 10px 10px 10px; vertical-align:middle; color:#1d4281; font-size:14px; border-bottom:1px solid #ccc; background:#f8f8f8; }
			.boardview table td { padding:7px 20px 9px 20px; text-align:left; vertical-align:middle; border-bottom:1px solid #ccc; font-size:14px; line-heighT:150%; }
			.boardview table td.title { font-weight: bold; }
			.buttons { position:relative; height:32px; margin-top:20px; }
			.buttons > div.left { position:absolute; height:32px; left:0; }
			.buttons > div.right { position:absolute; height:32px; right:0; }
			.buttons > div > button { overflow:visible; cursor:pointer; min-width:125px; height:32px; margin:0 2px; padding:0 15px; line-height:32px; font-size:14px; border:1px solid #dfdfdf; background:#fff; border-radius:10px; }
		</style>
	</head>
	<body>
		<div class="boardview">
			<form id="boardview" method="post">
				<input type="hidden" name="sequence" value="${boardItem.sequence}" />
			</form>
			<table>
				<colgroup>
					<col style="width:18.5%">
					<col style="width:">
				</colgroup>
				<tbody>
					<tr>
						<th scope="row">제목</th>
						<td class="title">${boardItem.subject}</td>
					</tr>
					<tr>
						<th scope="row">내용</th>
						<td>${boardItem.content}</td>
					</tr>
					<tr>
						<th scope="row">작성자</th>
						<td>${boardItem.registrationId}</td>
					</tr>
					<tr>
						<th scope="row">작성일자</th>
						<td>${boardItem.registrationDateTime}</td>
					</tr>
				</tbody>
			</table>
			<div class="buttons">
				<div class="left">
					<button id="editBtn" class="button">수정</button>
					<button id="deleteBtn" class="button">삭제</button>
				</div>
				<div class="right">
					<button id="listBtn" class="button">목록</button>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				$('#editBtn').click(function() {
					var result = confirm("수정하시겠습니까?");
					if (result) {
						var boardview = $('#boardview');
						boardview.attr("action", "/board/editform.do");
						boardview.submit();
					}
				});
				$('#deleteBtn').click(function() {
					var result = confirm("삭제하시겠습니까?");
					if (result) {
						var boardview = $('#boardview');
						boardview.attr("action", "/board/deleteboard.do");
						boardview.submit();
					}
				});
				$('#listBtn').click(function() {
					window.history.go(-1);
				});
			});
		</script>
	</body>
</html>

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력합니다. (페이지 크기를 10에서 5로 변경하였습니다.) 그리고 게시물 리스트에서 "테스트 제목 11"을 클릭하여 게시물 뷰 폼(/board/view.do)으로 이동됩니다.

이어서, 게시물 수정과 삭제에 대해 알아보겠습니다.

Spring에 Hibernate(하이버네이트)의 BindingResult를 spring-form JSP Tag Library인 <form:errors> 또는 <spring:hasBindErrors>로 처리

carrotweb — Sun, 26 Mar 2023 22:08:58 +0900

Hibernate Validator로 유효성 검사한 결과(BindingResult 객체)를 Form Tag Library에 있는 <form:error> 태그를 사용하여 웹 페이지에서 처리하는 방법에 대해 알아보겠습니다.

<form:errors>

form에 대한 유효성 검사 결과 메시지를 <span> 태그로 렌더링 합니다.

path : Model(모델)과 연동하여 유효성 검사 결과를 바인딩할 속성 경로 (path가 *이면 전체 유효성 검사 결과 메시지가 노출됩니다. 메시지들은 <br>로 구분됩니다.)

<form:errors path="*" />

렌더링 결과

<span id="board.errors"></span>

form의 modelAttribute가 board이면 board.errors로 id가 설정됩니다.

유효성 검사 결과 메시지는 <span> 태그 안에 추가됩니다.

path에 Model(모델)의 속성 경로를 설정하면 Model(모델)의 속성에 대한 유효성 검사 결과 메시지가 노출됩니다.

<form:errors path="registrationId" />

렌더링 결과

<span id="registrationId.errors"></span>

그럼 <form:error> 태그를 사용하여 유효성 검사 결과 메시지를 노출시켜 보겠습니다.

Maven Spring Project에 <form:errors> 태그를 사용하여 전체 유효성 검사 결과 메시지 노출하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 <style> 태그에 유효성 검사 결과에 대한 formerror를 추가합니다.

.board .formerror { display: block; padding: 10px 10px; margin-bottom: 10px; border: 1px solid #dc3545; font-size: 14px; color: #dc3545; }

2. <form:form> 태그 안에 <form:errors> 태그를 추가합니다.

<form:form modelAttribute="board" autocomplete="off">
<form:errors path="*" cssClass="formerror" />
<table>
	<colgroup>
		<col style="width:18.5%">
		<col style="width:auto">
	</colgroup>
	<tbody>
		<tr>
			<th scope="row">작성자</th>
			<td><form:input path="registrationId" placeholder="아이디를 입력하세요." minlength="2" maxlength="20" required="required" class="form-input" />
				<div class="invalid-feedback">아이디는 최소 2자이상 최대 20자 이내로 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">제목</th>
			<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" class="form-input" />
				<div class="invalid-feedback">제목을 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">내용</th>
			<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10" /></td>
		</tr>
	</tbody>
</table>
</form:form>

3. <script>에서 기존이 있던 에러 입력 아이디(errorInputId)와 에러 메시지(errorMessage)에 대한 부분을 삭제합니다.

<c:if test="${not empty errorInputId && not empty errorMessage}">
$('#board').addClass('was-validated');
$('#${errorInputId}')[0].setCustomValidity("${errorMessage}");
//alert("${errorMessage}");
//$("#${errorInputId}").focus();
</c:if>

위의 부분을 삭제하면 됩니다.

삭제된 후 <script> 태그입니다. Server-Side Validation를 테스트하기 위해서 여전히 checkValidity 부분은 주석처리 되어있습니다.

$(function() {
	$('#saveBtn').click(function() {
		var boardForm = $('#board');
		//if (!boardForm[0].checkValidity()) {
		//	boardForm.addClass('was-validated');
		//} else {
			boardForm.attr("action", "/board/addboard.do");
			boardForm.submit();
		//}
	});
	$('#cancelBtn').click(function() {
		window.history.go(-1);
	});
});

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하여 게시물 입력 폼(/board/addform.do)으로 이동한 후 입력 폼에서 작성자, 제목, 내용에 입력하지 않고 등록 버튼을 클릭합니다. 그러면 입력 폼 위에 유효성 검사 결과 메시지 나타납니다.

만약 Board Model의 필드에 적용된 Hibernate Annotation에 message가 없다면 기본적인 유효성 검사 결과 메시지가 나타나게 됩니다.

Maven Spring Project에 <form:erros> 태그를 사용하여 개별 유효성 검사 결과 메시지 노출하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 <style> 태그에 유효성 검사 결과에 대한 error를 추가합니다.

.board .error { display: block; padding: 10px 0px; font-size: 14px; color: #dc3545; }

2. <form:form> 태그 안에 있는 <form:errors> 태그는 삭제하고 작성자(registrationId)와 subject(제목) <form:input> 태그에 <form:errors> 태그를 추가합니다.

<form:form modelAttribute="board" autocomplete="off">
<table>
	<colgroup>
		<col style="width:18.5%">
		<col style="width:auto">
	</colgroup>
	<tbody>
		<tr>
			<th scope="row">작성자</th>
			<td><form:input path="registrationId" placeholder="아이디를 입력하세요." minlength="2" maxlength="20" required="required" class="form-input" />
				<div class="invalid-feedback">아이디는 최소 2자이상 최대 20자 이내로 입력하세요.</div>
				<form:errors path="registrationId" cssClass="error" />
			</td>
		</tr>
		<tr>
			<th scope="row">제목</th>
			<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" class="form-input" />
				<div class="invalid-feedback">제목을 입력하세요.</div>
				<form:errors path="subject" cssClass="error" />
			</td>
		</tr>
		<tr>
			<th scope="row">내용</th>
			<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10" /></td>
		</tr>
	</tbody>
</table>
</form:form>

웹 브라우저를 새로고침 하면 작성자(registrationId)와 subject(제목)의 입력란 아래에 붉은색으로 유효성 검사 결과 메시지가 표시되는 것을 확인할 수 있습니다.

만약 Board Model의 필드에 적용된 Hibernate Annotation에 message가 없다면 기본적인 유효성 검사 결과 메시지가 나타나게 됩니다.

이어서 Hibernate Validator로 유효성 검사한 결과(BindingResult 객체)를 Form Tag Library에 있는 <spring:hasBindErrors> 태그를 사용하여 유효성 검사 결과가 있을 때만 웹 페이지에서 처리하는 방법에 대해 알아보겠습니다.

JSP에서 <spring:hasBindErrors> 태그를 사용하기 위해서는 taglib(태그 라이브러리) 지시문을 추가해야 합니다.

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<spring:hasBindErrors>

form에 대한 유효성 검사 결과가 있으면 <spring:hasBindErrors> 태그에 있는 내용들이 처리되게 합니다. 그리고 유효성 검사 결과인 BindingResult 객체를 사용할 수 있게 errors.fieldErrors 객체로 전달해 줍니다.

name : Model(모델)과 연동할 속성 명

<spring:hasBindErrors name="board">
</spring:hasBindErrors>

Maven Spring Project에 <spring:hasBindErrors> 태그를 사용하여 유효성 검사 결과 처리하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하여 Form Tag Library를 사용하기 위해 jsp 페이지 상단에 taglib(태그 라이브러리) 지시문을 추가합니다.

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

2. <form:form> 태그 안에 있는 작성자(registrationId)와 subject(제목) <form:input> 태그에서 <form:errors> 태그를 삭제합니다.

<form:form modelAttribute="board" autocomplete="off">
<table>
	<colgroup>
		<col style="width:18.5%">
		<col style="width:auto">
	</colgroup>
	<tbody>
		<tr>
			<th scope="row">작성자</th>
			<td><form:input path="registrationId" placeholder="아이디를 입력하세요." minlength="2" maxlength="20" required="required" class="form-input" />
				<div class="invalid-feedback">아이디는 최소 2자이상 최대 20자 이내로 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">제목</th>
			<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" class="form-input" />
				<div class="invalid-feedback">제목을 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">내용</th>
			<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10" /></td>
		</tr>
	</tbody>
</table>
</form:form>

3. </script> 태그 다음에 <spring:hasBindErrors> 태그를 다음과 같이 추가합니다.

<spring:hasBindErrors name="board">
	<script type="text/javascript">
		<c:forEach var="error" items="${errors.fieldErrors}">
			console.log("${error}");
		</c:forEach>
	</script>
</spring:hasBindErrors>

웹 브라우저를 새로고침 하면 웹 브라우저 콘솔로 errors 객체 정보가 표시되는 것을 확인할 수 있습니다.

org.springframework.validation.BeanPropertyBindingResult: 3 errors

Field error in object 'board' on field 'registrationId': rejected value []; codes [Size.board.registrationId,Size.registrationId,Size.java.lang.String,Size]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [board.registrationId,registrationId]; arguments []; default message [registrationId],20,2]; default message [작성자 아이디는 최소 2자, 최대 20자 이내로 입력하세요.]

Field error in object 'board' on field 'registrationId': rejected value []; codes [NotEmpty.board.registrationId,NotEmpty.registrationId,NotEmpty.java.lang.String,NotEmpty]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [board.registrationId,registrationId]; arguments []; default message [registrationId]]; default message [작성자 아이디를 입력하세요.]

Field error in object 'board' on field 'subject': rejected value []; codes [NotEmpty.board.subject,NotEmpty.subject,NotEmpty.java.lang.String,NotEmpty]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [board.subject,subject]; arguments []; default message [subject]]; default message [게시판 제목을 입력하세요.]

errors 객체에서 필드는 ${error.field}, 에러 코드(유효성 검사 유형)는 ${error.code}, 에러 메시지는 ${error.defaultMessage}를 사용하시면 됩니다.

4. <spring:hasBindErrors> 태그를 다음과 수정합니다.

유효성 검사 결과 유효하지 않는 필드가 있으면 form(폼)의 CSS에 "was-validated"를 추가하고 에러가 발생한 필드의 CSS에 "is-invalid"를 추가하여 메시지가 노출되게 합니다.
에러가 발생한 필드가 변경될 때마다 :valid를 체크하여 필드가 유효한 상태가 되면 "is-invalid"를 삭제하여 메시지가 노출되지 않게 합니다.

<spring:hasBindErrors name="board">
	<script type="text/javascript">
		$('#board').addClass('was-validated');
		$(function($, window) {
			<c:forEach var="error" items="${errors.fieldErrors}">
				setTimeout(function() {
					$('#${error.field}').addClass("is-invalid");
					$('#${error.field}').on("change", function(event) {
						if ($(this).hasClass("is-invalid") && $(event.target).is(':valid')) {
							$(this).removeClass("is-invalid");
						}
					});
				}, 0);
			</c:forEach>
		});
	</script>
</spring:hasBindErrors>

웹 브라우저를 새로고침 하면 유효하지 않는 입력 필드 아래에 유효성 검사 결과 메시지가 노출되는 것을 확인할 수 있습니다.

그리고 입력 폼에서 작성자에 "te" 입력하면 유효성 검사 결과 메시지가 사라지고 입력란의 색이 녹색으로 변경되는 것을 확인할 수 있습니다.

이처럼 Hibernate Validator와 Form Tag Library에 있는 <spring:hasBindErrors> 태그를 사용하면 Server-Side Validation 처리와 Client-Side에서 유효성 검사 결과 노출 처리를 할 수 있습니다.

코딩이 조금 복잡해 보일 수 있지만 Client-Side Validation과 Server-Side Validation를 같이 처리해 주는 것이 좋습니다.

이어서 게시물 보기, 게시물 수정, 게시물 삭제까지 처리해 보도록 하겠습니다.

Spring에 Hibernate(하이버네이트) Validator 적용 - @NotNull, @NotEmpty, @Size, @Valid, BindingResult

carrotweb — Sun, 5 Mar 2023 17:15:27 +0900

서버에서 유효성 검사를 Controller에서 하지 않고 객체(Bean)에서 유효성 검사를 할 수 있는 빈 유효성 검사(Bean Validation) 구현체에 대해 알아보고 적용하겠습니다.

빈 유효성 검사(Bean Validation)는 객체(Bean)를 검증하기 위한 메타데이터(metadata) 모델과 API를 정의한 명세서(Specification)로 Annotation(어노테이션)을 사용하여 메타데이터를 정의하고 유효성을 검증하는 프로세스에 대해 정의되어 있습니다. 그리고 XML Validation Descriptor를 사용하여 메타데이터를 재정의하고 확장할 수 있게 되어 있습니다.

이 명세서는 2019년 8월 5일에 Jakarta Bean Validation 2.0 (https://beanvalidation.org/2.0/spec/)으로 릴리즈(배포) 되었습니다.

이처럼 Jakarta Bean Validation 2.0 규정에 맞게 동작되도록 구현(implementation)된 것이 Hibernate(하이버네이트) Validator (https://hibernate.org/validator/)입니다.

Jakarta Bean Validation 2.0 규정에 맞게 동작되도록 구현된 Hibernate Validator 6.2.x.Final은 Jakarta EE 8(Java EE 8)에서 실행되기 때문에 Java 버전이 8 또는 11, 17 이상 설치되어 있어야 합니다. (2022년 9월 12일 버전은 6.2.5.Final입니다.)

그리고 2020년 7월 4일에 Jakarta Bean Validation 3.0 (https://jakarta.ee/specifications/bean-validation/3.0/jakarta-bean-validation-spec-3.0.html)이 릴리즈(배포) 되었습니다.

Jakarta Bean Validation 3.0 규정에 맞게 동작되도록 구현된 Hibernate Validator 7.0.x.Final은 Jakarta EE 9(Java EE 9)에서 실행되기 때문에 Java 버전이 8 또는 11, 17 이상 설치되어 있어야 합니다. (2022년 8월 3일 버전은 7.0.5.Final입니다.)

2022년 9월 9일에는 Hibernate Validator 8.0.0.Final이 릴리즈 되었습니다. Hibernate Validator 8.0.0.Final은 Jakarta EE 10(Java EE 10)에서 실행되기 때문에 Java 버전이 11, 17 이상 설치되어 있어야 합니다.

프로젝트가 2022년 7월에 개발자 교육을 위해 만들어졌기 때문에 Hibernate Validator의 버전이 6.2.3.Final입니다. 그래서 최신 버전인 6.2.5.Final이나 7.0.5.Final를 사용하셔도 됩니다.

Maven Spring Project에 Hibernate Validator 적용하기

1. 메이븐 리포지토리(https://mvnrepository.com)에서 "hibernate-validator"으로 검색합니다. 검색된 결과 중에 "org.hibernate.validator > hibernate-validator"인 Hibernate Validator Engine를 선택합니다.

2. "Version"중에서 "6.2.3.Final"를 선택합니다. 그리고 [Maven] 탭을 선택하고 복사합니다.

<!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator -->
<dependency>
    <groupId>org.hibernate.validator</groupId>
    <artifactId>hibernate-validator</artifactId>
    <version>6.2.3.Final</version>
</dependency>

3. 메이븐 프로젝트에서 pom.xml 파일을 오픈하고 복사한 내용을 붙여 넣기 합니다.

그러면 자동으로 hibernate-validator, jakarta.validation-api, boss-logging, classmate 라이브러리 파일(JAR)들이 다운로드됩니다.

hibernate-validator-6.2.3.Final.jar
jakarta.validation-api-2.0.2.jar
boss-logging-3.4.1.Final.jar
classmate-1.5.1.jar

4. WEB-INF/config 폴더에서 dispatcher-servlet.xml 파일을 오픈하여 xmlns:mvc 네임스페이스를 추가하고 <mvc:annotation-driven> 태그를 추가합니다. 만약, 이전에 추가하셨다면 넘어가시면 됩니다.

annotation-driven

클래스에 있는 Annotation(어노테이션)들이 동작되도록 처리해 줍니다. 이전에 component-scan를 먼저 선언하였기 MVC 컴포넌트들을 Bean으로 생성하고 처리되는 문제가 없습니다. 만약, component-scan를 하지 않았다면 annotation-driven는 반드시 있어야 합니다. (일반적으로 annotation-driven를 사용하고 패키지에 있는 Bean를 사용하기 위해 component-scan를 사용합니다. 그래서 annotation-driven이 먼저 선언되어 있을 겁니다.)

annotation-driven이 설정되어 있어야 Hibernate Validator에서 유효성 검사에 사용되는 Annotation(어노테이션)들이 처리됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
		xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		xmlns:context="http://www.springframework.org/schema/context"
		xmlns:mvc="http://www.springframework.org/schema/mvc"
		xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
			http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd
			http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd">

	<mvc:annotation-driven />
	
	<context:component-scan base-package="com.home.study"/>
	
	<bean id="internalResourceViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
		<property name="prefix" value="/WEB-INF/views/"/>
		<property name="suffix" value=".jsp"/>
	</bean>
</beans>

Hibernate Validator에서 유효성 검사에 사용되는 Annotation(어노테이션)에 대해 알아보겠습니다.

NULL 검증

@NotNull : 값이 NULL이 아니어야 합니다.

@Null : 값이 NULL이어야 합니다.

문자 검증

@NotEmpty : 값이 공백이 아니어야 합니다. (값이 NULL과 ""이 아니어야 합니다.)

@NotBlank : 값이 공백이 아니어야 합니다. (값이 NULL과 "", " "이 아니어야 합니다.)

문자 크기 검증

@Size(min=num, max=num) : 값이 길이가 min보다 크고 max보다 작아야 합니다. (min 이상, max 이하)

문자 패턴 검증

@Pattern(regexp=string) : 값이 정규식 패턴과 일치해야 합니다.

@Email : 값이 이메일 패턴과 일치해야 합니다.

참/거짓 검증

@AssertTrue : 값이 true이어야 합니다.

@AssertFalse : 값이 false이어야 합니다.

숫자 검증(최대, 최소)

@Min(num) : 값이 최소 num보다 커야 합니다. (num 이상)

@Max(num) : 값이 최대 num보다 작아야 합니다. (num 이하)

@DecimalMin("numstring") : 값이 최소 num보다 커야 합니다. (num 이상)

@DecimalMax("numstring") : 값이 최대 num보다 작아야 합니다. (num 이하)

숫자 검증(양수, 음수)

@Positive : 값이 양수이어야 합니다. (0 초과)

@PositiveOrZero : 값이 0이거나 양수이어야 합니다. (0 이상)

@Negative : 값이 음수이어야 합니다. (0 미만)

@NegativeOrZero : 값이 0이거나 음수이어야 합니다. (0 이하)

숫자 자릿수 검증

@Digits(integer=num, fraction=num) : 최대 정수 자릿수는 integer, 최대 소수 자릿수는 fraction이어야 합니다.

시간 검증

@Future : 값이 현재 날짜와 시간보다 커야 합니다.

@FutureOrPresent : 값이 현재이거나 현재 날짜와 시간보다 커야 합니다.

@Past : 값이 현재 날짜와 시간보다 작아야 합니다.

@PastOrPresent : 값이 현재이거나 현재 날짜와 시간보다 작아야 합니다.

Maven Spring Project의 Model Board에 Hibernate Annotation 추가하기

1. Java Resource > src/main/java > com.home.study.test1.board.model 패키지에 있는 Board.java 파일 오픈하고 필드에 Annotation(어노테이션)을 추가합니다.

등록자 아이디는 Null도 공백도 아니어야 하고 최소 2자 이상 최대 20자 이내이어야 합니다.
게시판 제목은 Null도 공백도 아니어야 합니다.

/**
 * 게시판 제목
 */
@NotNull
@NotEmpty
private String subject = "";

/**
 * 등록자 아이디
 */
@NotNull
@NotEmpty
@Size(min = 2, max = 20)
private String registrationId = "";

@NotEmpty가 Null인지도 검사하기 때문에 @NotNull은 없어도 됩니다. 또한 필드의 값이 초기화되어 있어 Null이 올 수 없는 없습니다. 그렇지만 Controller이나 Board 클래스를 사용하는 곳에서 필드의 값에 Null을 적용할 수 있기 때문에 @NotNull도 사용하도록 하겠습니다.

그럼 Hibernate Validator로 유효성 검사를 하게 하는 방법과 유효성 검사 결과를 리턴 받는 방법에 대해 알아보겠습니다.

@Valid Annotation

Controller에서 Method(메서드)의 Parameter(파라미터)로 전달받은 객체에 @Valid Annotation(어노테이션)를 추가하면 Hibernate Validator로 객체(Bean)를 유효성 검사합니다.

BindingResult

Hibernate Validator로 유효성 검사한 검사 결과를 가지고 있는 객체입니다.

Method(메서드)의 Parameter(파라미터)로 BindingResult를 추가하여 사용하면 됩니다.
BindingResult의 hasErrors() 메서드를 통해 입력 요소에 에러가 있는지 확인할 수 있습니다.

Maven Spring Project의 Controller BoardController에 @Valid, BindingResult 추가하기

1. Java Resource > src/main/java > com.home.study.test.board.controlle 패키지에 있는 BoardController.java 파일 오픈하고 Board 객체에 @Valid 추가하고 BindingResult를 추가합니다.

유효성 검사를 하기 위해서 @ModelAttribute("board") Board board 앞에 @Valid를 추가합니다.
유효성 검사 결과를 리턴 받기 위해서 파라미터로 BindingResult bindingResult를 추가합니다.
Bean에 유효성 검사한 검사 결과를 확인하기 위해 bindingResult의 hasErrors() 메서드를 호출합니다.
유효성 검사한 검사 결과를 Console에 출력되게 처리합니다.

package com.home.study.test1.board.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.service.IBoardService;


@Controller
@RequestMapping("/board")
public class BoardController {

	@Autowired
	IBoardService boardService;

	@RequestMapping(value="/addform", method=RequestMethod.GET)
	public String addBoardForm(HttpServletRequest request, HttpServletResponse response,
			@ModelAttribute("board") Board board, ModelMap model) {
		return "board/boardform";
	}

	@RequestMapping(value="/addboard", method=RequestMethod.POST)
	public String addBoard(HttpServletRequest request, HttpServletResponse response,
			@Valid @ModelAttribute("board") Board board, BindingResult bindingResult, ModelMap model) {
		if (bindingResult.hasErrors()) {
			List<FieldError> fieldsErrors = bindingResult.getFieldErrors();
			for (FieldError fieldError : fieldsErrors) {
				System.out.println(fieldError.getField() + " = " + fieldError.getCode() + " / " + fieldError.getDefaultMessage());
			}
			return "board/boardform";
		}
		
		if (!boardService.insertBoardItem(board)) {
			return "board/boardform";
		}
		
		return "redirect:/index.do";
	}
}

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하여 게시물 입력 폼(/board/addform.do)으로 이동한 후 입력 폼에서 작성자, 제목, 내용에 입력하지 않고 등록 버튼을 클릭합니다.

3. Eclipse의 Console를 보면 유효성 검사 결과를 확인할 수 있습니다.

registrationId = Size / 크기가 2에서 20 사이여야 합니다
registrationId = NotEmpty / 비어 있을 수 없습니다
subject = NotEmpty / 비어 있을 수 없습니다

그렇지만 Hibernate Validator의 유효성 검사 메시지는 자연스럽지 않습니다. 그래서 @Valid Annotation(어노테이션)에 message를 사용하여 유효성 검사 메시지를 변경하겠습니다.

Java Resource > src/main/java > com.home.study.test1.board.model 패키지에 있는 Board.java 파일 오픈하고 필드의 Annotation(어노테이션)에 message를 추가합니다.

/**
 * 게시판 제목
 */
@NotNull(message="게시판 제목을 입력하세요.")
@NotEmpty(message="게시판 제목을 입력하세요.")
private String subject = "";

/**
 * 등록자 아이디
 */
@NotNull(message="작성자 아이디를 입력하세요.")
@NotEmpty(message="작성자 아이디를 입력하세요.")
@Size(min = 2, max = 20, message="작성자 아이디는 최소 2자, 최대 20자 이내로 입력하세요.")
private String registrationId = "";

"Tomcat"에서 "stop"버튼(stop the server)을 클릭하여 종료하고 다시 "start"버튼(start the server)을 클릭하면 Tomcat를 실해시 킵니다. 그리고 웹 브라우저에서 다시 등록 버튼을 클릭합니다. 그리고 Eclipse의 Console를 보면 유효성 검사 결과 메시지가 변경된 것을 확인할 수 있습니다.

registrationId = Size / 작성자 아이디는 최소 2자, 최대 20자 이내로 입력하세요.
registrationId = NotEmpty / 작성자 아이디를 입력하세요.
subject = NotEmpty / 게시판 제목을 입력하세요.

이처럼 Hibernate Validator를 사용하면 유효성 검사가 적용된 필드들을 한 번에 검사할 수 있어 좋습니다. 이어서 유효성 검사 결과를 리턴 받은 BindingResult 객체를 사용하여 웹 브라우저에 유효성 검사 결과 메시지가 노출되도록 하겠습니다.

Spring에 Server-Side Validation 처리

carrotweb — Sun, 12 Feb 2023 06:19:13 +0900

웹 서버에서 전송(Submit)된 게시물 내용(폼(form) 데이터)을 처리하거나 데이터베이스에 등록하기 전에 폼(form) 데이터의 값이 유효한지(데이터 타입이나 길이, 범위, 패턴이 맞는지) 검사하는 것을 Server-Side Validation이라고 합니다.

개발된 것을 보면 대부분 클라이언트(웹 브러우저)에서만 유효성 검사를 하는 경우가 많습니다. 그 이유는 사용자가 입력한 데이터에 대한 피드백을 바로 전달할 수 있기 때문입니다. 그렇지만 사용자가 클라이언트(웹 브러우저)의 스크립트를 조작하여 유효성 검사를 하지 않고 서버에 전송하게 되면 유효하지 않는 데이터가 데이터베이스에 저장될 수 있습니다. 그렇기 때문에 서버에서 다시 유효성 검사를 하는 것이 좋습니다. (대부분의 사용자는 웹 브라우저의 스크립트를 조작하지 못할 겁니다.)

클라이언트(웹 브러우저)에서 유효성 검사하지 않고 서버에서만 유효성 검사해도 됩니다. 그 이유는 전송된 폼(form) 데이터의 값이 유효하지 않으면 클라이언트(웹 브러우저)로 바로 돌려보내면 되기 때문입니다. 그렇지만 데이터의 유효성 검사가 서버에만 있기 때문에 데이터가 유효할 때까지 반복적으로 서버로 전송해야 하는 문제가 있습니다. (실제로 유효성 검사로 반복되는 빈도는 많지 않습니다.)

유효성 검사를 서버에서 하게 되면 클라이언트(웹 브러우저)에서 유효성 검사를 하지 않아도 되기 때문에 클라이언트(웹 브러우저)의 스크립트 코딩을 줄 일 수 있습니다. 그렇지만 유효성 검사를 서버와 클라이언트 모두 해주는 것이 좋습니다.

그럼 서버에서는 어디에서 유효성 검사를 해야 할까요?

클라이언트(웹 브러우저)로 부터 전송된 폼(form) 데이터가 들어오는 Controller 클래스에서 유효성 검사를 하면 됩니다.

Maven Spring Project에 Server-Side Validation 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.controller 패키지에 있는 BoardController 클래스를 오픈합니다. (BoardController.java)

2. addBoard 메서드에서 @ModelAttribute Annotation(어노테이션)이 적용된 board 객체를 사용하여 유효성 검사를 추가합니다.

board의 getRegistrationId() 메서드를 사용하여 작성자 아이디를 가져오고 작성자 아이디가 빈 값이거나 길이가 2보다 작거나 20보다 크면 작성자 아이디가 유효하지 않기 때문에 게시물 입력 페이지로 에러 입력 아이디(errorInputId)와 에러 메시지(errorMessage)를 리턴합니다.
board의 getSubject() 메서드를 사용하여 제목을 가져오고 제목이 빈 값이면 제목이 유효하지 않기 때문에 게시물 입력 페이지로 에러 입력 아이디(errorInputId)와 에러 메시지(errorMessage)를 리턴합니다.

package com.home.study.test1.board.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.service.IBoardService;


@Controller
@RequestMapping("/board")
public class BoardController {

	@Autowired
	IBoardService boardService;

	@RequestMapping(value="/addform", method=RequestMethod.GET)
	public String addBoardForm(HttpServletRequest request, HttpServletResponse response,
			@ModelAttribute("board") Board board, ModelMap model) {
		return "board/boardform";
	}

	@RequestMapping(value="/addboard", method=RequestMethod.POST)
	public String addBoard(HttpServletRequest request, HttpServletResponse response,
			@ModelAttribute("board") Board board, ModelMap model) {
		String registrationId = board.getRegistrationId();
		if (registrationId.isEmpty()) {
			model.addAttribute("errorInputId","registrationId");
			model.addAttribute("errorMessage", "작성자 입력란에 아이디가 입력되지 않았습니다.\\n아이디를 입력하세요.");
			return "board/boardform";
		} else if (registrationId.length() < 2 || registrationId.length() > 20) {
			model.addAttribute("errorInputId","registrationId");
			model.addAttribute("errorMessage", "작성자 입력란에 아이디는 최소 2자이상 최대 20자 이내로 입력하세요.");
			return "board/boardform";
		}
		
		String subject = board.getSubject();
		if (subject.isEmpty()) {
			model.addAttribute("errorInputId","subject");
			model.addAttribute("errorMessage", "제목 입력란에 제목이 입력되지 않았습니다.\\n제목을 입력하세요.");
			return "board/boardform";
		}
		
		if (!boardService.insertBoardItem(board)) {
			return "board/boardform";
		}
		
		return "redirect:/index.do";
	}
}

3. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 서버에서 유효성 검사를 하기 위해서는 <script>를 수정합니다.

클라이언트에서 유효성 검사를 하지 않기 위해서 기존 등록 버튼에 있는 checkValidity() 메서드를 주석처리합니다.
에러 입력 아이디(errorInputId)와 에러 메시지(errorMessage)가 있으면 window.onload에서 alert으로 에러 메시지를 알려주고 에러 입력 아이디로 포커스를 이동시킵니다.

$(function() {
	$('#saveBtn').click(function() {
		var boardForm = $('#board');
		//if (!boardForm[0].checkValidity()) {
		//	boardForm.addClass('was-validated');
		//} else {
			boardForm.attr("action", "/board/addboard.do");
			boardForm.submit();
		//}
	});
	$('#cancelBtn').click(function() {
		window.history.go(-1);
	});
	<c:if test="${not empty errorInputId && not empty errorMessage}">
	setTimeout(function() {
		alert("${errorMessage}");
		$("#${errorInputId}").focus();
	}, 100);
	</c:if>
});

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하면 게시물 입력 폼(/board/addform.do)으로 이동됩니다.

3. 입력 폼에서 작성자, 제목, 내용에 입력하지 않고 등록 버튼을 클릭합니다. 그러면 작성자가 빈 값이기 때문에 alert으로 에러 메시지가 노출됩니다. 확인 버튼을 누르면 작성자 입력란으로 포커스가 이동됩니다.

4. 입력 폼에서 작성자에 "t" 입력하고 등록 버튼을 클릭합니다. 그러면 작성자의 길이가 유효하지 않아서 alert으로 에러 메시지가 노출됩니다. 확인 버튼을 누르면 작성자 입력란으로 포커스가 이동됩니다.

5. 입력 폼에서 작성자에 "testid3" 입력하고 등록 버튼을 클릭합니다. 그러면 제목이 빈 값이기 때문에 alert으로 에러 메시지가 노출됩니다. 확인 버튼을 누르면 제목 입력란으로 포커스가 이동됩니다.

이처럼 서버에서 유효성 검사를 하여 유효하지 않을 경우 에러 정보를 입력 페이지로 다시 보내어 웹 브라우저에서 에러를 처리하도록 할 수 있습니다.

참고로, setTimeout()를 사용하여 처리한 이유는 웹 브라우저에 페이지가 노출된 후 메시지가 노출될게 하기 위해서입니다. setTimeout()를 사용하지 않고 해 보시면 빈 화면에 alert으로 에러 메시지를 노출되는 것을 확인할 수 있습니다.

$(function() {
	$('#saveBtn').click(function() {
		var boardForm = $('#board');
		//if (!boardForm[0].checkValidity()) {
		//	boardForm.addClass('was-validated');
		//} else {
			boardForm.attr("action", "/board/addboard.do");
			boardForm.submit();
		//}
	});
	$('#cancelBtn').click(function() {
		window.history.go(-1);
	});
	<c:if test="${not empty errorInputId && not empty errorMessage}">
	alert("${errorMessage}");
	$("#${errorInputId}").focus();
	</c:if>
});

기존처럼 CSS로 유효성 검사 결과를 처리할 경우 form(폼)의 CSS에 "was-validated"를 추가하고 에러가 발생한 입력란에 setCustomValidity() 메서드를 사용하여 에러 메시지를 추가하면 됩니다. setCustomValidity() 메서드를 사용해야 에러가 발생한 입력란에 :invalid selector가 발생됩니다.

$(function() {
	$('#saveBtn').click(function() {
		var boardForm = $('#board');
		//if (!boardForm[0].checkValidity()) {
		//	boardForm.addClass('was-validated');
		//} else {
			boardForm.attr("action", "/board/addboard.do");
			boardForm.submit();
		//}
	});
	$('#cancelBtn').click(function() {
		window.history.go(-1);
	});
	<c:if test="${not empty errorInputId && not empty errorMessage}">
	$('#board').addClass('was-validated');
	$('#${errorInputId}')[0].setCustomValidity("${errorMessage}");
	//alert("${errorMessage}");
	//$("#${errorInputId}").focus();
	</c:if>
});

이렇게 서버에서 유효성 검사를 하기 위해서는 @ModelAttribute Annotation(어노테이션)이 적용된 객체에서 값을 가져와 유효성 검사를 해야 하는 번거로움이 있습니다. 그래서 좀 더 편하게 객체에서 유효성 검사를 할 수 있는 빈 유효성 검사 구현체에 대해 알아보고 적용해 보도록 하겠습니다.

javax.net.ssl.SSLException: java.lang.RuntimeException: Unexpected error: java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty

carrotweb — Tue, 7 Feb 2023 01:31:30 +0900

OpenJDK 1.8을 사용할 경우 HTTPS(SSL) 접속 시 신뢰할 수 있는 공개키인 Trust Anchors(트러스트 앵커) 매개 변수가 비어 있어서 오류가 발생합니다.

javax.net.ssl.SSLException: java.lang.RuntimeException: Unexpected error: java.security.InvalidAlgorithmParameterException: the trustAnchors parameter must be non-empty

그 이유 OpenJDK 1.8가 설치된 폴더에서 jre 폴더 > lib 폴더 > security 폴더로 이동해서 cacerts 파일을 확인해보면 파일 크기가 1KB로 Trust Anchors(트러스트 앵커)에 대한 정보가 없어 발생합니다.

cacerts 파일은 TrustStore로 Trust Anchors(트러스트 앵커)들이 저장되어 있는 파일입니다.

그래서 Eclipse 설치시 자동으로 설치된 Java에서 cacerts 파일을 복사해서 교체해 주면 됩니다.

cacerts 파일 교체하기

Eclipse 설치시 자동으로 설치된 Java 폴더의 위치는

메뉴에서 Windows > Preferences를 클릭합니다.
Preferences 창에서 Java > Installed JREs를 선택합니다.

저는 Eclipse IDE 2022-12로 자동으로 설치된 Java 폴더의 위치는 C:\Users\{사용자계정}\.p2\pool\plugins\org.eclipse.justj.openjdk.hotspot.jre.full.win32.x86_64_17.0.5.v20221102-0933\jre 입니다.

설치된 OpenJDK 1.8 폴더의 위치는 C:\workspaces\openjdk\java-se-8u42-ri 입니다.

1. 파일 탐색기로 Java 폴더의 위치(C:\Users\{사용자계정}\.p2\pool\plugins\org.eclipse.justj.openjdk.hotspot.jre.full.win32.x86_64_17.0.5.v20221102-0933\jre)로 이동합니다. 그리고 lib 폴더 > security 폴더로 이동하여 cacerts 파일을 복사합니다.

2. 파일 탐색기로 OpenJDK 폴더의 위치(C:\workspaces\openjdk\java-se-8u42-ri)로 이동합니다. 그리고 jre 폴더 > lib 폴더 > security 폴더를 이동하여 cacerts 파일을 붙여넣기하여 교체하면 됩니다.

Spring에 JavaScript Validation API 적용 - form checkValidity, CSS :valid vs :invalid

carrotweb — Sun, 29 Jan 2023 23:18:24 +0900

매번 script에서 form(폼) 안에 있는 모든 입력 요소(required 속성이 있는 입력 요소)에 대해 checkValidity() 메서드를 호출하고 validity 유형에 따라 메시지를 작성하여 노출시켜야 하는 번거로움이 있습니다.

그래서 한 번에 호출하고 한 번에 유효성 메시지를 노출시키는 방법에 대해 알아보겠습니다.

checkValidity() 메서드는 입력 요소뿐만 아니라 form(폼)에서도 사용할 수 있습니다. 그래서 form(폼)에서 checkValidity() 메서드를 호출하면 form(폼) 안에 있는 모든 입력 요소(required 속성이 있는 입력 요소)에 대해 유효성 검사를 진행하게 됩니다. required 속성이 있는 입력 요소 전체가 유효하지 않으면 false를 리턴합니다.

Maven Spring Project에 JavaScript Validation API 적용하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 <script>에서 기존 등록 버튼에 있는 script는 주석처리하고 form(폼)의 checkValidity() 메서드를 호출합니다.

$('#saveBtn').click(function() {
	/*
	var registrationId = $('#registrationId')[0];
	if (!registrationId.checkValidity()) {
		if (registrationId.validity.valueMissing) {
			registrationId.setCustomValidity('작성자 입력란에 아이디가 입력되지 않았습니다.\n아이디를 입력하세요.');
		} else if (registrationId.validity.tooShort) {
			registrationId.setCustomValidity('작성자 입력란에 아이디는 최소 2자이상 최대 20자 이내로 입력하세요.');
		}
		alert(registrationId.validationMessage);
		$("#registrationId").focus();
		registrationId.setCustomValidity("");
		return;
	}
	var subject = $('#subject')[0];
	if (!subject.checkValidity()) {
		if (subject.validity.valueMissing) {
			subject.setCustomValidity('제목 입력란에 제목이 입력되지 않았습니다.\n제목을 입력하세요.');
		}
		alert(subject.validationMessage);
		$("#subject").focus();
		subject.setCustomValidity("");
		return;
	}
	$('#board').attr("action", "/board/addboard.do");
	$('#board').submit();
	*/
	var boardForm = $('#board')[0];
	if (!boardForm.checkValidity()) {
		var registrationId = $('#registrationId')[0];
		console.log(registrationId.validity);
		var subject = $('#subject')[0];
		console.log(subject.validity);
	} else {
		console.log("에러가 없습니다.");
	}
});

form(폼)의 checkValidity() 메서드는 form(폼) 안에 있는 모든 입력 요소에 대해 유효성 검사를 진행하기 때문에 form(폼)의 validity 속성은 없습니다. 콘솔로 출력해 보면 undefined입니다.

그래서 입력 요소 별로 유효한지 확인하기 위해서는 입력 요소 별로 validity 속성으로 확인하면 됩니다.

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하면 게시물 입력 폼(/board/addform.do)으로 이동됩니다.

3. 등록 버튼을 누르고 콘솔을 확인하면 validity 속성 값이 출력됩니다.

CSS :valid vs :invalid

입력 요소가 유효하면 입력 요소의 CSS에 :valid selector가 실행되고 유효하지 않으면 :invalid selector가 실행됩니다.

CSS의 :valid selector와 :invalid selector는 입력 요소에서 checkValidity() 메서드가 실행되지 않아도 입력 요소에 required 속성이 있으면 자동으로 실행됩니다.

Maven Spring Project에 CSS :valid와 :invalid 적용하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 <style> 태그에 입력 요에 대한 :valid selector와 :invalid selector를 추가합니다.

입력 요소가 유효하면 녹색으로 유효하지 않으면 붉은색으로 설정합니다.

.form-input:invalid { border: 1px solid #dc3545; }
.form-input:valid { border: 1px solid #198754; }

2. 필수 입력 요소인 작성자(registrationId)와 subject(제목) <form:input> 태그에 class를 추가합니다.

<form:form modelAttribute="board" autocomplete="off">
<table>
	<colgroup>
		<col style="width:18.5%">
		<col style="width:auto">
	</colgroup>
	<tbody>
		<tr>
			<th scope="row">작성자</th>
			<td><form:input path="registrationId" placeholder="아이디를 입력하세요." minlength="2" maxlength="20" required="required" class="form-input" /></td>
		</td>
		</tr>
		<tr>
			<th scope="row">제목</th>
			<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" class="form-input" /></td>
		</tr>
		<tr>
			<th scope="row">내용</th>
			<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10" /></td>
		</tr>
	</tbody>
</table>
</form:form>

웹 브라우저를 새로고침 하면 작성자(registrationId)와 subject(제목)이 붉은색으로 표시되는 것을 확인할 수 있습니다.

작성자(registrationId)에 "testid3"를 입력하고 subject(제목)에 "테스트 제목"을 입력하면 입력 요소가 녹색으로 표시되는 것을 확인할 수 있습니다.

그렇지만 등록 버튼을 누르기 전에 form(폼)에 있는 입력 요소들이 붉은색으로 표시되기 때문에 그대로 사용하기에는 적합하지 않습니다.

그래서 <script>에서 등록 버튼이 눌러질 때만 처리되게 변경하면 됩니다. 그리고 입력 요소가 유효하지 않으면 메시지가 노출되게 처리하겠습니다.

Maven Spring Project에 CSS 변경 및 메시지 추가하기

1. <style> 태그에 입력 요에 대한 CSS를 변경합니다.

:valid selector와 :invalid selector를 Validation(밸리데이션)할 때만 처리되게 "was-validated"를 추가합니다.
입력 요소가 유효하지 않을 때 입력 요소 아래에 메시지가 붉은색으로 노출되게 "invalid-feedback"를 추가합니다.

.was-validated .form-input:invalid { border: 1px solid #dc3545; }
.was-validated .form-input:valid { border: 1px solid #198754; }
.invalid-feedback { display: none; width: 100%; margin-top: 4px; color: #dc3545; }
.was-validated .form-input.is-invalid { border: 1px solid #dc3545; }
.was-validated .form-input.is-invalid~ .invalid-feedback { display: block; }

2. 필수 입력 요소인 작성자(registrationId)와 subject(제목) <form:input> 태그 다음에 유효하지 않을 때 노출될 메시지를 추가합니다.

<form:form modelAttribute="board" autocomplete="off">
<table>
	<colgroup>
		<col style="width:18.5%">
		<col style="width:auto">
	</colgroup>
	<tbody>
		<tr>
			<th scope="row">작성자</th>
			<td><form:input path="registrationId" placeholder="아이디를 입력하세요." minlength="2" maxlength="20" required="required" class="form-input" />
				<div class="invalid-feedback">아이디는 최소 2자이상 최대 20자 이내로 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">제목</th>
			<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" class="form-input" />
				<div class="invalid-feedback">제목을 입력하세요.</div>
			</td>
		</tr>
		<tr>
			<th scope="row">내용</th>
			<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10" /></td>
		</tr>
	</tbody>
</table>
</form:form>

3. <script>에서 기존 등록 버튼에 있는 script는 삭제하고 form(폼)의 checkValidity() 메서드를 호출한 후 유효하지 않으면 form(폼)의 CSS에 "was-validated"를 추가합니다.

$('#saveBtn').click(function() {
	var boardForm = $('#board');
	if (!boardForm[0].checkValidity()) {
		boardForm.addClass('was-validated');
	} else {
		boardForm.attr("action", "/board/addboard.do");
		boardForm.submit();
	}
});

웹 브라우저를 새로고침합니다.

등록 버튼을 누르면 작성자(registrationId)와 subject(제목)이 붉은색으로 표시되고 메시지가 노출되는 것을 확인할 수 있습니다.

작성자(registrationId)에 "testid3"를 입력하면 녹색으로 표시되는 것을 확인할 수 있습니다.

그리고 subject(제목)에 "테스트 제목"을 입력하면 녹색으로 표시되는 것을 확인할 수 있습니다.

내용을 입력하고 등록 버튼을 누르면 정상적으로 등록되는 것을 확인할 수 있습니다.

form(폼)의 checkValidity() 메서드와 CSS의 :valid selector와 :invalid selector를 사용하면 유효성 검사 및 메시지 처리를 간단하게 할 수 있습니다.

이어서 Server-Side Validation에 대해 알아보고 추가해 보겠습니다.

Spring에 JavaScript Validation API 적용 - checkValidity, validity(tooLong, tooShort, rangeUnderflow, rangeOverflow, badInput, stepMismatch, patternMismatch, typeMismatch), validationMessage, setCustomValidity

carrotweb — Sun, 15 Jan 2023 22:06:24 +0900

게시물을 등록하기 전(폼(form)을 전송(Submit) 하기 전)에 입력한 데이터가 정확한지 Validation(밸리데이션)하여 입력값이 정확하지 않으면 사용자에게 알려주어 다시 입력하게 하는 것을 Client-Side Validation이라고 합니다.

이전에서 처리한 등록 버튼 script처럼 단순하게 입력란에 입력한 데이터가 있는지만 판단하는 정도라면 JavaScript Validation API를 사용하여 처리할 수 있습니다.

JavaScript Validation API는 입력한 데이터의 유무뿐만 아니라 입력한 데이터의 길이가 긴지 짧은지, 패턴과 일치하는지, 숫자가 아닌 문자가 있는지, 숫자가 큰지 작은지 검사할 수 있습니다.

JavaScript Validation API는 DOM 지원하는 모든 웹 브라우저에서 지원됩니다.

그럼 JavaScript Validation API를 사용하여 form(폼)에 있는 입력 요소들이 유효한 데이터를 가지고 있는지 검사해 보도록 하겠습니다.

JavaScript Validation API에서 제공하는 DOM 메서드인 checkValidity() 메서드를 사용하면 검사할 수 있습니다.

checkValidity() 메서드는 입력 요소의 속성 정보를 사용하여 입력한 데이터가 있는지, 데이터의 길이가 긴지 짧은지, 패턴과 일치하는지, 숫자가 아닌 문자가 있는지, 숫자가 큰지 작은지 검사하고 Boolean(부울) 값으로 리턴합니다.

checkValidity() 메서드는 입력 요소에 required 속성이 있어야 검사를 진행하게 되어 있습니다. 즉, 필수 입력 요소들만 검사하게 됩니다.

checkValidity() 메서드가 실행되면 JavaScript Validation API에서 제공하는 DOM 속성인 validity 속성에 유효성별로 검사 결과가 Boolean(부울) 값으로 적용되어 리턴됩니다. 그리고 validity에 있는 유효성 속성 중에 false가 있으면 DOM 속성인 validationMessage 속성에 웹 브라우저에서 출력되는 유효성 검사 메시지가 리턴됩니다.

그럼 테스트를 통해 checkValidity() 메서드와 validity 속성, validationMessage 속성에 대해 알아보겠습니다.

Maven Spring Project에 JavaScript Validation API 적용하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하고 게시물 적성 시 필수 입력 요소인 작성자(registrationId)와 subject(제목) <form:input> 태그에 required 속성을 추가합니다.

<form:form modelAttribute="board" autocomplete="off">
<table>
	<colgroup>
		<col style="width:18.5%">
		<col style="width:auto">
	</colgroup>
	<tbody>
		<tr>
			<th scope="row">작성자</th>
			<td><form:input path="registrationId" placeholder="아이디를 입력하세요." required="required" /></td>
		</tr>
		<tr>
			<th scope="row">제목</th>
			<td><form:input path="subject" placeholder="제목을 입력하세요." required="required" /></td>
		</tr>
		<tr>
			<th scope="row">내용</th>
			<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10"/></td>
		</tr>
	</tbody>
</table>
</form:form>

2. <script>에서 기존 등록 버튼에 있는 script는 주석처리하고 테스트를 위해 작성자(registrationId)에 checkValidity() 메서드를 적용합니다.

required 속성은 필수 입력 요소를 나타내는 것이기 때문에 입력란에 데이터가 입력되지 않으면 checkValidity() 메서드는 false를 리턴하게 됩니다.
checkValidity() 메서드의 리턴 값이 false이면 DOM 속성인 validationMessage(DOM 속성인 validity에 있는 유효성 속성 중에 false가 있을 때 웹 브라우저에서 출력되는 유효성 검사 메시지)를 알럿으로 보겠습니다.

$(function() {
	$('#saveBtn').click(function() {
		/*
		var registrationId = $('#registrationId').val();
		if (registrationId == null || registrationId == "") {
			alert("아이디를 입력하세요.");
			$("#registrationId").focus();
			return;
		}
		var subject = $('#subject').val();
		if (subject == null || subject == "") {
			alert("제목을 입력하세요.");
			$("#subject").focus();
			return;
		}
		$('#board').attr("action", "/board/addboard.do");
		$('#board').submit();
		*/
		if (!$('#registrationId')[0].checkValidity()) {
			alert($('#registrationId')[0].validationMessage);
		}
	});
});

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하면 게시물 입력 폼(/board/addform.do)으로 이동됩니다.

3. 등록 버튼을 누르면 checkValidity() 메서드가 실행되면서 메시지가 알럿으로 보입니다.

그럼 기존 등록 버튼에 있는 script에 DOM 속성인 validity를 콘솔로 출력해서 어떤 유형별로 되어 있는지 확인해 보겠습니다.

if (!$('#registrationId')[0].checkValidity()) {
	alert($('#registrationId')[0].validationMessage);
}
console.log($('#registrationId')[0].validity);

validity를 콘솔로 출력하면 ValidityState로 나타납니다.

작성자(registrationId)에 입력된 데이터가 없으면 valid가 false가 되고 valueMissing이 true가 됩니다.

valid : 입력 요소에 값이 유효하면 true, 유효하지 않으면 false를 리턴합니다.
valueMissing : 입력 요소 속성에 required가 있는데 입력된 데이터가 없으면 true, 있으면 false를 리턴합니다.

작성자(registrationId)에 입력된 데이터가 있으면 valid가 true가 되고 valueMissing이 false가 됩니다.

작성자(registrationId)에 입력되는 데이터가 최소 2자 이상이고 최대 20자 이하로 되게 작성자(registrationId)의 <form:input> 태그에 minlength 속성과 maxlength 속성을 추가합니다.

<tr>
	<th scope="row">작성자</th>
	<td><form:input path="registrationId" placeholder="아이디를 입력하세요." minlength="2" maxlength="20" required="required" /></td>
</tr>

새로고침 후 작성자(registrationId)에 "1"를 입력하고 등록 버튼을 누릅니다.

콘솔에서 validity를 확인해 보면 작성자(registrationId)에 입력된 데이터가 1글자 이기 때문에 tooShort가 true가 되고 valid가 false가 됩니다.

tooLong : 입력 요소(input type='text', textarea) 속성에 maxlength가 있고 입력 값 길이가 maxlength 보다 크면 true를 작거나 같으면 false를 리턴합니다.
tooShort : 입력 요소(input type='text', textarea) 속성에 minlength가 있고 입력 값 길이가 minlength 보다 작으면 true를 크거나 같으면 false를 리턴합니다.

<input type='text'> 태그나 <textarea> 태그에서 maxlength가 설정되면 웹 브라우저에서 입력되는 데이터가 maxlength보다 크게 입력이 되지 않게 제어되기 때문에 tooLong 속성이 true가 나오지 않습니다.

그럼 다른 유형들도 테스트를 통해서 알아보겠습니다.

테스트를 위해 바탕화면에 test.html를 생성하였습니다.

숫자만 입력할 수 있는 <input type="number"> 태그로 최소 1부터 최대 100까지 설정할 수 있게 하고 score 버튼을 눌러 검사하도록 코딩합니다.

<input id="score" type="number" min="1" max="100" required="required">
<button onclick="myScore()">Score</button>
<script>
	function myScore() {
		const scoreObject = document.getElementById("score");
		if (!scoreObject.checkValidity()) {
			console.log(scoreObject.validity);
			alert(scoreObject.validationMessage);
		}
	}
</script>

test.html를 웹 브라우저에서 실행하고 입력란에 "0"를 입력한 후 Score 버튼을 누릅니다.

콘솔에서 validity를 확인해 보면 score에 입력된 숫자가 0 이기 때문에 rangeUnderflow가 true가 되고 valid가 false가 됩니다.

rangeUnderflow : 입력 요소(Input type='number') 속성에 min이 있고 min 보다 작으면 true를 크거나 같으면 false를 리턴합니다.
rangeOverflow : 입력 요소(Input type='number') 속성에 max이 있고 max 보다 크면 true를 작거나 같으면 false를 리턴합니다.

입력란에 "101"를 입력한 후 Score 버튼을 누릅니다.

콘솔에서 validity를 확인해 보면 score에 입력된 숫자가 101 이기 때문에 rangeOverflow가 true가 되고 valid가 false가 됩니다.

만약 입력란에 숫자가 아닌 문자를 입력하고 Score 버튼을 누르면 badInput이 true가 되고 valid가 false가 됩니다.

badInput : 입력 요소(Input type='number')에 숫자가 아닌 문자가 있으면 true를 숫자면 false를 리턴합니다.

만약 step이 2로 설정되어 있다면 다음에 증가할 숫자는 현재의 숫자보다 2가 커야 합니다. 그러나 입력된 숫자가 다음에 증가할 step이 아닌 숫자가 오면 stepMismatch가 true가 되고 valid가 false가 됩니다.

<input id="score" type="number" min="1" max="100" step="2" required="required">
<button onclick="myScore()">Score</button>
<script>
	function myScore() {
		const scoreObject = document.getElementById("score");
		if (!scoreObject.checkValidity()) {
			console.log(scoreObject.validity);
			alert(scoreObject.validationMessage);
		}
	}
</script>

만약 입력란에 "4"를 입력하고 Score 버튼을 누르면 stepMismatch가 true가 되고 valid가 false가 됩니다.

stepMismatch : 입력 요소(Input type='number') 속성에 step이 있고 step으로 나눈 나머지가 있으면 true를 그렇지 않으면 false를 리턴합니다.

전화번호를 입력할 수 있는 <input type="tel"> 태그에 휴대폰 번호에 대한 pattern(패턴) 설정할 수 있게 하고 tel버튼을 눌러 검사하도록 코딩합니다.

<input id="tel1" type="tel" pattern="01[0|1|6|7|8|9]" required="required">
<input id="tel2" type="tel" pattern="[0-9]{3,4}" required="required">
<input id="tel3" type="tel" pattern="[0-9]{4}" required="required">
<button onclick="myTel()">tel</button>
<script>
	function myTel() {
		const tel1Object = document.getElementById("tel1");
		if (!tel1Object.checkValidity()) {
			console.log(tel1Object.validity);
			alert(tel1Object.validationMessage);
		}
	}
</script>

test.html를 웹 브라우저에서 실행하고 tel1 입력란에 "111"를 입력한 후 tel 버튼을 누릅니다.

콘솔에서 validity를 확인해 보면 tel1에 입력된 숫자가 pattern(패턴)과 일치하지 않기 때문에 patternMismatch가 true가 되고 valid가 false가 됩니다.

patternMismatch : 입력 요소(Input type='text, tel, email, url, password, search') 속성에 pattern(패턴)이 있고 pattern(패턴)과 일치하지 않으면 true를 일치하면 false를 리턴합니다.

email를 입력할 수 있는 <input type="email"> 태그에 데이터를 입력하여 email버튼을 눌러 검사하도록 코딩합니다.

<input id="email" type="email" required="required"/>
<button onclick="myEmail()">email</button>
<script>
	function myEmail() {
		const emailObject = document.getElementById("email");
		if (!emailObject.checkValidity()) {
			console.log(emailObject.validity);
			alert(emailObject.validationMessage);
		}
	}
</script>

test.html를 웹 브라우저에서 실행하고 email 입력란에 "test.com"를 입력한 후 email 버튼을 누릅니다.

콘솔에서 validity를 확인해 보면 email에 입력된 데이터가 email pattern(패턴)과 다르기 때문에 typeMismatch가 true가 되고 valid가 false가 됩니다.

typeMismatch : 입력 요소(Input type='email, url')에 pattern(패턴)과 일치하지 않으면 true를 일치하면 false를 리턴합니다.

다시 게시물을 등록하는 소스를 돌아와서 진행하겠습니다.

웹 브라우저에서 출력되는 유효성 검사 메시지를 보면 일반적인 메시지이고 영어 문장이 번역된 것이기 때문에 자연스럽지 않습니다. 그래서 JavaScript Validation API에서 제공하는 DOM 메서드인 setCustomValidity() 메서드를 사용하여 메시지를 변경하도록 하겠습니다.

setCustomValidity() : 입력 요소에 있는 유효성 검사 메시지(validationMessage) 속성을 변경합니다.

주석처리된 부분은 삭제하였습니다. 그리고 검사 유형에 맞게 메시지를 변경하였습니다.

$(function() {
	$('#saveBtn').click(function() {
		var registrationId = $('#registrationId')[0];
		if (!registrationId.checkValidity()) {
			if (registrationId.validity.valueMissing) {
				registrationId.setCustomValidity('작성자 입력란에 아이디가 입력되지 않았습니다.\n아이디를 입력하세요.');
			} else if (registrationId.validity.tooShort) {
				registrationId.setCustomValidity('작성자 입력란에 아이디는 최소 2자이상 최대 20자 이내로 입력하세요.');
			}
			alert(registrationId.validationMessage);
			$('#registrationId').focus();
			registrationId.setCustomValidity("");
			return;
		}
		var subject = $('#subject')[0];
		if (!subject.checkValidity()) {
			if (subject.validity.valueMissing) {
				subject.setCustomValidity('제목 입력란에 제목이 입력되지 않았습니다.\n제목을 입력하세요.');
			}
			alert(subject.validationMessage);
			$('#subject').focus();
			subject.setCustomValidity("");
			return;
		}
		$('#board').attr("action", "/board/addboard.do");
		$('#board').submit();
	});
});

알럿 후에 setCustomValidity() 메서드를 빈 값으로 호출하는 이유는 customError 속성이 true로 유지되기 때문입니다.

customError : setCustomValidity() 메서드를 사용하여 사용자 정의 메시지가 있으면 true를 없으면 false를 리턴합니다.

새로고침 후 등록 버튼을 누릅니다. 그러면 작성자(registrationId)에 입력된 데이터가 없어 변경된 메시지로 메시지가 알럿으로 보입니다.

작성자(registrationId)에 "t"를 입력하고 등록 버튼을 누릅니다. 그러면 길이에 대해 변경된 메시지가 알럿으로 보입니다.

작성자(registrationId)에 "testid3"를 입력하고 등록 버튼을 누릅니다. 이번에는 제목에 입력된 데이터가 없어 변경된 메시지로 메시지가 알럿으로 보입니다.

이렇게 JavaScript Validation API를 사용하면 조금 코딩이 줄기도 하지만 오히려 늘어날 수 있습니다.

그래서 다른 방법으로 checkValidity() 메서드와 CSS의 :valid와 :invalid를 사용하여 처리해 보겠습니다.

Spring에 게시물 등록 처리 - Create, Client-Side Validation

carrotweb — Sun, 8 Jan 2023 23:22:26 +0900

지금부터는 게시판에 게시물을 등록, 조회, 수정, 삭제할 수 있게 개발하도록 하겠습니다.

일반적으로 개발에서는 게시물을 등록, 조회, 수정, 삭제하는 것을 CRUD라고 합니다.

CRUD는 Create(생성/등록/추가), Read(읽기/조회), Update(변경/수정), Delete(삭제/제거)의 첫 문자를 따서 만든 용어입니다. 또는 Add(추가), Browse(보기), Change(변경), Delete(삭제)의 첫 문자를 따서 ABCD라고도 합니다.

이번에는 CRUD의 C(Create)로 게시물을 등록하는 UI와 INSERT Query, DAO, Service, Controller를 생성하도록 하겠습니다.

Maven Spring Project의 main.jsp에 등록 버튼 추가하기

1. /src/main/webapp/WEB-INF/views/main/main.jsp 파일을 오픈하여 <form:form> 태그 위에 등록 버튼 영역을 추가합니다.

<div class="buttons">
	<div class="right">
		<button id="addBtn" class="button blue">등록</button>
	</div>
</div>

2. <style> 태그에 등록 버튼 영역에 대한 CSS를 추가합니다.

.buttons { position:relative; height:32px; margin-top:20px; }
.buttons > div.right { position:absolute; height:32px; right:0; }
.buttons > div > .button { overflow:visible; cursor:pointer; min-width:125px; height:32px; margin:0 2px; padding:0 15px; line-height:32px; font-size:14px; border:1px solid #dfdfdf; background:#fff; border-radius:10px; }
.buttons > div > .button.blue { color:#fff; border-color:#0099d2 !important; background:#0099d2 !important; }

3. <script> 태그에 등록 버튼에 대한 클릭 이벤트를 추가합니다.

$('#addBtn').click(function() {
	$(location).attr("href", "/board/addform.do");
});

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하면 페이지 오른쪽 상단에 등록 버튼이 나타나는 것을 확인할 수 있습니다. (페이지 크기를 10에서 5로 변경하였습니다.)

Maven Spring Project에 Board Controller 추가하기

1. Java Resource > src/main/java에 com.home.study.test1.board.controller 패키지를 생성합니다.

test1 패키지에 board 패키지 생성 → board 패키지에 controller 패키지 생성

2. com.home.study.test1.board.controller 패키지에 BoardController 클래스를 생성합니다. (BoardController.java 파일)

생성된 BoardController 클래스가 Spring Framework Web MVC의 Controller로 처리되게 하기 위해서 클래스 위에 @Controller Annotation(어노테이션)을 추가합니다.
"/board"로 시작하는 모든 요청을 처리할 수 있게 BoardController 클래스 위에 @RequestMapping Annotation(어노테이션)을 추가합니다.
요청 URL이 왔을 때 실행될 addBoardForm 메서드를 생성합니다. 파라미터로 HTTP 요청을 처리할 수 있는 HttpServletRequest request와 HTTP 응답을 처리할 수 있는 HttpServletResponse response, 게시물 정보를 받아 처리할 수 있게 @ModelAttribute Annotation(어노테이션)이 적용된 Board board, 웹 페이지로 정보를 전달할 수 있는 ModelMap model을 추가합니다.
GET 방식으로 요청 URL이 "/addform.do"가 왔을 때 addBoardForm 메서드가 실행될 수 있게 메서드 위에 @RequestMapping Annotation(어노테이션)을 추가합니다. (@RequestMapping Annotation(어노테이션)에는 요청 URL에서 ".do"를 제외한 경로를 입력합니다.)
addBoardForm 메서드의 리턴 값으로 "board/boardform"를 입력합니다.

package com.home.study.test1.board.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;

import com.home.study.test1.board.model.Board;

@Controller
@RequestMapping("/board")
public class BoardController {

	@RequestMapping(value="/addform", method=RequestMethod.GET)
	public String addBoardForm(HttpServletRequest request, HttpServletResponse response,
			@ModelAttribute("board") Board board, ModelMap model) {
		return "board/boardform";
	}
}

Maven Spring Project의 SiteMesh에 게시판 데코레이터 추가하기

1. WEB-INF/config 폴더에서 sitemesh.xml 파일을 오픈하고 게시판 페이지 만을 위해 "/board/*.do"로 데코레이터를 추가합니다. 우선 기존 mainDecorator를 설정하고 향후에 게시판 전용 데코레이터로 변경하겠습니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration>
<sitemesh>
	<!-- 기본 페이지 -->
	<mapping decorator="/WEB-INF/views/decorators/default/defaultDecorator.jsp"/>
	
	<!-- 메인 페이지 -->
	<mapping path="/index.do" decorator="/WEB-INF/views/decorators/default/mainDecorator.jsp"/>

	<!-- 게시판 페이지 -->
	<mapping path="/board/*.do" decorator="/WEB-INF/views/decorators/default/mainDecorator.jsp"/>
	
	<!-- sitemesh 예외 -->
	<mapping path="/api/*" exclude="true"/>
	<mapping path="/*.html" exclude="true"/>
	<mapping path="/*.htm" exclude="true"/>
	<mapping path="/*.js" exclude="true"/>
	<mapping path="/*.css" exclude="true"/>
</sitemesh>

Maven Spring Project에 Board Form JSP 추가하기

1. WEB-INF 폴더에 views 폴더를 생성하고 생성된 views 폴더에 board 폴더를 생성합니다.

2. board 폴더에 boardform.jsp 파일을 생성합니다.

Form Tag Library를 사용하여 게시물을 등록할 수 있는 입력 폼을 생성합니다.
BoardController 클래스의 addBoardForm 메서드에서 @ModelAttribute Annotation(어노테이션)으로 Board 객체를 받기 때문에 <form:form> 태그의 modelAttribute 속성에 board 객체를 지정합니다.
게시물의 작성자 아이디, 제목, 내용을 받기 위해 <form:input> 태그의 path 속성에 board 객체의 registrationId(작성자 아이디), subject(제목) 변수를 지정하고 <form:textarea> 태그의 path 속성에 board 객체의 content(내용) 변수를 지정합니다. (아직 로그인 처리가 없기 때문에 registrationId(작성자 아이디)를 직접 입력하게 하였습니다. 로그인 처리는 향후에 처리하겠습니다.)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>게시판</title>
		<style type="text/css">
			.board { width:800px; margin: 20px auto; }
			.board table { width:100%; border-top:2px solid #1d4281; border-spacing:0; }
			.board table th { padding:8px 10px 10px 10px; vertical-align:middle; color:#1d4281; font-size:14px; border-bottom:1px solid #ccc; background:#f8f8f8; }
			.board table td { padding:7px 20px 9px 20px; text-align:left; vertical-align:middle; border-bottom:1px solid #ccc; font-size:14px; line-heighT:150%; }
			.board table td input[type="text"], .board table td textarea { width:100%; color:#000 !important; } 
			.buttons { position:relative; height:32px; margin-top:20px; }
			.buttons > div.right { position:absolute; height:32px; right:0; }
			.buttons > div > .button { overflow:visible; cursor:pointer; min-width:125px; height:32px; margin:0 2px; padding:0 15px; line-height:32px; font-size:14px; border:1px solid #dfdfdf; background:#fff; border-radius:10px; }
			.buttons > div > .button.blue { color:#fff; border-color:#0099d2 !important; background:#0099d2 !important; }
		</style>
	</head>
	<body>
		<div class="board">
			<form:form modelAttribute="board" autocomplete="off">
			<table>
				<colgroup>
					<col style="width:18.5%">
					<col style="width:auto">
				</colgroup>
				<tbody>
					<tr>
						<th scope="row">작성자</th>
						<td><form:input path="registrationId" placeholder="아이디를 입력하세요." /></td>
					</tr>
					<tr>
						<th scope="row">제목</th>
						<td><form:input path="subject" placeholder="제목을 입력하세요." /></td>
					</tr>
					<tr>
						<th scope="row">내용</th>
						<td><form:textarea path="content" placeholder="내용을 입력하세요." rows="10"/></td>
					</tr>
				</tbody>
			</table>
			</form:form>
			<div class="buttons">
				<div class="right">
					<button id="saveBtn" class="button blue">등록</button>
					<button id="cancelBtn" class="button">취소</button>
				</div>
			</div>
		</div>
	</body>
</html>

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하면 게시물 입력 폼(/board/addform.do)으로 이동됩니다.

게시물 입력 폼(/board/addform.do)에서 등록 버튼을 클릭하여 폼(form)을 전송(Submit) 하기 전에 <script>에서 입력 요소들에 대해 값이 유효한지 검사하거나 전송된 후에 controller에서 입력 요소들에 대해 값이 유효한지 검사하여 사용자에게 필수 입력이나 잘 못된 입력에 대해 알려주서 재입력하게 해야 합니다. 이런 유효성검사를 Validation(밸리데이션)이라고 합니다.

Validation을 어느 시점에서 처리하느냐에 따라 Client-Side Validation과 Server-Side Validation로 구분됩니다.

Client-Side Validation은 폼(form)을 전송(Submit) 하기 전에 <script>에서 폼(form) 안에 있는 입력 요소들에 대해 값이 유효한지 검사하고 유효하지 않으면 사용자에게 알려줍니다.
Server-Side Validation은 controller에서 전송된 데이터에 대해 값이 유효한지 검사하고 유효하지 않으면 내부 process(프로세스)를 중지하고 Client(웹 페이지)로 에러메시지를 전송하여 사용자에게 알려줍니다.

Maven Spring Project의 Board Form JSP에 Client-Side Validation 추가하기

1. /src/main/webapp/WEB-INF/views/board/boardform.jsp 파일을 오픈하여 등록 버튼과 취소 버튼에 대한 클릭 이벤트를 추가합니다.

게시물은 작성자 아이디와 제목은 필수 입력값이 때문에 입력 값이 공백이 아니어야 합니다. 그래서 등록 버튼이 클릭되면 작성자 아이디와 제목의 입력 값을 확인하고 공백이면 alert으로 메시지를 알려주고 사용자가 입력할 수 있게 포커스를 이동시킵니다.
입력 값이 모두 유효하다면 "/board/addboard.do"로 폼(form)을 전송(Submit) 합니다.
취소 버튼이 클릭되면 history.back()이나 history.go(-1)를 이전 페이지로 이동시킵니다.

$(function() {
	$('#saveBtn').click(function() {
		var registrationId = $('#registrationId').val();
		if (registrationId == null || registrationId == "") {
			alert("아이디를 입력하세요.");
			$("#registrationId").focus();
			return;
		}
		var subject = $('#subject').val();
		if (subject == null || subject == "") {
			alert("제목을 입력하세요.");
			$("#subject").focus();
			return;
		}
		$('#board').attr("action", "/board/addboard.do");
		$('#board').submit();
	});
	$('#cancelBtn').click(function() {
		window.history.go(-1);
	});
});

Maven Spring Project의 Board Mapper XML에 Insert Query 추가하기

1. com.home.study.test1.sqlmapl.mappers.mariadb.board 패키지에 있는 BoardMapper.xml 파일을 오픈합니다.

2. INT_BOARD_TB(게시판) Table에 데이터(게시물)를 등록(insert) 하기 위해서 <insert>으로 쿼리문을 생성합니다.

<insert>의 id 속성은 insert를 구분하는 식별자로 중복되지 않는 이름으로 입력합니다. id 속성은 DAO에서 구문을 찾을 때 사용됩니다.
<insert>안에는 INSERT구문을 사용하여 데이터베이스에서 데이터를 등록하게 합니다.
<insert>의 parameterType 속성은 전송된 데이터를 받을 Model(모델) 명을 입력합니다.
useGeneratedKeys 속성을 true로 하여 keyProperty 속성 값에 지정된 sequence(게시판 시퀀스)가 자동으로 생성되게 합니다.

<!--
	게시물을 등록합니다.
-->
<insert id="insertBoardItem" useGeneratedKeys="true" keyProperty="sequence" parameterType="Board">
	INSERT INTO INT_BOARD_TB
	       (
	        BRD_SUBJECT,
	        BRD_CONTENT,
	        REG_ID
	       )
	       VALUES
	       (
	        #{subject},
	        #{content},
	        #{registrationId}
	       )
</insert>

Maven Spring Project의 DAO - Board Interface에 insert 메서드 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.dao 패키지에 있는 IBoardDao Interface(인터페이스)를 오픈합니다. (IBoardDao.java)

2. INT_BOARD_TB(게시판) Table에 데이터(게시물)를 등록(insert) 하기 위해 insertBoardItem 메서드를 선언합니다.

package com.home.study.test1.board.dao;

import java.util.List;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;

public interface IBoardDao {

	int selectBoardListCount(BoardSearch boardSearch);
	
	List<Board> selectBoardList(BoardSearch boardSearch);
	
	int insertBoardItem(Board board);
}

Maven Spring Project의 Dao - Board Implement에 insert 메서드 구현 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.dao.impl 패키지에 있는 BoardDaoImpl 클래스를 오픈합니다. (BoardDaoImpl.java)

2. BoardDaoImpl 클래스에서 IBoardDao Interface(인터페이스)의 insertBoardItem 메서드를 구현합니다.

int org.apache.ibatis.session.SqlSession.insert(String statement, Object parameter)

SqlSession의 insert 메서드의 첫 번째 파라미터인 statement는 실행 구문의 고유 식별자로 문자열 변수(SQL_FILE_PATH)와 의 id 속성 값을 결합한 값입니다. 두 번째 파라미터인 parameter는 실행 구문에 전달할 객체로 board 변수를 입력합니다.
SqlSession의 insert 메서드는 리턴 값으로 등록된 ROW의 수가 int로 리턴됩니다.

package com.home.study.test1.board.dao.impl;

import java.util.List;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Repository;

import com.home.study.test1.board.dao.IBoardDao;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;

@Repository("BoardDaoImpl")
public class BoardDaoImpl implements IBoardDao {

	protected static final String SQL_FILE_PATH = "com.home.study.test1.board.mapper.mariadb.BoardMapper.";

	@Autowired
	@Qualifier("sqlSessionMariaDB")
	private SqlSession sqlSession;

	@Override
	public int selectBoardListCount(BoardSearch boardSearch) {
		return ((Integer)sqlSession.selectOne(SQL_FILE_PATH + "selectBoardListCount", boardSearch)).intValue();
	}

	@Override
	public List<Board> selectBoardList(BoardSearch boardSearch) {
		return sqlSession.selectList(SQL_FILE_PATH + "selectBoardList", boardSearch);
	}

	@Override
	public int insertBoardItem(Board board) {
		return sqlSession.insert(SQL_FILE_PATH + "insertBoardItem", board);
	}
}

Maven Spring Project의 Service - Board Interface에 insert 메서드 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.service 패키지에 있는 IBoardService Interface(인터페이스)를 오픈합니다. (IBoardService.java)

2. DAO (Board Interface, Implement)을 사용하여 INT_BOARD_TB(게시판) Table에 데이터(게시물)를 등록(insert) 하기 위해 insertBoardItem 메서드를 선언합니다.

package com.home.study.test1.board.service;

import java.util.List;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;

public interface IBoardService {

	List<Board> selectBoardList(BoardSearch boardSearch);
	
	boolean insertBoardItem(Board board);
}

Maven Spring Project의 Service - Board Implement에 insert 메서드 구현 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.service.impl 패키지에 있는 BoardServiceImpl 클래스를 오픈합니다. (BoardServiceImpl.java)

2. BoardServiceImpl 클래스에서 IBoardService Interface(인터페이스)의 insertBoardItem 메서드를 구현합니다.

이클립스에서는 마우스를 BoardServiceImpl 클래스 위로 이동합니다. 콘텍스트 메뉴에서 "Add unimplemented methods"(구현되지 않은 메서드 추가)를 클릭하면 자동으로 메서드를 생성해 줍니다.
insertBoardItem 메서드에서 boardDao의 insertBoardItem 메서드를 사용하여 데이터(게시물)를 등록시키고 등록된 결과가 1이면 true로 리턴하게 합니다.

package com.home.study.test1.board.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.home.study.common.search.Pagination;
import com.home.study.test1.board.dao.IBoardDao;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;
import com.home.study.test1.board.service.IBoardService;

@Service
public class BoardServiceImpl implements IBoardService {

	@Autowired
	IBoardDao boardDao;

	@Override
	public List<Board> selectBoardList(BoardSearch boardSearch) {
		if (boardSearch.getPagination() == null) {
			boardSearch.setPagination(new Pagination());
		}
		
		int count = boardDao.selectBoardListCount(boardSearch);
		boardSearch.getPagination().setRecordTotalCount(count);
		
		List<Board> boardList = null;
		if (count > 0) {
			boardSearch.getPagination().processZero();
			boardList = boardDao.selectBoardList(boardSearch);
		}
		return boardList;
	}

	@Override
	public boolean insertBoardItem(Board board) {
		return (boardDao.insertBoardItem(board) == 1) ? true : false;
	}
}

Maven Spring Project의 Board Controller에 addBoard 추가하기

1. Java Resource > src/main/java에서 com.home.study.test1.board.controller 패키지에 있는 BoardController 클래스를 오픈합니다. (BoardController.java)

2. IBoardService Interface(인터페이스)를 선언하고 의존성 주입(Dependency Injection)을 위해서 @Autowired Annotation(어노테이션)를 변수 위에 붙여줍니다.

3. boardService의 insertBoardItem 메서드를 사용하여 데이터(게시물)를 등록하기 위해 addBoard 메서드를 생성합니다. 파라미터로 HTTP 요청을 처리할 수 있는 HttpServletRequest request와 HTTP 응답을 처리할 수 있는 HttpServletResponse response, 게시물 정보를 받아 처리할 수 있게 @ModelAttribute Annotation(어노테이션)이 적용된 Board board, 웹 페이지로 정보를 전달할 수 있는 ModelMap model을 추가합니다. 등록되면 redirect로 index.do로 이동시키고 등록되지 않으면 다시 입력 폼(/board/boardform.do)으로 이동시킵니다.

4. POST 방식으로 요청 URL이 "/board/addboard.do"가 왔을 때 addBoard 메서드가 실행될 수 있게 메서드 위에 @RequestMapping Annotation(어노테이션)을 추가합니다.

package com.home.study.test1.board.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.service.IBoardService;


@Controller
@RequestMapping("/board")
public class BoardController {

	@Autowired
	IBoardService boardService;

	@RequestMapping(value="/addform", method=RequestMethod.GET)
	public String addBoardForm(HttpServletRequest request, HttpServletResponse response,
			@ModelAttribute("board") Board board, ModelMap model) {
		return "board/boardform";
	}

	@RequestMapping(value="/addboard", method=RequestMethod.POST)
	public String addBoard(HttpServletRequest request, HttpServletResponse response,
			@ModelAttribute("board") Board board, ModelMap model) {
		if (!boardService.insertBoardItem(board)) {
			return "board/boardform";
		}
		
		return "redirect:/index.do";
	}
}

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 등록 버튼을 클릭하면 게시물 입력 폼(/board/addform.do)으로 이동됩니다.

3. 입력 폼에 작성자는 "testid3", 제목은 "테스트 제목 11", 내용은 "테스트 내용 11"로 입력하고 등록 버튼을 클릭합니다.

그럼 정상적으로 등록되고 리스트 페이지인 "index.do"로 이동됩니다.

지금까지 일반적인 Client-Side Validation으로 입력 요소들의 값을 유효성 검사하고 등록 처리하였습니다.

이어서, Client-Side Validation인 JavaScript Validation API에 대해 알아보겠습니다.

Spring에 Pagination(페이지네이션) 처리 및 적용 3

carrotweb — Sun, 1 Jan 2023 23:11:51 +0900

페이지네이션에서 전체 페이지 앞 번호 버튼, 이전 페이지 사이즈 번호 버튼, 다음 페이지 사이즈 번호 버튼, 전체 페이지 마지막 번호 버튼을 활성화 또는 비활성화로 제어하면 클릭에 대한 오류를 방지할 수 있습니다. (이미 내부 소스에서 예외처리가 되어 있어 오류는 발생하지 않습니다.)

페이지네이션에서 버튼은 <button> 태그가 아닌 <li> 태그와 <a> 태그를 사용하고 있습니다.

<button disabled>

<button> 태그는 비활성화하기 위해서 disable 속성을 추가하면 되지만 <li> 태그와 <a> 태그는 disable 속성이 지원되지 않습니다.

참고로 <a> 태그를 비활성화하기 위해서는 일반적으로 href 속성을 제거합니다.

<li class="page-item"><a class="page-link page-first" data-pageno="1" href="javascript:void(0)">First</a></li>

<!-- href 속성 제거를 통한 비활성화 처리 -->
<li class="page-item"><a class="page-link page-first" data-pageno="1">First</a></li>

그러나 <a> 태그를 화성화/비활성화하기 위해서는 Script에서 동적으로 href 속성을 제거했다가 추가해야 하는 문제점이 있습니다.

현재 페이지네이션에서 <a> 태그들은 href 속성 값이 void로 처리되어 있고 Script에서 <a> 태그들에 대한 클릭 이벤트를 공통으로 처리하고 있기 때문에 href 속성 제거 없이 Script에서 처리할 수 있습니다.

Script로 처리하기

페이지레이션 Script에 있는 클릭 이벤트 함수를 수정하겠습니다.

$('#boardPagination .page-link').click(function(event) {
	event.preventDefault();
	event.stopPropagation();
	boardSearch.find('input:hidden[name="paging.pageNo"]').val($(this).attr("data-pageno"));
	boardSearch.submit();
});

1. 먼저 전체 페이지 마지막 번호를 Script에서 사용할 수 있게 <form:form> 태그 안에 <form:hidden> 태그를 생성하고 path 속성에 boardSearch 객체에서 pagination 객체의 pageLastNo 변수를 지정합니다.

<form:hidden path="pagination.pageLastNo" />

var pageLastNo = boardSearch.find('input:hidden[name="pagination.pageLastNo"]').val();

2. 현재 페이지 번호와 이동할 페이지 번호를 변수로 가져옵니다.

var pageNo = boardSearch.find('input:hidden[name="pagination.pageNo"]').val();
var moveToPageNo = $(this).attr("data-pageno");

3. 현제 페이지 번호와 이동할 페이지 번호가 1 이거나 현제 페이지 번호와 이동할 페이지 번호가 전체 페이지 마지막 번호이면 이동하지 않게 리턴합니다.

if ((pageNo == 1 && moveToPageNo == 1) || (pageNo == pageLastNo && moveToPageNo == pageLastNo)) {
	return;
}

추가로 현제 페이지 번호와 이동할 페이지 번호가 같을 때도 이동하지 않게 하고 싶다면 조건문에 추가하면 됩니다.

if ((pageNo == moveToPageNo) || (pageNo == 1 && moveToPageNo == 1) || (pageNo == pageLastNo && moveToPageNo == pageLastNo)) {
	return;
}

수정된 클릭 이벤트 함수입니다.

$('#boardPagination .page-link').click(function(event) {
	event.preventDefault();
	event.stopPropagation();
	var pageLastNo = boardSearch.find('input:hidden[name="pagination.pageLastNo"]').val();
	var pageNo = boardSearch.find('input:hidden[name="pagination.pageNo"]').val();
	var moveToPageNo = $(this).attr("data-pageno");
	if ((pageNo == moveToPageNo) || (pageNo == 1 && moveToPageNo == 1) || (pageNo == pageLastNo && moveToPageNo == pageLastNo)) {
		return;
	}
	if (moveToPageNo > 0 && moveToPageNo <= pageLastNo) {
		boardSearch.find('input:hidden[name="pagination.pageNo"]').val(moveToPageNo);
		boardSearch.submit();
	}
});

수정된 클릭 이벤트 함수는 페이지레이션 버튼의 클릭 이벤트를 제어했다기보다는 조건문으로 이동하지 않게 처리한 겁니다. 그래서 페이지레이션 버튼 자체를 활성화하거나 비활성화할 수는 없습니다.

그래서 페이지레이션 버튼 자체를 활성화하거나 비활성화할 수는 있는 방법을 알아보겠습니다.

CSS의 pointer-events 속성으로 처리하기

그것은 CSS의 pointer-events 속성을 사용하여 이벤트에 대해 반응해야 하는지 여부를 설정할 수 있습니다.

pointer-events: auto|none;

auto는 이벤트에 대해 반응하게 하고 none은 이벤에 대해 반응하지 않게 합니다.

none으로 설정되면 마우스의 커서가 텍스트 커서로 변경됩니다.

위에 있는 Script로 테스트하셨다면 기존 소스로 다시 변경하시기 바랍니다.

1. <style> 태그에 페이지네이션 버튼인 <li> 태그가 이벤트에 대해 반응하지 않게 pointer-events 속성을 none으로 설정하고 <a> 태그의 폰트 색을 회색으로 변경하기 위해 CSS를 추가합니다.

.board ul.pagination li.disabled { pointer-events: none; }
.board ul.pagination li.disabled a { color: #cccccc; }

2. pagination UI를 수정합니다.

전체 페이지 앞 번호인 <li> 태그의 class 속성 값에 현재 페이지 번호(pageNo)가 1 이면 disabled를 추가합니다.
이전 페이지 사이즈 번호인 <li> 태그의 class 속성 값에 페이지 시작 번호(pageStartNo)에서 1을 뺀 값이 0 이면 disabled를 추가합니다.
다음 페이지 사이즈 번호인 <li> 태그의 class 속성 값에 페이지 종료 번호(pageEndNo)에서 1을 더한 값이 페이지 마지막 번호(pageLastNo) 보다 크면 disabled를 추가합니다.
전체 페이지 마지막 번호인 <li> 태그의 class 속성 값에 현재 페이지 번호(pageNo)가 페이지 마지막 번호(pageLastNo)와 같으면 disabled를 추가합니다.

<c:if test="${not empty boardList}">
	<div>
		<ul id="boardPagination" class="pagination">
			<li class="page-item<c:if test="${boardSearch.pagination.pageNo == 1}"> disabled</c:if>"><a class="page-link page-first" data-pageno="1" href="javascript:void(0)">First</a></li>
			<li class="page-item<c:if test="${(boardSearch.pagination.pageStartNo - 1) == 0}"> disabled</c:if>"><a class="page-link page-prev" data-pageno="${boardSearch.pagination.pageStartNo - 1}" href="javascript:void(0)">&lt;</a></li>
			<c:forEach var="page" begin="${boardSearch.pagination.pageStartNo}" end="${boardSearch.pagination.pageEndNo}" step="1">
				<li class="page-item<c:if test="${boardSearch.pagination.pageNo == page}"> active</c:if>">
					<a class="page-link page-no" data-pageno="${page}" href="javascript:void(0)">${page}</a>
				</li>
			</c:forEach>
			<li class="page-item<c:if test="${boardSearch.pagination.pageEndNo + 1 > boardSearch.pagination.pageLastNo}"> disabled</c:if>"><a class="page-link page-next" data-pageno="${boardSearch.pagination.pageEndNo + 1}" href="javascript:void(0)">&gt;</a></li>
			<li class="page-item<c:if test="${boardSearch.pagination.pageNo == boardSearch.pagination.pageLastNo}"> disabled</c:if>"><a class="page-link page-last" data-pageno="${boardSearch.pagination.pageLastNo}" href="javascript:void(0)">Last</a></li>
		</ul>
	</div>
</c:if>

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 페이지 크기를 10에서 5로 변경합니다.

그러면 페이지네이션에 처음 페이지로 이동하는 버튼과 이전/다음 페이지로 이동하는 버튼이 비활성화되어 나타나는 것을 확인할 수 있습니다.

3. 2번 페이지 번호를 클릭하면 이전/다음 페이지로 이동하는 버튼과 마지막 페이지로 이동하는 버튼이 비활성화되어 나타나는 것을 확인할 수 있습니다.

현재 이전/다음 페이지로 이동하는 버튼 항상 비활성화되어 있는 이유는 이전 페이지로 이동하는 번호가 0이고 다음 페이지로 이동하는 번호가 3으로 더 이상 이동할 수 없기 때문입니다.

4. 웹 브라우저에서 "http://localhost:9000/index.do?pagination.recordCountPerPage=1&pagination.pageSize=3"로 입력하여 페이지레이션 버튼을 클릭해 보면 이전/다음 페이지로 이동하는 버튼 활성화되고 비활성화되는 것을 확인할 수 있습니다.

페이지레이션의 버튼을 비활성화시키기 위해서는 복잡하지 않지만 연산해야서 비교 처리해야 합니다.

그래서 페이지 연산과 버튼의 활성화 여부를 Pagination 객체에서 처리하여 Pagination UI에서는 연산 없이 값만 사용하여 처리할 수 있게 하겠습니다.

Pagination 확장 처리

이전 페이지 사이즈 번호(prevPageSizeNo)는 페이지 시작 번호(pageStartNo)에서 1을 뺍니다.

이전 페이지 사이즈 번호 활성화 여부(enablePrevPageSizeNO)는 이전 페이지 사이즈 번호(prevPageSizeNo)가 0보다 크면 이동할 수 있기 때문에 true로 설정합니다.

int prevPageSizeNo = 0;
boolean enablePrevPageSizeNo = false;

prevPageSizeNo = pageStartNo - 1;
if (prevPageSizeNo > 0) {
	enablePrevPageSizeNo = true;
}

다음 페이지 사이즈 번호(nextPageSizeNo)는 페이지 종료 번호(pageEndNo)에 1을 더합니다.

다음 페이지 사이즈 번호 활성화 여부(enableNextPageSizeNO)는 페이지 마지막 번호(pageLastNo) 보다 작거나 같으면 이동할 수 있기 때문에 true로 설정합니다.

int nextPageSizeNo = 1;
boolean enableNextPageSizeNo = false;

nextPageSizeNo = endPageNo + 1;
if (nextPageSizeNo <= pageLastNo) {
	enableNextPageSizeNo = true;
}

전체 페이지 앞 번호 활성화 여부(enablePageFirstNo)는 현재 페이지 번호(pageNo)가 1보다 크면 이동할 수 있기 때문에 true로 설정합니다.

boolean enablePageFirstNo = false;

if (pageNo > 1) {
	enablePageFirstNo = true;
}

전체 페이지 마지막 번호 활성화 여부(enablePageLastNo)는 현재 페이지 번호(pageNo)가 페이지 마지막 번호(pageLastNo) 보다 작으면 이동할 수 있기 때문에 true로 설정합니다.

boolean enablePageLastNo = false;

if (pageNo < pageLastNo) {
	enablePageLastNo = true;
}

Maven Spring Project에 Common Pagination 수정하기

1. Java Resource > src/main/java에 com.home.study.common.search 패키지에 있는 Pagination.java 파일을 오픈하고 수정합니다.

이전 페이지 사이즈 번호(prevPageSizeNo), 다음 페이지 사이즈 번호(nextPageSizeNo), 이전 페이지 사이즈 번호 활성화 여부(enablePrevPageSizeNo), 다음 페이지 사이즈 번호 활성화 여부(enableNextPageSizeNo), 전체 페이지 앞 번호 활성화 여부(enablePageFirstNo), 전체 페이지 마지막 번호 활성화 여부(enablePageLastNo) 변수를 생성하고 Getter, Setter를 생성합니다.
process() 메서드에 계산 공식을 추가합니다.

package com.home.study.common.search;

public class Pagination extends Paging {

	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = 1014943426267041010L;

	/**
	 * 페이지 사이즈(기본값 10)
	 */
	private int pageSize = 10;

	/**
	 * 페이지 시작 번호
	 */
	private int pageStartNo = 1;

	/**
	 * 페이지 종료 번호
	 */
	private int pageEndNo = 1;

	/**
	 * 이전 페이지 사이즈 번호
	 */
	private int prevPageSizeNo = 1;

	/**
	 * 다음 페이지 사이즈 번호
	 */
	private int nextPageSizeNo = 1;

	/**
	 * 이전 페이지 사이즈 번호 활성화 여부
	 */
	private boolean enablePrevPageSizeNo = false;

	/**
	 * 다음 페이지 사이즈 번호 활성화 여부
	 */
	private boolean enableNextPageSizeNo = false;

	/**
	 * 전체 페이지 앞 번호 활성화 여부
	 */
	private boolean enablePageFirstNo = false;

	/**
	 * 전체 페이지 마지막 번호 활성화 여부
	 */
	private boolean enablePageLastNo = false;

	/**
	 * 페이지 사이즈를 가져옵니다.
	 * @return 페이지 사이즈
	 */
	public int getPageSize() {
		return pageSize;
	}

	/**
	 * 페이지 사이즈를 설정합니다.
	 * @param pageSize 페이지 사이즈
	 */
	public void setPageSize(int pageSize) {
		if (pageSize <= 0) {
			pageSize = 10;
		}
		this.pageSize = pageSize;
	}

	/**
	 * 페이지 시작 번호를 가져옵니다.
	 * @return 페이지 시작 번호
	 */
	public int getPageStartNo() {
		return pageStartNo;
	}

	/**
	 * 페이지 종료 번호를 가져옵니다.
	 * @return 페이지 종료 번호
	 */
	public int getPageEndNo() {
		return pageEndNo;
	}

	@Override
	protected void process(boolean zero) {
		super.process(zero);
		
		// 페이지 시작 번호 설정
		// 몫만큼 페이지 시작 번호 변경한다.
		int start = pageNo / pageSize;
		if (start >= 1) {
			// 나머지가 없으면 페이지 번호가 페이지 마지막 번호와 같아 몫을 감소 시킨다.
			if (pageNo % pageSize == 0){
				start--;
			}
			pageStartNo = (start * pageSize) + 1;
		}
		
		if (pageLastNo > 0) {
			// 페이지 종료 번호 설정
			pageEndNo = (pageStartNo - 1) + pageSize;
			// 페이지 종료 번호가 페이지 마지막 번호보다 크면 페이지 마지막 번호로 변경
			if (pageEndNo > pageLastNo) {
				pageEndNo = pageLastNo;
			}
			
			// 이전 페이지 사이즈 번호
			prevPageSizeNo = pageStartNo - 1;
			// 이전 페이지 사이즈 번호 활성화 여부
			if (prevPageSizeNo > 0) {
				enablePrevPageSizeNo = true;
			}
			
			// 다음 페이지 사이즈 번호
			nextPageSizeNo = pageEndNo + 1;
			// 다음 페이지 사이즈 번호 활성화 여부
			if (nextPageSizeNo <= pageLastNo) {
				enableNextPageSizeNo = true;
			}
			
			// 전체 페이지 앞 번호 활성화 여부
			if (pageNo > 1) {
				enablePageFirstNo = true;
			}
			
			// 전체 페이지 마지막 번호 활성화 여부
			if (pageNo < pageLastNo) {
				enablePageLastNo = true;
			}
		}
	}

	/**
	 * 이전 페이지 사이즈 번호를 가져옵니다.
	 * @return 이전 페이지 사이즈 번호
	 */
	public int getPrevPageSizeNo() {
		return prevPageSizeNo;
	}

	/**
	 * 다음 페이지 사이즈 번호를 가져옵니다.
	 * @return 다음 페이지 사이즈 번호
	 */
	public int getNextPageSizeNo() {
		return nextPageSizeNo;
	}

	/**
	 * 이전 페이지 사이즈 번호 활성화 여부를 가져옵니다.
	 * @return 이전 페이지 사이즈 번호 활성화 여부
	 */
	public boolean isEnablePrevPageSizeNo() {
		return enablePrevPageSizeNo;
	}

	/**
	 * 다음 페이지 사이즈 번호 활성화 여부를 가져옵니다.
	 * @return 다음 페이지 사이즈 번호 활성화 여부
	 */
	public boolean isEnableNextPageSizeNo() {
		return enableNextPageSizeNo;
	}

	/**
	 * 전체 페이지 앞 번호 활성화 여부를 가져옵니다.
	 * @return 전체 페이지 앞 번호 활성화 여부
	 */
	public boolean isEnablePageFirstNo() {
		return enablePageFirstNo;
	}

	/**
	 * 전체 페이지 마지막 번호 활성화 여부를 가져옵니다.
	 * @return 전체 페이지 마지막 번호 활성화 여부
	 */
	public boolean isEnablePageLastNo() {
		return enablePageLastNo;
	}
}

Maven Spring Project의 main.jsp에 Pagination UI 수정하기

1. /src/main/webapp/WEB-INF/views/main/main.jsp 파일을 오픈하여 pagination UI를 수정합니다.

전체 페이지 앞 번호인 <li> 태그의 class 속성 값에 전체 페이지 앞 번호 활성화 여부(enablePageFirstNo)를 비교하여 disabled를 추가합니다.
이전 페이지 사이즈 번호인 <li> 태그의 데이터 속성(data-pageno) 값을 이전 페이지 사이즈 번호(prevPageSizeNo)로 변경하고 class 속성 값에 이전 페이지 사이즈 번호 활성화 여부(enablePrevPageSizeNo)를 비교하여 disabled를 추가합니다.
다음 페이지 사이즈 번호인 <li> 태그의 데이터 속성(data-pageno) 값을 다음 페이지 사이즈 번호(nextPageSizeNo)로 변경하고 class 속성 값에 다음 페이지 사이즈 번호 활성화 여부(enableNextPageSizeNo)를 비교하여 disabled를 추가합니다.
전체 페이지 마지막 번호인 <li> 태그의 class 속성 값에 전체 페이지 마지막 번호 활성화 여부(enablePageLastNo)를 비교하여 disabled를 추가합니다.

<c:if test="${not empty boardList}">
	<div>
		<ul id="boardPagination" class="pagination">
			<li class="page-item<c:if test="${!boardSearch.pagination.isEnablePageFirstNo()}"> disabled</c:if>"><a class="page-link page-first" data-pageno="1" href="javascript:void(0)">First</a></li>
			<li class="page-item<c:if test="${!boardSearch.pagination.isEnablePrevPageSizeNo()}"> disabled</c:if>"><a class="page-link page-prev" data-pageno="${boardSearch.pagination.prevPageSizeNo}" href="javascript:void(0)">&lt;</a></li>
			<c:forEach var="page" begin="${boardSearch.pagination.pageStartNo}" end="${boardSearch.pagination.pageEndNo}" step="1">
				<li class="page-item<c:if test="${boardSearch.pagination.pageNo == page}"> active</c:if>">
					<a class="page-link page-no" data-pageno="${page}" href="javascript:void(0)">${page}</a>
				</li>
			</c:forEach>
			<li class="page-item<c:if test="${!boardSearch.pagination.isEnableNextPageSizeNo()}"> disabled</c:if>"><a class="page-link page-next" data-pageno="${boardSearch.pagination.nextPageSizeNo}" href="javascript:void(0)">&gt;</a></li>
			<li class="page-item<c:if test="${!boardSearch.pagination.isEnablePageLastNo()}"> disabled</c:if>"><a class="page-link page-last" data-pageno="${boardSearch.pagination.pageLastNo}" href="javascript:void(0)">Last</a></li>
		</ul>
	</div>
</c:if>

2. <style> 태그에 현재 페이지 번호 버튼이 활성화(active)될 때 이벤트에 대해 반응하지 않게 pointer-events 속성을 none으로 추가합니다.

.board ul.pagination li.page-item.active a { color: #fff; background-color: #0d6efd; pointer-events: none; }

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 페이지 크기를 10에서 5로 변경합니다.

Spring에 Pagination(페이지네이션) 처리 및 적용 2

carrotweb — Sun, 25 Dec 2022 21:57:05 +0900

검색된 게시물이 많아지면 페이지네이션에서 노출되는 페이지 번호가 많아집니다. 그래서 노출되는 페이지 번호의 수를 조절하지 않으면 페이지네이션 UI에 문제점가 발생합니다.

예를 들어, 검색된 결과가 350건이고 페이지 크기가 5이면 페이지네이션에 노출되는 페이지 번호가 70개가 됩니다.

이렇게 사용하는 게 문제가 없으면 상관은 없습니다.

그러나 페이지네이션에서 노출되는 페이지 번호 수가 많으면 복잡해 보일 수 도 있습니다.

그래서 페이지네이션에서 노출되는 페이지 번호 수를 조절하여 처리되도록 페이지네이션 클래스를 생성하도록 하겠습니다.

페이지네이션에서 노출될 페이지 번호 개수를 페이지 사이즈(pageSize)라고 하고 노출될 페이지 사이즈의 시작 번호를 페이지 시작 번호(pageStartNo), 노출될 페이지 사이즈의 종료 번호를 페이지 종료 번호(pageEndNo)라고 합니다.

페이지 사이즈(pageSize)는 대부분 10개로 많이 사용합니다. 원하시는 페이지 사이즈를 정하시면 됩니다.

페이지 사이즈를 10으로 하면 첫 번째 페이지네이션의 페이지 시작 번호는 1이고 페이지 종료 번호는 10이 됩니다. 그리고 두 번째 페이지네이션의 페이지 시작 번호는 11이고 페이지 종료 번호는 20이 됩니다.

그럼 계산으로 페이지 시작 번호(pageStartNo)와 페이지 종료 번호(pageEndNo)를 계산해 보도록 하겠습니다.

페이지 시작 번호(pageStartNo)는 현재 페이지 번호(pageNo)를 페이지 사이즈(pageSize)로 나눈 몫과 페이지 사이즈(pageSize)를 곱하고 1을 더하면 됩니다. 단, 나머지가 없으면 페이지 번호(pageNo)와 페이지 사이즈(pageSize)가 같기 때문에 나눈 몫(start)에서 1을 빼야 합니다.

int pageStartNo = 1;	
int start = pageNo / pageSize;

if (start >= 1) {
	if (pageNo % pageSize == 0) {
		start--;
	}
	pageStartNo = (start * pageSize) + 1;
}

예를 들어, 현재 페이지 번호(pageNo)가 4이고 페이지 사이즈(pageSize)가 10이면 나눈 몫(start)이 0으로 페이지 시작 번호(pageStartNo)는 초기값인 1이 됩니다.

그러나 현재 페이지 번호(pageNo)가 페이지 사이즈(pageSize) 보다 큰 14이면 나눈 몫(start)이 1로 페이지 시작 번호(pageStartNo)는 나눈 몫(start)과 페이지 사이즈(pageSize)를 곱하고 1을 더해 11이 됩니다.

그리고 현재 페이지 번호(pageNo)가 20이면 나눈 몫(start)이 2가 되나 페이지 번호(pageNo)를 페이지 사이즈(pageSize)로 나눈 나머지가 없기 때문에 나눈 몫(start)에서 1을 빼서 1이 됩니다. (나눈 몫(start)에서 1을 빼는 이유는 현재 페이지 번호(pageNo)가 페이지 종료 번호(pageEndNo)와 같기 때문입니다.) 그래서 페이지 시작 번호(pageStartNo)는 나눈 몫(start)과 페이지 사이즈(pageSize)를 곱하고 1을 더해 11이 됩니다.

페이지 종료 번호(pageEndNo)는 페이지 시작 번호(pageStartNo)에서 1을 빼고 페이지 사이즈(pageSize)를 더하면 됩니다. (페이지 시작 번호(pageStartNo)에서 1을 빼는 이유는 페이지 시작 번호는 항상 페이지 사이즈보다 1이 크기 때문입니다.) 그러나 페이지 종료 번호가 페이지 마지막 번호보다 크면 페이지 마지막 번호로 변경해 줍니다.

int pageEndNo = (pageStartNo - 1) + pageSize;
if (pageEndNo > pageLastNo) {
	pageEndNo = pageLastNo;
}

그럼 Pagination(페이지네이션) 클래스를 생성하겠습니다.

Pagination(페이지네이션) 클래스는 이전에 만든 Paging 클래스를 계승(상속) 받아서 생성하겠습니다. (Paging 클래스를 계승(상속) 받는 이유는 Paging 클래스에 있는 변수와 계산 공식을 사용하기 위해서입니다.)

Maven Spring Project에 Common Pagination 추가하기

1. Java Resource > src/main/java에 com.home.study.common.search 패키지에 있는 Paging.java 파일을 오픈하고 private로 되어 있는 변수와 process() 메서드를 protected로 수정합니다.

변수를 private에서 protected로 수정하는 이유는 계승(상속) 받은 클래스에서 쉽게 변수에 접근하기 위해서고 process() 메서드를 protected로 수정하는 이유는 process() 메서드를 Override(오버라이드)하여 사용하기 위해서입니다.
그리고 process() 메서드에서 현재 페이지 번호(pageNo)가 페이지 마지막 번호(pageLastNo) 보다 크면 오류가 발생하지 않게 계산을 하지 않았습니다. 그러나 현재 페이지 번호가 페이지 마지막 번호와 같을 때 삭제가 발생할 경우 전체 레코드 수가 줄어들어 페이지 마지막 번호가 줄어들 수 있습니다. 그래서 우리는 현재 페이지 번호가 페이지 마지막 번호보다 크면 현재 페이지 번호를 페이지 마지막 번호로 변경하여 처리하겠습니다. 만약, process() 메서드를 처리하기 전에 현재 페이지 번호를 검사하여 예외 처리를 할 거라면 기존의 소스를 유지하시면 됩니다.

package com.home.study.common.search;

import java.io.Serializable;

public class Paging implements Serializable {

	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = 5531728426097598480L;

	/**
	 * 전체 레코드 수
	 */
	protected int recordTotalCount = 0;

	/**
	 * 페이지 레코드 수(기본값 : 10)
	 */
	protected int recordCountPerPage = 10;

	/**
	 * 페이지 번호
	 */
	protected int pageNo = 1;

	/**
	 * 페이지의 레코드 시작 번호
	 */
	protected int pageStartRecordNo = 0;

	/**
	 * 페이지의 레코드 종료 번호
	 */
	protected int pageEndRecordNo = 0;

	/**
	 * 페이지 마지막 번호
	 */
	protected int pageLastNo = 0;

	/**
	 * 전체 레코드 수를 가져옵니다.
	 * @return 전체 레코드 수
	 */
	public int getRecordTotalCount() {
		return recordTotalCount;
	}

	/**
	 * 전체 레코드 수를 설정합니다.
	 * @param recordTotalCount 전체 레코드 수
	 */
	public void setRecordTotalCount(int recordTotalCount) {
		this.recordTotalCount = recordTotalCount;
	}

	/**
	 * 페이지 레코드 수를 가져옵니다.
	 * @return 페이지 레코드 수
	 */
	public int getRecordCountPerPage() {
		return recordCountPerPage;
	}

	/**
	 * 페이지 레코드 수를 설정합니다.
	 * @param recordCountPerPage 페이지 레코드 수
	 */
	public void setRecordCountPerPage(int recordCountPerPage) {
		if (recordCountPerPage <= 0) {
			recordCountPerPage = 10;
		}
		this.recordCountPerPage = recordCountPerPage;
	}

	/**
	 * 페이지 번호를 가져옵니다.
	 * @return 페이지 현재 번호
	 */
	public int getPageNo() {
		return pageNo;
	}

	/**
	 * 페이지 번호를 설정합니다.
	 * @param pageNo 페이지 현재 번호
	 */
	public void setPageNo(int pageNo) {
		if (pageNo <= 0) {
			pageNo = 1;
		}
		this.pageNo = pageNo;
	}

	/**
	 * 페이지의 레코드 시작 번호를 가져옵니다.
	 * @return 페이지의 레코드 시작 번호
	 */
	public int getPageStartRecordNo() {
		return pageStartRecordNo;
	}

	/**
	 * 페이지의 레코드 종료 번호를 가져옵니다.
	 * @return 페이지의 레코드 종료 번호
	 */
	public int getPageEndRecordNo() {
		return pageEndRecordNo;
	}

	/**
	 * 페이지 마지막 번호를 가져옵니다.
	 * @return 페이지 마지막 번호
	 */
	public int getPageLastNo() {
		return pageLastNo;
	}

	/**
	 * one 베이스(oracle)로 페이징을 처리합니다.
	 */
	public void processOne() {
		process(false);
	}

	/**
	 * zero 베이스(mariaDB, mySQL)로 페이징을 처리합니다.
	 */
	public void processZero() {
		process(true);
	}

	/**
	 * 페이징을 처리합니다.
	 * @param zero 제로 베이스 여부 (true : mariaDB, mySQL은 zero 베이스, false : oracle은 1 베이스)
	 */
	protected void process(boolean zero) {
		// 레코드 번호
		int startBase = 1;
		int endBase = 0;
		// 제로 베이스 
		if (zero) {
			startBase = 0;
			endBase = -1;
		}
		
		// 페이지 마지막 번호 설정
		// 나머지가 있으면 페이지 마지막 번호를 증가 시킨다.
		pageLastNo = (recordTotalCount / recordCountPerPage) + (recordTotalCount % recordCountPerPage == 0 ? 0 : 1);
		if (pageLastNo > 0) {
			// 현재 페이지 번호가 페이지 마지막 번호도 크면 페이지 마지막 번호로 변경
			// 현재 페이지 번호가 페이지 마지막 번호와 같을 때 삭제가 발생할 경우 전체 레코드 수가 줄어 들어 페이지 마지막 번호가 줄어 들 경우 페이지 마지막 번호로 변경
			if (pageNo > pageLastNo) {
				pageNo = pageLastNo;
			}
			// 페이지의 레코드 시작 번호 설정
			pageStartRecordNo = ((pageNo - 1) * recordCountPerPage) + startBase;
			// 페이지의 레코드 종료 번호 설정
			pageEndRecordNo = pageNo * recordCountPerPage + endBase;
			// 페이지의 레코드 종료 번호가 전체 레코드 수보다 크면 전체 레코드 수로 변경
			if (pageEndRecordNo > (recordTotalCount + endBase)) {
				pageEndRecordNo = recordTotalCount + endBase;
			}
		} else {
			pageStartRecordNo = 0;
			pageEndRecordNo = 0;
			pageLastNo = 0;
		}
	}
}

2. Java Resource > src/main/java에 com.home.study.common.search 패키지에 Paging 클래스를 계승(상속) 받아서 Pagination 클래스를 생성합니다. (Pagination.java)

Pagination 클래스에 Paging 클래스가 계승(상속)되도록 class에 extends로 Paging를 입력합니다.
Pagination 클래스 위로 마우스를 이동합니다. 콘텍스트 메뉴에서 "Add generated serial version ID"를 클릭하여 serialVersionUID를 생성합니다.
페이지 사이즈(pageSize), 페이지 시작 번호(pageStartNo), 페이지 종료 번호(pageEndNo) 변수를 생성하고 Getter, Setter를 생성합니다.
계산하기 위해 process() 메서드를 Override(오버라이드)하여 생성하고 계산 공식을 추가합니다.

package com.home.study.common.search;

public class Pagination extends Paging {

	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = 1014943426267041010L;

	/**
	 * 페이지 사이즈(기본값 10)
	 */
	private int pageSize = 10;

	/**
	 * 페이지 시작 번호
	 */
	private int pageStartNo = 1;

	/**
	 * 페이지 종료 번호
	 */
	private int pageEndNo = 1;

	/**
	 * 페이지 사이즈를 가져옵니다.
	 * @return 페이지 사이즈
	 */
	public int getPageSize() {
		return pageSize;
	}

	/**
	 * 페이지 사이즈를 설정합니다.
	 * @param pageSize 페이지 사이즈
	 */
	public void setPageSize(int pageSize) {
		if (pageSize <= 0) {
			pageSize = 10;
		}
		this.pageSize = pageSize;
	}

	/**
	 * 페이지 시작 번호를 가져옵니다.
	 * @return 페이지 시작 번호
	 */
	public int getPageStartNo() {
		return pageStartNo;
	}

	/**
	 * 페이지 종료 번호를 가져옵니다.
	 * @return 페이지 종료 번호
	 */
	public int getPageEndNo() {
		return pageEndNo;
	}

	@Override
	protected void process(boolean zero) {
		super.process(zero);
		
		// 페이지 시작 번호 설정
		// 몫만큼 페이지 시작 번호 변경한다.
		int start = pageNo / pageSize;
		if (start >= 1) {
			// 나머지가 없으면 페이지 번호가 페이지 마지막 번호와 같아 몫을 감소 시킨다.
			if (pageNo % pageSize == 0){
				start--;
			}
			pageStartNo = (start * pageSize) + 1;
		}
		
		if (pageLastNo > 0) {
			// 페이지 종료 번호 설정
			pageEndNo = (pageStartNo - 1) + pageSize;
			// 페이지 종료 번호가 페이지 마지막 번호보다 크면 페이지 마지막 번호로 변경
			if (pageEndNo > pageLastNo) {
				pageEndNo = pageLastNo;
			}
		}
	}
}

현재 Search 클래스에서 Paging 클래스를 변수로 사용하고 있습니다. 그래서 Search 클래스에서 Paging 클래스를 Pagination 클래스로 변경하여 사용할 수 있지만 Paging 클래스 만으로도 사용할 수 있는 곳이 있을 수 있습니다.

그래서 Pagination 클래스를 변수로 사용하는 별도의 Search 클래스를 생성하겠습니다.

먼저 Search 클래스에서 Paging 클래스 변수를 제외한 변수들과 Getter, Setter 메서드들을 베이스 클래스로 생성하고 Search 클래스에서 계승(상속) 받게 변경하겠습니다. 그리고 베이스 클래스를 계승(상속) 받아서 SearchEx 클래스를 생성하고 Pagination 클래스를 변수로 사용하겠습니다.

Maven Spring Project에 Common Base Search Model 추가하기

1. Java Resource > src/main/java에 com.home.study.common.search 패키지에 있는 패키지에 BaseSearch 클래스를 생성합니다. (BaseSearch.java)

Search 클래스에 Serializable가 구현(implements)되도록 class에 implements로 Serializable를 입력합니다.
Search 클래스 위로 마우스를 이동합니다. 콘텍스트 메뉴에서 "Add generated serial version ID"를 클릭하여 serialVersionUID를 생성합니다.
검색 타입(searchType), 검색 조건(searchCondition), 검색 키워드(searchKeyword), 사용 여부(useYesNo) 변수와 Getter, Setter를 기존 Search 클래스에서 복사하여 붙여 넣기 합니다.

package com.home.study.common.search;

import java.io.Serializable;

public class BaseSearch implements Serializable {

	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = -756754534938248926L;

	/**
	 * 검색 타입
	 */
	protected String searchType = "";

	/**
	 * 검색 조건
	 */
	protected String searchCondition = "";

	/**
	 * 검색 키워드
	 */
	protected String searchKeyword = "";

	/**
	 * 사용 여부
	 */
	protected String useYesNo = "";

	/**
	 * 검색 타입을 가져옵니다.
	 * @return 검색 타입
	 */
	public String getSearchType() {
		return searchType;
	}

	/**
	 * 검색 타입을 설정합니다.
	 * @param searchType 검색 타입
	 */
	public void setSearchType(String searchType) {
		this.searchType = searchType;
	}

	/**
	 * 검색 조건을 가져옵니다.
	 * @return 검색 조건
	 */
	public String getSearchCondition() {
		return searchCondition;
	}

	/**
	 * 검색 조건을 설정합니다.
	 * @param searchCondition 검색 조건
	 */
	public void setSearchCondition(String searchCondition) {
		this.searchCondition = searchCondition;
	}

	/**
	 * 검색 키워드를 가져옵니다.
	 * @return 검색 키워드
	 */
	public String getSearchKeyword() {
		return searchKeyword;
	}

	/**
	 * 검색 키워드를 설정합니다.
	 * @param searchKeyword 검색 키워드
	 */
	public void setSearchKeyword(String searchKeyword) {
		this.searchKeyword = searchKeyword;
	}


	/**
	 * 사용 여부를 가져옵니다.
	 * @return 사용 여부
	 */
	public String getUseYesNo() {
		return useYesNo;
	}

	/**
	 * 사용 여부를 설정합니다.
	 * @param useYesNo 사용 여부
	 */
	public void setUseYesNo(String useYesNo) {
		this.useYesNo = useYesNo;
	}
}

2. Java Resource > src/main/java에 com.home.study.common.search 패키지에 있는 Search.java 파일을 오픈하고 수정합니다.

Search 클래스가 BaseSearch 클래스가 계승(상속)되도록 class에 extends를 추가합니다.

package com.home.study.common.search;

public class Search extends BaseSearch {

	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = 300076093391308064L;

	/**
	 * 페이징 객체
	 */
	private Paging paging = null;

	/**
	 * 페이징 객체를 가져옵니다.
	 * @return 페이징 객체
	 */
	public Paging getPaging() {
		return paging;
	}

	/**
	 * 페이징 객체를 설정합니다.
	 * @param paging 페이징 객체
	 */
	public void setPaging(Paging paging) {
		this.paging = paging;
	}
}

Maven Spring Project에 Common SearchEx Model 추가하기

1. Java Resource > src/main/java에 com.home.study.common.search 패키지에 BaseSearch 클래스를 계승(상속) 받아서 SearchEx 클래스를 생성합니다. (SearchEx.java)

SearchEx 클래스에 BaseSearch 클래스가 계승(상속)되도록 class에 extends를 추가합니다.
SearchEx 클래스 위로 마우스를 이동합니다. 콘텍스트 메뉴에서 "Add generated serial version ID"를 클릭하여 serialVersionUID를 생성합니다.
SearchEx 클래스에 Pagination 클래스를 변수로 생성하고 Getter, Setter를 생성합니다.

package com.home.study.common.search;

public class SearchEx extends BaseSearch {

	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = 863405122989816160L;

	/**
	 * 페이지네이션 객체
	 */
	private Pagination pagination = null;

	/**
	 * 페이지네이션 객체를 가져옵니다.
	 * @return 페이지네이션 객체
	 */
	public Pagination getPagination() {
		return pagination;
	}

	/**
	 * 페이지네이션 객체를 설정합니다.
	 * @param pagination 페이지네이션 객체
	 */
	public void setPagination(Pagination pagination) {
		this.pagination = pagination;
	}
}

Maven Spring Project에 Board Search Model 수정하기

1. Java Resource > src/main/java에 com.home.study.test1.board.model 패키지에 있는 BoardSearch.java 파일을 오픈하고 수정합니다.

BoardSearch 클래스가 SearchEx 클래스로부터 계승(상속)되도록 변경합니다.

package com.home.study.test1.board.model;

import com.home.study.common.search.SearchEx;

public class BoardSearch extends SearchEx {

	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = 8154425410965108205L;
}

Maven Spring Project의 Board Mapper XML에서 Pagination으로 수정하기

1. com.home.study.test1.sqlmapl.mappers.mariadb.board 패키지에 있는 BoardMapper.xml 파일을 오픈합니다.

paging를 pagination으로 변경합니다.

<!--
	게시판 리스트를 가져옵니다.
-->
<select id="selectBoardList" parameterType="BoardSearch" resultMap="BoardMap">
	SELECT BRD.BRD_SEQ,
	       BRD.BRD_SUBJECT,
	       BRD.REG_ID,
	       DATE_FORMAT(BRD.REG_DTM, '%Y-%m-%d %H:%i:%s') AS REG_DTM
	  FROM INT_BOARD_TB BRD
	  <include refid="whereBoardSearch"/>
	  ORDER BY BRD.REG_DTM DESC
	  LIMIT #{pagination.pageStartRecordNo}, #{pagination.recordCountPerPage}
</select>

Maven Spring Project의 Service - Board Implement에서 Pagination으로 수정하기

1. Java Resource > src/main/java > com.home.study.test1.board.service.impl.BoardServiceImpl.java 파일을 오픈합니다.

paging 객체를 pagination 객체로 변경합니다.
getPaging(), setPaging() 메서드를 getPagination(), setPagination() 메서드로 변경합니다.

package com.home.study.test1.board.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.home.study.common.search.Pagination;
import com.home.study.test1.board.dao.IBoardDao;
import com.home.study.test1.board.model.Board;
import com.home.study.test1.board.model.BoardSearch;
import com.home.study.test1.board.service.IBoardService;

@Service
public class BoardServiceImpl implements IBoardService {

	@Autowired
	IBoardDao boardDao;

	@Override
	public List<Board> selectBoardList(BoardSearch boardSearch) {
		if (boardSearch.getPagination() == null) {
			boardSearch.setPagination(new Pagination());
		}
		
		int count = boardDao.selectBoardListCount(boardSearch);
		boardSearch.getPagination().setRecordTotalCount(count);
		
		List<Board> boardList = null;
		if (count > 0) {
			boardSearch.getPagination().processZero();
			boardList = boardDao.selectBoardList(boardSearch);
		}
		return boardList;
	}
}

Maven Spring Project의 main.jsp에 Pagination UI 수정하기

1. /src/main/webapp/WEB-INF/views/main/main.jsp 파일을 오픈하여 path에서 paging를 pagination으로 변경합니다.

<form:form modelAttribute="boardSearch" autocomplete="off">
	<form:hidden path="pagination.pageNo" />
	<div>
		<form:select path="searchType">
			<form:option value="subject" label="제목" />
			<form:option value="subjectandcontent" label="제목+내용" />
		</form:select>
		<form:select path="searchCondition">
			<form:option value="equal" label="일치" />
			<form:option value="like" label="포함" />
		</form:select>
		<form:input path="searchKeyword" placeholder="검색할 키워드를 입력하세요." />
		<button id="searchBtn" type="button">검색</button>
	</div>
	<div class="search-result">
		<div>
			검색 결과 : ${boardSearch.pagination.recordTotalCount}건
		</div>
		<div>
			<form:select path="pagination.recordCountPerPage">
				<form:option value="5" label="5" />
				<form:option value="10" label="10" />
				<form:option value="25" label="25" />
				<form:option value="50" label="50" />
				<form:option value="100" label="100" />
			</form:select>
		</div>
	</div>
</form:form>

2. pagination UI를 수정합니다.

페이지 번호를 표시하는 JSTL의 반복문인 <c:forEach> 태그에서 begin 속성 값에 1 대신 boardSearch 객체에서 pagination 객체의 페이지 시작 번호(pageStartNo)로 변경하고 end 속성 값에 boardSearch 객체에서 paging 객체의 페이지 마지막 번호(pageLastNo) 대신 boardSearch 객체에서 pagination 객체의 페이지 종료 번호(pageEndNo)로 변경합니다.
전체 페이지 앞 번호는 <a> 태그로 생성하고 데이터 속성(data-pageno) 값에 1을 추가합니다.
이전 페이지 사이즈 번호는 <a> 태그로 생성하고 데이터 속성(data-pageno) 값에는 페이지 시작 번호(pageStartNo)에서 1을 뺀 값을 추가합니다.
다음 페이지 사이즈 번호는 <a> 태그로 생성하고 데이터 속성(data-pageno) 값에는 페이지 종료 번호(pageEndNo)에서 1을 더한 값을 추가합니다.
전체 페이지 마지막 번호는 <a> 태그로 생성하고 데이터 속성(data-pageno) 값에 페이지 마지막 번호(pageLastNo)를 추가합니다.
추가한 <a> 태그들은 클릭 이벤트를 공통 처리하기 위해 href 속성은 void로 처리합니다.

<c:if test="${not empty boardList}">
	<div>
		<ul id="boardPagination" class="pagination">
			<li class="page-item"><a class="page-link page-first" data-pageno="1" href="javascript:void(0)">First</a></li>
			<li class="page-item"><a class="page-link page-prev" data-pageno="${boardSearch.pagination.pageStartNo - 1}" href="javascript:void(0)">&lt;</a></li>
			<c:forEach var="page" begin="${boardSearch.pagination.pageStartNo}" end="${boardSearch.pagination.pageEndNo}" step="1">
				<li class="page-item<c:if test="${boardSearch.pagination.pageNo == page}"> active</c:if>">
					<a class="page-link page-no" data-pageno="${page}" href="javascript:void(0)">${page}</a>
				</li>
			</c:forEach>
			<li class="page-item"><a class="page-link page-next" data-pageno="${boardSearch.pagination.pageEndNo + 1}" href="javascript:void(0)">&gt;</a></li>
			<li class="page-item"><a class="page-link page-last" data-pageno="${boardSearch.pagination.pageLastNo}" href="javascript:void(0)">Last</a></li>
		</ul>
	</div>
</c:if>

3. <style> 태그에 페이지네이션 영역을 둥글게 라운드 하기 위해 CSS를 추가합니다.

.board ul.pagination li.page-item:first-child a.page-link { border-top-left-radius: 0.5em; border-bottom-left-radius: 0.5em; }
.board ul.pagination li.page-item:last-child a.page-link { border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em; }

Maven Spring Project를 실행하여 웹 브라우저로 확인하기

1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.

2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 페이지 크기를 10에서 5로 변경합니다.

그러면 페이지네이션에 처음과 마지막 페이지로 이동하는 버튼과 이전/다음 페이지로 이동하는 버튼이 나타나는 것을 확인할 수 있습니다.

그렇지만 현재 페이지 시작 번호(pageStartNo)가 1이기 때문에 이전 페이지 사이즈 번호는 0되고 페이지 종료 번호(pageEndNo)가 2이기 때문에 다음 페이지 사이즈 번호는 3이 되어 클릭 시 페이지 번호가 없어 오류가 발생할 수 있습니다.

그러나 Paging 클래스와 Pagination 클래스에서 현재 페이지 번호(pageNo)가 0 보다 작거나 같으면 1로 보정하고 페이지 마지막 번호(pageLastNo) 보다 크면 페이지 마지막 번호로 보정해 주기 때문에 오류가 발생하지 않습니다.

이어서 페이지네이션에서 사용되는 이전 페이지 사이즈 번호와 다음 페이지 사이즈 번호를 내부에서 계산하고 버튼 활성화 여부도 처리하여 Script에서 처리 없이 사용할 수 있도록 하겠습니다.