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

기존 프로젝트에서 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컴포넌트를 리턴 잘 적용된 모습

1. Aria-labelaira-label은 웹 페이지에서 스크린 리더 사용자에게 정보를 전달하는 데 사용되는 HTML 속성요소가 시각적으로는 명확한 정보를 제공하지만 스크린 리더 사용자들이 이해하기 힘들기 때문에aira-label을 사용해서 요소의 기능이나 목적을 설명할 수 있음검색span이나 div 태그에서 aria-label을 사용할 땐 role 속성을 함께 써주는 것이 좋음 2. sr-only스크린리더에서는 읽을 수 있지만 화면에는 보이지 않게 하는 방법 (aria-label과 비슷한 역할을 함)아래의 코드를 사용함.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidde..

Class 선택자.클래스명.gnb { ......태그 선택자태그명body { .....ID 선택자#ID명#gnb { .....전체 선택자** { .....속성 선택자[ ]a[title = "daum"] a태그에 title이 daum인 것부모 자손 선택자선택자1 선택자2a .daum {.... 선택자 사이에 공백 넣기자식 선택자선택자 > 선택자body > .gnb { ....공백과 다른 점은 직계 자손만 선택 가능인접 형제 선택자선택자 + 선택자a + ul { ....선택자 바로 뒤에있는 태그가 선택됨일반 형제 선택자선택자 ~ 선택자ul ~ span { ....ul 아래 있는 모든 sapn 태그 요소 선택됨가상선택자: a:hover 등태그: nth-child(n) n번째 선택.class:nth-of-ty..