관리자의 집 프로젝트 진행중 수강생을 ㄱ,ㄴ,ㄷ등의 자음으로 필터링하는 기능이 있어 해결한 방법을 적어보려고 한다. 내 머리로는 해결하기 어려워 구글링과 챗gpt의 도움을 받았다. 전체 완성 코드 // 현재 필터링할 한글자음 const 현재자음 = "ㄱ"; // 필터링될 이름 list const names = [ "김태영", "이지훈"...

관리자의 집 프로젝트 진행중 수강생을 가나다 순으로 정렬해야하는 기능이 있어 "오! 새로운 기능이다! 어떻게 만들어야 할까나~?"라고 생각하며 방법을 알아보았다. sort() sort함수는 기본적으로 인자가 문자열이라면 유니코드를 기준으로 비교하여 정렬하기 때문에 "가"는 유니코드 코드 포인트로 0xAC00이고, "나"는 0xB098이므로 이는...

관리자의 집 프로젝트 진행중 react-calendar 라이브러리 사용중 formatDay, formatYear 속성의 date를 원하는 형식으로 편리하게 변환하기 위해날짜를 원하는 형식으로 변환하는데 편리한 moment 라이브러리를 알게되어 기록해본다. moment 라이브러리란? JavaScript에서 가장 많이 사용되어 온 날짜 라이브러리로...

BUCLIN 프로젝트 진행중 상품을 하나씩 스크롤 되도록 구현이 필요해서 구글링 중 알게된 css만으로 scroll snap을 구현할 수 있다고하여 기록해본다. scroll snap이란? 스크롤 스냅(scroll snap)은 사용자가 웹 페이지를 스크롤할 때 요소가 일정한 간격으로 자동으로 스냅되는 기능을 말하며, 용자가 스크롤할 때 페이지가 ...

프로젝트를 진행하면서 Login 상태가 아닌 사용자의 특정 page 접근을 제어해야 했기에 그 방법을 기록하려고 한다. App.jsx import { BrowserRouter, Route, Routes } from "react-router-dom"; import { HomePage } from "./pages/HomePage"; import {...

프로젝트 진행중 무한스크롤 기능이 필요해서 구글링중 react-intersection-observer라는 라이브러리를 발견하여 react-intersection-observer란? React 애플리케이션에서 Intersection Observer API를 간편하게 사용할 수 있도록 도와주는 라이브러리로 웹 페이지에서 요소가 뷰포트에 들어오거나 ...

프로젝트 진행중 styled-components 컴포넌트에 prop을 전달하는 과정에서 다음과 같은 error가 발생했다. 첫번재 error문구 같은 경우 스타일드 컴포넌트에서 전달된 스타일 속성 중에서 DOM에 직접 적용되지 않는 속성을 감지했을 때 발생된 것 입니다. 두번재 error문구 같은 경우는 React에서 DOM 요소로 전달되는...

프로젝트 진행중 버튼 컴포넌트를 따로 만들어 재사용성을 높이는 중 props을 통해 theme객체에 속성을 유동적으로 바꾸는 방법을 알아내었다. Button.tsx import React, { ReactNode } from 'react'; import styled from 'styled-components'; interface ButtonP...

점 표기법 가장 기본적이고 자주 사용되는 방법 중 하나인 점 표기법입니다. 이는 객체의 속성에 직접 접근하는 방법입니다. const person = { name: 'taewok', age: 23, job: 'Developer' }; console.log(person.name); // 'taewok' 표기법: 객체이름.key...

alert() 사용자에게 간단한 메시지를 보여주는 기능을 수행하는 함수이며, 함수를 호출하면 브라우저는 경고 창을 띄워서 메시지를 표시하며, 사용자가 확인 버튼을 누르기 전까지는 다른 작업을 진행할 수 없습니다. 간단한 alert() 함수의 사용 예제는 다음과 같습니다. See the Pen Untitled by taewok (...