getElementsByClassName 함수 구현하기 (+자바스크립트에서 유사배열과 배열, 변환 방법) 프론트엔드 라이브 코딩이나 화이트보드 테스트에서 자주 나오는 과제 중 하나가 DOM API를 직접 구현해보는 문제입니다. 그중 대표적인 것이 document.getElementsByClassName을 직접 만들어보라는 과제입니다. 이번 글에서는 이 문제를 어떻게 접근하면 좋을지 베이스케이스 → 엣지케이스 → 효율성 → 가독성 순서로 풀어봅니다. 문제 이해목표는 주어진 className을 가진 모든 요소를 찾아 배열로 반환하는 함수입니다.기본적으로는 DOM 트리를 순회하면서 조건에 맞는 요소를 모으면 됩니다.function getElementsByClassName(className) { const bodyChildrenEls = document.body.children; const result = [.. 메모이제이션(Memoization)의 원리와 함수 구현해보기, 적용 프로그래밍을 하다 보면, 같은 연산을 반복해서 수행하는 상황을 자주 만납니다. 이런 경우, 이미 계산한 결과를 저장해 두었다가 재활용하면 성능을 크게 개선할 수 있는데요. 이 기법이 바로 메모이제이션(Memoization) 입니다.리액트에서의 useMemo 말고 직접 함수 구현은 처음이라 하나씩 공부하면서 정리해둔 내용입니다. 단순히 갖다 쓰기만 할줄 알았는데, 내부 로직을 직접 짜보니 흥미롭네요. 이번 글에서는 메모이제이션의 원리에서 시작하여 구현하며 비교해본 다양한 방법들, 그리고 적용까지 정리해 보겠습니다.1. 메모이제이션의 기본 원리메모이제이션은 간단히 말해 “입력 → 출력 결과”를 캐시에 저장해 두고, 같은 입력이 다시 들어왔을 때는 계산하지 않고 캐시에서 꺼내 쓰는 방식입니다.ex, 피보나치.. CursorAI + MCP 로 생산성 100배 부스트하기 (Sequential Thinking과 TalkToFigma) CursorAI와 MCP(Model Context Protocol)는 개발자에게 강력한 도구로 세상이 시끄럽다. CursorAI 에 크게 놀랐는데, MCP 를 결합하면 더 엄청나다는 이야기를 유튜브에서 보고 몇가지 활용해보았다. CursorAI와 MCP의 소개CursorAI는 인공지능을 활용하여 코드 작성, 디버깅, 최적화 등을 지원하는 도구로, 개발자의 생산성을 크게 향상시킨다. MCP는 다양한 플랫폼과의 통합을 가능하게 하여, 개발자가 여러 도구를 유기적으로 활용할 수 있도록 돕는다.내가 사용해본 MCP 1 - Sequential Thinking 🧠Sequential Thinking은 복잡한 문제를 단계별로 접근하여 해결하는 방법론으로, 개발 과정에서의 논리적 사고를 강화한다. 단계별로 명확하게 .. Cursor AI 등 .. 코딩할 때 AI 툴을 사용하며 느낀 개인적인 생각, 부작용 AI 코딩의 위험성오늘 실제 프로젝트 마이그레이션을 진행하면서 깨달은 중요한 점이 있다.코드에 대한 깊은 이해 없이 AI를 사용하는 것은 매우 위험할 수 있다는 사실이다.기존 코드는 제가 직접 기능을 구상하고, 하나씩 함수를 작성한, '이해도가 높은 코드' 였다. 오늘 cursorAI 를 사용하여 타입스크립트로 마이그레이션하고, 기존의 Redux 적용 범위를 확장하면서 주의하고, 다음부턴 어떻게 해야할 지 회고가 필요할 것 같아서 이 글을 작성하게 되었다. 1. 왜 위험한가?첫번째로 기능 손상의 위험이 크다. AI가 코드의 전체적인 맥락을 완벽히 이해하지 못하는 경우가 생각보다 많았다. 그래서 기존 기능의 의도나 로직을 보존하지 못한 것을 뒤늦게 발견하기도 했다. 두번째로 손상된 기능을 알아채는 것이 .. 🌗 Styled Components로 라이트/다크 모드 전환하기 실제 프로젝트에서는 사용자에게 다크 모드와 라이트 모드를 제공하는 것이 중요한 UX 요소 중 하나이다.styled-components와 ThemeProvider를 활용하면 전역 테마 전환을 매우 간단하게 구현할 수 있다.✅ 1. 테마 객체 정의하기// themes.jsexport const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke",};export const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111",};✅ 2. App에서 테마 상태 관리여러개의 property를 가진 객체를 두개 (다크/라이트) 설정함으로써 간편하게 theme을 바꿀 수 있다. // Ap.. Styled Components - 애니메이션, 컴포넌트 선택자, 중첩 스타일링 이번에 더듬어볼 기억은 .. keyframes 도 const 로 따로 빼서 관리하는 거 + styled component 조건문처럼 쓰기 !! ✅ 회전 애니메이션 만들기먼저 keyframes를 사용해 회전하는 애니메이션을 정의한다.import styled, { keyframes } from "styled-components"; const rotationAnimation = keyframes` 0% { transform: rotate(0deg); border-radius: 0px; } 50% { border-radius: 100px; } 100% { transform: rotate(360deg); border-radiu.. Styled Component에서 컴포넌트 확장하기 옛날에 리액트 처음 익힐때 다 공부했던 것 같은데, 프로젝트들을 하다보니 비슷한 컴포넌트를 생성하는 경우가 많은데 무시하고 계속 하다가 .. '아 옛날에 이거 공부했었는데 .. ' 싶어서 정리하게됐다. 일단 그 전에 styled component 를 쓰는 이유는 기존에 div를 만들고 className 이나 style을 부여하는 식이었지만,대신 styled를 임포트 해서 우리가 사용할 html 에서 사용하고 싶은 태그를 지정하고, 백틱 안에 css코드를 적어준다. -> 컴포넌트 이렇게 하게 되면 스타일링 된 컴포넌트를 사용함으로써, 컴포넌트 함수 안에 스타일을 적을 필요가 없고, 가독성이 좋아진다. 나는 큼직한 or 많이 사용할만한 컴포넌트들은 스타일 컴포넌트로 지정하고, 그 안의 자잘한 텍스트나 버.. Firebase 보안규칙 수정 : 파이어베이스에 안전하지 않은 규칙이 있습니다 메일 올 경우 해결 방법 파베 보안규칙 보안 규칙 시작하기 | Firestore | Google Cloud 보안 규칙 시작하기 | Firestore | Google Cloud 의견 보내기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 보안 규칙 시작하기 Firestore 보안 규칙을 사용하면 인프라를 관리하거나 서버 측 인증 및 승인 cloud.google.com 정말 징글징글하게 이메일을 보내 괴롭히던 firebase 보안규칙을 수정했습니다 (계속 경고하니까 불안했슴 🥲 경고 감사합니다 구글씨) 1. 보안규칙 버전 작성 rules_version = '2'; 기존의 rules_version = '1' 은 와일드 카드를 사용할 때 한 개 혹은 두 개 이상의 path를 포함하고 있어야하기 때문에 자유.. React validation 리액트 유효성 검사 Formik VS REACT Hook form https://nyeongnyeong.tistory.com/299 [React] Form Validation (Formik VS React Hook Form) Validation 이란? 서버에 데이터를 제출하기 전에 양식이 올바른지 확인하는 과정 사용자가 데이터를 목적지로 보내기 전에, 올바를 데이터를 입력했는지 유효성을 체크해주는 것. Client Validation rea nyeongnyeong.tistory.com 이전 1 2 3 다음