전체 글 (166) 썸네일형 리스트형 타입스크립트로 변경하기(1) typescript 설치 npm install -D typescript @types/react @types/react-dom 위 명령어대로 ts를 설치합니다. vite.config.js를 .ts로 변경합니다. 루트 경로에 tsconfig.json, tsconfig.node.json 파일을 생성하며, src폴더 안에 vite-env.d.ts파일을 생성합니다. 이거는 npm init vite를 하고 typescript를 선택하면 자동적으로 생성한 시스템파일입니다. 새로운 ts프로젝트를 생성 후, 가져와서 붙여넣기해도 좋습니다. type전환 방법 간단한 변수는 직접 작성해도 됩니다. 좀 길고 복잡한 데이터 같은 경우 console.log에서 JSON.stringify(type.data)를 해서 console에.. Styled Component Styled Component란? Styled Component란 Css-in-JS라고 하는 JS파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리입니다. Styled Component 문서 설치방법 npm install styled-components 위 코드를 통해 설치합니다. package.json파일에 위와 같이 추가합니다. 로그인 페이지 생성하기 경로 생성 및 NavBar 생성 Outlet 중첩 개념을 사용합니다. 위 코드는 App.jsx파일입니다. components폴더 안에 NavBar.jsx 파일 생성한 후, pages폴더 안에 LoginPage폴더 생성 후, index.jsx파일 생성합니다. 로그인 페이지 UI 생성하기 Pokemon 포켓몬 사이트에 오신걸 환영합니다. 로그인 해주세요 LoginPage폴더 안에 index.jsx내용입니다. NavBar 컴포넌트 UI 생성하기 const [show, setShow] = useState(false) const listener = () => { if(window.scrollY > 50) { setShow(true) }else { setShow(false) } } useEffect(() => { .. 이전 1 ··· 6 7 8 9 10 11 12 ··· 56 다음
