[WeCode] 1차 프로젝트 후기

프로젝트 소개

약 12일간 작업할 홈페이지를 선정해 클론하는 프로젝트가 진행되었고, 제가 속한 팀은 'wiso'라는 청소예약 사이트였습니다. 저희 팀은 여러가지를 고려해 '가사도우미'와 '이사', '고객센터' 페이지를 작업하기로 하였고 추가적으로 로그인과 회원가입 페이지를 만들어 마이페이지까지 작업하는 것으로 결정하였습니다.

사용된 기술

기본적으로 HTML, css, JavaScript를 이용해 작업을 하였고 추가적으로 reactJS와 SCSS를 이용하였습니다.

내가 맡은 역할

저는 페이지에 들어가는 navigation bar와 로그인 페이지, 고객센터 페이지를 맡았습니다.
'navigation bar'는 스크롤을 내리고 페이지를 줄였을 때의 반응형, 사이드바가 나오는 작업까지 하였고 로그인 페이지는 소셜 로그인을 연동했습니다. 그리고 고객센터 페이지는 백엔드와 데이터 api 작업까지는 하지 못하였고 하드코딩으로 데이터를 띄웠습니다.

잘한 점, 아쉬운 점, 해결/개선 방법

1) 잘한 점: 제가 가장 만족스러웠던 점은 프론트엔드를 담당하는 팀원들과 계속 피드백을 주고 받고 커뮤니케이션이 원활하게 진행되어 각자 작업해야 하는 부분을 명확히 하고 서로간에 오해나 어려움이 없었다는 점입니다. 그리고 제가 작업한 부분에서는 반응형 작업을 한 것인데 SCSS를 이용해서 직관적으로 원하는 결과를 얻어낼 수 있었습니다.

2) 아쉬운 점: 아쉬웠던 점은 제가 백엔드 부분의 지식이 부족해 백엔트를 맡은 팀원들과의 의사소통이 원활하지 못했고, 결과적으로 각자 준비한 부분을 다 보여주지 못한 것입니다. 그리고 아직 react로 로직을 짜는 부분이 미흡해서 작업을 하는 속도가 미진해 제가 맡은 부분들을 온전하게 다 끝내지 못한 것입니다. 일단 큰 틀을 다 잡고 디테일을 수정해나가는 방식으로 진행했더라면 더 나은 결과를 만들어낼 수 있지 않았을까 하는 아쉬움이 남았습니다.
또, 'git'을 사용하는 게 미진해 많은 어려움을 겪었다는 점이 있습니다.

3) 해결/ 개선 방법: 일단 무엇보다 프론트와 백엔드가 서로 작업을 하기 위해서는 '서버가 어떻게 연결이 되는 것이고 api는 정확히 무엇인지' 등에 대해 더 관심을 갖고 지식을 채워나가야 겠고, 제가 작업을 하는 부분을 책임지기 위해서는 어떻게 그 기능을 구현할 것인지, 그 기능 구현을 위해 로직은 어떻게 접근을 해야 하는지 등에 대해 계속 고민하고 해결 방법을 찾아가는 연습을 계속 해야겠다는 것입니다. 화면에 띄우기 위해 어떻게든지 코드를 찾아 붙이면 보여줄 수는 있지만 왜 이렇게 로직이 짜여져 있는지에 대해서는 결국 제 몫이기 때문입니다.
좀 더 부지런하게 모르는 내용에 대해서 찾아보고 그걸 제 것으로 만들기 위해 노력해야 겠고 완벽한 결과물을 만들기 위해서는 저 한 명이 해야 하는 걸 하는 것도 중요하지만 팀원들과 계속해서 얘기하고 피드백을 주고 받는 것이 정말 중요하다는 것을 깨달았습니다. 그래서 다음 프로젝트 때에는 백엔드를 맡은 팀원과 더 많이 소통을 해야겠습니다.

기록하고 싶은 코드/ 로직/ 함수

• 스크롤을 내렸을 경우의 반응형 함수

import React, { Component } from "react";

class Nav extends Component {  //react
  constructor() {
    super();
    this.state = {
      scrolledNav: false // state 값 'false'로 주기
    };
  }

  componentDidMount() {
    window.addEventListener("scroll", () => {  //scroll event handler
      const isTop = window.scrollY < 30;  // 조건을 변수로 넣기
      if (isTop !== true) {  
        this.setState({ scrolledNav: true });
      } else {
        this.setState({ scrolledNav: false });
      }
    });
  }

  render() {
    return (
      <header>
        <div>
          <nav
            className={
              this.state.scrolledNav  
                ? "navigationMenu scrolledNav"  // true일 경우
                : "navigationMenu"              // false일 경우
            }
          />
        </div>
      </header>
    );
  }
}

export default Nav;

// scss
.navigationMenu {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  max-height: 80px;
  width: 100%;
  margin: 0 auto;
  background: transparent;
  transition: 0.25s;
  display: flex;
}

.scrolledNav {
  background-color: white;

  .menuList {
    color: black;
  }
  
  @media screen and (max-width: 768px) {
  .navigationMenu {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    background-color: white;
    position: fixed;
    height: 80px !important;
    overflow: hidden;
    z-index: 500;
  }
    .scrolledNav {
    background-color: white;
  }
}

• 소셜로그인 연동(카카오)

import React, { Component } from "react";
import axios from "axios";

class LogoBtn extends Component {
  loginWithKakao = e => {
    
    window.Kakao.init("//javascript app key");
    window.Kakao.Auth.login({
      success: ((authObj) => {
        const kakaoToken = authObj.access_token;
        axios({
          url: "서버 주소",
          method: "post",
          headers: { Authorization: kakaoToken },
          data: {}
        }).then(res => {
          if (res.data) {
            localStorage.setItem("access_token", res.data.access_token);
          }
          // 연결이 됐을 시, then
          alert("로그인에 성공하였습니다");
          this.props.history.push("/"); //메인페이지로 route
          console.log(res.data);
        });
      },
      fail: function(err) {
        console.log(JSON.stringify(err));
      })
    });
  };

  render() {
    return (
      <div className="loginBtn">
        <button className="socialLogin" onClick={this.loginWithKakao}>
          <img className="loginIconKakao" src={kakaoLogo} alt="kakao_logo" />
        </button>
      </div>
    );
  }
}

export default withRouter(LogoBtn);