클론 하려 했는데 기획하게 된 React 개발 리뷰 (1)

xedni·2021년 1월 11일
3

Project | CLNASS101

목록 보기
1/3
post-thumbnail

클래스 101의 크리에이터 페이지를 만들 것이다.
프로젝트명은 클나쓰101... ~~박영준님의 갓작명 센스~~

1. 클래스101 분석

: 크리에이터가 강의를 직접 만들수 있는 페이지, 그것이 상품이 되어 고객이 구매할 수 있는 페이지, 구매한 강의를 직접 웹사이트 내에서 학습할 수 있는 페이지 이렇게 3가지를 모두 할 수 있다는 특징을 가지고 있다.
이것의 연계를 집중적으로 개발할 예정이다.


2. 클론의 목적

목적 : 클론 코딩을 통한 웹 사이트의 이해도를 높이고 실제 사용되는 기술에 대한 이해도를 높인다.
개인목표 : 개인적인 목표는 이번에도 어떤 라이브러리도 쓰지 않고 만들자!!

  • 기간 : 2020년 11월 30일 (월) ~ 2020년 12월 11일(금), 12일간 진행

3. 사용된 기술

: 1차 프로젝트와 마찬가지로 학습기간 동안 라이브러리는 일부러 사용하지 않고 구현해본다.

  • Development environment: CRA(Creat-React-App)
  • Language: JavaScript
  • Library: React
  • Third-party: React-Router, SASS

4. 어떤 순서로 학습 했는가?

: 이번 프로젝트는 위에서 설명한 것 처럼 상품의 연계가 가장 중요했다.
그렇기에 프론트 3명이 각각의 작업을 진행하기 보다 상시로 작업 과정을 공유하며 진행했다.

  • 1단계: 프론트 3명과 백엔드 3명이 각각 연계될 상품을 고려하여 업무 분할
  • 2단계: 백엔드와 프론트엔드가 다:다 관계로 소통하며 각각 맡은 뷰를 그린다.
  • 3단계: 목업 데이터 없이 백엔드와 즉시 테스트하며 빠르게 진행한다.
  • 4단계: 크리에이터 > 상품구매 > 강의확인 까지의 흐름을 테스트한다.

5. Code Review

<클릭하면 영상으로 이동>

: 나는 크리에이터 페이지를 담당했다.
그러나 내가 맡은 크리에이터 페이지는 바로 볼 수가 없었다ㅠㅠㅠ
(강의를 만들기까지 조건이 많다)
그래서 클론으로 시작했지만 클론이 아닌 기획한 크리에이터 페이지를 만들어 볼 예정이다.

1) Navigation 주요코드

(1) User Profile 모달창 만들기

: 크리에이터 페이지 제작 전, 공용 컴포넌트를 먼저 제작 했는데 로그인 상태 표시해주는 Navigator다.
로그인일때와 로그아웃을때 메뉴가 달라지며, 로그인과 로그아웃 페이지로의 라우팅 기능을 가지고 있다.

const [handleModalSwitch, setHandleModalSwitch] = useState(false);
const [loginStatusSwitch, setLoginStatusSwitch] = useState(false);
  • 그래서 2개의 스위치를 가지고 있다.
{handleModalSwitch === true ? (
  <ProfileModalBox>
    <div className='miniProfileBox'>
      <div className='miniProfileImageBox'>
        <img src={myProfileURL} alt='miniMyProfile' />
      </div>
      <div className='profileInfo'>
      <div className='profileName'>{myProfileName}</div>
        <NavLink className='myPage' to={'/MyPage'}>{'마이페이지 >'}</NavLink>
      </div>
    </div>
    <div className='logOutBox' onClick={(e) => 
      {setLoginStatueSwitch(!loginStatueSwitch);
       setHandleModalSwitch(false);
       KakaoLogout(e)}}>로그아웃
    </div>
  </ProfileModalBox>
) : null}
  • 로그아웃 버튼을 누를 경우 모달창이 사라지고 로그아웃 상태로 Status가 바뀌게 된다.
  • loginStatusSwitch 는 메뉴바 전체 태그를 감싸고 loginStatueSwitch ? 로그인시 메뉴바 : 로그아웃시 메뉴바 로 삼항연산자로 코드가 구성되어 있다.(길어서 코드 생략)

2) Login Page 주요 코드

(1) 소셜(카카오) 로그인 기능 만들기

<script>Kakao.init('32a60450b6802f37b1c9c054a3b5744b');</script>
  • 카카오를 사용하기 위해서는 index.html의 헤더 위치에 위와 같은 코드를 넣어주어야한다.
  • 이제부터 스크립트를 통해 카카오를 불러오게 될 것이다.

  • 잘 들어갔는지 확인하기 위해 콘솔창에 Window.Kakao라고 쳐보면 window안에 kakao 객체를 사용할 수 있게 된 것을 볼 수 있다.
  • 이것을 자세히 살펴 보면 내가 Kakao로 무엇을 할 수 있는지 모두 확인 할 수 있다.
  const { Kakao } = window;

  function KakaoLogin() {
    Kakao.Auth.login({
      success: (auth) => {
        localStorage.setItem('access_token', auth.access_token);
      },
    });
// 여기까지가 카카오 엑세스 토큰 발급 끝
    
    fetch('API', {
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('access_token'),
      },
    })
      .then((res) => res.json())
      .then((result) => {
        if (result.token) {
          console.log(result);
          localStorage.setItem('token', result.token);
          props.history.push('./', {
            name: result.name,
            profileImage: result.profileImage,
          });
        }
      });
  }
// 우리쪽 백엔드 서버와의 통신(토큰 발급, 로컬 스토리지 저장)
  • 카카오 로그인은 정말 쉽다.
    Kakao.Auth.login() 를 불러오는 것 만으로도 바로 토큰이 발급이 된다.
  • 이 토큰을 백엔드 서버로 보내주면 백엔드에서 카카오와 통신하여 인증을 하게 되고 우리에는 우리 서버에서 발급한 토큰을 발급해 줄 것이다.
  • 이 토큰을 로컬에 저장하면 끝

(2) 소셜(카카오) 로그아웃 만들기

  function KakaoLogout() {
    if (Kakao.Auth.getAccessToken()) {
      Kakao.Auth.logout();
      localStorage.removeItem('access_token');
    }
  }
  • 로그아웃도 쉽다.
  • 엑세스 토큰이 존재하는지 체크하고 Kakao.Auth.logout() 를 통해 토큰만 삭제해주면 된다.

(3) 로그인 페이지 반응형으로 만들기

// 우측 커버 이미지 스타일드컴포넌트 부분
const CoverContainer = styled.div`
  display: flex;
  flex: 1 1 10%;
  width: calc(100vw-323px);
  height: 100vh;
  background-image: url('/images/SH/coverImage.jpeg');
  background-size: cover;

  @media (max-width: 30vh) {
    display: none;
  }
`;
  • 우측 커버이미지를 미디어쿼리를 이용해서 일정크기 이하일때 display:none로 숨겨준다.
  • 좌측 메뉴는 픽셀 사이즈로 만들어 크기에 변화를 주지 않는다. 끝...

다음화 2부에서는 클래스101의 꽃, 크리에이터 페이지에 대해 알아보자.

profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글