1차 프로젝트회고록

담·2022년 11월 18일

엘리스트랙 프로젝트 회고

엘리스SW엔지니어트랙

목록 보기

4/6

1차 프로젝트

엘리스 코딩 SW 엔지니어 트랙 3기 1차 프로젝트 (2022.10.31 ~ 11.11)
팀구성 : 프론트엔드 3명 / 백엔드 2명
https://github.com/j2h30728/project1-iBook

0. 맡은 담당 및 총평

1) 백엔드

사실 어떤 포지션을 지원해야할지 마감날까지도 고민하다 공부하기위해 제출했었다.
잘하고 못하고를 떠나서, 진행하며 직접 경험해보지않는다면 백엔드는 와닿지 않을것 같이 지원했다.

물론, 팀이 결성되고 역할을 분담한뒤에 많이 후회했다.

나의 부족한 백엔드 지식과 실력이 팀에 폐가 끼치지 않을까 우려했고, 진행하면서도 백엔드 파트너와 소통하며 API를 꾸려나갔다.

먼저, 팀원과 회의하여 제일 먼저 필요해 보이는 API를 선정하여 상품과 카테고리 API를 먼저 생성하기로 하였다.
효율적인 역할 분담이 어려워, 백엔드 담당이 각각 상품과 카테고리 API를 생성하고 좀 더 괜찮은 코드를 선택하거나 합쳐 보완하는 방향으로 잡았다.
거의 비슷한 시기에 같이 완성했으며, ‘schema → model → service → route’ 의 같은 흐름이라 먼저 완성한 파트너의 코드로 상품과 카테고리 API를 선정했다.
유저API를 생성하고 유저의 권한을 관리했다.
어떤 것으로 일반유저와 관리자 권한을 구분할지 정말 고민을 많이했다.
스키마내 user role을 사용한다면,
1) 이것을 처음에 어떻게 부여할지, ⇒ 관리가 계정을 데이터베이스에 저장
2) 어떤 방법으로 역할을 확인할지. ⇒ 로그인 할 경우, 반환되는 JWT토큰을 복호화해 user.role을 확인
관리자 계정, 기본 카테고리와 상품 seed data를 데이터베이스에 등록하기 위한 방법 직접 POST MAN으로 등록해도되지만, 코드로 직접 등록하고 싶었다.
방법을 찾는 것이어려워 백엔드 오피스아워 코치님께 도움을 요청하여, ‘migrate-mongo’를 추천받아 진행했다.
- migrate-mongo를 통해, 어떤 데이터베이스를 사용해도 명령어로 바로 seed data를 등록할 /수 있다는 점을 장점으로 생각
```
// 관리자 계정 등록 seed data 부분만 발췌
module.exports = {
  async up(db, client) {
    const users = await db.collection('users').insertMany([
      {
        email: 'admin@ibook.com',
        fullName: '관리자',
        role: 'admin',
        password:
          '$2b$10$6Eg7ove08IaFApmTj.1l4OflPqoXQMuBvCKSMksdn022nB4zU6IP2',
      }
	return users };
  },
```

해당 유저의 역할을 확인하기위해, if문을 쓰거나 직접 관리자계정과 비교하여 밸리데이션을 진행하는 것보단, jwt 토큰을 복호화로 user.role === ‘admin’을 확인하는 미들웨어를 생성하여 밸리데이션하는 방법으로 진행했다.

if 문으로 역할을 나누면 코드가 너무 깔끔하지 않을것이 예상되었음
관리자계정의 정보를 직접 대조하여 밸리데이션하는것은 추가적인 관리자계정을 만들수없다는 점이 단점이라 생각

// 복호화로 관리자계정인지 확인하는 부분만 발췌

function adminCheck(req, res, next) {
  const userToken = req.headers['authorization']?.split(' ')[1];

try {
    const secretKey = process.env.JWT_SECRET_KEY  'secret-key';
    const jwtDecoded = jwt.verify(userToken, secretKey);
    const userRole = jwtDecoded.role;

    if (userRole !== 'admin') {
      console.log('서비스 사용 요청이 있습니다.하지만, 권한이 없음.');

      res.status(403).json({
        result: 'forbidden-approach',
        reason: '관리자만 사용할 수 있는 서비스입니다.',
      });
      return;
    }

    next();
  } catch (error) {
    next(error);

    return;
  }
}

2) 팀장

놀랍게도 우리 팀은 다섯명 모두, 내성적이며 팀장을 하고싶어 하지않았다.

나는 과욕이 부른 백엔드 담당이 너무 부담이 컸기때문에 팀장을 기피했었지만, 누군가 하지않는다면 팀프로젝트가 진행되지 않을 것같아보여 팀장을 하겠다고 하였다.

나에게는 팀리딩 스킬이 무척 필요하다는 점이 제일 먼저들었며,
어떻게 팀원의 사기와 참여도를 올려야하는가가 2주간 나의 최대의 고민이었다.

큰 불화없이 프로젝트를 완성했다는 것을 되짚어보면 팀원 모두가 노력했었다.

3) 프로젝트 발표 및 시연

발표 포인트를 파악하지 못해, 엘리스코딩에서 제시한 공통 요구사항관련해서 발표했다.
백엔드 코치님이 migrate-mongo 건으로 발표를 기대했었는데 아쉬웠다고 전달하는 것을 듣고, 프로젝트 발표의 플로우가 잘못 되었다는것을 알았다.

웹서비스를 함께 제작했지만, 아주 세세한 부분을 파악하지 못해 시연에서 실수 했다는 점이 아쉬웠다. 이 부분은 팀원과의 의사소통의 문제가 있었음을 인정한다.

발표 전, 프론트 담당자분들께 담당 페이지의 기능구현을 간단히 설명해달라고 요청드려었는데 아쉽게도 아무도 해주지 않았다.😥
(관리자페이지에서 주문정보를 수정한뒤, 전체조회를 눌러야만 주문정보가 변경된다는 점을 확인하지 못해 시연에서 실수한 것..😥아쉽다..)

구현해준 프론트엔드 담당자분의 노고를 발표 및 시연에서 보여주지 못했다는 점이 통탄스러웠다.

4) 배운 점 | 힘들었던 점 | 아쉬운점

1. 배운 점

실력이 부족 하다고 실력이 좋은사람과 비교하며 자괴감들고 주눅드는 것보다, 파트너와 대화하고 그 상황에서 내가 할 수있는 것들을 정리하고 맡은 작업만큼은 문제없이 완성하는 것이 팀에 기여하는 것이다는 것을 깨달았다.

백엔드파트 역할 분담은 프로젝트가 진행되며 파트너에게 더 많은 비중이 가는것을 느끼고, 부수적인 일과 추가적인 업무가 파트너에게 배당되지않도록 먼저 나서서 작업을 진행하려고 노력했다. 예를들면, seed data 저장, 밸리데이션 작업 등과 같은 것들

2. 힘들었던 점

1. migrate-mongo

작업에서 관리자계정과 샘플 카테고리는 등록하는 것이 성공하였지만,
populate 된 상품 데이터의 카테고리 아이디가 등록된 카테고리 아이디와 매칭되지않았던점이 복병이었다.

사실, 생각보다 간단한 작업이었는데 시도하지않았던 점에서 반성했다!

    const mongoose = require('mongoose');
    const {  Types: { ObjectId },} = mongoose;

몽구스에서 ObejctId 타입을 가져와 부여해주어 매칭하면 되는것이었다..!
백엔드 파트너와 이 내용을 전달 받았을때 서로 벙쪘던게 아직도 생각나 웃기다.
추후 이와 같은 문제에 맞닥뜨리면, 좀 더 깊게 생각 해봐야겠다는 반성을 했다.

2. 소통

매일 스크럼 회의를 통해 애자일 방식으로 진행했지만, 생각보다 프론트엔드와 백엔드간의 소통이 힘들 다는것을 알게되었다. API관련해서는 POST MAN 명세서를 적극활용했다.

또한, 팀프로젝트에서 기능구현에 관해서만 참여하고 부수적인 팀활동에서는 수동적이고 소극적으로 대하는 팀원을 보며, 다소 수동적인 포지션을 해왔던 나의 과거가 반성되었다. 팀원들의 참여도를 올리기위해 텐션을 올리거나 참여 유도행동을 많이했지만, 아직 리더의 자질은 부족한것 같다.

3. 아쉬운점

기획의 중요성을 알지 못했다.
2차 프로젝트전에 피그마를 조금이라도 습득하여 기획단계에 많은 기여를 할 예정이다.

5) 총평

많은 다른 팀의 팀원들과 대화를 나누며, 나와 같이 실력이 부족한 사람. 미리 준비를 하지못하고 나태했던 사람들도 많았다.

팀프로젝트를 우습게 보고 진행한 것은 아니었으며, 첫주차에는 잠을 거의 자지않고 복습을 진행하며 코드를 짰던 것이 생생하게 기억난다.

2주 동안 도전해보지 못한 간단한 기능도 있었다는 점에서 아쉬운게 크다.

2차프로젝트에서 프론트엔드담당 희망과 프론트엔드 개발자를 목표로 하고있는 시점에서 이 프로젝트를 전체적으로 분석하고 공부하는 것이 목표다.

해당 팀프로젝드 결과물을 추후에 혼자 공부하여 코드를 파악한 후, 리팩토링하는 작업을 가질 예정이다. 아래는 공부할 항목과 프로젝트내에서 추가와 보완하고싶은 부분이다.

유저관리에서 프로젝트 단계에서 추가하지않은 기능 추가
1. 회원가입시 주소찾기 API 추가
시연을 진행하며 프론트단에서 아쉬웠던 밸리데이션 기능을 추가
1. 회원탈퇴 할 경우, 알람이 나오지않고 바로 탈퇴되는 것을 보완
2. 관리자가 사용자를 관리할수 있는 기능
백엔드 단에서 밸리데이션 추가
백엔드 파트 중 내가 담당하지않았던 부분 공부(multer 라이브러리)

리팩토링 작업이 진행될때마다 글을 업데이트할 예정이다.

1. 프로젝트 소개

iBook : I(나)를 Book(책)을 통하여 탐색하고 찾아간다.

1) 페르소나

모자장수 “서점은 카테고리를 한눈에 찾아보기 힘들어서 온라인으로 구매 하려고요."
직업 : 대학원생
거주 : 부산에서 홀로 자취 중
캐릭터 : 학업에 열중

2)목적

“카테고리 중심의 도서 쇼핑몰＂

도서 상품을 빠르고 쉽게, 구매 및 판매할 수 있는 온라인 쇼핑몰 서비스를 구현

3)목표

홈 화면에서 도서 카테고리를 확인 가능
회원 가입을 하지 않아도 상품을 구경하고 장바구니에 넣기 가능
최소한의 클릭으로 상품을 구매하거나 판매가능

4) 구현 사항

해당사항은 엘리스코딩에서 제시한 필수 구현 사항을 기반으로 추가됨

도서 등록, 장바구니 추가, 주문하기 등 쇼핑몰의 핵심 서비스를 구현.

회원가입, 로그인, 회원정보 수정 등 유저 정보 관련 CRUD
도서 목록을 조회 및, 제품 상세 정보를 조회 가능
도서 목록에서 검색 기능을 지원
장바구니에 제품을 추가할 수 있으며, 장바구니에서 CRUD 작업이 가능
장바구니는 서버 DB가 아닌, 프론트 단에서 저장 및 관리됨 (localStorage, indexedDB 등)
장바구니에서 주문을 진행하며, 주문 완료 후 조회 및 삭제 가능함.
도서 상품의 이미지를 서버에 업로드할 수 있음.

2. 사용된 기술

프론트엔드 :

HTML, CSS, JavaScript, BULMA

백엔드 :

JavaScript, Express, MongDB
migrate-mong : seed data 저장
multer : 상품이미지 업로드

담

성실하게

이전 포스트

[엘리스 SW 엔지니어트랙] 7~9 Day _1

다음 포스트