Library3 storybook react 컴포넌트는 재사용하여 생산성을 향상시켜준다 근데 그 컴포넌트 정보를 팀원에게 공유하자니 생각보다 이게 설명하기 힘들고 귀찮다 Next.js에서는 그런 당신을 위해 준비했습니다! 내가 말고 어느 대단하신분들이 만든 라이브러리! storybook! 컴포넌트 별로 문서화하고 테스트 해볼 수 있는 라이브러리라고 보면 될 것 같다 api 도 스웨거로 문서화하고 테스트해보듯이, 컴포넌트도 문서화로 쉽게 정리하고 조작하도록 돕는 것이다! 사용 세팅방법은 아래와 같다 리액트 앱(혹은 next.js) 설치 후 아래의 코드 실행하자 npx sb init --builder webpack5 그럼 설치 후 아래와 같이 묻는다 Do you want to run the 'eslintPlugin' migration on .. 2023. 1. 8. redux toolkit 라이브러리 설치 및 세팅 *아래의 프로젝트는 타입스크립트를 사용합니다. ts 를 사용하지 않는다면 js 파일로 만들어 주세용* 참고로 아래처럼 폴더를 만들어 파일을 넣어두는 것은 그저 편한 관리를 위한 것으로 공식 문서에서 권장하는 것이므로, 굳이 저렇게 안해도 제대로 로직만 잘쓰면 잘 돌아가긴 한당 그럼 일단 yarn으로 라이브러리 설치부터 하자 아래의 코드들을 터미널에 입력하여 라이브러리를 설치하자 yarn add @reduxjs/toolkit yarn add redux react-redux yarn add --dev @types/react-redux 그 후 프로젝트 폴더 내의 src 폴더에 store 폴더를 만든다 store 폴더 안에 hooks.ts 파일을 만들고 아래의 코드를 붙여 넣어주자 import { TypedUs.. 2022. 12. 14. classnames 사용법 classnames 모듈은 html요소에서 클래스를 조건부로 넣거나 빼줄때 따로 조건문 필요없이 쉽게 작성하게 해주는 라이브러리다 만약 내가 돈이 있을때만 'can-buy' 라는 클래스명을 추가하고, 돈이 없을때는 클래스를 빼고 싶다면 아래와 같이 조건문을 사용해서 클래스를 추가하는 방법을 사용할 수 있지만 export default Tok = () => { let hasMoney = true; const myClasses = [sleepy, hungry]; if (hasMoney) { myClass.push('can-buy'); } return ( Hello Tokkissi ) } classnames 라이브러리를 사용하면 자바스크립트 조건문을 사용하지 않고도 같은 의미를 말할수 있다. 아래와 같이 사용.. 2022. 11. 26. 이전 1 다음
