개발자 페이지 (48) 썸네일형 리스트형 Gatsby 연관 site 1. https://www.gatsbyjs.com/ The Fastest Frontend for the Headless Web | Gatsby Gatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster with Gatsby Cloud. www.gatsbyjs.com static website 개설을 간편하게 해주는 개츠비 웹사이트로 React JS를 사용하여 사이트를 구현할 수 있다. gatsby-graphql 을 통해 props를 살펴보는 기능도 편리하다. 2. https://picocss.com/docs/ D.. React JS / Typescript / framer-motion 02 Framer-motion에서 Slider를 구현하면서 결국 인도 IT 유투버에게 가르침을 받아 다음과 같은 코드를 완성하였다. 아래 문제의 그 Slider... 양방향으로 slide가 넘어가게끔 되어있는데 left 갔다가 right로 빠지면 exit 애니메이션이 의도한 바와는 반대X축으로 이동하는 문제를 나타나서 며칠동안 앓고있었다. 의 custom ={} Variants값이다. const rowVariants = { hidden: (direction: number) => ({ x: direction > 0 ? window.outerWidth : -window.outerWidth, }), visible: { x: 0, }, exit: (direction: number) => ({ x: direction .. React JS / Typescript / framer-motion React 라이브러리 중 "framer-motion" 라는 오픈소스가 존재하며, 다양한 애니메이션 효과를 간편하게 사용가능하다. npm i framer-motion https://www.framer.com/docs/ Documentation | Framer for Developers An open source, production-ready motion library for React on the web. www.framer.com 다음과 같이 import 하여 motion, AnimatePresence 등을 사용할 수 있다. import { motion, AnimatePresence } from "framer-motion"; 위 링크에서 API Documentation에 자세한 내용이 있으며, Reac.. ?? / nullish coalescing / 물음표 두개 / 자바스크립트 자바스크립트에서 "??" 를 처음봤을때 굉장히 당황하게 했다. 분명 어디선가 배운거 같은데 기억이 잘안나고 검색하려고 ?? 두개를 치면 엉뚱한 결과가 나오기도 한다. Nullish coalescing operator / null병합 연산자 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. Left ?? Right 보통 왼쪽이 참이면 왼쪽 값을 반환하고, 반대의 경우 오른쪽 값을 반환한다고 이해하고 있다. 단순 Boolean 값, 0, null, undefined,"" 등이 예기치 못한 결과를 내는 것을 예방할 수 있다. gh-pages 사용법 / 링크 https://byul91oh.tistory.com/209 Recoil, Typescript/ useRecoilState, useRecoilValue Recoil Library Recoil은 페이스북에서 만든것으로 전역 상태관리 라이브러리다. 자세한 설명은 공식문서 https://recoiljs.org/ Recoil 구성 요소 간단정리 (React - Typescript) 1. RecoilRoot 리코일은 상위 디렉토리(부모)에 아래와 같이 (Root.tsx)에 씌워놓음으로써 다른 요소들 사용이 가능하다. 2. Atom ;물질을 이루는 가장 작은 입자이며, 구체적이고 원소를 셀수 있는 Atom을 별개의 장소에 보관하여 필요시 끌어다 쓰는 컨셉으로 Atom이란 단어를 사용한 것으로 보인다. 마치 요리할때 자주 사용하는 재료들을 소분하여 (양파, 당근, 버섯, 파, 등등...) 요리할때 마다 필요한 곳에 쓰는 것을 추상화도 해보았다. Atom은 State.. React /Typescript: react-hook-form 세팅 React JS에는 react-hook-form 이라는 library를 사용할 수 있다. form 태그에서 input 값이 많아지면 관리가 까다로워 지는데 그런 번거로움을 도와주는 유용한 기능이다. 터미널에서 아래와 같이 설치하고 npm install react-hook-form https://react-hook-form.com/get-started 위 링크로 가면 스타트 가이드라인이 있으니 자세한 내용 확인. 아래 코드는 react-hook-form 활용을 위한 초기 세팅 코드이다. 1.useForm 을 react-hook-form에서 가져온다. 2. ToDoList 함수에 {register, handleSubmit, setValue}갑을 useForm으로 부터 가져온다. 3. form 태그에 onsu.. Typescript / interface 기능 자바스크립트에서 추가로 사용가능한 타입스크립트는 꼼꼼한 변수 타입 체크로 해당 변수가 String, number, boolean... 등 값이 맞는지 확인하여 사전에 경고를 줌으로써 개발자들의 오류 가능성을 최대한 배제시켜주는 고마운 기능임과 동시에 모든 변수에 값을 사전에 지정해줘야 하기 때문에 상당히 귀찮은 면모도 가지고 있다. 그럼에도 불구하고 Typescript는 error 발생시 어디에서 누가 문제가 되었는지 좀 더 정확히 알려주기 때문에 결과적으로 개발에 소요된 시간을 줄이는 결과를 보여준다. 위의 예시는 "interface Name {}"을 사용하여 각 form에 들어가는 값들의 타입을 지정해둔것으로 required가 아닌것은 변수 뒤에 "?"를 추가해주어야 한다. 예를 들어 lastName.. 이전 1 2 3 4 5 6 다음
