TypeScript4 Next.js + TypeScript ) 스크롤 내릴 시에 특정 컴포넌트 숨기기 스크롤시 상단 메뉴바 숨기기 작동화면 Code NavBar.tsx import { useScrollDirection } from "./useScrollDirection"; import styled from "styled-components"; const Header = styled.div` position: sticky; height: 3rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; `; const HeaderDown = styled.div` top: -3rem; `; const NavBar = () => { const scrollDirecti.. 2022. 7. 15. Next.js ) Input 입력값 태그로 변환하기 (TypeScript) 태그 등록 Input 만들기 작동화면 Code export default function TagInput() { const [input, setInput] = useState(""); const [tags, setTags] = useState([]); const [isKeyReleased, setIsKeyReleased] = useState(false); // input 입력값 'input' state 에 등록 const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; // 태그 해제하기 const deleteTag = (index: number) => { setTags((prevSt.. 2022. 7. 15. Next.js + TypeScript ) event 의 Type은 어떻게 지정해야할까? Next.js (React) + TypeScript : Event Type 지정하기 Input Event Input 태그에는 onChange, onKeyUp, onKeyDown 등의 이벤트가 있습니다. 이 이벤트를 통해 함수를 실행할 때에는 onChange const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; onKeyDown, onKeyUp const onKeyDown = (e: React.KeyboardEvent) => { // ... } const onKeyUp = (e: React.KeyboardEvent) => { // ... } 위와 같이 이벤트의 타입을 지정해주면 됩니다. Sele.. 2022. 7. 14. Vuejs ) TodoApp (Vue2에서 Vue3으로) TypeScript 를 적용해 Vue2, Vue3 만든 TodoApp 비교 Inflearn 강좌 "Vue.js+TypeScript 완벽가이드" (장기효) 를 참고하며 제작한 Vue2 버전의 TodoApp 을 Vue3 Options API 기반으로 다시 제작해보았습니다. 아래 링크를 통해 Github 로 접속한 뒤 README 파일의 브랜치 설명을 참고하셔서 Vue3 버전의 전체 코드를 확인하실 수 있습니다. Github 에서 확인하기 실행화면 코드 비교 TypeScript 사용 두 개의 프로젝트 모두 vue-cli 로 프로젝트를 생성하는 시점에 TypeScript를 적용해 생성했습니다. Vue 2 버전에서는 의 형태로 script 코드를 작성해야합니다. defineComponent 는 전달된 객체를 반환.. 2022. 3. 20. 이전 1 다음 반응형
