react18 React- dayjs 활용 날짜가공하기 웹 또는 앱 서비스 제공시 날짜관련 하여 유용하게 활용할 수 있는 라이브러리인 dayjs 에 대해 알아보겠습니다. 서비스 제공에 있어서 날짜 계산, 시간 계산이 필요한 경우가 상당히 많은데 가벼우면서도 쉽게 사용할 수 있는 유용하여 몇 가지 예시를 들어 활용방법을 소개하겠습니다. https://day.js.org/en/ Day.js · 2kB JavaScript date utility library2kB JavaScript date utility libraryday.js.org 1. 설치하기일반적인 Node.js 패키지 설치와 동일npm install dayjs2. 사용하기라이브러리에서 기본 제공하는 기능오늘 날짜 const now = dayjs();다양한 날짜 포맷 지원 get - 특정 날짜.. 2024. 9. 9. React배열데이터 가공 reduce, concat, slice, splice (2) 이전 포스트에 이어서 리액트 배열 데이터 가공시 활용도가 높은 함수인 reduce(), concat(), slice(), splice()에 대해 설명하고자 합니다. 1. reduce() reduce 함수는 JavaScript에서 배열을 순회하고 하나의 결과를 누적하는 데 사용되는 고차 함수입니다. reduce 함수는 인자로 콜백 함수를 받으며, 이 함수는 배열의 각 요소에 적용되며 중간 결과를 추적하는 누적기(accumulator)가 있습니다. reduce 함수의 기본 구문은 다음과 같습니다. array.reduce(callback, initialValue); callback: 배열의 각 요소에 대해 한 번씩 호출되는 함수로, 네 가지 인수를 받습니다. accumulator: 콜백의 반환 값들을 누적하는.. 2024. 1. 27. React 배열 데이터 가공 - map,find,findindex,filter (1) 리액트에서 데이터를 가공할 때, 특히 배열에서 많이 사용하는 자바스크립트 함수에 대해 알아두면 도움이 되어 1, 2편 나눠서 정리해 봅니다. 실제 예시를 기반으로 어떻에 활용하는지 실제 개발하는데 도움이 되었으면 합니다. 이번 포스팅에서는 map, find, findindex, filter 에 대해 알아 보겠습니다. 1. map() JSX 문법을 사용하는 리액트에서는 배열로 된 데이터를 가공하는데 for문 대신 map() 을 사용합니다. 실사용에서 제일 많이 사용하는 함수로 사용하는데 주의점이 있습니다. JSX에서 자바스크리립트 구문은 { } 사이에 사용합니다. {items.map((item) => item)} 상기 예시는 items 배열에 있는 항목 하나씩(item) 꺼내서 리스트로 표출하는 예시로 기.. 2024. 1. 21. esm으로 ES 모듈 import/export 문법 사용하기 Node.js 에서 import/export 문법을 사용하면 VS Code에서 자동완성을 통해 모듈을 자동으로 불러 올 수 있고 코드도 깔끔해 지기 때문에 esm 라이브러리를 사용하여 해당 문법을 사용합니다. esm을 yarn 으로 설치합니다. $ yarn add esm 기존 src/index.js 파일의 이름을 main.js 로 변경하고, index.js 파일을 새로 만들어서 다음의 코드를 작성합니다. // 이 파일에서만 no-global-assign ESLint 옵션을 비활성화 합니다. /* eslint-disable no-global-assign */ require = require('esm')(module /*, options*/); module.exports = require('./main.js.. 2023. 7. 13. MongoDB 소개 및 설치하기 사용자가 입력한 데이터를 상시 저장하는 공간으로 파일이나 데이터베이스(Database)를 이용하면 됩니다. 우선 데이터베이스를 기준으로 특징과 선택기준에 대해 간단하게 정리하고자 합니다. 데이터베이스 종류 데이터의 종류와 이용 서비스에 따라 데이터베이스를 다음과 같이 구분합니다. 관계형 데이터베이스(RDBMS) : MySQL, OracleDB, PostreSQL, MariaDB 등이 있으며, 데이터를 입력하는 형식이 고정적입니다. 스키마(Schema)는 데이터 형식을 어떻게 넣을지 정보를 지정하는 것으로 입력하는 데이터가 동일한 항목과 형식을 유지해야 합니다. 또한 데이터량이 늘어나면 여러 컴퓨터에 분산시키는 것이 아니라 서버의 성능을 높여서 대응하야 합니다. NoSQL 데이터베이스 : mongoDB, .. 2023. 7. 8. VS Code 단축키 가장 많이 사용하는 VS Code 단축키 모음 입니다.익숙해지면 생산성 향상에 많은 도움이 됩니다.편집 단축키항목단축키HTML 초기 tag 자동완성! + Tab주석 적용 (한줄 단위)Ctrl + /블록 주석 묶기 ( /* */)Alt + Shift + a 일치하는 텍스트 찾기Ctrl + F일치하는 텍스트 바꾸기Ctrl + H설정창 열기Ctrl + , (콤마)터미널 열기 / 닫기Ctrl + ` (백틱)왼쪽 탐색기 창 열기 / 닫기Ctrl + B폰트 사이즈 조정Ctrl + '+' , Ctrl + '-' 좌측 또는 우측 화면으로 포커스 하기Ctrl + 1 or 2열어 놓은 탭 간 이동Ctrl + PageUp or PageDown파일 검색해서 빠르게 열기Ctrl + p자동정렬Shift + Alt + F / 전.. 2023. 7. 7. 이전 1 2 3 다음 반응형
