choijming21 님의 블로그

제가 팀프로젝트에서 이번에 적용해야 할 것은 유저가 버튼(전체 스터디 보기)을 클릭했을 때, 자동으로 전체 스터디 컴포넌트로 스크롤 되는 동작을 구현해야 합니다:) 그럼 먼저 useRef에 대해 알아보도록 하겠습니다. 1. useRef란?React 공식 홈페이지에서는 ".current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다." 라고 설명하고 있습니다.쉽게 말하자면, useRef의 Ref는 reference(참조)의 줄임말로 저장공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook입니다. 주요한 특징은 특정한 DOM 요소에 접근이 가능하며, 불필요한 재렌더링을 하지 않는다..

1.  문제 발생❓Git은 기본적으로 파일명의 대소문자를 구분하지 않습니다. 예를 들어, Hero.style.ts를 hero.style.ts로 변경하려고 할 때 Git은 이를 같은 파일로 인식하여 변경사항을 제대로 추적하지 못합니다. bashCopy$ git mv Hero.style.ts hero.style.tsfatal: bad source, source=Hero.style.ts, destination=hero.style.ts 이 오류 메시지는 Git의 파일 이름 변경 명령어 실행 중 발생한 문제를 나타냅니다.git mv Hero.style.ts hero.style.ts 명령은 파일 이름을 대문자 'Hero.style.ts'에서 소문자 'hero.style.ts'로 변경하려는 시도였습니다. "fatal..

오늘은 일정 글자수 이상 넘어가면 말줄임표(...) css에 대해 정리해보겠습니다.  1. 공통으로 import 해서 쓸 css 요소 정리export const getEllipsisStyles = (lines = 2): CSSProperties => { overflow: "hidden", textOverflow: "ellipsis", display: "-webkit-box", WebkitLineClamp: lines, WebkitBoxOrient: "vertical", wordBreak: "break-word" as any,} - overflow: "hidden"; 박스에서 넘쳐난 텍스트 숨기기-textOverflow: "ellipsis"; 텍스트가 잘릴 때 말줄임표(...)를 표시함- display: ..

오늘은 라우트 핸들러에 대해 학습해보겠습니다. 먼저 Route Handler란 특정 URL 경로(route)로 들어오는 요청을 처리하는 함수입니다. 쉽게 말해서 "특정 주소로 요청이 왔을 때 어떻게 응답할지 정의하는 함수"라고 생각하면 됩니다. // courses/route.tsimport { NextResponse } from 'next/server'// GET /api/coursesexport async function GET() { try { // 1. 데이터베이스에서 모든 강의 정보를 가져옴 const courses = await prisma.course.findMany({ where: { isActive: true } }); // 2. 클라이언트에게 JSON 형태..

1. 프로젝트 구조📦src ┣ 📂types ┃ ┗ 📜createElementTypes.ts // 타입 정의 ┣ 📜App.tsx // 메인 컴포넌트, 진입점 ┣ 📜jsx.ts // createElement 구현 ┣ 📜render.ts // Virtual DOM → 실제 DOM 변환 ┗ 📜style.css // 스타일    2. Virtual DOM 렌더링 함수(render.ts)렌더링 함수는 Virtual DOM을 실제 DOM으로 변환하는 핵심 기능을 담당합니다.import { VirtualElement } from "./types/createElementTypes";export ..

오늘은 컴포넌트 작성과 Virtual DOM 구조를 분석해보겠습니다!  1. 컴포넌트 구현App.tsxfunction App() { return ( Hello, React! );}  Header.tsxfunction Header({ title, buttonText }) { return ( {title} {buttonText} );}  Content.jsxfunction Content({ text }) { return ( {text} );}    2. Virtual DOM 동작 원리컴포넌트가 Virtual DOM을 반환하도록 하기 위해 createElement 함수를 구현했습니다.function ..

오늘은 Virtual DOM의 개념을 이해하고 이를 구현하기 위한 createElement 함수를 만들어보았습니다!    Virtual DOM 이란?Virtual DOM은 실제 DOM(Document Object Model)의 가벼운 복사본이라고 할 수 있습니다. JavaScript 객체 형태로 표현되며, 실제 DOM과 달리 메모리에만 존재하기 때문에 변경 작업이 훨씬 빠릅니다. 실제 DOM 구조가 있다고 가정해보겠습니다. Hello World This is a paragraph 이것을 Virtual DOM으로 표현하면 다음과 같은 JavaScript 객체가 됩니다.{ "type": "div", "props": { "className": "container" }, "children": [..

1. 초기 개발 환경 구축 vite 프로젝트 생성먼저 Vanilla Javascript 기반의 Vite 프로젝트를 생성합니다.Vite를 사용한 이유: Vite는 매우 빠른 개발 서버와 빌드 도구를 제공합니다.# Vite 프로젝트 생성npm create vite@latest whatever-project --template vanilla# 프로젝트 폴더로 이동cd whatever-project# 의존성 패키지 설치npm install  Babel 설치 및 설정JSX를 JavaScript로 변환하기 위한 Babel 패키지를 설치합니다.# Babel 관련 패키지 설치npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-tra..

현대의 웹 애플리케이션은 복잡해지고 다양한 환경에서 실행됩니다. 이러한 환경에서 사용자 경험을 보장하기 위해 효과적인 에러 모니터링은 필수적입니다. 이번 포스트에서는  Sentry를 활용한 프론트엔드 모니터링의 중요성과 구현 방법과 vercel 배포에 대하여 정리해보겠습니다!  Q. 왜 프론트엔드 에러 모니터링이 중요하나요?1. 실시간 문제 감지개발자는 모든 환경과 상황을 완벽히 테스트할 수 없습니다. Sentry와 같은 도구를 통해 실제 사용자 환경에서 발생하는 에러를 실시간으로 파악할 수 있습니다.2. 사용자 경험 개선에러가 발생해도 즉각적으로 대응할 수 있어, 사용자가 불편을 겪는 시간을 최소화할 수 있습니다.3. 디버깅 효율성 증대Sentry는 에러 발생 시 상세한 컨텍스트(스택 트레이스, 브라우..

1. 유닛 테스트란 ?유닛 테스트는 소프트웨어의 개별적인 단위(컴포넌트, 함수 등)가 의도한 대로 작동하는지 확인하는 테스트입니다.   2. 유닛테스트가 필요한 이유? 1. 버그 예방코드 변경 시 기존 기능이 망가지지 않았는지 확인에러를 초기에 발견하여 수정 비용 절감 2. 코드 품질 향상테스트를 작성하며 코드의 문제점을 발견더 나은 코드 구조와 설계를 유도 3. 리팩토링 용이성안전한 코드 수정 가능기능이 올바르게 동작하는지 즉시 확인 4. 문서화 효과테스트 코드가 컴포넌트의 사용법을 보여주는 예시 역할새로운 팀원의 코드 이해도 향상   3. 주요 테스트 라이브러리1. Jestfacebook에서 만든 JavaScrip 테스팅 프레임 워크쉬운 설정과 사용법스냅샷 테스팅 지원풍부한 matcher 함수 제공2..