Error Module not found: Error: Can't resolve '@utils/~~~' in '~~~~~~~~~' 리액트 프로젝트에서 이미 path alias를 사용할 수 있도록 설정이 되어있었다. 그런데 스토리북에서는 모듈을 찾을 수 없다고 나오는게 아닌가? ㅠㅠ 찾아보니 스토리북은 별도의 빌드환경을 사용하기 때문에 webpack 설정을 따로 해주는 것이 필요한 것으로 보인다. 웹팩 설정해주면 된다는 건 알겠는데 뭔가 찾아보는 코드마다 조금씩 달라서 계속 안되서 하루종일 삽질...ing 뭔가 될듯 말듯 하는게 더 짱나........... tsconfig.json { "compilerOptions": { { ..... }, // 당신의 기존 설정값들... "include": ["src"]..

History 뷰에서 리액트 컴포넌트로 옮기는 중이라 타입스크립트 에러부터 시작해서 자잘하게 계속해서 크고 작은 에러들을 마주하고 있다. 위 에러의 원인은 input 안에 다른 태그를 포함할 수 없다는 내용이다. 당연한 소리인데 옮기다가 태그 여닫는 걸 잘못한 모양이다. 이런걸로 에러떠서 시간 낭비할때 진짜 현타온다 ㅎ Problem .... Solution 리액트는 label for 대신에 htmlFor 를 사용한다. checked 도 그냥 쓸 수 없고 defaultCheck={isCheck} 로 만들어서 useState, useEffect 엮어서 쓴다. 아......... svelt >>>> vue >>>>>>>>>>> react 선호인데 리액트 간만에 하려니 귀찮....... 번거롭다. ....

자바스크립트를 사용하지 않고도 가장 쉽고 간편하게 레이지로딩을 구현할 수 있습니다. lazy attribute loading 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. eager: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값) lazy: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다. 찾아본 글 중에 제일 좋았던 글 번역 : 웹 성능 최적화를 위한 Image Lazy Loading 기법 :: 이뇽의세상 (tistory.com..

코로나와 함께 방치되었던 블로그를 심폐소생하려하니 스킨이 마음에 안들어서 커스텀해볼까란 생각만 백년째하다가 개발자 블로그용 스킨이 있지 않을까 싶어서 찾아보이 이걸 가장 많이 쓰고 있었다. https://pronist.tistory.com/5 hELLO 티스토리 스킨을 소개합니다. hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 pronist.tistory.com https://github.com/tidory/hello GitHub - tidory/hello: 😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨 😎 당신의 멋진 블로그에 걸맞는 최고의 ..

갤럭시 폴드4 (Galaxy Fold 4) 가로폭 - 접힌 상태 : 345px - 펼친 상태 : 691px 디바이스에서 아래 URL에 접속하면 직접 테스트 해 볼 수 있습니다. [test] viewport / userAgent (codepen.io) [test] viewport / userAgent ... codepen.io 구글 인스펙터로 접힌 폭이 280px 인줄 알고 작업했는데, 실제 디바이스랑 달라서 확인해봤다. 따라서 폴드 대응을 위해 미디어쿼리를 @media screen and (max-width: 280px) { }로 잡았다면 적용이 안되고 있을 것!!! 처음에 갤폴드 280 이라도 들었을 때, 왜 이딴걸 만들어서 고통을 주나 싶었는데 이제는 반쪽 화면 해상도도 345 라니 다행이다 싶다 ㅋ..

마크업 개발자란?마크업 개발자는 웹 개발 과정에서 주로 HTML, CSS, 그리고 종종 JavaScript를 사용하여 웹 페이지를 만드는 전문가입니다. 이들은 디자이너가 제공한 디자인을 기반으로 웹 페이지의 구조와 레이아웃을 작성하며, 사용자 경험을 향상시키기 위해 웹 페이지에 필요한 시각적인 콘텐츠를 구현합니다. 주요 업무 및 책임에는 다음이 포함될 수 있습니다:HTML/CSS 작성: 마크업 개발자는 웹 페이지의 기본 구조를 정의하기 위해 HTML(하이퍼텍스트 마크업 언어)를 작성하고, CSS(캐스케이딩 스타일 시트)를 사용하여 페이지의 스타일 및 레이아웃을 설계합니다.반응형 웹 디자인: 다양한 디바이스 및 화면 크기에 대응하기 위해 반응형 웹 디자인 기술을 사용하여 웹 페이지를 개발합니다.크로스 브라..

흠.... vue2.7 + vite (windows 환경) 쓰고 있는데 vue-lottie 쓰려고 예제대로 다 했는데 계속 이 에러가 뜸 검색해도 방법을 모르겠고 미치겠네..... 같은 에러 고치신분 있으면 댓글 좀 달아주세요 ㅠㅠㅠㅠ // package.json { "name": "vue", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite --host", "build": "vite build", "preview": "vite preview", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "chromatic": "npx..

세로 모니터 화면 분할하는 방법 2분할 가능 (2023년) - 사이트맵 (sightmap.co.kr) 세로 모니터 화면 분할하는 방법 2분할 가능 ([currentyear]년) - 사이트맵 세로 모니터 화면 분할하는 방법을 소개해드리려고 합니다. 평소에 윈도우 기능으로 윈도우키 + 방향키로 화면을 분할해서 사용하시는 분들이 많았을 겁니다. 그러나 이 기능은 가로 모니터일 sightmap.co.kr

저녁 회식으로 다녀왔는데 너무 좋았다! *2인 기준 1보틀 주류 필수 주문