개발 메모장 개발 메모장

react

• Javascript ES7 문법정리

  JS & TS 2023. 9. 28. 10:18

  JavaScript는 계속해서 진화하고 성장하는 언어입니다. ECMAScript 표준에 따른 여러 개정판 중 하나인 ES7(또는 ECMAScript 2016)은 이전 ES6의 대규모 업데이트와 다음에 소개할 ES8에 대한 준비를 위해 잠시 쉬어간다는 느낌이 드는 업데이입니다. 그렇기 때문에 ES7에서 추가된 업데이트 사항은 크게 2가지입니다. Array.prototype.includes 제곱 연산자(**) 1. Array.prototype.includes() ES7에서 가장 주목할 만한 변경 중 하나는 Array.prototype.includes() 메서드의 도입입니다. 이 메서드는 배열 내에서 특정 요소가 존재하는지를 판단하는 데 사용됩니다. 이전에는 Array.prototype.indexOf() 메서..

  Read More
• KeystoneJS로 간단하게 Admin페이지와 Headless CMS 만들기

  Tip 2023. 9. 6. 18:09

  KeystoneJS는 GraphQL을 기반으로 하는 CMS(Content Management System) 프레임워크입니다. React, Node.js, GraphQL을 기반으로 하며, GraphQL API를 통해 데이터를 관리하고, 웹사이트와 모바일 앱을 개발할 수 있습니다. 1. KeystoneJS의 주요 특징 GraphQL 기반의 API: KeystoneJS는 GraphQL을 기반으로 하는 API를 제공합니다. GraphQL은 구조화된 데이터를 효율적으로 조회할 수 있는 API 표준입니다. React 기반의 UI: KeystoneJS는 React를 기반으로 하는 UI를 제공합니다. React는 빠르고 유연한 UI 프레임워크입니다. Node.js 기반의 백엔드: KeystoneJS는 Node.js를 ..

  Read More
• Next.js에서 페이지 전환 효과 간단하게 적용하기

  Next.js 2023. 9. 4. 17:40

  Next.js는 페이지 전환 효과를 기본적으로 제공하지 않지만, framer-motion 라이브러리를 사용하면 쉽게 적용할 수 있습니다. 1. framer-motion 설치 우선, framer-motion을 설치해야 합니다. 다음 명령어를 실행하여 설치합니다. npm install framer-motion // or yarn add framer-motion 2. 페이지 전환 효과 적용 framer-motion을 설치했으면, 페이지 전환 효과를 _App.tsx 페이지에 적용하면 간단하게 끝납니다. import React from 'react'; import { AppProps } from 'next/app'; import { motion } from 'framer-motion'; import { useRo..

  Read More
• Next.js Image 태그 height auto로 사용하기 (update 13 version)

  Next.js 2023. 8. 4. 16:11

  이 글은 next v13.4를 기반으로 작성되었습니다. Next 12 버전을 기반으로 height auto Image태그를 작성한 지 오래되지 않아 13 버전에서는 더욱 간단하게 사용할 수 있게 되어 소개하려고 한다. // AutoHeightImage.tsx import Image, { ImageProps } from 'next/image'; interface IAutoHeightImage extends Omit { width?: string | number; alt: string; } const AutoHeightImage = ({ width = '100%', alt = '', ...props }: IAutoHeightImage) => ( ); export default AutoHeightImage; ..

  Read More
• JavaScript에서 바로 사용하는 Tip 4가지

  Tip 2023. 8. 1. 15:20

  1. Includes를 사용해 || 대체하기. ||는 JS를 활용한 개발을 하다 보면 정말 많이 사용하게 되는 없어서는 안 될 중요한 요소이다. 하지만 많은 것을 비교하는 상황이 된다면 오히려 코드의 가독성을 해치는 요소가 된다. 그럴 때 이 방법을 사용한다면 조금 더 가독성 좋게 사용할 수 있다. // ...other codes if ( isFirstLoading || isSecondLoading || isThirdLoading || isFourthLoading || isFifthLoading ) return 로딩 중... ; if ( [ isFirstLoading, isSecondLoading, isThirdLoading, isFourthLoading, isFifthLoading, ].includes..

  Read More
• React useEffect vs useLayoutEffect 차이점 알아보기

  React 2022. 12. 15. 16:29

  React를 사용하며 아마 가장 많이 사용하는 Hook을 말하라면 무조건 순위권 안에 들 Hook은 useEffect일 것입니다. 하지만 아래의 Flow 그림에서 보면 useEffect 이외에 useLayoutEffect라는 hook이 있다는 것을 알 수 있습니다. 둘의 차이는 간단하게 설명 가능합니다. Dom이 화면을 그린 뒤 호출되는 것이 useEffect 화면을 그리기 전에 호출되는 것이 useLayoutEffect입니다. 이렇게 말하면 와닿지 않을 수 있을 수 있겠지만 React내에서의 깜빡임 문제를 해소하려고 검색할 경우 가장 많이 나오는 것이 useLayoutEffect입니다. 아래의 코드를 살펴봅시다. import React, { useEffect, useState } from 'react'..

  Read More
• 개발자에게 유용한 툴

  Tip 2022. 12. 7. 17:30

  1. Bundle Phobia Bundlephobia | Size of npm dependencies Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle. bundlephobia.com 번들 포비아는 간단하게 NPM 패키지 이름을 입력하는 것으로 간단하게 번들 사이즈부터 다운로드 시간, 구성 요소, 알파벳별 구성요소의 사이즈까지 까지 모두 간단하게 확인할 수 있는 사이트입니다. 이외에도 package.json을 업로드하여 한번에 다양한 패키지를 동시에 확인하는 것 역시 가능합니다. 2. Googl..

  Read More
• React에서 조건부 렌더링을 사용하는 5가지 방법

  Tip 2022. 12. 1. 16:19

  React로 개발을 하다 보면 조건부 랜더링을 사용하는 경우가 무척 많이 있습니다. 물론 그 복잡도가 낮을 경우라면 간단하게 삼항 연산자로 처리하면 되지만 복잡해지는 경우도 많기 때문에 이 글에서는 조건부 랜더링을 처리하는 다양한 방법에 대해 소개해 보겠습니다. 1. && 사용하기 조건의 값이 0, false, undefiend가 아닌 경우 render 해 주며, 가장 짧고 간결하게 사용할 수 있습니다. const Test: React.FC = ({ anyProp }) => { ... return ( ... {anyProp && This is Show!!} ... } 2. Ternary operator True or False 형식에서 많이 사용하며 아마 React를 사용할 때 가장 많이 사용하는 방법입..

  Read More