본문 바로가기
반응형

분류 전체보기227

vite의 module 처리와 typescript 설정 살펴보기 NPM Dependency 설치 및 Pre-Bundling 브라우저에서도 es module system 을지원하고 있고, vite는 이방식을 사용하고 있습니다. 하지만 아래 코드와같이 브라우저 상에서는 npm 모듈을 임포트할 수 없습니다. node 환경이 아니기 때문에 인식조차 할 수 없기 때문입니다 예시로 dayjs 라이브러리를 루트dir에서 설치하고 브라우저에서 import 해본 결과입니다. import dayjs from 'dayjs' console.log(dayjs) 왼쪽은 vite dev 결과이고, 오른쪽은 html파일을 그대로 열었을 때 입니다. 이는 vite 가해주는 역할 덕분입니다. 1. 설치된 commonJS/UMD 모듈을 ESM으로 변경합니다. 2. esbuild를 사용하여 변환한 모듈.. 2023. 1. 9.
Vite로 개발환경 만들기 vite, webpack 등은 웹개발 번들링 툴입니다. Vite vs Webpack 비교적 신생 vite 가 webpack 보다는 수치상으로는 당연히 뒤처질수 밖에 없다고생각합니다만 저도 webpack 한참 공부하고, 또 vite 공부해야되? 라는 생각에 거부감이 좀 있었지만, 틈틈히 사용해보면서 webpack 보다 간편하고 빠른 사용경험을 했고, 충분히 공부할 가치가 있다고 생각했습니다. vite를 써야하는 이유 풍부한 템플릿 1. CLI - 커맨드라인으로 선택하면서 간편히 구성할 수 있습니다. npm create vite@latest 2. template - 옵션으로 바로 완성된 템플릿을 불러 올 수 있습니다. 3. 커뮤니티 템플릿 - 공식으로 제공하는 템플릿 외 커뮤니티에서는 더 많은 개발환경 세팅.. 2023. 1. 8.
Docker-compose 로 Node App + DB 구축 docker는 할때마다 참 애를 먹였던 녀석입니다. 물론 실제로 도커하나로 앱서버와 데이터베이스를 한번에 구성하는 일은 없어야 하지만, 심플하게 구성해보고 싶은 마음에 만들어보았습니다. 언제나 잔가지는 필요할 때 추가하고, 기능이 돌아가기 위한 최소한을 구성하였습니다. NodeJS App FROM node:alpine WORKDIR /app COPY package*.json ./ COPY yarn.lock ./ RUN yarn COPY . . CMD ["yarn","start:docker"] 가장 간단하게 노드를 돌리는 컨테이너를 만드는 방법입니다. 도커를 빌드할 때 캐싱을 활용해서 빌드시간을 줄이기 위해서, 그냥 복사하지 않고, package.json 을 별도로 복사합니다(이것은 국룰!) Docker-.. 2023. 1. 2.
window load는 한개가 아니다 지난번에 SPA를 직접 만드는 코딩과제를 하면서 react 컴포넌트처럼 라이프 사이클은 어떻게 만들지? 라는 고민을 잠깐 했었는데 그 연장으로 웹페이지 자체에대한 라이프사이클이 궁금해졌다. window객체에대한 이벤트 발생이 핵심이었고, 꽤나 흥미로웠다. load, DOMContentLoaded, defer 아래 콘솔의 순서는 어떻게 나올까? 결과는 defer > DOMContentLoaded > load 이다. load는 html에서 필요한 js, font, image 등 모든 리소스가 로딩될때 이고, DOMContentLoaded는 html 요소만 완료된다면 호출된다. defer은 DOMContentLoaded와 비슷한 시점에 먼저 호출된다. unload, beforeunload 페이지를 나가기 전 .. 2022. 9. 17.
JS 높이와 스크롤 자바스크립트에서 좌표와 사이즈를 다룰 때 정말 해깔리는 경우가 많다. 또 개발중에 사이즈를 사용하는일이 그렇게 흔한일도 아니기 때문에 더욱이 쓸때마다 기억이 가물가물하다. 확실하게 정의해놔야 해깔리지 않을 거같아서 정리해본다. 좌표 : client vs page 우선 좌표(coordinates)는 3 가지가 있다. client와 page. screen 이다. client는 실제로 보이는 view 상에서의 위치를 나타낸 값이고 page는 보이지 않는 영역도 감안한 실제 요소 상에서의 위치이다. page라는 키워드로 직관적으로 기억하면 될 것 같다. screen 은 모니터 기준이다. blue.addEventListener("click", (e) => { console.log(e.clientX, e.clien.. 2022. 9. 17.
stompJS에 기여하기와 한단계 성장한 느낌 usestomp-hook react hook for stomp. Latest version: 1.2.1, last published: 2 days ago. Start using usestomp-hook in your project by running `npm i usestomp-hook`. There are no other projects in the npm registry using usestomp-hook. www.npmjs.com 항해 마지막 프로젝트에서 stomp로 socket 통신을 구현하면서 조금은 복잡하다고 느꼈다. 또 다른 조에서도 stomp사용에 어려움을 많이 겪고있엇다. stomp에서 react를 위한 공식적으로 hook을 제공하면 어떨까 싶어서 개발하면서 이를 염두하면서 hook을 만.. 2022. 9. 16.
반응형

티스토리툴바