티스토리
관련 서비스
  • Symbols스토리 홈바로가기바로가기
  • 브런치브런치스토리바로가기바로가기
  • 카카오스토리카카오스토리바로가기바로가기

웹돌이
검색하기
블로그 홈

블로그 홈

웹돌이

webdoli.tistory.com/m
신고

웹개발에 대한 무한도전

구독자
29
방명록 방문하기
구독하기
공지 강한 팀 vs 약한 팀 모두보기

주요 글 목록

  • 「마이크로서비스 & 파이어베이스 CI·CD」(5) github Action & 파이어베이스 호스팅 연결 이번 포스팅에서 github Action에 이어 파이어베이스 호스팅까지 연결해보자. 1] 파이어베이스 호스팅 설정 marketing폴더의 코드를 빌드하는 파이어베이스 호스팅 사이트를 추가한다. 파이어베이스 호스팅에서 새로운 사이트를 추가한 뒤, 사이트 이름을 복사한다.(firebase.json에서 사용될 예정) 그리고 marketing폴더에서 firebase init hosting을 실행한다. 만일 firebase명령어가 실행되지 않는다면 'firebase-tools' npm모듈을 설치하고 로그인 한다. (아래 사진의 container폴더(x) → marketing(o)) 호스팅 설정에서 기본 폴더는 'dist(웹팩 빌드)'로 설정한다. 2] firebase.json 호스팅 초기설정 결과 생성된 fire.. 공감수 0 댓글수 0 2023. 4. 14.
  • 「마이크로서비스 & 파이어베이스 CI·CD」(4) github Action 연결 github Action은 웹팩(빌드 폴더)과 연결된다. 이를 위해 빌드를 위한 웹팩 프로덕션 설정이 필요하다. 1] /config/webpack.xxx.js 수정 웹팩 빌드를 위해 webpack.prod.js를 추가한다. 그런데 HtmlWebpackPlugin모듈은 개발팀 자체 테스트용(webpack.dev.js), 배포용(webpack.prod.js) 모두 필요하기 때문에 아래와 같이 webpack.common.js파일로 이동시킨다. package.json에서 build 실행문을 추가한다. 여기까지 진행했다면, container를 웹팩으로 빌드해보자. output폴더를 따로 지정하지 않았다면, 새로 생성된 'dist폴더'에서 통합된 개발코드를 확인할 수 있다. 2] marketing/config/we.. 공감수 0 댓글수 0 2023. 4. 13.
  • 「마이크로서비스 & 파이어베이스 CI·CD」(3) github 설정 MicroFront 워크플로를 요약하면 위와 같다. 개발 회사는 각 로컬에서 리액트, 뷰, 앵글러, 바닐라(뭐든 상관없음)로 개발하여 웹팩으로 빌드를 실행한다. 각 개발팀 위치와 인력은 프랜차이즈처럼 언제든 교체 가능하며, 위치도 상관없다. 개발1팀(배포팀)이 알려준 깃허브의 프로젝트와 파이어베이스 프로젝트 id, key만 있다면, 그것으로 각 개발팀은 1개의 프로젝트를 진행하는 회사의 팀이다. 그리고 지난 포스팅(2)에서는 webpack.dev.js까지 생성했으므로 MicroFront개발의 첫번째 단계까지 완성했다. 첫 번째 단계에서는 회사(로컬)에서 자체적으로 모듈을 테스트 할 수 있지만 타팀과 협력이 되지 않는 까막눈 상태다. 모놀리틱 서비스에서는 이 단계에서 github & AWS or Fireb.. 공감수 0 댓글수 0 2023. 4. 12.
  • 「마이크로서비스 & 파이어베이스 CI·CD」(2) 패키지 폴더 통합 "「마이크로서비스 & 파이어베이스 CI·CD」(1) 초기 설정" 포스팅에서 marketing패키지(폴더)를 빌드하는 과정까지 진행했다. 이제 marketing폴더의 개발코드는 팀으로써 관리가 되며, container패키지(폴더)가 하위 패키지에 데이터를 전달하거나 제어할 수 있어야 한다. 1] container / config 생성 marketing/config 폴더를 통째 복사하여 container폴더에 붙여넣는다. 2] container / package.json 수정 container에서 웹팩을 실행할 수 있는 명령문을 package.json의 scripts값에 넣어준다. 3] public / index.html container 역시 리액트를 사용할 예정이므로 'root' ID를 index.htm.. 공감수 0 댓글수 0 2023. 4. 10.
  • 「마이크로서비스 & 파이어베이스 CI·CD」(1) 초기 설정하기 웹팩을 사용한 마이크로 서비스의 구조는 아래와 같다. 프로젝트(myBlog) 하위 구조로써 각 패키지들이 존재하며(auth, container, dashboard, marketing) 각 패키지들은 독립적으로 빌드가 가능하다. 1] 패키지 구성 각 패키지별로 필요한 모듈이 다르지만 기본적으로 '웹팩, 바벨'은 공통이다. 현 프로젝트는 auth, container, marketing패키지는 같은 모듈을 설치하며, dashboard는 chart.js와 같은 독자적인 모듈을 몇개 더 설치하는 구성이다. 각 패키지 폴더에서 'npm초기화'를 실행한다.(package.json 생성) 이후 아래 모듈을 모두 설치해준다.(container, auth, marketing) ** 'html-webpack-plugin'모.. 공감수 0 댓글수 0 2023. 4. 8.
  • 「WebPack 개발」 5 의존성 중복해결 & 함수형 적용 웹팩으로 하위 모듈(폴더)을 빌드하는 경우, 하위 모듈끼리 충돌하는 경우가 발생할 수 있다. 이번 포스팅에서는 하위 모듈간 충돌을 해결하는 방법과 container에서 하위 모듈로 데이터를 전달하는 방식에 관해 알아보자. 1] 하위(모듈)폴더/ webpack.config.js 현재 cart, product는 'faker'모듈을 사용하고 있다. 이로써 container의 8080포트는 faker모듈을 2번 불러온다.(중복 발생) 하위 폴더에서 모듈 중복을 제거하기 위해서 위와 같이 'shared'키 값으로 해당 모듈을 설정한다.(cart, product 모두 적용) 그리고 다시 8080포트를 실행해보면 아래와 같이 faker모듈이 1회만 실행되는 것을 볼 수 있다. 2] 하위(모듈)폴더/ bootstrap.. 공감수 0 댓글수 0 2023. 4. 7.
  • 「WebPack 개발」 4 Federation(합치기) Federation은 사전적 용어로 '연합'을 의미하는데, 쉽게 '합치기'라 생각하면 된다. webpack은 Federation을 통해 마이크로서비스를 제작할 수 있는 기반을 제공해준다. 이번 포스팅에서는 Federation에 관해 알아보자. 1] product / Federation모듈 import Federation을 실행할 수 있는 웹팩 플러그인, 'ModuleFederationPlugin'모듈을 import한다. 현재 platform폴더 아래에는 container, product폴더가 있으며, container폴더가 배포팀(팀장)이므로 주인이다. 나머지 폴더는 하위 개발팀이므로 각 팀들의 개발코드를 상부에 보고(exposes)해야 한다. 따라서 ModuleFederationPlugin의 expos.. 공감수 0 댓글수 0 2023. 4. 6.
  • 「WebPack 개발」 3 마이크로 프론트엔드 개발 「webpack 개발」 1, 2편에서 웹팩에 관한 사용법을 숙지했다면, 대규모 프로젝트에서 필수적인 '마이크로서비스 아키텍처' 를 구현할 수 있다. 이번 포스팅에서는 platform을 개발한다는 가정 하에 각 팀들을 배치해보자. 1] 폴더 정리 Platform(프로젝트명) 폴더 아래 각 개발팀들을 폴더별로 배치한다. 팀장이 주관하는(배포) 메인 폴더, 'container'를 생성한 뒤, 웹팩에 필요한 npm 모듈을 설치한다. - webpack - webpack-cli - webpack-dev-server - html-webpack-plugin - nodemon(권장사항) 2] public (폴더)생성 클라이언트가 접근할 수 있는 public폴더와 index.html파일을 생성한다. 3] src(폴더)생성.. 공감수 0 댓글수 0 2023. 4. 5.
  • 「WebPack 개발」 2 html페이지 생성 "「WebPack 개발」 1 웹펙 세팅 & 웹서버 실행" 포스팅에서 'localhost:8081/main.js' 웹 호스팅을 실행시켰다. 그러나 테스트를 진행하려면 결과를 쉽게 볼 수 있는 index.html페이지가 필요하다. 1] 'html-webpack-plugin' 설정 'html-webpack-plugin'모듈을 설치했다면, public폴더에 있는 .html파일을 실행할 수 있다. webpack.config.js파일에서 htmlWebpackPlugin모듈을 불러온 뒤, plugins값을 아래처럼 설정한다. new HtmlWebpackPlugin()은 빌드 과정에서 public폴더에 있는 .html파일을 연결시켜주는 역할을 한다. 2] 'index.html' 생성 public폴더를 생성한 후, (테.. 공감수 0 댓글수 0 2023. 4. 4.
  • 「WebPack 개발」 1 웹펙 세팅 & 웹서버 실행 대규모 협업 프로젝트 상황을 가정하며, webpack & 마이크로 적용방식에 관해 알아보자. 1] npm 설치 'eCommerce'폴더 아래, Product폴더를 생성한 뒤 버전 초기화를 진행한다. 참고로 버전 초기화는 'npm init -y'를 사용하면 된다. 2] Webpack모듈 설치 micro프론트앤드 개발에 필요한 webpack모듈은 아래와 같다. > webpack > webpack-cli > webpack-dev-server > html-webpack-plugin 'product'폴더 내(*Ecommerce폴더 아님)에서 위의 웹팩 모듈을 설치했다면, 'nodemon', 'faker'모듈도 추가로 설치한다. > nodemon > @faker-js/faker 참고로 faker모듈은 말 그대로 '.. 공감수 0 댓글수 0 2023. 4. 3.
  • 마이크로 프론트엔드 개발 마이크로xx 개발은 '개인사업자'가 '법인'으로 전환하는 것과 같다. 사실상 혼자서 개발한다면 굳이 협업 과정을 따질 이유가 없다. 아무렴 그냥 하면 된다. 문제는 팀과 팀끼리 중~대규모 sw 협업이다. 1 모놀리틱 JS 3대장 '리액트, 뷰, 앵글러'를 사용한다면 서비스에 대한 아키텍처 과정을 생각할 필요가 없다. 정해진 컴포넌트와 각종 훅을 사용해 폴더 정리만 하면 된다. 그런데 개발자 5,000명이 단 하나의 프로젝트를 개발하는 상황을 생각해보자. 혼자서 반취미용으로 개발하며 프레임워크에 의존한 개발자들은 아마도 대략 다음 2가지 선택지를 꺼낼 것이다. 1. 그냥 혼자서 한다 (4999명 해고) 2. 새로운 아키텍처를 개발한다 결론적으로 위의 2가지 모두 권장하지 않는 방법이다. 1번은 부족한 실력.. 공감수 0 댓글수 0 2023. 4. 1.
  • 「three.js」클릭으로 풍선 제거하기 게임시작 Raycaster()를 이용해 3D 오브젝트를 생성&제어도 중요하지만 제거하는 일 역시 중요하다. CRUD(Create, Read, Update, Delete)는 모든 웹앱의 기본이다. 이번 포스팅에서는 Raycaster()를 이용한 간단한 게임을 제작해보자. | 구상 1) 랜덤으로 만들어진 풍선(sphere)들이 y축으로 올라간다. 2) 사용자가 풍선을 클릭한다. 3) 풍선들이 사라진다. 4) y값이 50보다 큰 풍선은 사라진다. 5) 없어진 풍선이 5개가 넘어가면 게임은 종료된다. | 기본 구조 scene, camera, light, renderer, Loop가 담긴 기본 구조를 생성한다. 스토리는 대략 다음과 같다. 1. balloon Class생성 : balloon인스턴스 생성 2. ba.. 공감수 1 댓글수 0 2023. 1. 13.
  • 「three.js」클릭으로 3D오브젝트 만들기 raycaster, 마우스 이벤트를 3D소스와 결합하는 것만으로도 재미있는 효과를 만들 수 있다. 가장 간단한 3D웹앱은 아래와 같은 경우다. | 기획 1) 사용자가 3D 뷰어 화면을 클릭한다. 2) sphere가 화면에 생성된다. 3) 생성된 sphere와 카메라의 거리 = 50 | 기본구조 3D앱 기본 구조는 scene, camera, light, renderer, 재귀loop이다. 이번 포스팅에서는 grid가 필요하므로 그리드만 추가해준다. let scene, sphere, camera, renderer, light, rayCast, controls, clock, mouse; let ele = document.getElementById('wd-mouseClick'); let init = functi.. 공감수 0 댓글수 0 2023. 1. 13.
  • 「three.js」3D오브젝트에 mousemove이벤트 적용하기 1) 파란색 공을 5 x 5 배열 형태로(높이는 없음) 나열한다 2) 사용자가 마우스를 공에 가져간다 3) 공들이 하늘로 떠오른다 | 공 생성하기 파란색 공은 'SphereGeometry'로 생성할 수 있다. 씬 제작에 필요한 scene, camera, light, renderer 그리고 3D 오브젝트를 담을 변수를 만들어준다. let scene, camera, renderer, sphere, light1, rayCast, control; let mouse = new THREE.Vector2(); let ele = document.getElementById('wd-mousemove'); let objects = []; let ADD = 0.5; let theta = 0; let init = functio.. 공감수 0 댓글수 0 2023. 1. 13.
  • 「three.js」raycast()기초 『rayCast 구현』 canvas로 그래픽을 구현할 때는 x와 y축 두 개의 좌표값을 사용한다. 하지만 3D는 원근감을 표현해야 하기에, 깊이감에 따라서 화면이 달라져야 한다. 이때 raycast는 z값을 반환함으로써 2차원 좌표를 3차원으로 계산해준다. x, y축에서 보면 윗 그림의 사면체와 원기둥이 겹친다. 3차원과 2차원의 차이점은 z축이다. 평면적인 화면에 입체감을 만들고, 실사처럼 연출하도록 만드는 값은 'z값'이며, raycast는 라이팅(광원)에서 오브젝트들(원기둥,사면체)에 부딪치는 거리를 통해 z축을 계산한다. 라이트의 광원과 오브젝트들이 부딪치는 거리를 통해 카메라에서 오브젝트들간의 거리(z축)를 알 수 있다. three.js에서는 Raycast()를 활용하여 z축을 계산한다. 그러므.. 공감수 0 댓글수 0 2023. 1. 12.
  • 「three.js」RayCaster, 3D오브젝트와 마우스 이벤트 연결하기 마우스로 3D 오브젝트를 조작하는 방법은 의외로 복잡하다. x, y 좌표값만 있는 2차원과 달리 3D는 z축이라는 '깊이값'이 존재하기 때문이다. 사용자가 3D 오브젝트를 클릭하는 과정에는 x, y 좌표값을 계산한 후에 깊이값을 추출하는 과정이 숨어 있다. 만일 three.js가 제공하는 API를 사용하지 않는다면, 결코 그 계산이 쉽지 않다. 다행스럽게도 three.js는 z축의 깊이값을 'raycaster()'클래스로 간단하게 해결한다. 단, 'mouse'의 좌표값을 반환하는 clientX, clientY, offsetX, offsetY, pageX, pageY 등...과 같은 개념을 확실하게 알고 있어야만 "사용자 반응 3D앱"을 제작할 수 있다. | init()함수 container는 DOM el.. 공감수 3 댓글수 7 2023. 1. 12.
  • 「three.js」턴테이블 카메라 생성하기 three.js에서 카메라를 빙빙 돌려보자. CG포트폴리오 중에서 3D 모델링을 만들어 카메라를 빙빙 돌리는 작품이 바로 이번 포스팅의 주제다. ｜three.js CG카메라 용어 CG 프로그램에서 카메라 속성에는 ' FOV' , 'Depth of Field' , 'Aspect Ratio' , 'resolution gate' 등.. 과 같은 용어들을 볼 수 있다. 우선 CG에서 가장 기본적으로 알아둬야 할 카메라 용어를 정리해보자. 아래 사진을 보면, Field Of View를 볼 수 있다. 줄여서 FOV라고 하며, 쉽게 말해 '시야'라고 이해하면 된다. 필자는 FOV를 단순히 '시야'라고 생각한다. 가령, FOV가 클수록 전방 시야가 넓어지기 때문이다. 실제 구글에는 FOV값에 관한 여러 설명 중, '광.. 공감수 0 댓글수 2 2023. 1. 12.
  • 「three.js」웹에서 3D 기본 라이트를 구현해보자 3D CG에서 라이팅은 필수다. three.js는 r116대 이후 버전부터 hdr을 광원으로 사용할 수 있다.이는 CG제작자들이 보기에 혁신이다. 반면, 의외로 많은 it분야 개발자들은 별 것 아닌 것으로 여긴다. 데이터가 풍부한 HDR(High Dynamic Range)사진을 라이팅으로 사용한다는 의미는 '실사'에 근접한 간접광을 만들 수 있는 것이다. CG분야는 이 같은 (실사 간접광) 라이팅&랜더링을 위해 거의 30년간 연구했다. three.js에서 코드 몇줄로 구현할 수 있지만, 사실 HDR광원 간접광은 그렇게 단순하게 볼 사항은 아니다. | 기본 구조 우선, 아래와 같이 라이팅이 없는 기본 씬을 만든다. 라이트 종류 three.js r148버전(2023.01) 의 라이트는 'Ambient', '.. 공감수 0 댓글수 0 2023. 1. 12.
  • wretch 2019년 이후, severless가 유행하며, fetch사용이 늘어났다. fetch는 꽤 편리하다. ajax보다 간편하니깐. 하지만 wretch보다 불편하다. 2023년 1월 현재.. wretch보다 간편한 데이터 전달 방법은 없을 것이다. json 데이터 클릭 위와 같이 공공데이터에서 특정 json파일을 가져오는, fetch 코드는 대략 아래와 같다. let btnBusan = document.getElementById('busanBtn'); let dataTable01 = document.getElementById('dataTable01'); btnBusan.addEventListener('click', () => { fetch("https://firebasestorage.googleapis.com.. 공감수 0 댓글수 0 2023. 1. 12.
  • 촌티나는 코드뷰어를 바꿔보자 「ace-editor.js」 블로그마다 소스 에디터가 있지만 디자인이 아쉽다. 개인적으로 sublimeText 디자인이 맘에 들었는데, 해당 느낌 그대로 코드 뷰어를 구현한 라이브러리가 있다. 가령, 웹돌이 블로그에 라이브러리를 설치했더니 즉시 아래와 같이 구현된다. 사용법도 초간단.. CDN 2줄을 붙이고, language값에 원하는 언어 이름을 넣으면 끝. 지원되는 언어도 사실상 거의 모든 언어 수준이다. 코드를 직접 구현하지 않는 개발자 블로그에 사용하기 딱이다. 공감수 0 댓글수 0 2023. 1. 10.
  • 폼 디자인이 막막하다면,「slim select.js」 개발자와 웹 디자이너의 경계는 'Form'이다. 그런데 (개발자) 생각과 달리 Form은 단순한 입력수단이 아니다. 고객과의 접점이다. 문제는 Simple. 만일 Form때문에 고민하는 개발자라면 slimSelect.js를 사용해보자. 당장 아래와 같은 폼을 제작할 수 있다. Option 1 Option 2 Option 3 꽤 훌륭하다. 34kb크기의 라이브러리에 두번 감동한다. slimselect 홈페이지에 디테일한 설명을 볼 수 있으며, 모든게 slim하다. 공감수 0 댓글수 0 2023. 1. 9.
  • 초간편 위지웍 에디터 「Trix.js」 대표적인 위지웍 에디터로는 ckEditor를 꼽는다. 하지만 무겁다. ckEditor는 점차 무거워졌다. 초기의 간편함은 사라진 지 오래. 간단한 게시판류 제작에 굳이 ck에디터가 필요할까? Trix 에디터면 충분하다. Trix에디터가 얼마나 간편하냐면, 이렇게 티스토리에도 적용가능하다. 물론,다소 투박한 면은 있다. ck에디터의 초기 버전 같다. 단,Trix는 모든 브라우저에서 같은 결과를 보여준다. 브라우저 테스트 없이 빠르게 에디터를 설치해야 한다면, Trix에디터를 추천한다. 공감수 0 댓글수 0 2023. 1. 6.
  • 리스트 순서를 맘대로... 「sortable.js」 가끔 제이쿼리류(?) 때문에 속 터질 때가 있다. 드래그 기능 하나 사용해보겠다고 그 뚱뚱한 라이브러리를? 단지 리스트 순서만 변경하는 UI가 필요할 뿐인데.. 뚱뚱한 UI라이브러리가 싫다면, sortable.js가 딱. 백문 불여일견. sortable.js를 적용해보자. This is Sortable It works with Bootstrap... ...out of the box. It has support for touch devices. Just drag some elements around. 바로 이거다. 초간단. GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No.. 공감수 0 댓글수 0 2023. 1. 5.
  • TODO리스트를 30초만에... 「El.js」 기획팀 호출. 내용은 별 것 없다. 빨리 만들어 달라는 것 뿐. 어쨌든 내일까지 끝내야 한다. ToDo리스트.. 게다가 대표님까지 한마디 한다. '거.. 워드에서 표 만들기나 같자나?' ToDo리스트는 비개발자가 쉽게 생각하는 Top5 항목이다. 그래서 준비했다. 30초만에 끝내는 ToDo리스트 라이브러리 「El.js」 GitHub - frameable/el: Minimal JavaScript application framework / WebComponents base class Minimal JavaScript application framework / WebComponents base class - GitHub - frameable/el: Minimal JavaScript application fra.. 공감수 1 댓글수 0 2023. 1. 4.
  • 「원시지구의 시작」 프로그래밍 이외 3D단편 PD가 꿈이었는데ㅋ 아이클론 3D라는 툴로 제작해봤습니다. 공감수 0 댓글수 0 2022. 12. 28.
  • 데커레이터 패턴 Decorator는 말 그대로 '장식하는 사람'이다. 프로그래밍에서 장식? 일단 아래 사진을 보자. 필자는 커피에 대해 무지깽이지만, 에스프레소에 물 태우면 아메리카노가 된다는 정도는 안다. 거기에 우유태우면 '라떼', 또 거기에 초콜릿 넣으면 '모카', 또 거기에 카라멜 넣으면 카라멜모카라떼? 또 거기에... 어쨌든 에스프레소 베이스만 있으면, 대충 때려붙여서 뭔가를 만들 수 있다. 그리고 이 방식이 바로 데커레이터다. 기본 베이스에 여러 장식품을 추가해 나가는 패턴. 프로그래밍에서도 필요한 스킬이다. 만일, 위의 (프로그래밍)커피전문점에서 데커레이터를 사용하지 않는다면 어떻게 될까? Espresso() Americano() Cappucino() Mocha() Macchiato() Latte() ..... 공감수 0 댓글수 0 2022. 12. 14.
  • 옵저버 패턴 옵저버 패턴이 사용되지 않는 프로그램은 거의 없다. 프로그램 내 '메시지 호출'과 같은 알람은 모두 옵저버 패턴을 사용하기 때문이다. 사실상 스마트폰을 소유한 사람들은 매일 옵저버 패턴을 경험하는 셈이다. 옵저버 패턴은 '언론사-구독자' 패턴이라 불린다. 구독자는 언론사에 구독 신청을 한다. 그리고 언론사는 구독자를 등록한다. 이후, 언론사는 업데이트 된 정보를 모든 구독자에게 알린다. 만일, 해지를 요청하는 구독자가 있다면, 즉시 구독자 명단에서 제외한다. 이게 옵저버 패턴의 전부다. '언론사-구독자'에서 언론사는 iSubject추상 클래스를 상속받고, 구독자는 iObserver추상 클래스를 상속받는다. 보통 '데이터(정보)'가 있는 객체가 언론사(Subject)가 되며, 화면을 보여주는 View영역이.. 공감수 0 댓글수 0 2022. 12. 8.
  • 모션그래픽 제작 라이브러리 「lottie.js」 lottie.js는 'Adobe'의 애니메이팅 디자인 소스를 '.json'을 통해 웹으로 구현해주는 js라이브러리다. 따라서 기존의 자바스크립트 애니메이팅 라이브러리(mo.js, animate.js, 기타..)에 비해 의존성이 강하다고 볼 수 있다. (Adobe의 디자인 소스가 없으면, 구현 자체가 불가능함) 단, Adobe 관련 제품군을 잘 다룰 수 있다면(웹 디자이너 계통), lottie.js는 단연 1순위 라이브러리가 된다. 굳이 CSS, JS로 복잡한 코드를 사용할 필요없이 Adobe Animator에서 작업한 디자인 소스를 그대로 사용할 수 있기 때문이다. 어쨌든 lottie.js는 회원가입이 필요한 플랫폼이다. lottie.js의 회원이 되면, 위와 같이 무료 애니메이션을 사용할 수 있으며, .. 공감수 0 댓글수 1 2022. 6. 13.
  • 「vertex」 3d 아이콘 구글에서 '아이콘'을 검색해보면 아이콘이나 svg를 제공하는 플랫폼들이 쏟아진다. 하지만 자신이 직접 아이콘을 편집할 수 있는 플랫폼은 흔치 않다. png, svg와 같은 2D 이미지를 그대로 제공하는 경우가 대부분이다. 이러한 가운데 vertex는 독특한 방식을 보여준다. 얼핏 보기에 아래 아미지를 다운로드 하는게 전부라고 생각할 수 있는데, 사실은 그렇지 않다. 클릭을 해보자. 위의 아이콘들은 모두 3D뷰에서 각도를 수정할 수 있고, 색상과 재질을 변경할 수 있다. 단, 아이콘의 절대량이 다소 부족하기 때문에 웹디자이너의 수요를 충족시켜 주기에는 무리가 있다. 웹 아이콘 업계에서 3D를 시도했다는 점에서 독특함으로 평가할 수 있을 것 같다. 공감수 0 댓글수 0 2022. 6. 3.
  • UML 다이어그램 제작에 특화된 「Pintora.js」 Pintora.js는 UML과 같은 설계도 제작에 최적화 된 라이브러리다. Pintora.js는 UML툴을 제작할 수 있는 라이브러리라는 점에서 다소 전문적인 분위기를 느낄 수 있는데, 놀라운 점은 가상DOM + html텍스트를 그대로 이용한다는 부분이다. 가령, 아래와 같은 UML의 시퀸스 객체는 script나 css설정이 아닌 html내의 textContent를 통해 구현된다. sequenceDiagram Pintora-->>Pintora: Has input changed? 시퀸스 UML을 위한 코드는 html 2줄이다. sequenceDiagram Pintora-->>Pintora: Has input changed? 그리고 script태그를 끝에 붙여주면 다이어그램이 완성된다. Pintora는 프로.. 공감수 0 댓글수 0 2022. 6. 2.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.