본문으로 건너뛰기

Study

git에 프로젝트 올리기​

프로젝트가 조금 커지다 보니깐 commit을 남기기 위해 그리고 배포를 하기위해 git에 프로젝트를 올렸다.
Readme.md 없이 만들어야 pull없이 프로젝트를 올릴 수 있었다.

Vercel​

Vercel을 이용해 배포를 했다.
배포가 막연히 어려운 거라고 생각했는데, 해보고나니 쉬웠다.
vercel에 들어가 github에 연동시켜 가입으르 하고, 원하는 레포지토리를 연동시켜 빌드했더니 바로 배포가 되었다.

Styled Component​

리액트를 시작하기 전에는 js와 css가 분리되어야 올바른 코드라고 생각했다.
근데 프로젝트를 만들다 보니 꼭 그렇지는 않은 거 같았다. 폴더 들에 들어가 .js, .css 파일이 따로 있으니 오히려 복잡했다.
각 컴포넌트를 폴더화시킬 수도 있지만 너무 복잡하고 더러울 거 같아서 styled component를 알아봤다.
처음 시작할때도 알아봤었는데, 잘 작동이 안되었다. 오늘 역시 처음엔 막혔는데, 그 이유는 컴포넌트에다가 적용이 가능했기 때문이다. 

npm install styled-components

styled를 설치하고, import styled from "styled-components"로 가져온다.
그리고 태그를 호출하는 것이 아니라, 컴포넌트를 호출한다!

//...
<Wrapper></Wrapper>
//...
const Wrapper = styled.tag``;

컴포넌트로 정의하고, styled. 뒤에 원하는 tag를 적는다. button이라든지 div라 든지...
자동완성이 안되서 자동완성 익스텐션을 깔아서 처리했다.
기존에 해온 방법보단 이 방법이 좋아보였다. 이번 프로젝트가 끝나면 gosu들이 쓰는 css를 쓰기 전까지 styledcomponents를 사용하지 않을까 싶다.

만들다보니 modal을 자주 사용할 것만 같아서 customHook을 한번 사용해보자! 생각했다.
이것도 막연하게 어려울 거라고 생각했는데 만들고 나니 그렇게 어렵지 않았다. 

//useModal.js
import React, { useState } from "react";
import ReactDOM from "react-dom";

export default function useModal() {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => {
    setIsOpen((prev) => !prev);
  };

  return { isOpen, toggle };
}

먼저 hook을 만들었다. 껏다킬수있는 스위치랑 켜져있는지 확인하는 state를 만들었다.

//DefaultModal.js
import React, { useRef } from "react";
import ReactDOM from "react-dom";
import "./DefaultModal.css";

export default function DefaultModal({ isOpen, onClose, children }) {
  const modalRoot = document.querySelector("#modal-root");
  const outside = useRef(null);

  if (!isOpen) return null;

  const modalhandler = (e) => {
    if (outside.current === e.target) onClose();
  };

  return ReactDOM.createPortal(
    <div
      className="defaultModal_background"
      onClick={modalhandler}
      ref={outside}
    >
      <div className="defaultModal">
        <h1 className="defaultModal_title">{children}</h1>
        <div className="defaultModal_button">
          <button onClick={onClose} className="defaultModal_button_close">
            확인
          </button>
        </div>
      </div>
    </div>,
    modalRoot
  );
}

그리고 디폴트모달을 만들었다. 조금더 다양화를 위해 children을 사용했다.
처음엔 message같이 state를 전달받아 사용했는데, modal에서 구현할 수있는게 message하나로 너무 제한되서 children을 사용했다.

//사용하고자 하는 컴포넌트
import DefaultModal from "../../modal/DefaultModal";
import useModal from "../../hooks/useModal";

const { isOpen, toggle } = useModal();

//...

<DefaultModal isOpen={isOpen} onClose={toggle}>...</DefaultModal>

이제 사용하고 싶은 컴포넌트에서 useModal로 사용할 함수, 변수를 가져오고 Modal을 선언하면 끝이다.

위시리스트​

Memo에서도 하려고 하면 할게 정말 많지만, 일단 웹 자체를 동작하게 하고 싶어서 위시리스트 구현을 하고있다.
todolist처럼 만들어서 체크, 추가도 되고 일괄삭제도 되게 구현해보고 있다.