22/04/27/수 JavaScript심화, 스터디 프로젝트

220427 Today I learned!

• JavaScript 심화
• 스터디 프로젝트
• 백준 문제 풀이

---

1. Fact

(1) JavaScript 심화

• DOM의 객체를 선택하고 변경하는 일련의 과정과 이벤트에 대해 학습했다.
• select (선택)
  • 변화를 줄 객체를 선택한다.
• manipulution (변경)
  • 객체 생성 및 추가
  • 객체 변경 (속성)
• Event
  • 특정 이벤트가 발생하면, 할 일 (함수)을 등록한다.
  • EventTarget.addEventListener(type, listener[, options])
• 정리본

(2) 스터디 프로젝트

• 리액트를 활용한 토이프로젝트
  • 노마드 코더 리액트 강의에서 학습한 내용을 활용하여 웹사이트 제작
• 운동 기록을 입력할 모달창 구현완료
  • props를 활용하여 button 컴포넌트와 modal컴포넌트를 연동
  • props로 함수를 보낼 수도 있다는 것도 알게 되었다!

// button.js

function Button() {
  // modalOn이 true이면 modal창이 보인다. 
  const [modalOn, setModalOn] = useState(false);
  const openModal = () => setModalOn(true);
  const closeModal = () => setModalOn(false);
  return (
    <div>
      <StyledButton onClick={openModal}>+</StyledButton>
      <Modal show={modalOn} hide={closeModal}/>
    </div>
  );
}

(3) 백준 문제 풀이

• 16562 친구비
• 문제풀이
• Union-Find

2. Feeling

Vanila JS로 웹페이지를 한 번 구현해봐서 수업 내용은 수월하게 넘어갈 수 있었다.

그런테 스터디에서 진행중인 프로젝트에는 하나의 큰 산이 남아있다… 버튼을 클릭하여 form이 있는 모달창을 띄우는 것까지는 했는데, submit을 하면 카드 컴포넌트를 생성하고 input으로 받은 데이터를 기록해야 한다. 그런데 어떻게 구현해야할지 막막하다. 🤔

3. Finding

이벤트 캡쳐와 버블링에 대해 알게되었다!

모달창을 띄운 후 모달창 외부를 클릭하면 창이 자동으로 꺼지게 설정하고 싶었다. 그런데 모달창내부 태그가 모달창 외부 태그보다 하위 태그이기 때문에 모달창내부를 클릭해도 모달창이 꺼지게 되는 상황이 발생했다. 해결하기 위해 더 알아보던중 이벤트 캡쳐와 버블링에 대한 개념을 알게 되었다. 공식문서

이벤트 버블링이란, 특정 객체에 이벤트가 발생했을때 해당 객체보다 상위의 요소들로 전달되는 특성을 말한다. body <= div <= button 와 같은 구조일 때, 아래에 있는 button 태그에서 이벤트가 발생하면 body태그까지 이벤트가 전달된다.

이벤트 캡쳐링이란, 버블링과 반대로 상위객체들로 부터 하위 요소에게 전달된다.

이벤트가 전파되는 것을 막기위해서는 Event.stopPropagation()을 사용해야 한다. 공식문서

// modal.js

//... 생략
   <div>
      {show ? (
        <StyledContainer onClick={hide}>
          {/* 이벤트 전파 막기! 클릭 이벤트가 발생해도 상위 객체는 모른다! (전파되지 않는다.) */ }
          <StyledModal onClick={(event) => event.stopPropagation()}>  
            <form onSubmit={formSubmit}>
				...
            </form>
          </StyledModal>
        </StyledContainer>
      ) : null}
    </div>

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	pause 🤦‍♀️	잠시 중단!
강의에서 학습한 flex-website 혼자 제작하기	in progress 🚀	현재 Section2까지 진행한 상태이다. 오는 주에 Section3를 할 예정이다.
1일 1알고! 🔥	in progress 🚀