KBW's cosmos

유튜브 등을 보면 영상이 올라온 경과 시간등이 표시된다. 커뮤니티 등을 개발하다보면 글 작성 경과 시간을 표시해줄 필요가 있는데 Dayjs를 사용하면 간단하게 구현할 수 있다. Dayjs는 기존의 구린 자바스크립트 기본 날짜 함수인 Date를 개선시켜준 라이브러리로 무척 가볍고 사용하기 편하다. Day.js · 2kB JavaScript date utility library 2kB JavaScript date utility library day.js.org 자바스크립트에서 날짜를 다룬다면 무조건 무조건 무조건 쓸 것을 추천한다. 우선 dayjs 라이브러리를 설치해준다. npm i dayjs 경과시간 함수를 만들기 위해선 duration 플러그인을 사용해야한다. Day.js · 2kB JavaScript ..

우선 기존에 사용되던 defaultProps는 더 이상 사용되지 않는다. (참고↓) RFC: createElement changes and surrounding deprecations by sebmarkbage · Pull Request #107 · reactjs/rfcs This proposal simplifies how React.createElement works and ultimately lets us remove the need for forwardRef. Deprecate "module pattern" components. Deprecate defaultProps on function components. ... github.com 가장 쉽게 사용할 수 있는 방법은 optional argume..

Create NextApp with Typescript npx create-next-app@latest --ts # or yarn create next-app --typescript 프로젝트가 만들어지고 폴더가 생기면 해당 프로젝트 폴더로 이동 Install TailwindCSS npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Configure template paths /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ]..

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com Zustand의 Persist라는 middleware를 사용하면 localStorage와 연동하여 자동으로 전역 상태 관리 내용을 localStorage에 저장시키고 관리할 수 있다. (위 링크 참고) localStorage는 브라우저를 닫아도 그대로 남아있기에 창을 닫아도 상태 값이 남아있어야 하는 경우 유용하게 사용할 수 있다. 필..

npx eslint --init 터미널을 키고 위 명령어를 입력하여 .eslintrc.js 파일 만들기 위와 같이 질문에 체크하면 된다. 중간에 Which style guide do you want to follow?에는 에어비엔비 스타일로 해도되고 취향것 하면 된다. 그럼 추가로 dependencies가 필요하다고 하는데 설치하면된다. 필자는 npm으로 설치했다. .eslintrc.js module.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:react/recommended', 'standard' ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: {..

interface MemberInfoTextProps { isBold: boolean; fontSize: string; fontColor: string; textAlign: string; } export const InfoText = styled.p` font-weight: ${props => props.isBold ? "bold" : "normal"}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; text-align: ${props => props.textAlign}; ` 위와 같이 interface로 props의 속성들을 정의해주고 괄호 안에 이 interface를 넣습니다. 그리고 ${}로 props를 받은 뒤..