๊ฐ์ธ์ ์ธ ๊ณต๋ถ๋ฅผ ์ํด ๊ฐ๋จํ ์ผํ๋ชฐ ์ํ์ ์ ์ํ ํ๋ก์ ํธ์ ๋๋ค.
๊ทธ๋์ SPA๋ฅผ ํตํ ํ๋ก ํธ์๋ ๊ตฌํ๊ณผ SPA-๋ฐฑ์๋ ๊ฐ์ ํต์ , ๊ทธ๋ฆฌ๊ณ ASP.NET Core 3.1 ๋ฑ์ ์ต์ ASP.NET Core ๊ตฌํ๊ณผ Spring Boot, Django Rest Framework(์ดํ DRF)๋ฑ์ ๊ตฌํ์ ๋ํด ๊ถ๊ธํ๊ธฐ์ ๊ถ๊ธ์ฆ์ ํด์ํ๊ธฐ ์ํด์ ํ๋ก์ ํธ๋ฅผ ์งํํ๊ฒ ๋์์ต๋๋ค.
Angular 11์ผ๋ก ํ๋ก ํธ์๋๊ฐ ๊ตฌํ๋์์ผ๋ฉฐ ๋์ผํ ํ๋ก ํธ์๋์ ๋ํด ๊ฐ์ ๊ธฐ๋ฅ์ ํ๋ ๋ฐฑ์๋๋ฅผ ๊ฐ๊ฐ ASP.NET Core 3.1, Spring Boot 2.3(Kotlin), DRF 3.11๋ก ๊ตฌํํ์์ต๋๋ค. (DRF์ ๊ฒฝ์ฐ ์์ฑ๋ช ์ ์บ๋ฉ ์ผ์ด์ค ๋์ ์ ์ค๋ค์ดํฌ ์ผ์ด์ค๋ฅผ ์ฌ์ฉํ๋ ํ์ Angular ํ๋ก์ ํธ๊ฐ ๊ตฌ๋ถ๋์ด ์์ต๋๋ค.)
์ฒ์์๋ ์ฑ ํํ๋ก ์ ๋ฆฌํ๋ ค๊ณ ์๊ฐํ์๊ธฐ์ ์์ค์ฝ๋๊ฐ ์ฑ ์ ๊ฐ ์ฑํฐ์ ํด๋นํ๋๋ก ๊ตฌ์ฑ๋์ด ์์ผ๋ฉฐ, ๊ฐ ์ฑํฐ์ ๋ด์ฉ์ https://blog.naver.com/netscout82/221993591322 ์์ ํ์ธํ์ค ์ ์์ต๋๋ค.
์๊ฐ์ ์ฌ์ ๊ฐ ์์๊ธฐ์ ์ ๋ฆฌ๋ ๋ด์ฉ์ ์์ธํ ๋ด์ฉ๋ณด๋ค๋ '๊ทธ๋ฅ ์ด๋ฐ ์์ผ๋ก ์งํํ๋ค' ๋๋ ์ ๋๋ก ์ ๋ฆฌ๋์์์ ์ํด๋ถํ๋๋ฆฝ๋๋ค.
์์ค ์ฝ๋๋ฅผ ์คํํ๋ ๋ฐฉ๋ฒ์ ์ฐ์ MySQL ๋ฐ์ดํฐ ๋ฒ ์ด์ค๋ฅผ ์ค์ ํ๊ณ 3๊ฐ์ ๋ฐฑ์๋ ์ค ํ์ธํ๊ณ ์ถ์ ํ๋ก์ ํธ๋ฅผ ๊ณจ๋ผ์ ๋ฐฑ์๋ ํ๋ก์ ํธ๋ฅผ ๊ตฌ์ฑํ๋ ๊ฒ์ ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ง์ง๋ง์ผ๋ก Angular ํ๋ก์ ํธ๋ฅผ ๊ตฌ์ฑํ์ฌ ํ๋ก์ ํธ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
์ต์ข ์์ฑ ํ๋ก์ ํธ๋ chapter9 ํด๋ ์์ ํ๋ก์ ํธ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
cd chapter9\AngularShop
๋ฐ์ดํฐ ๋ฒ ์ด์ค๋ Docker-Compose ๋ฅผ ํตํด MySQL์ ์ฌ์ฉํฉ๋๋ค. Docker-Compose๋ Docker Desktop ์ ์ค์นํ๋ฉด ๊ฐ์ด ์ค์น๋ฉ๋๋ค.
ํ๋ก์ ํธ์ ๋ฃจํธ ํด๋์ docker-compose.yaml ํ์ผ์ด ์์ผ๋ฏ๋ก ๋ค์ ์ปค๋งจ๋๋ฅผ ํตํด MySQL์ ์คํํฉ๋๋ค.
docker-compose up -d
์ฒ์ MySQL ์ด๋ฏธ์ง๋ฅผ ๋ค์ด๋ก๋ ํ๊ณ ์คํํ๋๋ฐ 1-2๋ถ ๋๋ ๊ทธ ์ด์ ์์๋ ์ ์์ต๋๋ค.
๊ตฌ์ฑ๋ ๋ฐ์ดํฐ ๋ฒ ์ด์ค ์ ๋ณด๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. (๋จ์ ๊ฐ๋ฐ์ฉ DB์ด๋ฏ๋ก ํจ์ค์๋๋ ๋์ถฉ ์ ํ์ต๋๋ค ;))
๋ฐ์ดํฐ๋ฒ ์ด์ค : AngularShop
๋ฃจํธ ๊ณ์ ํจ์ค์๋ : 123456
์ฌ์ฉ์ ๊ณ์ : user
์ฌ์ฉ์ ๊ณ์ ํจ์ค์๋ : 1234
๋ฐ์ดํฐ๋ฒ ์ด์ค๋ HeidiSQL๋ฑ์ ๋๊ตฌ๋ฅผ ํตํด ํ์ธ๊ฐ๋ฅํฉ๋๋ค.
HeidiSQL์ ํตํด ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ์ ํ ๋ Authentication plugin 'caching_sha2_password' cannot be loaded ์๋ฌ๊ฐ ๋ฐ์ํ๋ค๋ฉด, docker ps ๋ช ๋ น์ ํตํด MySQL์ด ์คํ ์ค์ธ ์ปจํ ์ด๋ ์ด๋ฆ์ ํ์ธํ๊ณ , ์ด๋ฆ์ ์ด์ฉํด์ Docker ์ปจํ ์ด๋์์ ์คํ ์ค์ธ MySQL์ ์ ์ํ์ฌ ์ฟผ๋ฆฌ๋ฅผ ์คํํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop>docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
8b84fd03c7f0 mysql "docker-entrypoint.sโฆ" 3 minutes ago Up 3 minutes 0.0.0.0:3306->3306/tcp, 33060/tcp angularshop_db_1
C:\Sources\AngularShop_sources\chapter9\AngularShop>docker exec -it angularshop_db_1 mysql --user=root --password
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 19
Server version: 8.0.23 MySQL Community Server - GPL
Copyright (c) 2000, 2021, Oracle and/or its affiliates.
Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.
Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.
mysql> ALTER USER 'user' IDENTIFIED WITH mysql_native_password BY '1234';
Query OK, 0 rows affected (0.03 sec)
mysql> ALTER USER 'root' IDENTIFIED WITH mysql_native_password BY '123456';
Query OK, 0 rows affected (0.03 sec)
mysql> exit
Bye
๊ธฐ์กด์ .NET์ ์๋์ฐ ๊ธฐ๋ฐ์ .Net Framework 4.8, ํฌ๋ก์ค ํ๋ซํผ .NET Core 3.1 ์ผ๋ก ๋๋์ด ์์์ง๋ง, ๋์ ํฉ์ณ์ ํฌ๋ก์ค ํ๋ซํผ ๊ธฐ๋ฐ์ .NET 5๋ก ํตํฉ๋์์ต๋๋ค.
์ด ํ๋ก์ ํธ์์๋ .NET Core 3.1์ ์ฌ์ฉํ๊ณ ์์ผ๋ฏ๋ก .NET Core SDK ์ค์์ 3.1 ๋ฒ์ SDK๋ฅผ ๋ค์ด๋ก๋ ํ์ฌ ์ค์นํฉ๋๋ค.
์ค์น ํ ๋ค์ ๋ช ๋ น์ ํตํด SDK์ ๋ฒ์ ์ ํ์ธํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop>dotnet --version
3.1.405
๋ณธ ํ๋ก์ ํธ์์๋ Entity Framework Cor 3.1์ Code First๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฝ๋๊ฐ ์์ฑ๋์์ต๋๋ค. ๊ทธ๋ฌ๋ฏ๋ก ์์ฑ๋ ๋ชจ๋ธ ์ฝ๋์์ ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์์ฑํ๊ธฐ ์ํด dotnet-ef๋ฅผ ์ค์นํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop>dotnet tool install --global dotnet-ef
๋ค์ ๋ช
๋ น์ ์ฌ์ฉํ์ฌ ๋๊ตฌ๋ฅผ ํธ์ถํ ์ ์์ต๋๋ค. dotnet-ef
'dotnet-ef' ๋๊ตฌ('5.0.2' ๋ฒ์ )๊ฐ ์ค์น๋์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋ค์ ๋ช ๋ น์ ํตํด ๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์์ฑํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop>dotnet ef database update
Build started...
Build succeeded.
Done.
๋ง์ฝ ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ ์ ์ ๋ณด๊ฐ ๊ธฐ๋ณธ ์ค์ ๊ณผ ๋ค๋ฅธ ๊ฒฝ์ฐ appsettings.Development.json ํ์ผ์ ์ฐ๊ฒฐ๋ฌธ์์ด์ ์์ ํด์ผ ํฉ๋๋ค.
๋ฐ์ดํฐ๋ฒ ์ด์ค ๋ณต์ ์๋ฃ ํ ๋ค์ ๋ช ๋ น์ ํตํด ํ๋ก์ ํธ๋ฅผ ์คํํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop>dotnet run
info: Microsoft.Hosting.Lifetime[0]
Now listening on: https://localhost:5001
info: Microsoft.Hosting.Lifetime[0]
Now listening on: http://localhost:5000
info: Microsoft.Hosting.Lifetime[0]
Application started. Press Ctrl+C to shut down.
info: Microsoft.Hosting.Lifetime[0]
Hosting environment: Development
info: Microsoft.Hosting.Lifetime[0]
Content root path: C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop
๋ธ๋ผ์ฐ์ ๋ก https://localhost:5001 ์ผ๋ก ์ ์ํ๋ฉด Swagger ํ์ด์ง๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
Ad Block์ด ์ค์ ๋ ๋ธ๋ผ์ฐ์ ์ ๊ฒฝ์ฐ ํธ์ถ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ๊ผญ https๋ฅผ ์ฌ์ฉํ๋ https://localhost:5001๋ก ์ ์ ํด์ ํ
์คํธ ํ์๊ธฐ ๋ฐ๋๋๋ค.
Seedํํธ์ CreateDefaultUsers, CreateSampleProducts๋ฅผ ํ ๋ฒ์ฉ ์คํํ์ฌ ๊ธฐ๋ณธ ๋ฐ์ดํฐ๋ฅผ ์์ฑํฉ๋๋ค.
HeidiSQL์ ํตํด ์์ฑ๋ ๋ฐ์ดํฐ๊ฐ ํ์ธ ๋๋ฉด ๋ฐฑ์๋ ์ค๋น๊ฐ ์๋ฃ๋์์ต๋๋ค.
๋ณธ ํ๋ก์ ํธ๋ OpenJDK 1.8 ๋ฒ์ , Kotlin ๊ทธ๋ฆฌ๊ณ Gradle์ ์ฌ์ฉํด ๊ตฌ์ฑ๋์์ต๋๋ค.
Spring Boot ์ฝ๋๊ฐ ์ค๋น๋ AngularShopBoot ํด๋๋ก ์ด๋ํฉ๋๋ค.
C:\Sources>cd AngularShop_sources\chapter9\AngularShop\AngularShopBoot
ํ๊ฒฝ๊ตฌ์ฑ ์ฐธ๊ณ ์๋ฃ๋ฅผ ํ์ธํ๋ฉด ์๋ ๊ณผ์ ์ ์คํฌ๋ฆฐ์ท๊ณผ ํจ๊ป ํ์ธํ ์ ์์ต๋๋ค.
OpenJDK ๋ค์ด๋ก๋ ํ์ด์ง๋ก ์ด๋ํ์ฌ OpenJDK8 (LTS) ๊ทธ๋ฆฌ๊ณ HotSpot, Windows, x64๋ฅผ ์ ํํ๊ณ .msi ํ์ผ์ ๋ค์ด๋ก๋ ํฉ๋๋ค.
์ค์น ๋์ค์ "Set JAVA_HOME variable" ํญ๋ชฉ์ ๊ผญ ์ ํํ๊ณ ์ค์น๋ฅผ ์งํํฉ๋๋ค.
์ค์น๋ฅผ ๋ง์น ํ์ ๋ค์ ๋ช ๋ น์ด๋ก JDK ๋ฒ์ ์ ํ์ธํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShopBoot>java -version
openjdk version "1.8.0_282"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_282-b08)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.282-b08, mixed mode)
์ฐ์ ์ ๋ก๋๋๋ ์ด๋ฏธ์ง๊ฐ ์ ์ฅ๋ imagesํด๋์ ๊ฒฝ๋ก๋ฅผ ์ค์ ํด์ค๋๋ค. WebConfig.kt ์์ images/** ์ ๋งคํ๋๋ ํด๋๋ฅผ ํ์ฌ ํด๋ ์์น์ ๋ง๊ฒ ์ค์ ํฉ๋๋ค.
class WebConfig : WebMvcConfigurer {
override fun addResourceHandlers(registry: ResourceHandlerRegistry) {
registry.addResourceHandler("/images/**")
.addResourceLocations("file:///c:/Sources/AngularShop_sources/chapter9/AngularShop/images/")
registry.addResourceHandler("/resources/**")
.addResourceLocations("/resources/")
}
}
๋ค์ ๋ช ๋ น์ ํตํด ํ๋ก์ ํธ๋ฅผ ์คํํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShopBoot>gradlew bootrun
> Task :bootRun
. ____ _ __ _ _
/\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
\\/ ___)| |_)| | | | | || (_| | ) ) ) )
' |____| .__|_| |_|_| |_\__, | / / / /
=========|_|==============|___/=/_/_/_/
:: Spring Boot :: (v2.3.0.RELEASE)
....์ค๋ต....
2021-02-06 15:22:18.379 INFO 6260 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 0 ms
<==========---> 80% EXECUTING [55s]
> :bootRun
์ด๊ธฐ ๋ฐ์ดํฐ ์์ฑ์ ์ํด ๋ธ๋ผ์ฐ์ ์์ ๋ค์ ์ฃผ์๋ฅผ ํตํด API๋ฅผ ํธ์ถํฉ๋๋ค.
http://localhost:8080/api/Seed/GenerateProducts
http://localhost:8080/api/Seed/GenerateUsers
HeidiSQL์ ํตํด ๋ฐ์ดํฐ๊ฐ ํ์ธ๋์๋ค๋ฉด ๋ฐฑ์๋ ์ค๋น๊ฐ ์๋ฃ๋์์ต๋๋ค.
DRF ์ฝ๋๊ฐ ์ค๋น๋ AngularShopDRF ํด๋๋ก ์ด๋ํฉ๋๋ค.
C:\Sources>cd AngularShop_sources\chapter9\AngularShop\AngularShopDRF
Python 3.7.9 ๋ค์ด๋ก๋ ํ์ด์ง๋ก ์ด๋ํ์ฌ x64 Installer๋ฅผ ๋ค์ด๋ก๋ ํ์ฌ ์ค์นํฉ๋๋ค.
์ค์น ์ค์ Add Python 3.7 to PATH ์ต์ ์ ๊ผญ ์ฒดํฌํ๊ณ ์ค์น๋ฅผ ์งํํด์ผ ํฉ๋๋ค.
๋ค์ ๋ช ๋ น์ด๋ก ํ์ด์ ๋ฒ์ ์ ํ์ธํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop>python -V
Python 3.7.9
๊ทธ๋ฆฌ๊ณ ๋ค์ ๋ช ๋ น์ด๋ฅผ ํตํด ๊ฐ์ํ๊ฒฝ ์ค์ ๋ฐ ํจํค์ง๋ฅผ ์ค์นํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShopDRF>python -m venv venv
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShopDRF>venv\Scripts\activate
(venv) C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShopDRF>pip install -r requirements.txt
๋ค์ ๋ช ๋ น์ด๋ฅผ ํตํด ์ฝ๋๋ก ์์ฑ๋ ๋ชจ๋ธ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ฐ์ํฉ๋๋ค.
(venv) C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShopDRF>python manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions, shop
Running migrations:
Applying contenttypes.0001_initial... OK
Applying contenttypes.0002_remove_content_type_name... OK
Applying auth.0001_initial... OK
Applying auth.0002_alter_permission_name_max_length... OK
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages... OK
Applying auth.0008_alter_user_username_max_length... OK
Applying auth.0009_alter_user_last_name_max_length... OK
Applying auth.0010_alter_group_name_max_length... OK
Applying auth.0011_update_proxy_permissions... OK
Applying shop.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying admin.0003_logentry_add_action_flag_choices... OK
Applying sessions.0001_initial... OK
Applying shop.0002_userlogin... OK
Applying shop.0003_order_orderitem_orderstatus... OK
์ฐ์ ๊ด๋ฆฌ์ ๊ณ์ ์ ์์ฑํ๊ธฐ ์ํด ๋ค์ ๋ช ๋ น์ ์คํํฉ๋๋ค. ์ฝ๋์์ ์ฌ์ฉํ๋ ๊ธฐ๋ณธ ํจ์ค์๋๋ qwerty1@ ์ ๋๋ค.
(venv) C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShopDRF>python manage.py createsuperuser
Email: admin@email.com
Username: admin
Password:
Password (again):
Superuser created successfully.
์ด์ด์ ๋ค์ ๋ช ๋ น์ด๋ก ํ๋ก์ ํธ๋ฅผ ์คํํฉ๋๋ค.
(venv) C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShopDRF>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
February 07, 2021 - 13:13:08
Django version 3.0.7, using settings 'AngularShopDRF.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
๋ธ๋ผ์ฐ์ ๋ฅผ ํตํด ๋ค์ URL์ ํธ์ถํ์ฌ ์ด๊ธฐ ์ ํ ๋ฐ์ดํฐ์ ๊ธฐ๋ณธ ์ฌ์ฉ์ ๋ฐ์ดํฐ๋ฅผ ์์ฑํฉ๋๋ค.
http://127.0.0.1:8000/api/seed/generate-products
http://127.0.0.1:8000/api/seed/generate-users
์์ฑ๋ ์ฌ์ฉ์ ๋ฐ ์ ํ ๋ฐ์ดํฐ๊ฐ ํ์ธ๋๋ฉด ํ๋ก์ ํธ ๊ตฌ์ฑ์ด ์๋ฃ๋์์ต๋๋ค.
Angular ํ๋ก์ ํธ๋ .NET, Spring Boot ๋ฐฑ์๋๋ฅผ ์ํ AngularShop-Front ํ๋ก์ ํธ์ DRF ๋ฐฑ์๋๋ฅผ ์ํ AngularShop-Fron-DRF ํ๋ก์ ํธ๊ฐ ์์ต๋๋ค.
๋ ํ๋ก์ ํธ์ ์ค์ ๋ฐฉ๋ฒ์ ๋ชจ๋ ๋์ผํฉ๋๋ค.
Node.js๋ Node Version Manager For Windows๋ฅผ ํตํด ์ค์น๋ฅผ ์งํํฉ๋๋ค.
(venv) C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop-Front>nvm install 14.15.4
Downloading node.js version 14.15.4 (64-bit)...
Complete
Creating C:\Users\netsc\AppData\Roaming\nvm\temp
Downloading npm version 6.14.10... Complete
Installing npm v6.14.10...
Installation complete. If you want to use this version, type
nvm use 14.15.4
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop-Front>nvm use 14.15.4
Now using node v14.15.4 (64-bit)
๋ค์ ๋ช ๋ น์ด๋ก ํ์ํ Node ํจํค์ง๋ฅผ ์ค์นํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop-Front>npm install -g @angular/cli
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop-Front>npm i
ASP.NET Core๋ ๊ฐ๋ฐ ํ๊ฒฝ์์ Angular ํ๋ก์ ํธ์์ ์ฐ๋์ ์ํด ASP.NET Core ๋ฐฑ์๋๋ก ์ค๋ ์์ฒญ์ Angular ํ๋ก์ ํธ๋ก ์ ๋ฌํ๋ ์๋ฒ -> ํ๋ก ํธ ๋ฐฉ์์ ํ๋ก์ ์ค์ ์ ์ฌ์ฉํฉ๋๋ค. ์์ธํ ๋ด์ฉ์ Proxy ์ค์ ์ฐธ๊ณ ์๋ฃ๋ฅผ ์ฐธ๊ณ ํ๋ฉด ํ์ธํ ์ ์์ต๋๋ค.
/src/environments/environment.ts ํ์ผ์ baseUrl ์์ฑ ๊ฐ์ .NET Core์ ์ฃผ์๋ก ์ค์ ํด์ค๋๋ค.
export const environment = {
production: false,
baseUrl: "https://localhost:5001/"
};
๊ทธ๋ฆฌ๊ณ ๋ค์ ๋ช ๋ น์ด๋ฅผ ํตํด Angular ํ๋ก์ ํธ๋ฅผ ์คํํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop-Front>ng serve
๊ทธ๋ฆฌ๊ณ https://localhost:5001/index ์ ํตํด Angular ์ฑ์ ์ ์ํ๋ฉด ํ์ด์ง๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
Spring Boot๋ Angular์ฑ์ผ๋ก ๋ค์ด์ค๋ ์์ฒญ์ ๋ฐฑ์๋๋ก ์ ๋ฌํ๋ ๋ฐฉ์์ ํ๋ก์๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์์ธํ ๋ด์ฉ์ Spring Boot Proxy ์ค์ ์ฐธ๊ณ ์๋ฃ๋ฅผ ์ฐธ๊ณ ํ๋ฉด ํ์ธํ ์ ์์ต๋๋ค.
/src/environments/environment.ts ํ์ผ์ baseUrl ์์ฑ ๊ฐ์ Angular์ฑ์ ์ฃผ์๋ก ์ค์ ํด์ค๋๋ค.
export const environment = {
production: false,
baseUrl: "http://localhost:4200/"
};
๊ทธ๋ฆฌ๊ณ ๋ค์ ๋ช ๋ น์ด๋ฅผ ํตํด Angular ํ๋ก์ ํธ๋ฅผ ์คํํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop-Front>ng serve --proxy-config=proxy.conf.json
๊ทธ๋ฆฌ๊ณ https://localhost:4200 ์ ํตํด Angular ์ฑ์ ์ ์ํ๋ฉด ํ์ด์ง๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
DRF๋ Angular์ฑ์ผ๋ก ๋ค์ด์ค๋ ์์ฒญ์ ๋ฐฑ์๋๋ก ์ ๋ฌํ๋ ๋ฐฉ์์ ํ๋ก์๋ฅผ ์ฌ์ฉํฉ๋๋ค.
์์ธํ ๋ด์ฉ์ DRF Proxy ์ค์ ์ฐธ๊ณ ์๋ฃ๋ฅผ ์ฐธ๊ณ ํ๋ฉด ํ์ธํ ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋ค์ ๋ช ๋ น์ด๋ฅผ ํตํด Angular ํ๋ก์ ํธ๋ฅผ ์คํํฉ๋๋ค.
C:\Sources\AngularShop_sources\chapter9\AngularShop\AngularShop-Front-DRF>ng serve --proxy-config=proxy-drf.conf.json
๊ทธ๋ฆฌ๊ณ https://localhost:4200 ์ ํตํด Angular ์ฑ์ ์ ์ํ๋ฉด ํ์ด์ง๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.