포트폴리오3 (포트폴리오)CaptureMark 제작기 -2편 (vanillaJS 컴포넌트 구현) 지난 1편에서 기획, 설계, 디자인을 빠르게 진행했고, 본격적으로 vanillaJS로 개발을 시작하였다. - 프로젝트 구성 크롬 익스텐션 개발은 chrome://extensions/ 에 들어가서 구성된 파일을 로드해주면 된다. (https://support.google.com/chrome/a/answer/2714278?hl=ko 자세한 설명은 여길 참고하면 된다.) 파일엔 전체 manifest파일, 앱 클릭시 띄워줄 popup html, background.js, 다른 진입점 파일, 아이콘 과 같은 리소스 파일을 포함해야 한다. 나의 경우엔 각 진입점 기준으로 js를 번들링 해주고 빌드파일만 업로드할 수 있게 간단히 webpack으로 빌드 폴더를 세팅했다. const path = require('path.. 2024. 2. 6. (포트폴리오)CaptureMark 제작기 -1편 (아이디어, 기획, 설계, 디자인) 혼자서 새로운 사이드 플젝을 시작하기로 마음 먹었다. 첫번째는 아이디어 선정이 었는데, 몇가지 기준을 정했다. 1. 2주안에 혼자서 구현 가능할 것 - 평소 회사 업무도 있고, 이 이상 넘어가면 계속 집중력을 발휘하기 어려웠다. 2. vanilla js로 만들 수 있을 것 - 기본적인 js실력을 늘려야 했고, 가장 좋은게 실제로 만들어 보는거라고 생각 했다. 3. 실제 수요가 있고 사용가능한 것을 만들 것 - 실제 사용자가 쓸 수 있는 의미 있는 것을 만들고 싶었다. 여러 아이디어를 생각하다가 일단 크롬 익스텐션이 눈에 들어왔다. 크롬 브라우저 사용률이 높은 만큼 접근성도 좋고 생각보다 러닝커브가 높지 않았다. 그리고 무엇보다 브라우저의 여러 기능을 활용할 수 있기 때문에 다양한 아이디어가 나올 수 있었.. 2024. 2. 3. (포트폴리오)Sprite Generator - 첫번째, 개요 및 구성 목차 첫번째, 개요 및 구성 두번째, SpriteArea 및 MaxRects 알고리즘 구현 이미지 스프라이트(image sprite)란? 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 왜 쓸까요? 여러 이미지를 한번에 로딩 시킬 수 있습니다. 이미지 로딩 시 깜빡임을 없애고 개별 이미지에 대한 관리를 따로 하지 않아도 된다는 장점이 있습니다. UI 화면 반응형이 아닌 적응형 레이아웃을 선택했고(개발시에 참고했던 사이트와 동일) Desktop 작업용으로 생각했기 때문에 최대 width값을 1440px(좌우 마진 포함한 사이즈. 미포함시 1060px)으로 맞췄습니다. UI의 경우 최대한 심플하게 구성하였습니다. 일단 이미지를 올리면 4가지 영역으로 구분됩니다. Drag&Drop 영.. 2023. 10. 15. 이전 1 다음
