본문 바로가기

반응형

전체 글

(401)
[잔소리 프로젝트] CAHTER 02 | 프로젝트 계획 이전 이야기 | 프로젝트의 필요성 [잔소리 프로젝트] CHAPTER 01 | 프로젝트의 필요성들어가는 말그저 정보공유에 초점을 맞추고, 그저그런 프로그램이 아니라 현재 불편함을 경험하고 있는 사례를 토대로 프로그램을 만들어 보고 싶다는 생각을 많이 했습니다. 현재 내가 알고duklook.tistory.com 들어가는 말오늘은 프로젝트를 어떤 방향으로 구성해 나갈지에 대해서 정리해보는 시간을 가져볼까 합니다. 계획이라고 해봤자 단순하고, 누락된 부분이 많습니다. 아직 덜 구체화된 부분도 있고, 빈약하죠.  하지만 이렇게 정리해보는 시간을 가짐으로써 동기부여가 되기도 하니 한번 시도해 봅니다. 프로젝트 계획목적과 목표 정의 일단 해당 프로젝트의 목적은 단 한가지 입니다. "수익 계산 자동화" (->가능하다면..
[잔소리 프로젝트] CHAPTER 01 | 프로젝트의 필요성 들어가는 말그저 정보공유에 초점을 맞추고, 그저그런 프로그램이 아니라 현재 불편함을 경험하고 있는 사례를 토대로 프로그램을 만들어 보고 싶다는 생각을 많이 했습니다.  따라서 현재 내가 알고 있는 것에서 조금의 지식을 더 추가해서 만들 수 있는 프로그램이면서, 현재 불편함을 경험하고 있으며, 개선하고 싶은 문제는 광고 수익 부분이었습니다.  해당 문제를 개선하여 삶의 질을 높이기 위한 도전이 잔소리 프로젝트이며, 그리고 오늘 이 시간은 해당 프로젝트가 왜 필요했는가에 대한 포스트가 되겠습니다.잔소리 프로젝트의 필요성해당 프로젝트가 왜 필요할까요? 순전히 저의 기준으로 몇 가지가 있습니다. 매년 수익를 계산해서 신청하기 귀찮음현재 저는 애드센스를 적용한 블로그가 2개 있고, 네이버 애드포스트를 적용한 블로..
처음으로 돌아가기 | 번들 파일의 종착지, Output 관리하기 https://webpack.kr/guides/output-management/ 해당 문서를 참고하여 작성됩니다. 제가 이해 한대로  작성하는 부분이 많기 때문에, 정석대로 가실거라면 공식문서를 참고해보세요. 이전 포스트 | 애샛 설정, Data 다루기 처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 json/xml/csv참고한 자료는 webpack 공식 문서를 사용하였습니다. 애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러duklook.tistory.com 들어가는 말이번시간에는 Output 경로에 대해서 다룰 겁니다. 번들링된 결과가 dist/ 경로에..
처음으로 돌아가기 | 애샛 설정을 통한 웹팩 번들링, 그 두 번째 '데이터'(애샛 파트 마지막) 참고한 자료는 webpack 공식 문서를 사용하였습니다.  애샛 설정 두 번째, 데이터프로젝트 환경에서 NodeJS 의 경우에는 JSON 지원을 기본적으로 해줍니다. 따라서 import data from './data.json' 형태로 불러와도 정상적으로 import 되어 사용할 수 있습니다. 하지만, xml 이나 csv 파일 의 경우에는 지원해주지 않기 때문에, json 과 동일한 방식으로 import 하려고 하면 문제가 발생합니다.  따라서 웹팩에서는 이 문제를 해결할 수 있는 로더를 제공해주는데 그것이 csv-loader 와 xml-loder 입니다. 이번 포스트는 해당 로더를 설정해서 번들링하는 방법을 언급하고 그 결과를 살펴보는 과정을 서술합니다.  loader 설치 및 구성 설정 후 번들링 순..
처음으로 돌아가기 | 애셋을 적용한 웹팩 번들링, 우리가 import './style.css ' 등이 가능했던 이유(애샛 파트 ① CSS, Image, Font) 이전 포스트 | 처음으로 돌아가기, 웹팩을 사용한 기초 번들링  처음으로 돌아가기, 웹팩을 사용한 기초 번들링처음으로 돌아가기, 첫 번째 프로젝트 환경 설정현재에는 프론트엔드 개발을 하기 위한 환경을 구축하는 것이 매우 쉽습니다. Vite 를 이용하면 손쉽게 개발 환경이 구축되고, 리액트,뷰, 앵글러duklook.tistory.com 들어가는 말, 이 포스트에서 해볼 것이번 시간에는 CSS, 이미지, 폰트애셋을 통합하여 웹팩 번들링 시 포함시켜주는 설정에 대해서 정리해보는 시간을 가져볼 겁니다. 이 때 까지 편하게 사용했던 import 방식이 왜 쉽게 가능했는가에 대한 부분이 되겠습니다. 원래 라면 outside 등의 문제가 발생해서 모듈을 인식하지 못하는 문제가 일반적인데, 웹팩은 이 문제를 쉽게 처리..
처음으로 돌아가기| 웹팩을 사용한 기초 번들링 처음으로 돌아가기, 첫 번째 프로젝트 환경 설정현재에는 프론트엔드 개발을 하기 위한 환경을 구축하는 것이 매우 쉽습니다. Vite 를 이용하면 손쉽게 개발 환경이 구축되고, 리액트,뷰, 앵글러와 같은 라이브러리/프레임워크를 사용하면 더 쉽게 개발을 이어갈 수 있습니다. 그리고 앞으로의 인공지능 시대에는 모든게 말 하나로 복잡한 환경 셋팅도 자동화될지도 모릅니다. 하지만, 이렇게 편안한 도구들이 등장하고, 개발자가 손쉽게 다룰 수 있는 추상화의 단계가 가속화될 때, 간과하지 말아야 하는 부분이 우리가 쓰는 도구가 어떤 원리에 의해서 동작하는가에 대해 알고 있는가에 대한  부분입니다. 자동화된 도구라도 완벽할 순 없으니, 제반이 되는 원리를 이해하고 있다면 보다 쉽게 문제를 찾아서 해결할 수 있을 지도 모를..
HTML과 CSS 만으로 이런 것도 가능해?? 액자 모양 로고 애니메이션 이전 애니메이션 | 스크롤링 헤드라인, 마키 어디가 끝이지? 끝없이 흘러가는 마키 UI 애니메이션이전 애니메이션 | 스크롤링 헤드라인 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시duklook.tistory.com결과 미리보기이번 과정을 따라 하신다면, 아래와 같은 애니메이션을 구현하실 수 있습니다.  이번에 소개하는 액자 로고 애니메이션사실 해당 애니메이션의 이름을 별도로 정해진게 없습니다. 액자 형태의 로고 디자인이 박힌 티셔츠를 보게 되었는데, 거기서 영감을 받아 만들었기 때문이죠.  오늘은 해당 애니메이션을 어떻게 구현할 수 있는지 주석을 메인으로 설명을 첨부하고, 주요한 부분만 ..
복지맵 프로젝트, 잠정 중단하게 된 이유 이 포스트 작성 배경혹시나 우연히 혹은 궁금증에 해당 카테고리를 확인하시는 분이 있으실 수 있어서 이에 대한 안내 메시지를 남기고자 포스트를 작성합니다. 해당 프로젝트는 조금의 사연이 있습니다.  2024년 4월 중순에서 시작하여 5월 초사이 까지 개발을 해왔던 이 프로젝트는 이전에 리액트로 만들어 두었다가 어딘가에 박혀있던 프로젝트의 코드 퀄리티나 기능, 디자인, 사용성 등에 있어서 부족하다고 판단하여 이를 개선하는 동안 잠시 개발이 중단되었습니다. 이후 과거 프로젝트의 개선이 어느 정도 완료되고, 최근 다시 개발에 들어가고 있었던 상황입니다. 그런데, 이를 잠정 중단하겠다는 것이 현재이고, 이에 대한 사유를 소개하는 포스트가 되겠습니다. 복지맵 프로젝트 간략 소개 잠시 동안  어떤 구성을 가져갔는지를..

반응형