The Easiest React (Global ver.)
얄팍한 코딩사전
Learn React the Easiest and Fastest Way!
입문
React, JavaScript, Node.js
Three.js 3D 都市モデル ＆ Netlify デプロイ
いつまで箱や球体を回転させることばかり学んでいるのですか。森を見ず木ばかり見ても、思考は広がりません。 完全な初心者から脱出し、実務に応用可能で、最近注目されているデジタルツインの一端を担うThree.jsのパワーを体感してください。ホームページでくるくる回す用途ではなく、業務に適用できるレベルです。 製造、国防、災害、輸送分野など、関連モデル（glb, glTFなど）の制作能力を身につければ、ドメイン専門性が一層アップグレードされます。 個人および会社サーバー向けのOn-Premises用Node.js(Express) および Nest.js 各サーバーも開発します。 本講座を少し変形するだけで、パワフルなサービス制作と合わせて、IT人材として生まれ変わることができるでしょう。皆さん、ひるまずに挑戦してください。そんなに難しくありません。^^
こんなことが学べます
Three.jsを活用して都市を作成、保存、開きます。保存はバイナリ形式です。(容量: 数百Bytes～2KB程度、可読性: なし)
多言語(ハングル、英文、日本語など)もバニラJavaScriptで開発しており、他のWebプロジェクトでも使用可能です。(Web標準規約に準拠しています)
開発後、Viteを活用したビルドとGulpでCSS圧縮スクリプトを作成し、圧縮されたmin.cssをビルドされたindex.htmlに自動置換します。また、package.jsonに適用すれば、一発でビルドとNetlifyへのデプロイまで完了します。
開発完了・ビルド後、Gitコミット・Netlifyパブリッシュを経て、自分だけのサイトが完成。 修正・加筆時には自動デプロイが適用されます。
成果物をOn-Premisesで実行するための、自分だけの簡単なNodeサーバーと最新トレンドのNestサーバーを開発します。
最終的に CSSも全てを説明して、これまでに開発したコードについて最適化をしてみます
3Dベースのモデルをどうすれば最も簡単でスケーラブルに生命力を作るか？ 🤔
答えはThree.jsにあります。都市モデル、製造工程モデル、災害モデルなど、Digital-Twin、VRなど多くの分野で実装するための技術がThree.jsです。
本講義ではほとんどThree.jsのみ 3Dサービスを作成し、Gitと連携してNetlifyに自動的に配布され、独自のサイトを無料で保有します。もちろん、ドメインがあれば接続するだけです。
個人および会社のサーバーで実行するため Node.js サーバーと Nest.js サーバーの 2 つを開発します。
多言語サービスが必要な場合は、重いライブラリを注入するのと同じようにして、独自の多言語モジュールを使用してください。すべてのWebプロジェクトに適用（Web標準に準拠）可能です。（セクション4から多言語でコーディング）
基本的な文法に従って、以下の例にのみ時間を費やすよりも完成したものと逆に学習してください。そして私の関心事のものに修正、改善、適用してみてください。
インストラクターだけをコーディングしないように自分で手コーディングしてください。
Three.jsでオブジェクトだけを作ったのですが、それ以降は気になった方？
2/3Dみんな良いですが、これをどこにどのように書くべきでしょうか。毎回BoxGeometry回転するのがほとんどですが、どこに活用しますか？
Three.js入門者/IT社員
Three.jsの保存/オープン方法は？
new THREE.Scene() オブジェクトを toJSON() すればよいですか？その後、どのようにオープンして見せますか？容量は膨大で（数十〜百M / GB）、またはMaximum callエラー😰
Three.js開発者/IT代理店
Webの最初から最後まで気になる？
Three.jsの方が良いとは言えませんが、単純なフルスタックはありませんか？ Node.jsは何ですか、Nest.jsは何ですか？簡単に実装するか、不明ですか？ ThreeJSでのみWeb実装になりますか？気になる方
Web-フロント開発者/コンピュータ室代理店
こんな方に
おすすめです
学習対象は
誰でしょう？
Three.jsやJSの基礎だけよりも、実務で即応用可能なソースをもとに学習・応用・発展させたい方
3Dはあらゆる分野に応用可能で、最近流行しているメタバース、デジタルツイン、AR、VR、ML、DLなどの可視化分野で差別化を図りたいエンジニア
一般的な FEツールだけではもう差別化が難しいと感じている方
前提知識、
必要でしょうか？
JS、Three.jsの基礎があると良いです。無くても大変ですが、不可能ではありません。リバースエンジニアリング（逆行工学）方式として、既にレベルの高い完成モジュールを逆に解釈・理解する方法論もあります。
오랜 시간 동안 기술 변화에 맞추면서 보낸 시간이 많아, 이제 보유한 기술과 경험을 초,중급분들께 미약하지만 제 기술을 제공해서 빠르게 성장하는데 함께하고 싶습니다.
DB Modeling, C/S & Web 풀-스택 개발자
유튜브 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 패턴의 차트 솔루션
(문재인 정부 일 자리 대시보드 청와대 납품, 몽골 재정관리 국책 프로젝트 남품. 다국어 지원)
Data Mart & Warehouse, ROLAP, BI, 시각화, 클라우드 인프라 등 다양한 기술 스택과
업무 분석, Oracle(v6.3 ~ ) 모델링 & 튜닝 분야에 대한 전문 정보 및 경험 보유.
-.(주)캐주얼-인사이트 (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/
*.포상이력
1999.08 한겨레신문 & UTC 벤처21 본상 수상.(상금 5천만원)
2000.10 ㈜소프트다임 대통령상 수상 (PowerSi OLAP)
2002.11 한국 e-비즈니스대상 산업자원부 장관상 수상
2020.08 인천시 공공 데이터 포상
2022.12 행안부 공공 데이터 포상
カリキュラム
全体
35件 ∙ (17時間 32分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
￥23,673
似ている講座
同じ分野の他の講座を見てみましょう！
![[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문강의 썸네일](https://cdn.inflearn.com/public/courses/327126/cover/edca2ab2-47b4-45b7-92c6-5bb00fd125eb/327126.jpg?f=avif&w=420)
