교육 | 패스트캠퍼스 React & Redux로 시작하는 웹 프로그래밍 8주차 & 파이널 프로젝트

국민내일배움카드로 국비지원받고 프론트엔드 학습
열공 챌린지 8주차
파이널 프로젝트

 

🎥 목차

1. 목표

2. 알게된 점

3. 아쉬웠던 점

4. 파이널 프로젝트

 

🚀 목표

패스트 캠퍼스에서 학습주차별로 구분지어줬기 때문에, 8주차 학습강의 듣기가 학습 목표이다.

그리고, 파이널 프로젝트를 진행하여 프로젝트를 제출한다.

 

💡 알게된 점

portal

portal이란, 자식 컴포넌트가 시각적으로 튀어나오도록 적용시킬때 사용한다.

 

예를 들어서 modal창이 튀어나오는 컴포넌트를 구현했을때, 이 컴포넌트가 다른 형제 컴포넌트보다 아래에 있을때만 형제 컴포넌트를 덮고, 그렇지 않으면 형제 컴포넌트가 위에 튀어나오는 구조가 기본적으로 되어있다.

# Modal창이 형제 컴포넌트를 덮는다.
const App = () => {
    return (
        <div>
            <Child />
            <Modal />
        </div>
    )
}

# 형제 컴포넌트가 Modal창보다 앞으로 튀어나온다.
const App = () => {
    return (
        <div>
            <Modal />
            <Child />
        </div>
    )
}

 

이때, modal 컴포넌트의 순서를 변경하지않고 portal을 통해 튀어나오는 구조를 만들 수 있다.

 

우선 index.html에 아래와 같이 portal을 만든다.

 

다음으로 portal 컴포넌트를 정의해 준다.

const Portal = ({children}) => {
    const portal = document.querySelector('.portal');
    return createPortal(children, portal);
}

 

이후, portal을 적용시킬 컴포넌트를 감싸면 끝난다.

const App = () => {
    return (
        <Portal>
            <Modal />
        </Portal>
        <child />
        <child />
    )
}

 

 

portal : 버블링

 

Portals – React

portal을 이용하기 위해, id가 portal인 div태그를 생성했다.

 

그렇다면, portal 컴포넌트의 부모 컴포넌트에 클릭 이벤트를 주고 Modal 컴포넌트를 클릭하면, 버블링은 어떻게 발생할까?

const App = () => {
    return (
    <div onClick={()=>{console.log('root!')}}>
        <Portal>
            <Modal />
        </Portal>
        <child />
        <child />
    </div>
    )
}

 

 

버블링은 portal div태그를 거쳐, root div 태그까지 버블링이 발생하게 된다.

React가 의도적으로 root div태그까지 발생하도록 했다고 하니 참고하자

 

버블링 vs 캡쳐

캡쳐란, 특정 컴포넌트가 클릭되면 해당 컴포넌트를 가지고 있는 부모 컴포넌트가 어떤 컴포넌트가 클릭되었는지 체크하

 

 

React Developer Tools

크롬 확장프로그램인 React Developer Tools이다.

이 확장프로그램은 props, render 등 React로 구현된 정보를 알려준다.

 

React Developer Tools

 

Styled-components

CSS안에 JavaScript가 들어갈 수 있어 변수나 반복문을 이용하여 스타일링을 할 수 있다.

 

주의사항으로 컴포넌트안에 styled-components를 선언하지 말라고 한다.

const Wrapper = ({ message }) => {
  // WARNING: THIS IS VERY VERY BAD AND SLOW, DO NOT DO THIS!!!
  const StyledWrapper = styled.div`
    /* ... */
  `;

  return <StyledWrapper>{message}</StyledWrapper>;
};

그 이유는 속도가 느려진다고 한다.

 

styled-components를 자세히 알고 싶다면, API Reference를 보면 된다.

styled-components: API Reference

 

Redux

 

😢 아쉬웠던 점

Redux Toolkit​...?

현재는 Redux를 만든 회사에서 Redux toolkit이라는 최신버전의 Redux를 사용하는 것을 권장하고 있다.

 

그러나 강사님께서는 Redux만을 알려주셔서 이부분이 아쉬웠다.

 

그래서 내가 따로 정리했다.

공부 | Redux Toolkit 정리

 

🚀 파이널 프로젝트

미세먼지 알리미

8주차 마지막 강의를 끝내고 나니, 학습 종료까지 9일이 남았다.

 

파이널 프로젝트 제출 마감일이 학습종료일과 일치하기 때문에 서둘러 개발을 진행헀다.

 

기능 구현

요구사항 중, 로그인, 즐겨찾기 기능 구현을 제외한 모든 기능을 구현을 했다.

 

그리고, 내가 집어넣고 싶은 기능도 넣었다.

(카카오 지도를 이용하여 위치를 받고, 해당 위치의 미세먼지 농도를 맨 처음화면에 나타나도록 하는 것이다.)

 

아쉬운 점

로그인과 즐겨찾기 기능 구현을 하지 못해서 아쉬웠다.

 

개발할때 생각나는데로 코드를 작성해서 코드가 많이 난잡해 가독성이 떨어졌다.

 

미세먼지 API 서버가 불안정한지, API 호출 오류가 발생하면 강제 휴식을 갖게되었다.

 

끝이 아닌 시작

현재는 이정도로 마무리 하지만, 계속해서 프로젝트를 개선해봐야겠다.

 

아래는 내가 만든 미세먼지 알리미이다.

React App