
ES6 ๋ฌธ๋ฒ๊ณผ ํจ๊ปํ๋ ๋ชจ๋ Javascript(์๋ฐ์คํฌ๋ฆฝํธ) ๊ณ ๊ธ Part.2
์ ์ฉํITํ์ต
์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ์ต์ ์ ES6 ๋ฌธ๋ฒ๊ณผ ํจ๊ป ํ์ตํ๋๋ก ๊ธฐํ๋ ๊ณผ์ ์ ๋๋ค.
์ค๊ธ์ด์
JavaScript, ES6
์ธ์ ๊น์ง ๋ฐ์ค๋ ๊ตฌ์ฒด ๋บ๋บ์ด ๋๋ ๊ฒ๋ง ๋ฐฐ์ฐ์๋์, ์ฒ์ ๋ด์ผ์ง ๋๋ฌด๋ง ๋ณด๋ฉด ์๊ฐ์ด ํฌ์ง ์์ต๋๋ค. ์์ ์ด๋ณด๋ฅผ ํ์ถํ๊ณ ์ค๋ฌด์ ์ ์ฉํ ์ ์์ผ๋ฉฐ, ์ต๊ทผ ์ฃผ๋ชฉ๋ฐ๊ณ ์๋ ๋์งํธ-ํธ์์ ํ ์ญํ ์ ๋ด๋นํ Three.js์ ํ์๋ฅผ ๋๊ปด๋ณด์ธ์. ํํ์ด์ง ๋บ๋บ์ด ์ฉ๋๊ฐ ์๋ ์ ๋ฌด ์ ์ฉ ์์ค์ ๋๋ค. ์ ์กฐ,๊ตญ๋ฐฉ,์ฌ๋,์ด์ก ๋ถ์ผ๋ฑ ๊ด๋ จ ๋ชจ๋ธ(glb, glTF..)์ ์ ์ ์ญ๋์ ๋ณด์ ํ๋ฉด ๋๋ฉ์ธ ์ ๋ฌธ์ฑ์ด ํ ์ธต ์ ๊ทธ๋ ์ด๋ ๋ฉ๋๋ค. ๊ฐ์ธ ๋ฐ ํ์ฌ ์๋ฒ์ On-Premises์ฉ Node.js(Express) & Nest.js ๊ฐ ์๋ฒ๋ ๊ฐ๋ฐํฉ๋๋ค ๋ณธ ๊ฐ์๋ฅผ ์กฐ๊ธ๋ง ๋ณํ ํด๋ ํ์ํํ ์๋น์ค ์ ์๊ณผ ๋๋ถ์ด IT ์ธ์ฌ๋ก ๊ฑฐ๋ญ๋ ๊ฒ์ ๋๋ค. ์ฌ๋ฌ๋ถ ์ซ์ง ๋ง์๊ณ , ๋์ ํ์ธ์ ๊ทธ๋ฆฌ ์ด๋ ต์ง ์์ต๋๋ค.^^






์ผ๋์
์ ๊ด์ฌ์๋ ์ฌ๋๋ค๋ ๋ฃ๋ ์ค!





์ผ๋์
์ ๊ด์ฌ์๋ ์ฌ๋๋ค๋ ๋ฃ๋ ์ค!
Three.js๋ฅผ ํ์ฉํ ๋์๋ฅผ ๋ง๋ค๊ณ , ์ ์ฅํ๊ณ ์คํ ํฉ๋๋ค. ์ ์ฅ์ ๋ฐ์ด๋๋ฆฌ ํ์์ ๋๋ค.(์ฉ๋: ์๋ฐฑ Bytes ~ 2KB ์์ค, ๊ฐ๋ ์ฑ: ๋ถ๊ฐ)
๋ค๊ตญ์ด(ํ๊ธ,์๋ฌธ,์ผ๋ณธ์ด...)๋ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ฐ๋ฐํ์ฌ ๋ค๋ฅธ ์น ํ๋ก์ ํธ์๋ ์ฌ์ฉ ๊ฐ๋ฅํฉ๋๋ค.(์น ํ์ค ๊ท์ฝ์ ์ค์ํฉ๋๋ค)
๊ฐ๋ฐ ํ Vite๋ฅผ ํ์ฉํ ๋น๋์ Gulp๋ก css ์์ถ ์คํฌ๋ฆฝํธ ๋ง๋ค์ด ๋ณด๋ฉฐ, ์์ถ๋ min.css๋ฅผ ๋น๋๋ index.html์ ์๋ ์นํํด ์ค๋๋ค. ๋ํ package.json์ ์ ์ฉํ๋ฉด ํ ๋ฐฉ์ ๋น๋์ Netlify ๋ฐฐํฌ๊น์ง ์๋ฃ
๊ฐ๋ฐ ์์ฑ ๋ฐ ๋น๋ ํ Git ์ปค๋ฐ๊ณผ Netlify ํผ๋ธ๋ฆฌ์ฑ ํ ๋๋ง์ ์ฌ์ดํธ ์์ฑ. ์์ ๋ณด๊ฐ์ ์๋ ๋ฐฐํฌ ์ ์ฉ๋ฉ๋๋ค
๊ฒฐ๊ณผ๋ฌผ์ On-Pemises ์คํํ๊ธฐ ์ํ ๋๋ง์ ๊ฐ๋จํ Node ์๋ฒ์ ์ต์ ์ ํ์ธ Nest ์๋ฒ๋ฅผ ๊ฐ๋ฐํฉ๋๋ค.
์ต์ข ์ ์ผ๋ก CSS๋ ์ ์ฒด๋ฅผ ์ค๋ช ํ๊ณ , ๊ทธ ๋์ ๊ฐ๋ฐํ ์ฝ๋์ ๋ํด ์ต์ ํ๋ฅผ ํด๋ด ๋๋ค
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
Three.js ๋ฐ JS ๊ธฐ์ด๋ง ํ๋ ๊ฒ ๋ณด๋ค, ์ค๋ฌด์ ๋ฐ๋ก ์ ์ฉ ๊ฐ๋ฅํ ์์ค๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ตํ๊ณ ์ ์ฉ ๋ฐ์ ํ๊ณ ์ถ์ผ์ ๋ถ
3D๋ ๋ชจ๋ ๋ถ์ผ์ ์ ์ฉ ๊ฐ๋ฅํ๋ฉฐ, ์ต๊ทผ ์ ํ์ค์ธ Metabus, Digital Twin, AR, VR, ML, DL ๋ฑ์ ์๊ฐํ ๋ถ์ผ๋ก ์ฐจ๋ณํ๋ฅผ ์ํ๋ ์์ง๋์ด
์ผ๋ฐ์ ์ธ FE(Front-End)ํด ๋ง์ผ๋ก๋ ๋ ์ด์ ์ฐจ๋ณํ๊ฐ ์ด๋ ต๋ค๊ณ ๋๋ผ์๋ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
JS, Three.js ๊ธฐ์ด๊ฐ ์์ผ๋ฉด ์ข์์. ์๋ค๋ฉด ๊ณ ์์ค๋ฝ์ง๋ง ๋ถ๊ฐ๋ฅํ์ง ์์ต๋๋ค. ๋ฆฌ๋ฒ์ค ์์ง๋์ด๋ง ํจํด์ธ ์ญ๊ณตํ ๋ฐฉ์์ผ๋ก ์ด๋ฏธ ์์ค์๋ ์์ฑ ๋ชจ๋์ ์ญ์ผ๋ก ํด์ ๋ฐ ์ดํดํ๋ ๋ฐฉ๋ฒ๋ก ๋ ์์ต๋๋ค.
์ค๋ ์๊ฐ ๋์ ๊ธฐ์ ๋ณํ์ ๋ง์ถ๋ฉด์ ๋ณด๋ธ ์๊ฐ์ด ๋ง์, ์ด์ ๋ณด์ ํ ๊ธฐ์ ๊ณผ ๊ฒฝํ์ ์ด,์ค๊ธ๋ถ๋ค๊ป ๋ฏธ์ฝํ์ง๋ง ์ ๊ธฐ์ ์ ์ ๊ณตํด์ ๋น ๋ฅด๊ฒ ์ฑ์ฅํ๋๋ฐ ํจ๊ปํ๊ณ ์ถ์ต๋๋ค.
DB Modeling, C/S & Web ํ-์คํ ๊ฐ๋ฐ์
์น์ฌ์ดํธ http://casual-insight.com
์ ํ๋ธ https://www.youtube.com/channel/UCBiU3IgXYAQHK1tUMXq3isQ
-.Mono-Repo (Turbo: "^2.3.4"), FCM(Firebase Cloud Message), WebHook, Redis, MQTT
-. MUI-X, Material-UI ๋ฑ Next & React ์ํ๊ณ UI
-.OCR(Naver), RIMS, Popbill, SNS Login(Google,Naver,Kakao)
-.Js, Vue/Nuxt (VueX, Pinia), AngularJS, React/Next (Redux,Zustand,Recoil), Svelt,
D3, Three (WebGL), C2i: ์ฒญ์๋ ๋ฉํ BI ์ฐจํธ, echarts, Vuetify, Quasar, Telerick(Progress)
IndexedDB & SqlLite, css, scss, sass, Tailwind, Bootstrap...
-.Leaflet.js, Cesium.js, ๋ค์ & ๋ค์ด๋ฒ ์ง๋
-.WebRTC & WebSocket, MQTT, Silverlight(C#) & ASP.Net
-.Node, Nest, Spring Boot, Docker, Git, pm2
-.AWS, Azure, nCloud(Naver)
-.Oracle, PostgreSQL, MySQL, MariaDB, MS-SQL, MongoDB(mongoose), InfluxDB, Supabase
-.Python, Numpy/Scipy, Jupyter, Django(DRF: Django Rest Framework)/Flask,
-.TensorFlow, Keras, ScikitRun, LangChain
-.์จํฐ-์์ฐ(City-Wow): ๊ตญํ ,๊ตญ๋ฐฉ,๊ณต๊ณต ๋ฐ ๋ณ์,์ ์กฐ๊ธฐ์ ๋ฑ 3D ์๋ฎฌ๋ ์ด์ ๋ฐ
์ค์๊ฐ ๋ชจ๋ํฐ๋ง ์๋น์ค ('23.10 ~ ํ์ฌ; Three, Vanila.js)
-.์จ์ (SeeU): ์ ์ข ๋ณ ํ์ ์ฑํ ์๋น์ค(๋ณ์, ์ ์กฐ..)(๊ตฌ๊ธ-๋ฐ + ํฌ๋ก๋งํค, STT & TTS Chatting)
('23.02 ~ 23.10; WebRTC, WebSocket, Vue3 & Pinia, Quasar, Node, MySQL)
-.์๋ฒ ์ด-์์ฐ(Survey-Wow): ๊ตฌ๊ธ-ํผ, MS-ํผ , ๋ค์ด๋ฒ-ํผ ์ค๋ฌธ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ๋จํ๊ฒ ๋ถ์ํ๊ณ
๊ณต์ ํ๋ ๋ฐ์ดํฐ ๋ถ์ ์น ์๋น์ค ('22.03 ~ 23.01; Vue2 & VueX, Quasar, Node, MySQL)
-.๋ฐ์ดํฐ-์์ฐ(Data-Wow): xls, json,csv , API ์ฐ๋ ๋ฑ ๊ณต๊ณต ๋ฐ์ดํฐ ์๋ ๋ถ์ ์๊ฐํ
('22.01 ~ 22.12; Vue2 & VueX, Vuetify, Node, MongoDB) - ํ์๋ถ ๊ณต๊ณต๋ฐ์ดํฐ ํฌ์
-.DDMV(Data-Dam Multi-Dimensional Vis-): ๋ฐ์ดํฐ-๋ ๋ค์ฐจ์ ํ์์ ์๊ฐํ ๋ถ์์๋น์ค
('20.01 ~ 20.08; Vue2 & VueX, Vuetify, Node, MongoDB) - ์ธ์ฒ์ ๊ณต๊ณต๋ฐ์ดํฐ ํฌ์
-.์จํฌ์์ด(C2i: Chart Inteiiligence Insights) ์ฐจํธ ์ปดํฌ๋ํธ: ์ฐจํธ ๊ฐค๋ฌ๋ฆฌ ๋ฉ๋ด
BI ๊ธฐ๋ฐ ์ฐจํธ (with D3.js): '15.04 ~ ํ์ฌ ; D3.js(v3.3 ~ v7.9) ๊ธฐ๋ฐ์ BI ํจํด์ ์ฐจํธ ์๋ฃจ์
(๋ฌธ์ฌ์ธ ์ ๋ถ ์ผ ์๋ฆฌ ๋์๋ณด๋ ์ฒญ์๋ ๋ฉํ, ๋ชฝ๊ณจ ์ฌ์ ๊ด๋ฆฌ ๊ตญ์ฑ ํ๋ก์ ํธ ๋จํ. ๋ค๊ตญ์ด ์ง์)
-.(์ฃผ)์บ์ฃผ์ผ-์ธ์ฌ์ดํธ (Casual-Insights) CTO
-.์ KISTI ์ฐ๊ตฌ์
-.์ LG-CNS Oracle Modeler, DBA & ์ ์ ์ฐ๊ตฌ์
-.์ ๊ทน๋(ํ๋) ์ ์ ์ ์ฐ์ค ์ฌ์
**. ๋ฐ์ดํฐ ๋ ๋ค์ฐจ์ ์๊ฐํ-.์ข ํฉ ์๊ฐ(ํ์) : https://youtu.be/noZ9H7wftsI
-.์๋น์๊ถ-I(ํ์ : ๋ฐฑํ์ ๋งค์ฅ ํฌ์ค ๋ฐ์ดํฐ - ์ผ๋ฐ ์ ์กฐ ์ ํต์ ์ฒด) : https://youtu.be/ArL-Pv3U-40 -.์๋น/์๊ถ-II (ํ๊ตญ KDX, ์์ ๋ฐ์ดํฐ ์ ๊ณต): https://youtu.be/Wcpu29gI53Y
-.๋ณด๊ฑด์๋ฃ (ํ๊ตญ KDX, ์จ๋๋ฆฌH&C ๋ฐ์ดํฐ ์ ๊ณต): https://youtu.be/I8WBqAFp9L4-
.๊ณต๊ณต ๋ฐ์ดํฐ (๊ฒฝ๊ธฐ ํ์ฑ ์์ฒญ ๊ณต๊ณต ๋ฐ์ดํฐ ์ ๊ณต) : https://youtu.be/2QCw_6aeRVE
*.D3 & ThreeJS ์ฐจํธ ๊ฐค๋ฌ๋ฆฌ :https://gregory-han.github.io/chart/
์ ์ฒด
35๊ฐ โ (17์๊ฐ 32๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
์ ์ฒด
2๊ฐ
5.0
2๊ฐ์ ์๊ฐํ
์๊ฐํ 2
โ
ํ๊ท ํ์ 5.0
5
์์ ํ ์ ํ ์์ค์ ๋๋ค. ๊ฑฐ๊ธฐ์ ๋๋๊ทธ ์ค ๋๋กญ์ ๋ฉ๋ชจ๋ฆฌ ๋์๋ฅผ ๋ฐฉ์งํ๋ JS๋ ๋๋ผ์ ๊ณ ,๋ชจ๋ธ ์ ์ฅ, ์คํ์ ๋ํ ๋ฐ์์ ์ ํ๋ ๊ฒฝ๋ ฅ์ด ๋๊ปด์ง๋๋ค. ๋์ ํ ์คํธ ๋ฉ์์ง๋ฅผ ๋ง๋ค ์ ์๊ณ ๋ชจ๋ ์น์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ฒ์ ์์ฐ, ์กฐ๊ธ์ ์ด๋ ต๊ธด ํด๋ ์ค๋ฌด์ฉ์ ํ์คํฉ๋๋ค...
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!