[WeCode] 2차 프로젝트 후기

프로젝트 소개

'JustSeller'라는 유통 관련 서비스의 웹사이트를 약 12일간 클론하는 작업을 진행했습니다.
전반적으로 HTML과 CSS 코드가 어느정도 제공된 상태에서 JavaScript, React, Styled Components를 이용해 거의 모든 페이지를 다 구현해 보았습니다. 저희 팀원은 프론트 3명과 백엔드 1명으로 총 4명의 팀원으로 이루어졌습니다.

사용된 기술

처음으로 Next.js를 이용해 초기환경 세팅을 하였고, JavaScript, ReactJs, Css와 styled components를 이용해 작업하였습니다.

내가 맡은 역할

저는 총 3페이지를 맡았습니다. 'JustSeller'이 어떤 서비스를 제공하는 곳인지, 왜 'JustSeller'를 선택해야 하는지 등 전반적인 설명을 하는 페이지와 주문현황과 상품관리 페이지를 작업하였습니다. 첫번째 페이지는 CSS와 HTML이 주를 이루는 페이지였고, 두번째 페이지는 JavaScript와 React가 주를 이루었으며 백엔드와 협업이 필요한 페이지였습니다.

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

1) 잘한 점:

• HTML, CSS로 짜여져 있는 코드를 JSX와 Styled Components로 다시 변환하는 작업을 했는데 단순반복 작업이라 성취감을 느끼진 못했지만 끝까지 마무리 했다는 것.
• 백엔드에서 받은 데이터가 mock 데이터이긴 했으나 fetch를 받아 map을 돌려 화면에 띄운 것.
• react hooks를 써서 코드를 짜본 것
• 내가 작업해야 하는 분량을 기한내에 마친 것
• Styled Components로 처음 작업해 보았는데 모든 페이지를 다 커버한 것.
• Git 사용이 1차 때보다 수월해져 어려움이 크게 없었던 것

2) 아쉬운 점:

• 백엔드에서 mock데이터 밖에 받지 못한 것. 더 많은 대화를 하지 못한 것.
• 반복작업이 많았던 것
• Styled Components를 좀 더 다양하게 사용하지 못한 것
• 내가 맡은 페이지들에 기능이 많이 없었던 점

3) 해결/개선 방법:
곤란할 수 있더라도 백엔드와 대화를 해서 데이터를 구축해줄 것을 부탁했어야 했다. 확실하게 데이터가 구축되어 있는지를 확인해서 작업을 마무리 했어야 했다. 수동적인 자세로 해야하는 것만 마치면 끝이 아니라 그 다음을 계속 생각해 추가적으로 내가 더 뭔가를 만들어 나갔으면 더 의미있지 않았을까 싶다. 그 부분이 많이 아쉽다.

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

export default class SwitchBox extends Component {
  state = {
    active: null
  };

  clickHandler = id => {
    this.setState({ active: id }); // clickHandler에 active 값으로 id 인자 주기
  };

  render() {
    let tapContent;
    if (this.state.active === 1) { // 'state의 active id 인자가 1이면' => 조건부 렌더링
      tapContent = (
        <ContentBox>
          <div>
            <Title>Keyword Optimization</Title>
            <Content>
              1억건 이상의 자체 판매데이터와 실시간 트렌드에 대한
              <br />
              딥러닝 분석을 통해 최적의 상품 검색 키워드들을 도출합니다.
            </Content>
          </div>
          <ContentArea>
            <ImgWrap>
              <Img1 src="./assets/images/main/main_box_img_1.png" alt="" />
            </ImgWrap>
          </ContentArea>
        </ContentBox>
      );
    } else if (this.state.active === 2) {
      tapContent = (
        <ContentBox myId={this.state.active}>
          <div>
            <Title>Sales Forcasting</Title>
            <Content>
              매일 3억개 이상의 데이터 수집 분석을 통해
              <br />
              '지금 이 순간' 구매매력도가 높을 상품들로 판매합니다.
            </Content>
          </div>
          <ContentArea>
            <ImgWrap>
              <Img1 src="./assets/images/main/main_box_img_2.png" alt="" />
            </ImgWrap>
          </ContentArea>
        </ContentBox>
      );
    } else if (this.state.active === 3) {
      tapContent = (
        <ContentBox myId={this.state.active}>
          <div>
            <Title>Image Retrival</Title>
            <Content>
              Feature Detection 기술을 활용하여
              <br />
              기존 상품 이미지들을 더욱 구매 매력적인 이미지들로 치환합니다.
            </Content>
          </div>
          <ContentArea>
            <ImgWrap>
              <Img1 src="./assets/images/main/main_box_img_3.png" alt="" />
            </ImgWrap>
          </ContentArea>
        </ContentBox>
      );
    }
    return (
      <SelectBox>
        <UlBox>
          <Btn
            onClick={e => {
              this.clickHandler(1); // 클릭하면 id 인자 값 넘겨주기
            }}
            isActive={this.state.active === 1}  // 넘겨 준 id 인자 조건 확인
          >
            <span>Keyword Optimization</span>
          </Btn>
          <Btn2
            onClick={e => {
              this.clickHandler(2);
            }}
            isActive={this.state.active === 2}
          >
            <span>Sales Forcasting</span>
          </Btn2>
          <Btn3
            onClick={e => {
              this.clickHandler(3);
            }}
            isActive={this.state.active === 3}
          >
            <span>Image Retrival</span>
          </Btn3>
        </UlBox>
        {tapContent}
      </SelectBox>
    );
  }
}