분류 전체보기 (129) 썸네일형 리스트형 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.. 가상화폐를 AI로 의인화 한다면 ? NovelAI는 AI를 통해 소설을 쓰고, Text 만으로 Image파일을 생성해주는 AI 서비스를 제공중이다. 실제 Keyword를 입력하면 이유를 알 수 없는 19금 성인 Img파일을 자주 생성해주는데 그 중에서도 최대한 여러번 걸러서 적당한 사진들을 추려왔다. 각 코인마다 검색어에 해당 코인을 입력하였고, 너무 테마에 맞지 않는 코인의 경우 색깔, 컨셉등을 약간 추가하기도 하였다. AI의 수준이 어디까지 도달했는지 그냥 재미로만 봐주시길 바랍니다. 1. Bitcoin 2. Ethereum 3. Tether 4. BNB 5. XRP 6. Dogecoin 7. Cardano 8. Polkadot 9. Toncoin 10. Solana ??? CRYPTO WINTER 버전 표기 방법(Semantic versioning specification, SemVer) 버전 표기방식 중 SemVer 표기 방식이 있다. 모든 사람이 프로그램 버전을 SemVer 방식으로 표기하지는 않지만 가장 널리 쓰이는 방식이기도 하다. 1.0.0 ver. 위와 같이 총 3자리 숫자가 있으면 각 숫자마다 다음과 같이 해석이 가능하다. 첫번째 자리: 큰 변화가 있을때 변하는 숫자로 대대적인 리뉴얼, 큰 업데이트가 있음을 의미한다. ( 1.0.0 -> 2.0.0 은 프로그램 개편의 수준까지 보아도 된다.) 두번째 자리: 중요한 업데이트 보다는 일부 기능 추가, 및 크게 중요하지 않은 업데이트를 포함한다 세번째 자리: 패치 or 버그 수정을 표현함으로 세번째 자리 숫자가 높은 만큼 수정횟수가 많았단 뜻이다. 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 ··· 8 9 10 11 12 13 14 ··· 17 다음
