기존 프로젝트에서 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-label aira-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: hid..
Class 선택자 .클래스명 .gnb { ...... 태그 선택자 태그명 body { ..... ID 선택자 #ID명 #gnb { ..... 전체 선택자 * * { ..... 속성 선택자 [ ] a[title = "daum"] a태그에 title이 daum인 것 부모 자손 선택자 선택자1 선택자2 a .daum {.... 선택자 사이에 공백 넣기 자식 선택자 선택자 > 선택자 body > .gnb { .... 공백과 다른 점은 직계 자손만 선택 가능 인접 형제 선택자 선택자 + 선택자 a + ul { .... 선택자 바로 뒤에있는 태그가 선택됨 일반 형제 선택자 선택자 ~ 선택자 ul ~ span { .... ul 아래 있는 모든 sapn 태그 요소 선택됨 가상선택자 : a:hover 등 태그: nth-..
top: 50%; left: 50%; transform: translate(-50%, -50%); 흔히 가운데 정렬을 할 때 많이 사용한다. 뭔가 가운데 정렬이라 하면 뭔가 저 top: 50% left: 50%만으로 될 것 같아 보였다. (잘 모르는 나의 기준으로 봤을 때) 그런데 왜 가운데 정렬을 하고자 할때 매번 translate -50%, -50%가 쓰였다. 이 부분이 이해가 바로 되지 않아서 정리한 글 left: 50%를 적용하면 부모의 크기를 기준으로 적용된다. 부모 크기의 50%지점으로 사각형이 이동한 것을 볼 수 있다. transform: translate(-50%, 0);을 적용하면 -50% : 왼쪽으로 본인의 크기의 50%만큼 이동 - 50%이 아니라 50%였다면 오른쪽으로 이동 위 사진..
