참고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 스토리북? 프로젝트의 컴포넌트들을 문서화하여 협업을 할 때 컴포넌트가 잘 만..
참고 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 파일에 설정을..
개강하고 보니 학교 홈페이지가 리뉴얼 됐다. 리뉴얼 된 홈페이지가 개인적으로 불편하다고 느껴지는 부분이 있어서 내 맞춤형으로 구글 확장 프로그램을 만들어봤다. 불편하다고 느꼈던 점 1. 너무 진한 컬러감 컬러는 취향차이일 수 있으나 내가 느끼기엔 너무 밝고 쨍해서 눈이 아프다고 느껴졌다. 그래서 배경 컬러를 변경해보았다. 변경 전 변경 후 2. 메뉴 접근 이전에는 상단에 클래스넷 링크 버튼이 바로 있어서 접근하기 용이했는데 업데이트 되고 난 후에는 main > my hongik > 클래스넷으로 뎁스가 깊어졌다 그래서 내가 자주 사용하는 메뉴들만 몇개 뽑아서 하단에 고정시켰다. (이미지 속 빨간테두리) 메뉴에 hover 효과도 넣어줬다. 작업과정 https://developer.chrome.com/docs..
