자바스크립트에서 현재 달 1일과 마지막일 구하는 방법 const today = new Date();const year = today.getFullYear();const month = today.getMonth();// 이번달 1일, 마지막 일const firstDay = new Date(year, month, 1); const lastDay = new Date(year, month + 1, 0); // month에 1더해야함 lastDay month에 1더하고 세 번째 인자에 0을 넣은 이유getMonth()는 0부터 시작하므로, 현재 월의 다음 달을 얻기 위해 + 1을 더한다.해당 달의 0 일을 지정함으로써, 실제로는 이전 달의 마지막 날을 나타내게 됩니다. JavaScript에서는 0일이 이전 달의 ..

switch 조건문복수의 if 조건문은 switch문으로 바꿀 수 있으며 switch문은 다양한 상황에서 비교할 수 있게 해준다.switch조건문은 switch문과 case문으로 구성되며 switch의 변수와 case의 상수를 비교하여 일치하면 실행, 일치하지 않으면 다음 case문으로 넘어간다.switch() 괄호 안에는 변수, 상수, 비교 연산자 등 자유롭게 설정 할 수 있지만, case 문 뒤에는 상수 값만 올 수 있다.문법switch (expression) { case caseExpression1: statements case caseExpression2: statements // … case caseExpressionN: statements default: stat..

자바스크립트 반복문종류for 문for...in 문for…of 문forEach()while 문do…while 문 for 문문법: for ( [초기문]; [조건문]; [증감문] ) {반복 코드}변수 선언 시, const 를 쓰면 값 변경이 불가 하여 let 사용해야 한다.for (let i = 0; i  for…in 문문법 : for( const key in 객체 ) {반복 코드}const obj = { id: '1', user: 'Mia'}for (const key in obj){ console.log(`${key} : ${obj[key]}`);}// 결과// "id : 1"// "user : Mia" for…of 문문법 : for( const item of 이터러블 ) {반복 코드}con..

자바스크립트에서 HTTP Requests를 위한 방법으로는 Fetch 와 axios가 있다.Fetch 와 axios는 모두 promise 기반의 HTTP 클라이언트로 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve) 혹은 거부(reject) 할 수 있는 promise가 반환 된다.PromisePromise는 비동기 처리에 사용되는 객체로 ES6에서 도입되었다.비동기 처리란 ‘ 특정코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성 ‘ 이다.Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스 객체를 생성하게 된다.비동기 처리 결과로 resole, reject 과 진행 상태로 pending, fulfilled,rejected를 갖는다.대기(p..

javascript에서 배열에 원하는 특정 값이 포함되어 있는 지 확인하는 방법이 여러가지 있다.indexOf()string 객체에서 주어진 값과 일치하는 첫 번째 인덱스 반환한다. 일치하는 값이 없으면 -1을 반환한다. ( 대소문자를 구분한다 )문법 : str.indexOf(searchValue[, fromIndex]) ( fromIndex는 optional한 값 )fromIndex 찾기 시작하는 위치를 나타내는 인덱스 값으로 아래 예시 중 마지막 str.indexOf("I", 5) 에서 “ I ” 위치 뒤인 5번 부터 시작하여 -1을 반환한다.See the Pen indexOf() by pminsun (@pminsun) on CodePen. lastIndexOf()주어진 값과 일치하는 부분을 fro..

상태 관리 라이브러리 중 zustand를 종종 사용해 정리하고자 한다.  리액트에서의 전역 상태 관리 전역 상태 관리란 앱의 중앙에 위치함으로써 어느 컴포넌트든 이 데이터(상태)에 접근할 수 있으며 상태 변경이 가능하다. 전역 상태관리를 지원하는 api에는 react에 내장된 useContext 훅을 포함하여 redux, recoil, zustand, zotai, react-query 등 다양한 서드파티 라이브러리들까지 존재한다.  zustand 란 ?Zustand는 작은 용량(1.16kb의 번들 사이즈), 빠른 속도, 그리고 확장 가능성을 자랑하는 상태 관리 라이브러리입니다. 단방향 데이터 흐름(Flux패턴과 유사),  React hooks 기반으로 설계되어 있어, 복잡한 보일러플레이트 코드(  boi..

가장 기본이 되는 React에서 input 상태를 어떻게 관리하는지 정리했다. onChange를 통해 useState에 value값을 넣어주면 된다.input의 value값은 event.target.value 이다.import React, { useState } from "react";export default function Test() { const [text, setText] = useState(""); const onChange = (e: any) => { setText(e.target.value); }; const onReset = () => { setText(""); }; return ( 결과 : {text} 초기화 ..

타이머와 관련된 함수로는 setTimeout(), setInterval() 가 있다.setTimeout()설정한 시간이 지난 후 코드를 실행시킨다.문법 : setTimeout(functionRef, delay, param) ( delay, param은 optional한 값 )// functionRef (delay생략)setTimeout(() => console.log("바로 실행"));// functionRef & delaysetTimeout(() => console.log("5초 후에 실행됨"), 5000);// param 사용function weather(today, phrase) { console.log( today + ' 은 ' + phrase );}setTimeout(weather, 1000,..

스크롤 바를 숨기거나 커스텀 하는 일이 종종 있어 정리했다. 스크롤바 숨기기스크롤 기능만 남기고 스크롤 바는 없애려면 스크롤 되는 영역에 아래 css를 적용하면 된다./* 스크롤바 숨기기 */.scroll { -ms-overflow-style: none; /* IE */ scrollbar-width: none; /* Firefox */}.scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera, Edge */} See the Pen scrollbar - none by pminsun (@pminsun) on CodePen.  스크롤바 커스텀스크롤 바 커스텀 하기 위해서는 스크롤 되는 영역에 3가지 css를 적용하면 된다.::-webk..

프로젝트 진행중 swr를 활용하여 사용법에 대해 정리했다.swr 이란"SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략으로 빠르고, 가볍고, 재사용 가능한 데이터를 가져온다.  설치 npm i swr// oryarn add swr  기본 사용법 import useSWR from 'swr'function Test() { const fetcher = (...args) => fetch(...args).then(res => res.json()) const {..