✨ 알게된 것

리액트 강의를 따라하며 실습하는데 개발자모드 콘솔에 계속 두번씩 값이 출력되었다.이상하게 거슬려서 이유를 찾아보니 한 블로그에 잘 정리되어 있었다.이렇게 두 번씩 출력됨..StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구라고 한다.다음과 같은

한 개의 문자열을 입력받아 해당 문자열에 알파벳 대문자가 몇 개 있는지 알아내는 프로그램을 작성그동안 반복문 사용 시for문으로 작성했는데, 이 강의에서는 for...of(링크)문을 주로 사용하고 있다. fof...of는 ES6에 추가된 문법이라고 한다. 익숙해지기 위

npm install react-router-dom 모듈 설치드릅게 어려워 죽겄네...

spread 문법을 사용하면서 똑같은 배열을 왜 만들어서 활용하는지 궁금함이 생겼다React에서는 상태를 직접 변경하는 것이 아니라, 상태의 복사본을 만들어 수정한 후 그 복사본으로 상태를 업데이트하는 것이 중요한 원칙이라고 한다.성능 최적화: React는 상태가 변경

팀원이 추가되면서 협업을 위해 commit convention을 체크해주는 라이브러리를 사용했다.이에 대한 내용을 정리하고자 한다.패키지 매니저는 yarn을 사용했는데 공식문서에서 default로 제공하는 내용과 좀 차이가 있어 npm을 사용하는게 더 나을 것 같다.H

Next.js 14버전에 toast-ui의 editor 3버전을 적용해보려고 한다. install 패키지 매니저는 yarn을 사용하고 있다 > node_modules에 추가됐는지 확인 사용하기 > WebEditor.tsx 작성하고 원하는 페이지에 impo

{} 는 “코드 블록”return 없으면 무조건 undefined여러 줄 쓸 때 주로 사용그냥 {} 쓰면 블록으로 인식 → undefined객체를 반환하려면 반드시 ()로 감싸야 함❌ 잘못된 예시✅ 올바른 예시한 줄 계산식은 자동으로 반환(return 생략 가능)단순한

툴팁 버튼 컴포넌트를 만들었는데테이블에서 스크롤 시 툴팁이 닫히지 않는 문제가 있었다.TableBody 영역을 벗어났을 때 툴팁이 닫히도록 IntersectionObserver를 사용해 해결했다.특정 요소가 지정한 영역(root)에 보이는지 안보이는지를 감시하는 브라우

React cloneElement로 컴포넌트 감싸서 onClick 주입하기

1. 배경 포트폴리오 사이트를 만들면서 스크롤을 내리면 섹션이 아래에서 스르륵 떠오르는 애니메이션을 넣고 싶었다. JavaScript 없이 CSS만으로 구현해보고 싶어서 animation-timeline: view()를 사용했다. CSS로 구현하면 스크롤 감지와 리