공부하자

문제 상황Dialog 컴포넌트와 버튼을 합쳐서 드롭다운 컴포넌트를 만들고 있었다.내가 만든 컴포넌트의 요구사항은 다음과 같다.버튼을 클릭하면 Dialog가 열림Dialog는 화면 여유 공간에 따라 버튼의 위나 아래에 위치스크롤/리사이즈 시에도 적절한 위치 유지핵심 구현을 위해 위치 계산이 필요했고 위치 계산에는 여러가지 방법이 있다.처음에는 그냥 순수하게 useEffect만 사용해 구현했다.useEffect(() => { if (isOpen && anchorEl && dialogRef.current) { const updatePosition = () => { // 1. 버튼의 위치 정보 가져오기 const buttonRect = anchorEl.getBoundingClientRe..

https://5ffthewall.tistory.com/112 [React/리액트] 파일 업로드와 미리보기 기능 구현하기구현할 기능 및 문제 상황다음과 같이 갤러리에서 이미지를 업로드하는 기능을 구현해야 했다.각자 다른 페이지에서 두 번 씩이나 쓰이기 때문에 이미지를 등록하는 기능을 hook으로 구현해서5ffthewall.tistory.com  위 글에서 파일 업로드를 구현하다가 궁금증이 생겼다. 대부분의 파일 업로드 코드들이 useRef를 사용해서 나도 useRef로 값을 참조했는데 useState를 써도 될 것 같다는 생각이 들었다. 구글링하다가 useRef를 안좋아한다는 사람도 있고.... useRef 쓸 바에 useState쓴다는 말도 있고... 그래서 직접 코드를 비교해보기로 했다!useRef ..

지나친 이론 공부를 다시 해보겠다... 해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com  돔(DOM)이란 무엇인가?자바스크립트의 탄생 배경자바스크립트는 웹문서를 제어하기 위해 개발된 언어이다.HTML 요소를 추가, 제거, 변경하는 등의 작업을 위해 사용된다.HTML 파일을 자바스크립트로 제어하는 방법브라우저에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있다.ex) 크롬 : 블링크, 파이어폭스: 게..