I

영화 : 엘리멘탈

보기 전부터 감동적인 영화라고 해서 펑펑울면 어떡하지 생각하면서 본 영화.
이루어질 수 없다고 믿었던 사랑이 이루어진다. 나의 특별함을 알아주는 존재, 어떠한 상황에서도 나를 우선 생각해주는 사람을 만나는 것은 큰 축복이다.
탑건처럼 ost주제곡이 마음에 들었다.

ott : 사냥개들

넷플로 사냥개들을 정주행했다. 정확히는 3화까지 다보고, 이러다 하루종일 보고있겠다 싶어서 뒤는 요약본을 찾아봤다.
웹툰 샤크, 마이네임과 비슷한 결의 드라마이다. 복서의 인생을 살고싶은 주인공의 어머니가 스마일 캐피탈이라는 사채기업에 사기를 당하고, 주인공이 복수해가는 영화.
원래는 김새론과 우도환이 주인공으로 사건을 해결해나가는 설정이였는데, 도중에 김새론이 음주운전을 하는 바람에 끝까지 촬영을 할 수 없었고, 최대한 김새론의 분량을 덜어내고 이상이의 분량을 추가하면서 브로맨스를 볼 수 있었다.

영상매체들이 전하는 메세지

엘리멘탈을 보면서는 옥탑방고양이와 데자뷰를 느꼈고, 사냥개들을 보면서도 비슷한 메세지가 들어가있음을 느꼈다.

세상이 원하는 대로 살아갈 것인가? or 내가 원하는 인생을 살 것인가?

매체들에선 집안형편에 따라 선택이 갈린다. 나라면 무엇을 택할까?
나는 아직 청춘이고, 도전할 기회가 많다고 생각하기에 후자를 선택할 것이다.

행궁동

7월 중순에 행궁둥이를 가기로 했다. 공방->화성행궁->탐방->카페->저녁->숙소 동선을 생각중이다.

알바

여자친구가 알바를 할 거 같다. 정확하게는, 계약직 일이라고 하는게 맞겠지.
나는 사실 알바에 대해 부정적인 시각을 가지고 있다. 알바 할 시간에 공부하면 그 시간은 최소 10배는 더 가치있다고 생각하기에. 하지만 또 내가 원하는 것만 할 수는 없는 법. 먹고살기위해, 돈이 필요해서 알바를 할 수도 있고, 알바를 할 시간에 공부만 한다는 것도 개소리고.
얘기를 듣고 많은 생각을 했다. 이제 곧 졸업을 하면 본격적으로 더 바빠지고, 취직하고 돈도 벌고 할텐데 만나는 시간도 적어지고, 삶의 방식도 가치관도, 씀씀이도 바뀌면... 근데 원래 인생은 정적인게 아니고 변화무쌍한거 아닌가?
이런 고민은 매듭짓기 참 어려운 거 같다. 매듭짓기 어려운 고민은, 내가 발전하면 해결할 수 있는 경우가 많다. 결론은, 열심히 하자.

Learned

모달창

const submitHandler = (event) => {
    event.preventDefault();
    setId("");
    setPw("");
    if (idReady === true && pwReady === true && tryNum > 4) {
      acceptLogin.forEach((item) => {
        if (item.id === id && item.pw === pw) {
          idChange(item.name);
          onLogin();
        } else {
          setIsModalOpen(true);
        }
      });
    }
  };

submit했을때, 유효성 검사를 통과했다면 acceptLogin 배열을 돌며 등록된 아이디 및 비번을 입력하면 로그인을 허용하고, 틀리면 모달창을 띄운다.

<div className='modal_background'>
      <div onClick={onClose} className='modal'>
        <p className='modal_wrong'>아이디 또는 비밀번호를 잘못 입력하였습니다.</p>
        <p> 입력하신 내용을 다시 확인해주세요.</p>
      </div>
    </div> 

모달창과 background를 구현했다. 모달창을 누르면 모달창을 종료한다.

포탈

modal은 로그인 하는 컴포넌트와 분리되어 body의 직계자식이 되는 편이 낫다.

//index.html
<div id="root"></div>
<div id="modal-root"></div>

body의 직계자식에 새로운 id를 생성하고

const PortalModal = props => {
  // 모달이 마운트 될 엘리먼트. 루트 엘리먼트와 다른 곳이다.
  const modalRoot = document.querySelector("#modal-root")
  // 모달 앨리먼트를 modalRoot에 마운트할 것이다.
  return ReactDOM.createPortal(<Modal {...props} />, modalRoot)
}

PortalModal 컴포넌트를 만들어 모달창이 마운트될 곳을 지정해준다.

<PortalModal isOpen={isModalOpen} onClose={handleCloseModal} />

Modal을 호출할 컴포넌트에서 PortalModal을 호출한다.