개발자 페이지/React JS, Next JS (14) 썸네일형 리스트형 camelCase vs snake_case 코딩스타일에 대해 간단히 알아보자🐪🐍 변수 이름, 함수 이름 또는 식별자 이름을 작성하는 데 사용되는 코딩 스타일 중 카멜케이스(camelCase)와 스네이크케이스(snake_case)가 있다. camelCase(카멜케이스): 변수명이나, 함수명에서 첫단어는 소문자로 시작해서, 그다음 단어부터는 대문자를 쓰는 형식의 스타일로 그 모양이 낙타를 닮았다고 해서 붙여진 코딩 스타일의 이름이다. 예) helloWorld, myFunction snake_case(스네이크케이스): 단어 사이에 언더스코어(_)를 넣어 작성하는 스타일로, 예) hello_world, my_function 등 과 같이 작성한다. 이또한 언더스코어가 뱀과 같다고 해서 붙여진 이름이다. 이 처럼 코드를 작성할 때 가독성을 높이고 일관성을 유지하기 위해 이러한 스타일의 코딩을 .. Pagination NEXTJS / Next JS 페이지 항목 웹사이트를 만들때 Pagination라 하는 페이지 이동 항목은 필수적이다. NextJS를 사용하는 경우 Pagination이라는 컴터넌트를 별도로 만들어 두면 필요한 곳마다 동일한 형식의 Pagination을 구현하는데 있어 편리하여, 필수적으로 컴퍼넌트로 별도 구성을 해야한다. 위 스크린샷에 보면 Layout > div > Pagination 이 별도로 들어가 있음을 확인할 수 있는데, Pagination은 currentPage, handlePageChange, totalPage, pageSize를 prop으로 받고 있다. 아래는 export default 되고 있는 Pagination 코드이다. - startIndex: 0과 현재페이지 -3 한 값중 max값을 구하여 첫번째 index를 나타냄 - .. Planetscale, Prisma 요약 본 포스트는 Window 10 기준으로 작성되었습니다. 1. Planetscale https://planetscale.com/ PlanetScale: The world’s most advanced database platform PlanetScale is the MySQL-compatible, serverless database platform. planetscale.com Planetscale은 간략히 말하면 serverless MySQL 플랫폼입니다. 서버리스 환경에서 사용하기 적합한 데이터베이스로, AWS Lambda, Google Cloud Functions, Azure Functions 등과 같은 서버리스 환경에서 사용할 수 있으며 Node.js, Python, Go 등 다양한 언어에서 사용할 .. 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.. 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.. 이전 1 2 다음
