react
-
Javascript ES9 문법정리JS & TS 2023. 10. 16. 15:40
ES9(ECMAScript 2018)은 특별히 새로운 기능이 많이 추가되지는 않았지만 지금도 항상 사용하는 내용들이 포함된 버전입니다. 1. 비동기 반복 (Asynchronous Iteration) ES9에서는 비동기 반복이 가능하도록 for-await-of 루프가 추가되었습니다. 이를 통해 비동기 데이터를 간편하게 반복할 수 있습니다. // 이전 const asyncData = [asyncFunc1(), asyncFunc2(), asyncFunc3()]; Promise.all(asyncData) .then(results => { for (const result of results) { console.log(result); } }); // ES9 const asyncData = [asyncFunc1(),..
-
Javascript ES8 문법정리JS & TS 2023. 10. 6. 13:43
2017년에 출시된 ECMAScript 8 (ES8)은 언어에 중요한 향상 및 추가 사항을 가져왔습니다. 이전 ES7일 때 변경사항이 적었던 것이 이것을 위해서라는 생각이 들 정도로 지금도 많이 사용하는 중요한 문법들이 추가된 버전이라고 생각합니다. 1. Async/Await ES8은 async 및 await 키워드를 도입하여 자바스크립트에서 비동기 프로그래밍을 혁신적으로 개선했습니다. 이러한 기능은 프로미스(Promises) 작업을 더 직관적으로 처리하며 코드를 더 깨끗하고 가독성 있게 만듭니다. // 이전 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log(data); })..
-
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() 메서..
-
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를 ..
-
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..
-
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; ..
-
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..
-
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'..