프로젝트 환경 - 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 스토리북? 프로젝트의 컴포넌트들을 문서화하여 협업을 할 때 컴포넌트가 잘 만..
버전 - 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 파일에 설정을..
기존 라우팅 방식 //router.tsx //app.tsx 달라진 라우팅 방식 브라우저라우터를 사용하지 않고 routeProvider를 사용한다. //router.tsx const router = createBrowserRouter([ { id: 'rootLayout', element: , children: [ { id: 'index', path: '/', element: , }, { id: 'edit', path: '/edit', element: , }, ], }, ]) //app.tsx const App = (): React.ReactElement => { return ( ) } NavLink 활용 `${styles.container} ${isActive && styles.active}`}> {men..
버전 1. react: 18.2.0 2. typescript 3. react-router-dom : 6.14.1 const PageNavWithHide = (): JSX.Element | null => { const location = useLocation() const hidePageNav = location.pathname === "/login" || location.pathname === "/signup" if (hidePageNav) { return null } return } login, signup일때 null을 리턴함 그외에는 PageNav컴포넌트를 리턴 잘 적용된 모습
https://ko.vitejs.dev/ Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev https://webpack.kr/ webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr Vite vs Webpack vite는 번들링을 생략해서 개발 서버의 시작속도를 높이고, HMR을 위해 네이티브 ES 모듈을 사용해서 코드의 변경사항을 빠르게 반영함 최소한의 설정으로도 개발을 진행할 수 있다는 것이 큰 장점 webpack은 프로젝트가 복잡하고 다양한 설정을 요구하는 경우에 사용하는 것이 적합 요즘 webpack에서 vite로 옮..
CORS란? Cross-Origin Resource Sharing(CORS)는 웹에서 발생하는 보안 정책 다른 도메인(Origin)간의 자원 공유를 제어하는 것 보안 상의 이유로 다른 도메인으로의 HTTP요청을 제한함 원인? 브라우저에서 다른 도메인에 있는 리소스에 접근하려고 할때 발생함 ex) A에서 실행중인 코드가 B에있는 api에서 http 요청을 보내려고 할때 통신을 차단하면서 CORS가 발생함 해결 방법 1. 서버에서 헤더 설정하기 Access-Control-Allow-Origin 헤더를 설정해서 허용할 도메인 명시 2. 크롬 확장 프로그램 사용하기 https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcel..
