참고https://react.dev/reference/react-dom/createPortal createPortal – ReactThe library for web and native user interfacesreact.dev https://abangpa1ace.tistory.com/entry/React-Portal-%ED%8F%AC%ED%83%88 [React] Portal (포탈), Modal 구현하기회사에서 선배와 React로 모달 구현에 대해 고민하다가 알게된 내용이었다. 우리 회사 프로젝트는 Vue를 사용하기 때문에, 플러그인(this.$modal) 메서드를 통해 루트에 모달 컴포넌트를 주입, 삭제해abangpa1ace.tistory.comhttps://dev-bomdong.tistory.c..
개발 환경 - React: 18.2.0 (vite 5.0.8.) - Storybook: 8.0.2. 참고 https://velog.io/@93minki/Storybook-Chromatic-%EC%9C%BC%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 Storybook Chromatic 으로 배포하기 스토리북 배포하기 공식 문서를 참고 했다.공식문서에 상세하게 절차가 나와 있지만 조금 더 상세하게 알아본다.우선 Next 또는 React 프로젝트를 하나 생성한다.그리고 npx storybook@latest init 명령어 velog.io https://min-kyung.tistory.com/160 Chromatic으로 Storybook 지속적 배포하기 (Github Ac..
프로젝트 환경 - react: 18.2.0 (vite 5.0.8.) - SCSS - storybook: 8.0.2. 참고 https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth frontend guides are created by Storybook maintainers and peer-reviewed by the open source community. storybook.js.org 스토리북? 프로젝트의 컴포넌트들을 문서화하여 협업을 할 때 컴포넌트가 잘 만..
Discord 설정 1. 푸쉬 알림을 받을 채널 설정(톱니바퀴 모양) 클릭 2. 연동 > 웹후크만들기 버튼 클릭 3. 이름 변경 후 웹후크URL 복사 클릭 github 설정 1. 알림을 받을 깃허브 레포지토리 > 설정 > 웹후크 > 웹후크 추가 버튼 클릭 2. payloadURL에 아까 복사한 링크 + /github 입력 3. 원하는 설정 선택 후 Add webhook 버튼 클릭 디스코드 알림
참고 https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip background-clip - CSS: Cascading Style Sheets | MDN The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box. developer.mozilla.org 코드 - background-clip을 사용하면 border-radius를 적용할 수 있음 See the Pen border gradation by 이아름 (@aahreum) on CodePen.
버전 - React 18.2.0 (vite) - sass 1.70.0 파일 구조 변수파일을 쓰는 곳에서 매번 불러오기에는 불편함을 느껴서 변수를 불러오는 공통 SCSS 파일을 추가해주었다. // common.scss @charset 'UTF-8'; @use 'scss-reset/reset'; @forward './base/_variablesColor'; @forward './base/_variablesSize'; @forward './base/_variablesFont'; @forward './base/fontFace'; 하지만 이렇게 모아뒀어도 매번 SCSS를 작성할 때 매번 파일을 불러오는것도 번거로운 일이다. 그럴 때에는 전역에서 SCSS를 사용할 수 있도록 vite.config.ts 파일에 설정을..
