개념정리
1.트리 쉐이킹(Tree-Shaking)과 사이드 이펙트(Side Effect) 쉽게 정리하기 😊
트리 쉐이킹은 사용하지 않는 코드를 제거해서 최종 파일을 가볍게 만드는 기술이에요.“나무(tree)를 흔들면 낙엽(leaves)이 떨어지는” 모습처럼, 코드에서도 “안 쓰는 부분만 털어내는” 과정을 생각하면 돼요.ES2015 모듈(import/export) 방식을 기반
2.바렐(Barrel) 파일(index.ts) 사용하기 가이드 ✨😊
폴더 내부에 여러 모듈(컴포넌트, 유틸, 타입 등)을 한곳에서 재내보내기(re-export)하는 방법index.ts 파일을 “통(barrel)”처럼 만들어두면, 상위 코드에서 폴더 경로만으로 필요한 모듈을 한 번에 가져올 수 있어요 😉예시 \- 폴더 구조index.
3.💡 CSS 100vh vs 100% 제대로 이해하고 쓰기
CSS에서 높이를 설정할 때 가장 자주 쓰는 단위인 100vh와 100%.비슷해 보이지만 둘은 동작 방식이 완전히 다릅니다.이번 글에서는 100vh와 100%의 차이,예제 코드, 실제 동작 방식,그리고 자주 하는 실수와 해결법까지 모두 정리해볼게요!vh는 Viewpor
4.📚 HTML5 시맨틱 태그 완전 정복
시맨틱(Semantic)이란 "의미론적인"이라는 뜻이에요.즉, 시맨틱 태그(Semantic Tag)는 "이 태그가 어떤 역할을 하는지 그 이름만 보고도 알 수 있도록 만든 HTML 태그"를 의미해요.과거에는 <div>, <span> 같은 의미 없는 태그만 써
5.🎯 React Router에서 Router는 왜 index.tsx에 있어야 할까?
useLocation 훅을 사용하려는데 자꾸 에러가 난다면, Router 위치를 의심해보세요!React 프로젝트에서 다음처럼 AppRouter 내부에서 useLocation()을 사용하면서 Router까지 함께 선언하는 경우:이럴 때 다음과 같은 오류가 발생합니다:❗u
6.📘 React.FC란 무엇인가? – TypeScript에서의 사용과 장단점 정리
React와 TypeScript를 함께 사용할 때, 흔히 보게 되는 타입이 하나 있다. 바로 React.FC 또는 React.FunctionComponent이다.이 글에서는 React.FC가 무엇인지, 어떤 역할을 하는지, 실제 현업에서는 어떤 방식을 선호하는지, 그리
7.🧠 실시간 통신의 두 가지 방식: Polling vs WebSocket 정리
실시간 기능이 필요한 채팅, 알림, 라이브 데이터 등에선데이터를 실시간으로 주고받는 방식이 매우 중요합니다.대표적으로 사용되는 방식은 두 가지입니다:🕓 Polling (폴링)🔌 WebSocket (웹소켓)이번 글에선 이 두 가지 방식을 비교하고,어떤 상황에서 어떤
8.🌈 CSS 파일 vs CSS Module 완벽 정리
프론트엔드 개발을 하다 보면 스타일을 적용할 때 style.css처럼 일반 CSS 파일을 사용하는 경우도 있고,.module.css라는 조금은 생소한 확장자를 마주치는 경우도 있습니다.이 둘은 어떻게 다르고, 언제 무엇을 써야 할까요?CSS(Cascading Style