개발 메모장 개발 메모장

분류 전체보기

• 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
• Javascript ES6 문법 정리

  JS & TS 2023. 9. 11. 13:53

  Frontend 개발자나 NodeJS개발자라면 필수인 javascript의 대격변이라고 생각하는 ES6부터 시작해 시리즈로 정리하는 글을 작성해보려고 합니다. ES6에서 추가된 주요 기능과 문법은 다음과 같습니다. Class(클래스) Arrow Function(화살표 함수) 배열 축약 Rest Parameter and Spread Operator Template Literal For... of 반복문 Destructuring Assignment(구조 분해 할당) const and let 키워드 Default Parameter Promise 1. Class(클래스) 클래스 문법을 사용하면 객체 지향 프로그래밍을 더 쉽게 구현할 수 있습니다. class Person { constructor(name, age..

  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
• react-native-async-storage 그만 사용하기(feat. react-native-mmkv)

  React Native 2023. 8. 18. 13:35

  react-native-async-storage React Native에는 다양한 Key-Value Storage 라이브러리가 있습니다. 그리고 그중 react-native-async-storage는 React Native에서 가장 기본적으로 제공되는 Key-Value Storage 라이브러리입니다. react-native-async-storage는 비동기적으로 데이터를 저장하고 불러옵니다. 즉, 데이터를 저장하거나 불러올 때 다른 작업이 중단되지 않습니다. react-native-async-storage는 사용하기 쉽고, 다양한 플랫폼을 지원합니다. 하지만, 성능이 그다지 좋지는 않습니다. react-native-mmkv react-native-mmkv는 react-native-async-storage..

  Read More
• Next.js에서 사용하기 좋은 모니터링 툴 3가지

  Tip 2023. 8. 10. 18:05

  Checkly, Axiom, Sentry는 웹 프로젝트를 개발하고 유지 관리하는 데 도움이 되는 툴이다. 모두 무료로 사용할 수 있으며, 유료 플랜을 통해 더 많은 기능을 사용할 수 있다. Checkly Checkly는 성능을 모니터링하는 도구다. Checkly는 URL을 지정해 성능 지표를 그래프로 표시하고, 모니터링할 요청의 빈도와 양을 설정할 수 있으며, 성능 저하를 알림으로 보낸다. Checkly의 주요 기능 웹 애플리케이션의 성능 지표 모니터링 성능 저하 알림 API 테스트 웹 애플리케이션의 성능 테스트 Axiom Axiom은 API를 테스트하는 도구다. Axiom은 API에 요청을 보내고, API의 응답을 검증할 수 있고, API 테스트를 자동화할 수 있다. Axiom의 주요 기능 웹 애플리케..

  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