본문 바로가기

반응형

전체 글

(397)
처음으로 돌아가기 | 애셋을 적용한 웹팩 번들링, 우리가 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월 초사이 까지 개발을 해왔던 이 프로젝트는 이전에 리액트로 만들어 두었다가 어딘가에 박혀있던 프로젝트의 코드 퀄리티나 기능, 디자인, 사용성 등에 있어서 부족하다고 판단하여 이를 개선하는 동안 잠시 개발이 중단되었습니다. 이후 과거 프로젝트의 개선이 어느 정도 완료되고, 최근 다시 개발에 들어가고 있었던 상황입니다. 그런데, 이를 잠정 중단하겠다는 것이 현재이고, 이에 대한 사유를 소개하는 포스트가 되겠습니다. 복지맵 프로젝트 간략 소개 잠시 동안  어떤 구성을 가져갔는지를..
어디가 끝이지? 끝없이 흘러가는 마키 UI 애니메이션 이전 애니메이션 | 스크롤링 헤드라인 스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인duklook.tistory.com결과물 미리보기단지 HTML 과 CSS 몇 스푼만 던져주면 구현해볼 수 있는 마키 UI, 같이 구현해 봅시다.여러 줄기로 꼬아보았는데, 실제 결과물은 2개 로 줄었습니다.  이번에 구현해볼 친구는?오늘 인프런의 INFCON 을 소개하는 렌딩 페이지에서 아래와 같이 무한으로 흐르는 UI 를 볼 수 있었습니다. 왠지 구현해보면 재밌을 것 같아서, 이 친구가 동작..
[깃허브 액션 빌드 에러] Error: node_modules/vite/dist/node/index.d.ts(5,41): error TS2307: Cannot find module 'rollup/parseAst' or its corresponding type declarations. 문제상황이 때 까지 아무런 문제가 없다가 오늘 갑자기 깃허브 액션을 통해 빌드를 수행하던 중 현 문제가 발생하였습니다. 에러 전문을 보면 node_modules/vite/dist/node/index.d.ts(5,41): 오류 TS2307: 'rollup/parseAst' 모듈 또는 해당 유형 선언을 찾을 수 없습니다. 라고 표기되고 있습니다.  문제원인이 메시지는 TypeScript 컴파일러가 모듈 해석 방식과 관련하여 경고하는 내용입니다. 주요 원인 아래와 같습니다. - TypeScript의 모듈 해석 설정이 최신 Node.js 버전이나 번들러와 호환되지 않는 옛 방식으로 설정되어 있는 경우- 프로젝트가 사용하는 일부 패키지(여기서는 rollup)가 최신 모듈 시스템을 사용하고 있어, 현재 설정으로는 ..
[빌드 에러] node_modules/@testing-library/jest-dom/types/jest.d.ts: - error TS2304: Cannot find name 'expect'. ReturnType<typeof expect.stringContaining> 문제상황vite+ vitest + react 환경에서 npm run build 시 build 가 실패하는 문제가 발생했었습니다. 해당 에러 전문은 아래와 같이 jest 에 대한 참조와 expect 를 찾을 수 없다는 것이 문제였습니다.  node_modules/@testing-library/jest-dom/types/jest.d.ts:1:23 - error TS2688: Cannot find type definition file for 'jest'.1 /// ~~~~node_modules/@testing-library/jest-dom/types/jest.d.ts:9:27 - error TS2304: Cannot find name 'expect'. 9 ..
스크롤링 헤드라인 이라 불리는 뉴스티커 UI, 원리부터 구현 까지 이전 애니메이션 HTML, CSS 로 불타는 입력창(Input) 만들기미리보기해당 포스트를 따라오시면, 아래와 같은 애니메이션을 구현하실 수 있게 됩니다. HTMLHTML 구조는 별게 없습니다. label 의 경우 인접 형제 선택자(+) 를 사용하기 위해 input 아래에 label 을duklook.tistory.com 들어가기 전 | 포스트 작성 방식 변경 합니다.오늘 부터 UI 디자인 애니메이션 연구소 라는 카테고리 타이틀에 맞게 포스트를 작성하는 방식을 바꿔볼까 합니다. Codepen 을 이용해서 여러 가지를 시도하다보니, 나중에 포스트에 작성할 때는 작성한 코드를 일일이 설명하는 방식이 되었고, 게시글의 목적과는 다른 방향으로 적어왔던 것 같습니다. 그래서 2024.06.25 부터는 새로운 방식으..

반응형