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..
라이브러리
프레임워크원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미프레임워크는 애플리케이션 코드가 프레임워크에 의해 사용프레임워크에는 분명한 [제어의 역전] 개념이 적용되어 있어야 함애플리케이션 코드는 프레임워크가 짜놓은 틀에서 수동적으로 동작됨즉, 라이브러리를 포함함, 이미 뼈대가 갖춰짐 ex) Spring, Django, Vue.js, Next.js 등 라이브러리소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임즉, 특정 기능을 모아둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접 제어단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리..
[ React ] SelectBox 컴포넌트 구현단순한 SelectBox 만들기 ~ 요구사항 분석필요한 컴포넌트SelectorBox - 선택된 값이 표시되는 요소OptionListBox - 옵션 리스트 팝업OptionItem - 옵션 리스트 내의 각각의 아이템CaretIcon - 옵션 리스트 팝업zodev.tistory.com지난번 만든 SelectBox에서 더 나아가 검색을 통해 옵션 리스트를 불러오는 SelectBox를 만들어봤다. 기본 틀은 이전과 동일 !! 추가할 내용InputInput에 따라 달라지는 options 1. Input 입력된 값을 보여주기 위해 keyword 변수를 생성했다.// Input 컴포넌트에 바인딩하는 Keywordconst handleInput = (e: React...
단순한 SelectBox 만들기 ~ 요구사항 분석필요한 컴포넌트SelectorBox - 선택된 값이 표시되는 요소OptionListBox - 옵션 리스트 팝업OptionItem - 옵션 리스트 내의 각각의 아이템CaretIcon - 옵션 리스트 팝업의 열림/닫힘을 표시하는 아이콘 구현할 동작SelectorBox를 누르면 OptionListBox가 열린다.OptionListBox에서 특정 OptionItem을 선택하면 OptionListBox가 닫히면서 SelectorBox에 선택한 값을 표시한다. (상위 데이터 변경)OptionListBox의 상태에 따라 CaretIcon을 바꿔준다.외부 영역을 클릭했을 시에도 OptionListBox를 닫아준다.마우스 hover 상태의 OptionItem은 밝은 색상..
지난 번에 react-datepicker 라이브러리를 커스텀하여 DatePicker 공통 컴포넌트를 만들었는데, 아무래도 라이브러리를 커스텀하기 때문에 불필요한 스타일을 빼고 원하는 스타일을 넣는 과정 등이 꽤나 불편하게 느껴졌다. (CSS 코드가 많이 더러워졌다...ㅜ) 그래서 캘린더 만든 김에 DatePicker도 직접 만들어 보려고 한다.물론 라이브러리가 제공하는 기능이 훨씬 많지만 내 프로젝트에서 필요한 기능만 컴팩트하게 만들어보려고 한다. 그래서 일단 사용자 입력은 제외하고 날짜 선택만 가능하도록 했다. String, Date 타입에 대한 고민데이터 자체는 Date 타입이어야 date-fns 라이브러리의 날짜 관련 함수를 사용하기 편리하다.그러나 사용자에게 시각적으로 보여지는 포맷은 “YY..
요구사항 분석오늘 날짜이번 달 정보시작하는 요일(1일)몇 일까지 있는지몇 주까지 있는지이전 달, 다음 달 이동 기능 구현 고민Date 객체를 더 쉽게 사용할 수 있게 도와주는 date-fns 라이브러리 함께 활용오늘 날짜 → new Date()시작하는 요일 → startOfMonth + getDay몇 일까지 있는지 → getDaysInMonth몇 주까지 있는지 → getWeeksInMonth다음 달 → addMonths이전 달 → subMonths 구현1. 기준일 변수 생성const [baseDate, setBaseDate] = useState(new Date());달의 시작 요일, 일 수 등을 구하려면 기준일이 필요하다. 2. 요일 리스트캘린더의 날짜 부분은 Grid로 구현할 것이기 떄문에 시작 요일..
React에는 아주 많은 달력 라이브러리가 있지만 가장 기본적이면서도 심플한 react-datepicker 라이브러리를 활용해봤다 !사용 방법이 간단하고 제공하는 기능이 꽤나 많다는 점이 좋았다. 라이브러리 설치 및 사용Install$ npm i react-datepicker$ npm i --save-dev @types/react-datepicker Importimport DatePicker from "react-datepicker";import "react-datepicker/dist/react-datepicker.css"; 커스텀 참고 React Datepicker crafted by HackerOne reactdatepicker.com Date PickerDefault selected는 필수..
지난 게시글에 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)
