웹 개발에서 자주 마주치는 개념 중 하나가 이벤트 버블링(Event Bubbling)입니다.클릭 이벤트 하나로 여러 요소가 함께 반응하는 상황, 혹시 경험해보셨나요?이번 글에서는 이벤트 버블링의 개념을 구조적으로 정리하고,회사 보고 체계에 빗대어 직관적인 예시와 함께

트리 쉐이킹은 사용하지 않는 코드를 제거해서 최종 파일을 가볍게 만드는 기술이에요.“나무(tree)를 흔들면 낙엽(leaves)이 떨어지는” 모습처럼, 코드에서도 “안 쓰는 부분만 털어내는” 과정을 생각하면 돼요.ES2015 모듈(import/export) 방식을 기반

폴더 내부에 여러 모듈(컴포넌트, 유틸, 타입 등)을 한곳에서 재내보내기(re-export)하는 방법index.ts 파일을 “통(barrel)”처럼 만들어두면, 상위 코드에서 폴더 경로만으로 필요한 모듈을 한 번에 가져올 수 있어요 😉예시 \- 폴더 구조index.

CSS에서 높이를 설정할 때 가장 자주 쓰는 단위인 100vh와 100%.비슷해 보이지만 둘은 동작 방식이 완전히 다릅니다.이번 글에서는 100vh와 100%의 차이,예제 코드, 실제 동작 방식,그리고 자주 하는 실수와 해결법까지 모두 정리해볼게요!vh는 Viewpor

시맨틱(Semantic)이란 "의미론적인"이라는 뜻이에요.즉, 시맨틱 태그(Semantic Tag)는 "이 태그가 어떤 역할을 하는지 그 이름만 보고도 알 수 있도록 만든 HTML 태그"를 의미해요.과거에는 <div>, <span> 같은 의미 없는 태그만 써

useLocation 훅을 사용하려는데 자꾸 에러가 난다면, Router 위치를 의심해보세요!React 프로젝트에서 다음처럼 AppRouter 내부에서 useLocation()을 사용하면서 Router까지 함께 선언하는 경우:이럴 때 다음과 같은 오류가 발생합니다:❗u

React와 TypeScript를 함께 사용할 때, 흔히 보게 되는 타입이 하나 있다. 바로 React.FC 또는 React.FunctionComponent이다.이 글에서는 React.FC가 무엇인지, 어떤 역할을 하는지, 실제 현업에서는 어떤 방식을 선호하는지, 그리

실시간 기능이 필요한 채팅, 알림, 라이브 데이터 등에선데이터를 실시간으로 주고받는 방식이 매우 중요합니다.대표적으로 사용되는 방식은 두 가지입니다:🕓 Polling (폴링)🔌 WebSocket (웹소켓)이번 글에선 이 두 가지 방식을 비교하고,어떤 상황에서 어떤

프론트엔드 개발을 하다 보면 스타일을 적용할 때 style.css처럼 일반 CSS 파일을 사용하는 경우도 있고,.module.css라는 조금은 생소한 확장자를 마주치는 경우도 있습니다.이 둘은 어떻게 다르고, 언제 무엇을 써야 할까요?CSS(Cascading Style

Vite는 빠른 개발 환경을 제공하는 프론트엔드 빌드 도구입니다. 이번 글에서는 Vite + React로 제작한 프로젝트를 GCP 환경에 배포하는 과정을 단계별로 정리해보겠습니다. ✅먼저, Vite 프로젝트의 패키지를 설치하고 빌드합니다.위 명령어를 통해 dist 폴더

Vite + React 환경에서 .jsx 파일을 .tsx로 변경한 후, 모듈에 대한 선언 파일을 찾을 수 없습니다라는 TypeScript 오류를 마주한 적이 있는가? 나도 동일한 문제를 겪었다. tsconfig.json을 열심히 뒤져보고, Vite 설정까지 점검했지만,

일정을 짜는 기능을 만드는 도중에, 에러가 떴다....정확하게는 react-calendar를 사용하여, 한국 시간대에 맞춘 마크와 타임테이블을 만들려고 하는 도중에 꼬여서 에러가 떴다.이건 Date 타입을 바로 state의 초기 데이터로 설정해서 발생한 오류이다.

props를 자식 컴포넌트에 넘겨주었을 때, { props } 형태로 자식 컴포넌트에서 사용해야 한다. 이것을 사용하지 않아 에러가 떴다...참고 자료BLOG : https://velog.io/@leemember/Objects-are-not-valid-as-a

Radio onChange로 value (0, 1) 값을 받아서, 배열(2차배열)의 첫번째 인자를 구분하고, 그 배열을 body에서 map으로 button을 생성하는 도중에 위의 에러가 뜨게 되었다.아래의 링크를 읽어본 결과, state의 변화가 무한반복되어서 나타나는

input tag로 radio를 만들고 있는 중이다.오류가 난 코드...오류 해결input은 하위 콘텐츠를 가질 수 없는 빈 요소이다. 그러므로 </input>이 필요가 없다는 뜻!그래서 예러가 뜬 것이다.참조\_codingEverybody{}

clone 해서 가져온 react 파일을 npm start 할려고 했다가 안되어서, npm install을 시도하다가 또 에러가 떠서 찾아보는 중이다...저장 공간이 없어서 에러가 뜬 것이다...git 로컬 위치 바꿀려면 그냥 .git 파일 있는 곳 내용 전부 다른

38강. 스타일링 - 4 - tailwindcss ~ 44강. 데이터 정렬프레임워크를 통해서 정해진대로 하다보면, 생산성을 높일 수 있음.다양한 CSS 프레임워크 도구들이 있다.이 외에도 Material UI, Ant Design, Chakra UI 같은 라이브러리도

: 소프트웨어의 골격이 되는 기본 구조이자, 소프트웨어를 구성하는 요소들 간의 관계를 표현하는 시스템의 구조 또는 구조체이다.아키텍처 그림 참조자세한 설명소프트웨어 개발 시 적용되는 원칙과 지침이며, 이해 관계자들의 의사소통 도구로 활용된다.소프트웨어 아키텍처의 설계는

34강. 리스트 렌더링 - 3 - 리스트 필터링 ~ 37강. 스타일링 - 2 - CSS Modules리스트에 상품들을 특정 조건에 따라 필터링 해서 보여주기필터링을 할 때마다 업데이트가 되어야 한다.값이 없으면, 없다는 문구를 나타낸다.직접 요소에 스타일링을 넣어서 만

29강, 리액트 상태 - 5 - Form 제출 ~ 33강 리스트 렌더링 - 2 - KEY이 이벤트를 발생하기 위해서는 <button type="submit">이 필요해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 하고 싶은 경우1) a 태그 클릭 시