1. 진행한 프로젝트

• SpaceCloud라는 현재 서비스 되고 있는 웹을 클론하는 프로젝트.
• 나를 포함한 FrontEnd 2분, BackEnd 1분, Front + Back 1분 해서 총 4분
• 프로젝트 기간 : 12일 (12.30 ~ 1.10)
• 기술 스택
  - FrontEnd : HTML, CSS, JavaScript, React, scss
  • BackEnd : Python, Django, MySQL

2. 내가 만든것들

• 메인페이지 구현
  - 메인페이지 내 Modal 창 구현
  • Library 통한 Carousel 구현
    - media query 이용한 메인페이지 반응형
• 카카오Map api Component
• 공간등록 페이지
  - state 로 입력값 관리

3. 프로젝트를 진행하며 느낀점

3.1 만족한 부분

• 막연했던 반응형에 대해서 어느 정도 감이 잡혔고 실제로 구현한 것
• 처음 해본 팀 프로젝트를 마찰 없이 원만하게 진행한 부분
• git에 대한 이해
• react를 활용한 간단하지만 구현한 이벤트 로직들

3.2 아쉬운 부분

• css에 대한 이해도 부족으로 구현하는데 급급했던 modal
• 마찬가지로 구현해내지 못하고 라이브러리를 쓴 carousel
• 반복되는 구간을 Component 만들어서 생산성을 높이는 대신 쪼개기에만 급급
• 성능 최적화

3.3 아쉬운 부분 보완

• css에 대한 이해도를 높여야겠다는 생각이 많이 들었다. 여러 자료들을 보면서
  codepen에서 많이 연습해봐야겠다. 특히 animation
• 다음 프로젝트에서 내가 맡은 부분을 조금 더 자세하게 분석을 해야겠다.
  1차 때는 바로바로 코드를 치는데 급급한 결과 반복되는 많은 부분을 효율적으로 관리하지 못했다.
• 아직 성능을 논할만한 프로젝트도 로직도 아니지만 약간의 비효율이 쌓이고 쌓이면 문제가 생긴
  다고 생각한다.. 현재 읽고 있는 책에서 최적화 관련된 부분과 life cycle 조금 더 확실히 내 것으로 만들어서
  다음 프로젝트에는 활용해서 효율적인 코드를 고민해봐야겠다.. (부끄러워 말고 멘토님들한테 많이 물어봐야지)

4. 기록하고 싶은 코드

카카오 api

사실 카카오 api 개발자 센터에 가면 정말 친절하게 사용법을 정리해놔서 따라치는 게 거의 대부분이었지만
첫 외부 api를 사용해봤고 다른 팀원들이 요구했던 기능들을 추가로 구현해서 기록해놓고 싶다.

/*global kakao*/ 
import React, { Component } from "react";
import "./KaKaoMap.scss";

class KaKaoMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicked: false,
      map: null
    };
  }

  componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src =
      "//dapi.kakao.com/v2/maps/sdk.js?appkey=4739d49844352d17f62f36925fe6908b&autoload=false&libraries=services";
    document.head.appendChild(script);

    script.onload = () => {
      kakao.maps.load(() => {
        const option = {
          center: new kakao.maps.LatLng(0, 0),
          level: 4
        };
        const el = this.mapRef;

        //지도생성
        const map = new kakao.maps.Map(el, option);
        //geocoder라이브러리
        const geocoder = new kakao.maps.services.Geocoder();

        //좌표변환 함수
        const handleAddress = (result, status) => {
          if (status === kakao.maps.services.Status.OK) {
            const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
            //마커이미지
            const imageSrc = "https://www.spacecloud.kr/_nuxt/img/cace91f.png", // 마커이미지의 주소
              imageSize = new kakao.maps.Size(36, 47), // 마커이미지의 크기
              imageOption = { offset: new kakao.maps.Point(27, 69) };
            const markerImage = new kakao.maps.MarkerImage(
              imageSrc,
              imageSize,
              imageOption
            );
            console.log(coords);
            //마커를 생성
            const marker = new kakao.maps.Marker({
              position: coords,
              image: markerImage
            });
            //마커가 지도 위에 표시되도록 설정
            marker.setMap(map);
            //최초 잠금설정
            map.setZoomable(this.state.clicked);
            //현재 지도 스테이트에서 관리
            this.setState({
              map
            });
            //중심값 변경
            map.setCenter(coords);
          }
        };
        //geocoder 라이브러리 addressSearch 메서드 사용
        geocoder.addressSearch(this.props.address, handleAddress);
      });
    };
  }

  //잠금
  handleClick = () => {
    this.setState(
      {
        clicked: !this.state.clicked
      }, //setstate는 비동기라서 두번째 콜백함수에서 줌인 아웃 처리
      () => {
        this.state.map.setZoomable(this.state.clicked);
      }
    );
  };

  //줌인 줌아웃
  zoomIn = () => {
    this.setState({
      clicked: true
    });
    this.state.map.setLevel(this.state.map.getLevel() - 1);
  };

  zoomOut = () => {
    this.setState({
      clicked: true
    });
    this.state.map.setLevel(this.state.map.getLevel() + 1);
  };

  render() {
    const mapWidth = {
      width: this.props.width,
      height: this.props.height
    };
    return (
      <div className="map_wrap" style={mapWidth}>
        <div className="map" id="map" ref={ref => (this.mapRef = ref)}></div>
        <div className="custom_zoomcontrol radius_border">
          <span
            className={
              this.state.clicked
                ? "custom_zoomcontrol_lock"
                : "custom_zoomcontrol_unlock"
            }
            onClick={this.handleClick}
          ></span>
          <span className="custom_zoomcontrol_in" onClick={this.zoomIn}></span>
          <span
            className="custom_zoomcontrol_out"
            onClick={this.zoomOut}
          ></span>
        </div>
      </div>
    );
  }
}

export default KaKaoMap;

css

.map {
  width: 100%;
  height: 100%;
}
.map_wrap {
  position: relative;
  overflow: hidden;
  width: 764px;
  height: 640px;
}

.custom_zoomcontrol {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 120px;
  overflow: hidden;
  z-index: 1;
}
.custom_zoomcontrol span {
  display: block;
  width: 36px;
  height: 36px;
  text-align: center;
  cursor: pointer;
}
.custom_zoomcontrol_unlock {
  background-image: url("https://www.spacecloud.kr/_nuxt/img/08341ee.png");
  background-position: -41px -507px;
  margin-bottom: 10px;
}
.custom_zoomcontrol_lock {
  background-image: url("https://www.spacecloud.kr/_nuxt/img/08341ee.png");
  background-position: -241px -507px;
  margin-bottom: 10px;
}
.custom_zoomcontrol_in {
  background-image: url("https://www.spacecloud.kr/_nuxt/img/08341ee.png");
  background-position: -321px -507px;
}
.custom_zoomcontrol_out {
  background-image: url("https://www.spacecloud.kr/_nuxt/img/08341ee.png");
  background-position: -349px -380px;
}
.custom_zoomcontrol span img {
  width: 15px;
  height: 15px;
  padding: 12px 0;
  border: none;
}
.custom_zoomcontrol span:first-child {
  border-bottom: 1px solid #bfbfbf;
}

5. 총평

첫술에 배부를 수는 없지만 많이 아쉬운 프로젝트였다. 많이 구현하지 못한 기능들, 구현하는 데만 급급했던 코드들 등등... 그중 가장 크게 느껴졌던 부분이 프로젝트 발표할 때 내가 만들어온 모든 결과물들이 눈으로 보인다는 것에 대한 부담이 느껴지면서 한편으로는 부끄러웠다. 시간을 핑계로 넘겨버린 별거 아니라고 생각했던 결점들이 몇 배는 크게 보였다.
모든 일이 그렇고 모든 프로그래머들이 그러겠지만 더 성숙한 자세로 책임감을 갖고 코드를 작성해야겠다.