FrontEnd

tailwind에서 제공하는 단축어 사용 Handling Hover, Focus, and Other States - Tailwind CSSUsing utilities to style elements on hover, focus, and more.tailwindcss.com 그러나 내가 쓰려는 건 없다...  tailwind + CSS 직접 작성/* 토요일 */#calendar-body span:nth-child(7n - 1) { @apply text-primary-500;}/* 일요일 */#calendar-body span:nth-child(7n) { @apply text-red-500;} 기본 CSS 적용하는 방법 + @apply 디렉티브

Tailwind CSS는 일반적으로 인라인에 사용하기 때문에 html 코드가 길어져서 가독성을 저해한다는 단점이 존재한다.그래서 Tailwind CSS가 너무 길면 줄바꿈을 실행하는 방법을 찾아봤다.   Break long class names into multiple lines? [Prettier Plugin] · tailwindlabs tailwindcss · Discussion #7763Hey guys, it's not uncommon for class names to become very long, it's pretty hard to maintain and read. I somehow always break those class names into multiple lines manually, se..

CSS 확장자 파일에 작성한 내용인데 CSS에는 @tailwind라는 문법이 없기 때문에 발생하는 경고 메시지이다. vscode의 settings.json의 CSS Lint:Unknown At Rules 설정을 바꿔준다.

윈도우 Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com 1. nvm-window 최신 버전 다운로드   2. 설치 가능한 노드 버전 확인npm list available  3. 새로운 노드 버전 설치nvm install 18.20.4  4. 설치된 노드 버전 목록 확인nvm ls  5. 노드 버전 변경nvm use 18.20.4

문제 상황 폰트를 불러오는데 있어서 콘솔 창에 이런 오류가 떴다.  해당 오류의 원인은 크게 3가지가 될 수 있다.잘못된 경로파일이 없는 경우빌드 설정 문제 나의 경우 1 + 3번이 결합되며 발생한 문제라고 할 수 있다..  기존 세팅tsconfig 파일에 baseUrl을 src로 지정해놨기 때문에 폰트를 import 할 때 절대경로의 시작이 src 폴더라고 생각해 src > assets > fonts 폴더에 폰트들을 두었다. @font-face { font-family: "Pretendard"; font-weight: 400; src: url("../assets/fonts/Pretendard-Regular.woff") format("woff"); }src > assets > font..

지난 게시글에 npm으로 라이브러리를 배포했으나, 해당 라이브러리를 TS 환경의 프로젝트에서 사용하려고 하면 타입 에러가 발생했다.이는 라이브러리의 타입 정의가 없어서인데, 즉 쉽게 말해 dist 폴더에 index.d.ts 파일이 없기 때문에 발생한 것이다. 그렇다면 라이브러리에 적합한 타입 정의를 주어(= index.d.ts 파일을 생성하여) TS 환경의 프로젝트에서도 사용가능하게 만들어야 한다. 우선 그렇다면 dist 폴더는 무엇이고 어떤 역할을 할까?  distdistribution(유통, 배포)의 약자실제 운영 환경에서 사용되는 축소/연결 버전ts 환경의 프로젝트를 빌드하면 js 코드로 컴파일된 결과물이 dist 폴더에 담긴다. 배포된 라이브러리를 install 하여 사용할 때는 해당 라이브러리의..

1. 컴포넌트 빌드npm run build  2. npm 로그인npm login  3. 퍼블리싱npm publish --access=public(private는 유료) storybook-test라는 이름이 적합하지 않아서 생겼던 에러→ 이름을 storybook-yong으로 바꾸니 해결되었다.  ⬇npm 라이브러리로 등록 완료   💥 import 해서 사용할 시 TS 에러 발생 !→ 다음 글에 정리 ! [ 참고 자료 ]간단한 NPM 라이브러리 배포해보기 2탄 (CLI 간단한 라이브러리 만들기 & 모든 환경 지원, ESM, CJS, TS) - 정현수 기술 블로그npm 패키지 배포 가이드자바스크립트 패키지 발행하기 (npm publish)

회사 프론트엔드 개발 문서 규칙에 적혀있었다. 그래서 그 이유를 한 번 더 되짚어 보았다. 브라우저 렌더링 과정을 생각해보면 DOM이 변경될 때마다, DOM 트리 생성 및 파싱 작업을 재수행한다. (Reflow가 일어난다) → 비효율적이고 렌더링 부담이 큼 Virtual DOM이 이 문제를 해결 Virtual DOM은 자바스크립트 객체이기 때문에 변경에 대한 부담이 적다. Virtual DOM과 실제 DOM의 차이점을 파악하여 그 부분만 변경되도록 한다. (Reconciliation) → React와 Vue 등은 가상 DOM을 사용하고 있다. 결론적으로 DOM을 직접 조작하는 것은 렌더링 성능에 큰 영향을 끼치지 때문에 특별한 경우가 아니면 getElementById 등의 메서드를 통해 JS로 DOM을 ..