개강하고 보니 학교 홈페이지가 리뉴얼 됐다. 리뉴얼 된 홈페이지가 개인적으로 불편하다고 느껴지는 부분이 있어서 내 맞춤형으로 구글 확장 프로그램을 만들어봤다. 불편하다고 느꼈던 점 1. 너무 진한 컬러감 컬러는 취향차이일 수 있으나 내가 느끼기엔 너무 밝고 쨍해서 눈이 아프다고 느껴졌다. 그래서 배경 컬러를 변경해보았다. 변경 전 변경 후 2. 메뉴 접근 이전에는 상단에 클래스넷 링크 버튼이 바로 있어서 접근하기 용이했는데 업데이트 되고 난 후에는 main > my hongik > 클래스넷으로 뎁스가 깊어졌다 그래서 내가 자주 사용하는 메뉴들만 몇개 뽑아서 하단에 고정시켰다. (이미지 속 빨간테두리) 메뉴에 hover 효과도 넣어줬다. 작업과정 https://developer.chrome.com/docs..
기존 프로젝트에서 1.2.3 버전을 사용하고 있었는데 2.0.8버전으로 msw가 업데이트 되면서 너무 많은 것이 달라졌다. 이전버전) 로그인 mock api (1.2.3) import { rest } from 'msw' const loginHandler = rest.post( '/api/auth/signin', (req, res, ctx) => { const { email, password } = req.body if (email === 'qwe@qwe.com' && password === 'qwer1234!') { return res( ctx.status(200), ctx.json({ accessToken: '12343', refreshToken: '12342', }), ) } else { return..
기존 라우팅 방식 //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..
