브랜디 인턴십 후기

sanghun Lee·2020년 10월 16일
3

프로젝트 리뷰

목록 보기
4/4
post-thumbnail

위코드에서 주최하는 기업협업을 진행한 후기를 시작해보겠다.

결론부터 말하면 나는 칼취업이라는 기회에 당첨이 되지 않은 사람이다 :)

서론

우선 브랜디에서는 Vue 를 이용하여 Front-end를 구현하는 곳이며 프로젝트는 브랜디 사이트를 클론하게 된다.

그 양이 방대하여 클론이 문제가아니라 진짜 .. 초반에 조금 힘들긴 하다.

지금까지 해왔던 React로 익숙해진 코딩스타일과 생각방식을 조금은 바꿔볼 필요가 있었다.

이 과정에서 vue 와 React의 차이를 느끼게 되었는데 개인적으로 받은 느낌은 크게 이렇다

Vue: 학습량에 비해 만들 수 있는 량이 많으며 깊게 들어가지 않아도 구현 할 수 있는 범위가 크다.

  • v-if, v-for 등 vue만의 문법이 존재하여 js에 대한 지식이 매우 깊지 않아도 이 프레임워크만의 룰을 잘만 따르면 쉽게 만들 수 있다.

  • logic부분과 render부분을 명확히 구분하는 것이 보인다.

React: JS의 기본이 탄탄하고 JS의 문법을 사랑한(?)다면 사용하기 좋은것 같다(개인적으로 나는 React가 공부하기에 더 좋은 것 같다).

  • hook이나 class형 함수형 등으로 다양하게 표현이 가능하며 용도에 따라 적합하게 사용할 수 있다.
  • Native도 동일한 로직으로 구성되어 있어 앱으로의 확장 가능성이 열려있다.(사실 native공부 안해봐서 모르겠다.)

두가지의 툴 모두 심도있게 공부를 진행하지 못해 이정도로만 말을 할 수 있을 것 같다 ..

본론

내가 구현한 이벤트, 레이아웃은 아래와 같다.

개별로 공부하며 정리해 놓은 것을 제외한 NavBar만 간략하게 설명해보겠다 :)

위 그림과 같이 브랜디는 hover 시 각 상위 카테고리에 해당하는 하위 카테고리들을 모두 보여주는 Navigation Bar 를 가지고 있다.

데이터는 아래와 같은 구조를 가지고 있다.

[
  {
    "id": 1,
    "홈": []
  },
  {
    "id": 2,
    "랭킹": []
  },
  {
    "id": 3,
    "하루배송": []
  },
  {
    "id": 4,
    "쇼핑몰 · 마켓": [
      {
        "id": 1,
        "아우터": [
          {
            "id": 1,
            "name": "자켓"
          },
          {
            "id": 2,
            "name": "가디건"
          },
          {
            "id": 3,
            "name": "코트"
          },
          ...

일단 데이터를 받고 난 뒤 걱정한 부분은 두가지가 있다.

  1. 어떻게 클릭 된 최상위 카테고리(쇼핑몰마켓,브랜드, 뷰티 등..)의 흔적을 남길 것인가(css로 변경된 색상을 보여줄 것인가)

  2. 그리고 어떻게 카테고리 component로 Navbar에서 클릭한 하위 데이터들을 보내서 aside bar로 넘겨낼 것인가.

일단 첫번째를 위해 처음 생각했던 방법은 Boolean값을 임의로 각 최상위 카테고리에 준 다음 클릭이 되었을 때, boolean 값의 변경을 통해 클래스 토글을 할 생각이었다.

하지만 이 boolean값을 무엇과 비교하여 변경할 것인가에 대한 답이 나오지 않았었는데 주변의 조언을 받아 router의 주소값을 이용하기로 했다.

router 값과 각 데이터의 최상위 마다 부여해준 name이라는 키의 값을 동일하게 만들어 준 뒤 동일한 것만 boolean값을 이용하여,

색변경을 위한 다른 클래스로 변경시켜 주는 것이다.

우선 최상위 데이터마다 name 속성을 부여한 과정을 보자

각 대표 키 마다 name이라는 속성으로 영어로 된 맞춰둔 주소값을 넣어주었다.

각 name은 rotuer 의 값과 동일하게 하였다

    {
      path: '/brand',
      name: 'Brand',
      component: Brand
    },

이런식으로다가

이 방식을 통해서 아래와 같이 클릭한 최상위 카테고리의 색을 변경시켜 주었다.

UI적인 측면에서 클릭을 한 것이 무엇인지 계속 인지 시켜주는 방식은 굉장히 필요하다고 생각이 들었다.(물론 브랜디도 이렇게 하고 있다.)

그리고 데이터를 받아오며 가공한 것을 보면 active를 주입한 이유가 있다.

예를 들어 위의 그림과 같이 브랜드라는 것을 클릭했을 때 하위 데이터들(아우터, 상의, 바지 등)은 category 컴포넌트로 넘어가면서 좌측의 aside바를 생성하게 되는데 이 aside바는 고객이 클릭한 하위 데이터의 동등한 위치에 있는 데이터들을 모두 보여주게 된다.(말이 어렵다.)
움짤로 봐보자

화질이 .. 용량상 어쩔 수 없지만 잘 보이지 않는게 아쉽다

일단 좌측 AsideBar는 차상위 데이터를 통해 하위를 보여주며 접혔다 열렸다 하게 되는데 이때 이용하는 것이 active값이다.

이 active 값은 category 컴포넌트로 넘어오는 해당 데이터만을 받아 다시 active 값을 부여해줬다.

예를 들어 브랜드를 클릭하면 브랜드의 하위 데이터를 vue-x를 통해 저장하고 category 컴포넌트에서 이를 다시 받아 재사용하였다.

만약 active 값을 특별히 주지 않는다면 다시 클릭하였을 때 닫히거나 열리는 것을 구현할 방법을 따로 찾지를 못하였고,

active값은 Category Component에서 렌더 시 부여했으며, 렌더 시 열려있는 방법은 클릭한 녀석의 아이디와 같은 아이디는 다른 boolean값을 줘서 해결했다.

정리하자면 아래와 같다

  1. 백엔드에서 데이터를 받는다
  2. 받은 데이터를 필요를 통해 정재한다(name, active 속성부여)
  3. vue-x에 필요한 하위 데이터만 저장한다
  4. 다른컴포넌트(Category)에서 이를 재활용하여 Aside bar를 만든다
  5. 재활용된 데이터에 다시끔 active속성을 부여한다(위 부여된 속성보다 하위의 데이터들)
  6. 재활용된 데이터의 id 값을 이용하여 토글을 시킨다.

gif파일에서 보이듯 판매량순과 세일, 한글로 이루어진 작은 nav바들은 간략하게 설명하고 넘어가겠다.

우선 판매량순과 세일은 백엔드와 키값을 임의로 맞춰 필요에따라 get 하는 URL을 바꿔주는 함수를 만들어 계속 변경시켜주었다.

그리고 글자로 이루어진 작은 Nav 바는 id 값과 들어온 데이터들을 비교하여 그에 해당하는 한글명으로 변경시켜주는 함수를 별도로 만들어 진행하였다.(물론 얘네도 클릭하면 해당위치로 간다)

브랜디는 어땟는가?

일단 브랜디라는 회사는 스타트업계에서 상당히 인지도가 있고 자본도 튼튼, 직원들도 튼튼한 회사이다(건강은 사실 잘 모르겠고 경력이나 실력..)

브랜디에서의 인턴은 총 5주로 진행됬다.

첫째주에 서비스 or B/O 를 정하고, 그에 맞는 팀 분배를 하였다.

그렇게 구성된 두팀이 존재했고 각자 개인평가를 받으며 사이트 구성을 진행하였다.

나는 서비스 파트에서 메인페이지에 존재하는 Navigation Bar를 통해 구현되는 모든페이지를 구현했으며 추가로 로그인과 회원가입을 진행했다.

중간에 추석이 끼여있어 일정상의 혼돈이 있었으나 어떻게 보면 더 카페테리아를 이용할 수 있어서 이득이었다.(당시에는 좀 쉬고 싶어서 빨리 끝났으면 하는 마음도 없지 않아 있었다.)

그렇게 개인평가가 끝나고 마지막 주에 개별면담 뒤 최종발표를 진행한 후 합격자들은 재면접을 보는 시스템이었다.

좋았던 점

나는 개인적으로 2차 프로젝트를 굉장히 아쉽게 생각하는데 이때 내가 구현하고 싶은 것들을 마음 껏 해보지 못한 것 같다.(예를 들어 장바구니기능에 redux를 활용해보는것 등..)

그래서 브랜디에서 좋았던 것은 프로젝트에 비해 조금 더 긴시간을 통하여 내가 구현하고 싶었던 많은 이벤트들을 구현해본것 + 대량의 데이터를 어떻게 효율적으로 처리하면 좋을지 고민해본점이다.

아쉬운 점

아무래도 인턴십의 묘미는 현업을 직,간접적으로 경험해보는 것인데 프론트는 기획자와 디자이너 사이에서 많은 소통과 협업을 해야하는 것을 알고있다.

하지만 그럴 기회가 없었다는 점이 꽤 아쉬운 점이다.

개발자끼리의 소통과 다른 직군과의 소통은 굉장히 다른 흐름으로 흘러갈 것 같은데 그것을 미리 알고 있다면 추후에 내가 일을 진행할 때 많은 도움이 되었을 것 같기 때문이다.

소감

나는 최종 합격자에 들지 못했으며 아쉬운점을 담당자분에게 물어보았을 때 ,

Backend 포지션이 공석이 존재하는데, 내가 그 포지션으로 갔을 때의 리스크에 대해 확실하게 믿음을 주지 못했던 것 같다고 이야기하셨다.

아마도 나는 뼈속까지 프론트인가?

사실 백엔드도 언젠가는 구현하는 수준까지는 무조건 알아야한다고 생각하는 입장이라 조금의 아쉬움은 존재하지만,

당장 지금 나의 스킬을 키우고 나의 커리어 그라운드로 만들고 싶은 것은 프론트엔드이기에 나와 더 fit이 맞는 집단에 들어가보고 싶다는 생각이 든다.

이렇게 길다면 길고 짧다면 짧은 인턴이 끝났다.

끝!

GitHub

profile
알고리즘 풀이를 담은 블로그입니다.

1개의 댓글

comment-user-thumbnail
2020년 11월 14일

브랜디가 인재를 못 알아보네요 !

답글 달기