1차 프로젝트 [숨고 clone 페이지 숭고]

📌프로젝트 소개

숨어있는 고수, 숨고 페이지가 클론페이지로 당첨됐다. 사실 유저타입이 두개라는 것이 처음부터 어려울것으로 생각됐지만 그만큼 배울것이 많을것이라고 판단했다. 그리고 첫 과정인 DB모델링부터 난관이었다.

이번 프로젝트에서는 세션시간에 진행했던 쇼핑몰과는 살짝 개념이 달랐고 고수를 상품으로 제공한다는 관점으로 접근했다.

📌사용된기술

• Front : React, sass, css module
• Back :Node, Express, Mysql, jwt, prisma, cors, routes, Bcrypt
• Common : Github, Slack

📌구현 기능과 역할

• Login 페이지 기능 구현 [Frontend]
  ✔ 입력값에 따른 styles, input창 하단 안내문 변화
  ✔ AbledButton 클릭시 main페이지 navigate
  

• 회원가입 API 구현 [Backend]
  ✔ post method 사용. 이름, 이메일, 비밀번호를 DB에 저장하는 API구현

• 고수찾기 리스트 API 구현
  ✔ GET method 사용. DB에서 PrismaClient를 사용해 여러 테이블의 특정칼럼들만 뽑아내는 API구현
  ✔ Query parameter 사용해 필터링 구현

📌소개 및 작동화면

https://github.com/wecode-bootcamp-korea/justcode-4-1st-omm-front .readme에서 확인 가능.

📌어려웠던 코드

리스트를 가져오는 API(orm)

const search = await prisma.masters.findMany({
      select: {
        name: true,
        intro: true,
        work_experience: true,
        reviews: {
          select: {
            id: true,
            comment: true,
            grade: true,
          },
        },
      },
    }); 

고수리스트 API구현시 ORM방식으로 다수의 테이블에서 특정 칼럼만 가져오는 코드를 만들었는데 처음에 userTable에서 하위테이블인 master에 내용이 없는경우에 빈배열로 출력됐다. 이를 해결하기위해 prisma 공식페이지를 찾아 제외하는코드를 사용했다.

where: { NOT: [{ master: null }] }

그리고 이과정에서 table의 관계의 잘못된점을 찾고 1대다에서 1대1로 고칠 수 있었다. 이후 QueryParameter로 필터링을 해야했다. 어려웠지만 팀원분들에게 질문하고 예시문들을 많이 보다보니 구조가 이해됐고 if문을 사용해 필터링까지 완성된 API를 만들수있었다.

const getMasters = async (search) => {
  const { addressId, lessonId, take } = search;
  let data = {};
  data = {
    take: Number(take),
    select: {
      id: true,
      name: true,
      intro: true,
      master_image: true,
      reviews: {
        select: {
          id: true,
          comment: true,
          grade: true,
          users: {
            select: {
              id: true,
              name: true,
            },
          },
        },
      },
    },
  };
  if (addressId === "null" && lessonId === "null") {
    return await prisma.masters.findMany(data);
  } else if (addressId !== "null" && lessonId === "null") {
    data.where = {
      detailAddress: {
        id: Number(addressId),
      },
    };
  } else if (addressId === "null" && lessonId !== "null") {
    data.where = {
      mastersCategories: {
        some: {
          lessonCategories: {
            id: Number(lessonId),
          },
        },
      },
    };
  } else {
    data.where = {
      detailAddress: {
        id: Number(addressId),
      },
      mastersCategories: {
        some: {
          lessonCategories: {
            id: Number(lessonId),
          },
        },
      },
    };
  }
  return await prisma.masters.findMany(data);
};

🎁회고🎁

팀플로 진행된 이번 프로젝트를 통해 같이 진행할때 Front와 Back이 서로 필요한 부분을 분명히 말하고 조율하는 과정이 얼마나 중요한지 깨달았다. query parameter를 프론트에서 어떤 변수를 넣어 요구할지, 리스트페이지에서 상품을 몇개씩 나눠서 보내줄지가 협의 되어야 했다.

그리고 처음부터 페이지들의 경로를 정해놓는것이 이후 navigate경로를 여러번 바꾸는 수고를 덜 수 있었다. 뿐만 아니라 프론트,백을 불문하고 gitignore에 들어갈 내용을 먼저 정하고 그 내용이 변할때마다 빠르게 공유하는 것이 프로젝트 진행에 중요함을 배웠다.

비교적 수월한 페이지와 API를 맡아 복습에 비중을 두고 프론트와 백 둘다 진행했던 이번 프로젝트는 prisma 내장함수 응용방법이나 필터링 방법 등 생각지 못한 것들을 수행해볼 수 있었다.

현업에서는 맡은일을 정해진 기한내에 진행하는것이 중요한것으로 알고있다. 해당 프로젝트을 진행하면서 Daily Standup Meeting, Sprint Planning Meeting를 시간을 정해 진행하다보니 혼자 미션을 진행했을때 보다 시간에 맞춰 맡은 티켓을 완수하기위해 노력하게 되었다.

그런점에서 이런 진행방식은 매일, 매주 팀원들에게 진행상황을 알리는것 이상으로 본인에게 더욱 동기부여를 주었다.