개발자(진) 옞

🍑 useEffectReact에서 부수 효과를 수행할 수 있게 해주는 Hook이다.렌더링 이후에 실행된다.useEffect(() => { // 부수 효과 로직}, [의존성]); 🍑 cleanup 함수useEffect 내부에서 return () => {} 형태로 작성하는 함수를 cleanup 함수라고 한다.타이머나 이벤트를 등록한 뒤 정리하지 않으면 메모리 누수나 중복 실행이 발생할 수 있기 때문에,보통 컴포넌트가 사라질 때나 effect가 다시 실행되기 전 정리 작업을 수행하기 위해 사용된다. 🍑 useEffect 실행 시점렌더링 (가상 DOM 계산)↓커밋 (DOM 업데이트 완료)↓useEffect 실행 💎즉, 화면이 실제로 브라우저에 렌더링 된 후에 실행된다. 🍑 cleanup 함수 실..

🍈 프롤로그 이번 주 블로그 주제로는 React로 모달을 구현할 때 알아두면 좋은 두 가지 개념,stopPropagation()과 createPortal에 대해 다뤄보려고 한다.모달을 구현하다 보면 내부를 클릭했는데 모달이 닫혀버린다든지,레이아웃이 깨진다든지 하는 상황을 한 번쯤 겪게 되는데,이 두 가지 개념을 제대로 이해하고 사용하면 이러한 문제들을 해결할 수 있다. 🍈 상황 우테코 레벨2 상품 목록 미션에서,장바구니에 담긴 상품 정보를 보여주는 모달을 구현했다. 닫기 버튼을 클릭해서 모달을 닫을 수는 있지만,UX를 고려해서 배경을 클릭했을 때도 모달이 닫히는 기능을 추가했다. 이후 리뷰어가 e.stopPropagation()을 사용하는 이유에 대해 질문해 주셨다.대충 어떤 역할을 하는지 짐작만 ..

🐟 Math 함수 없이 소수점을 자르는 방법 ✔️ toFixed() 소수점 이하 자릿수를 지정하여 반올림된 결과를 반환한다. // 사용 예시 const height = 157.55423; console.log(height.toFixed(1)); // 소수점 첫째 자리까지 반올림 // 결과: 157.6 ✔️ toPrecision() 전체 자릿수를 지정하여 반올림된 결과를 반환한다. // 사용 예시 const height = 157.55423; console.log(height.toPrecision(4)) // 전체 네 자리 숫자로 반올림 // 결과: 157.6 두 함수는 모두 반올림된 결과를 반환한다는 공통점이 있다. 차이점은 지정하는 자릿수이다. 🐟 Math 함수를 사용한 반올림, 올림, 내림 ✔️ ro..

스크롤바가 있는 페이지와 없는 페이지 간 레이아웃 차이가 발생해 스크롤바를 숨기고 싶었다. 단, 스크롤 기능은 그대로 유지해야 하는 상황 🐣 스크롤 기능은 유지하면서, 스크롤바를 숨기는 코드 html::-webkit-scrollbar { display: none; } cf) 위의 방법은 크롬, 사파리 등 WebKit 기반 브라우저에서만 동작한다. 🐣 스크롤바 O 🐣 스크롤바 X

👾 Flex 속성이란? CSS의 속성 중 하나로, 유연한 레이아웃을 만들기 위해 사용된다. flex를 사용해 요소들을 가로 또는 세로로 배열하고, 크기를 유연하게 조절할 수 있다. 사용법과 실행 결과를 알아봅시다! 👾 flex-direction flex 컨테이너 내의 아이템들이 배치되는 방향을 지정하는 데 사용한다. ▶ row 아이템들이 왼쪽에서 오른쪽으로 가로로 배치된다. (default) display: flex; /* 속성을 지정하지 않으면, 기본값인 가로로 배치된다. */ display: flex; flex-direction: row; ▶ column 아이템들이 위에서 아래로 세로로 배치된다. display: flex; flex-direction: column; cf) row-reverse: 아..

🏷️ HTML - 태그의 형태와 사용법 HTML5 이전의 HTML 버전에서는, , 과 같은 일반적인 컨테이너 태그를 사용하여 레이아웃을 구성하였다. 기본적으로 컨테이너 태그를 쓰면서, 다음과 같이 id나 class 속성을 통해 구분하는 방식이었다. 제목 🏷️ 한계 컨테이너 태그들은 단순히 콘텐츠를 구분하는 역할만 하고 그 자체로 어떤 의미를 가지지 않기 때문에, 웹페이지의 의미와 구조를 설명하는 데에는 적합하지 않다. 🏷️ HTML5 - 태그의 형태와 사용법 시맨틱 태그(semantic tag)가 등장했다. 시맨틱 태그는 그 자체로 의미를 가지며, 웹페이지의 구조와 콘텐츠를 더 명확하게 표현할 수 있도록 돕는다. 다음과 같이 태그로 직접 사용할 수 있다. ➡ ... cf) 컨테이너 태그와 비교했을 때 화..