728x90 개발일지64 React Form event type (feat. 타입 단언 as) Form Event type 우리는 로그인이나 포스팅 등의 화면을 만들어줄 때 클라이언트가 입력하는 데이터를 입력받는 방법 중 하나로 onChange 등의 FormEvent를 이용해 원하는 값을 추출할 수 있다. 이때 이벤트 타입은 아래와 같이 사용될 수 있다. import { FormEvent } from "react"; export type FormEvents = FormEvent; export type InputEvent = FormEvent; export type LabelEvent = FormEvent; react에서 FormEvent 타입을 받아오고, 해당되는 element를 제네릭 타입으로 넣어주면 된다. onChangeHandler const [formData, setFormData] = .. 2023. 4. 13. [Github] 깃허브 토큰을 이용한 GithubAPI 사용 본 포스팅은 NextJS 13 환경에서 진행한 내용을 바탕으로 한다. GithubAPI 사용법은 공식 문서에 상세히 나와있기 때문에 사용법보다 토큰 만료 문제를 주로 다룬다. GithubAPI란? Github의 기능을 REST API 형식으로 사용할 수 있도록 도와주는 기능이다. https://docs.github.com/en/rest?apiVersion=2022-11-28 GitHub REST API documentation - GitHub Docs To create integrations, retrieve data, and automate your workflows, build with the GitHub REST API. docs.github.com 아래와 같이 사용할 수 있는 기능이 많다. 1. .. 2023. 3. 31. [CSS] 배포 사이트에 다운로드 폰트 적용하기 기본적으로 CSS에서 제공하는 폰트가 마음에 들지 않거나 내 프로젝트에 어울리지 않는 경우 간단하게 다운로드한 폰트를 프로젝트에 적용해볼 수 있다. 1. 폰트 다운로드 우선 마음에 드는 폰트를 다운받는다. https://fonts.cafe24.com/ 카페24 상업용 무료 폰트 다운로드 - 카페24 라이선스 걱정 없이 어디서나 사용할 수 있는 상업용 무료 폰트 fonts.cafe24.com 무료 폰트 사이트는 찾아보면 많이 있으니 참고하면 좋다. 2. 프로젝트에 파일 복사 위와 같이 다운로드한 폰트를 작업중인 프로젝트에 넣어준다. 필자는 styles/fonts/**.ttf 와 같이 저장해줬다. 3. CSS 설정 @font-face{} 를 이용해 불러올 폰트를 설정해준다. /* global.css */ @.. 2023. 3. 31. React/Javascript 부드러운 스크롤 이동 적용 부드러운 스크롤 적용 방법 behavior: "smooth" 속성을 scroll 이벤트와 scroll 메서드와 같이 사용하며 부드러운 스크롤 이동을 적용해볼 수 있다. 본 포스팅은 Nextjs13 환경에서 작성되었다. scroll 메서드 scroll() , scrollTo() scroll(x,y) || scroll(options), scrollTo(x,y) || scrollTo(options) 와 같이 사용할 수 있다. 사실상 두 메서드는 동일하게 작동한다. xy 좌표를 통해서도 사용 가능하며 options를 적용한다면 아래와 같이 사용할 수 있다. window.scroll({ top: 0, left: 0, behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동 }.. 2023. 3. 25. 이전 1 2 3 4 5 6 ··· 16 다음 728x90
