1차 프로젝트 회고록

1.  프로젝트 설명

 

회원가입

로그인

메인페이지

상품목록 / 상세화면 페이지

필터

상품목록화면 무한 스크롤

상위 카테고리

장바구니

이번 1차 프로젝트는 나이키 클론코딩을 했어요~ 팀원 분들도 너무 친절하고 이해심이 깊은 분들이라 너무 행복했답니다~

 

 

KEEP

이번 프로젝트를 진행하면서 제가 진행한 API 부분은 메인화면 / 상세화면 부분입니다. 여기서 제가 평생 가지고 싶은건 뭘까요? 삐삐 삐카츄우

 

1. 메인 페이지 중첩 가능한 필터 기능 구현의 경험

<중첩 가능한 필터>

const { database } = require('./dataSource');

const getProducts = async ( offset, limit, size, gender, special, price ,headerFilter) => {
    const whereTrigger = async (size, gender, special, price) => {
        if( size ||  gender || special || price ){
            return ` WHERE `;
        }
        else{
            return ``
        }
    }

    const sizeJoin = async (size)=>{
        if(size){
            return`JOIN stock k ON products.id=k.product_id`
        }
        if(!size){
            return ``
        }
    }

    const sizeFilter = async (size) => {
        if(size){
            if(gender || special || price){
                return ` AND k.size IN (${size})`
            }
            if(!gender && !special && !price){
                return ` k.size IN (${size})`
            }
        }
        if(!size){
            return ``
        }
    }

    const genderFilter = async (gender) => {

        switch(gender){
        
            case `남성용`:
                return ` g.id=2 `
            case `여성용`:
                return ` g.id=3 `
            case `공용`:
                return ` g.id=1 `
            case `남성용,여성용`:
                return `g.id=2 OR g.id=3`
            case `남성용,공용`:
                return `g.id=2 OR g.id=1`
            case `여성용,공용`:
                return `g.id=1 OR g.id=3`
            default:
                return ``
        } 
    }
    const specialFilter = async (special) => {
        switch(special){
          case `친환경`:
                if(gender) return ` AND s.id=1 `
                if(!gender) return ` s.id=1`
          case `환경파괴소재`:
                if(gender) return ` AND s.id=2`
                if(!gender) return ` s.id=2`
          default:
              return ``
        }
      }
    const priceFilter = async (price) =>{
        if(!price){
            return ``
        }
        let priceCount = price.split('~')

        if(priceCount.length <= 2){
        let a = price.replace('~','AND')
        if(gender || special){
        return ` AND products.price BETWEEN ${a} `
        }else{
            return `products.price BETWEEN ${a}`
        }
        }
        


        if (priceCount.length > 2){
        const firstSpace = price.indexOf(' ');
        const lastSpace = price.lastIndexOf(' ');
       
        let result = price.replace(price.slice(firstSpace,lastSpace),'');
        let realResult = result.replace(' ',' AND ');
        if(gender || special){
            return ` AND products.price BETWEEN ${realResult}`
        }
        else{
            return ` products.price BETWEEN ${realResult}`
        }
       
        }
    }
    const headerFilterFilter = async (headerFilter) => {
        switch(headerFilter){
          case `lowPrice`:
            return `price asc,`;
          case `highPrice` :
            return `price desc,`;
          case `recent`:
            return `id asc, `;
          default:
            return ``
        }
      }

    const sizeJoinAsync = await sizeJoin(size);
    const sizeFilterAsync = await sizeFilter(size);
    const genderFilterAsync = await genderFilter(gender);
    const specialFilterAsync = await specialFilter(special);
    const priceFilterAsync = await priceFilter(price);
    const headerFilterFilterAsync = await headerFilterFilter(headerFilter);
    const whereTriggerAsync = await whereTrigger(size, gender, special, price);

    const whereStringArray = [];
    whereStringArray.push(genderFilterAsync,specialFilterAsync,priceFilterAsync);

    for(let i=whereStringArray.length-1;i>=0;i--){
        if(whereStringArray[i] === ''||""||``){
            whereStringArray.splice(i,1);
        }
    }

    let whereString = whereStringArray.toString();
    let realWhereString = whereString.replaceAll(',','');
    let resultWhereWhithoutSize = realWhereString.replaceAll(',',' AND ');

    let resultWhere = resultWhereWhithoutSize.concat(sizeFilterAsync);


    const main = await database.query(
        `
            SELECT DISTINCT
                products.id,
                products.name,
                products.thumbnail_image_url AS thumbnailImageUrl,
                products.price,
                c.name AS category,
                s.name AS special,
                g.gender AS gender,
                products.price AS price
            FROM products
            JOIN categories c ON products.category_id=c.id
            JOIN special s ON products.special_id=s.id
            JOIN gender g ON products.gender_id=g.id
            ${sizeJoinAsync}
            ${whereTriggerAsync}${resultWhere}
            ORDER BY ${headerFilterFilterAsync} products.id LIMIT ? OFFSET ? 
            `
            ,[ limit, offset ]
    )
    return main;
}

5일동안 메달린 이 코드 하하하 이걸 이해해주신 팀원분들 너무 감사했어요 

각 필터의 조건마다 자동으로 query에서 변화를 주고 싶었던 저의 고집이 끝났을때 엄청난 성취감으로 어떠한 고난도 결국 끝난다는 것을 알 수 있었어요. 이제 이 경험으로 노력할 수 있는 강한 의지만 있다면 어떠한 것들도 해낼 수 있을거같아요!

 

해당 코드의 코드리뷰를 받아서 현재 리펙토링 하는 중이에요 완전하게 이해하게 된다면 이곳에 다시 올릴게요~

 

이 코드의 조건은 front 분들이 query parameter를 사용하여서 요청을 주시면 저는 해당 query 를 받아서 DAO단에서 switch case 문을 이용하여 특정한 값이 올 경우 특정한 쿼리문을 쿼리문에 넣는식으로 하였어요!  

 

2. 무한스크롤 구현의 경험

무한 스크롤은 front분들에게 요청을 offset limit을 받아서 자동으로 offset값을 변경하여 받아서 특정한 데이터 값만을 response 해줍니다!

 

3. 서로를 이해하는 팀원들의 마음이 어떠한 영향력이 있는지에 대한 경험

정말 행복했어요 이번 프로젝트는 모두가 서로를 배려하는 모습이 너무 좋았습니다. 

프로젝트 발표중 일부

모두가 함께하면서 모두가 행복함을 느꼈던 프로젝트였습니다.

 

대학교에 진행한 UML 프로젝트 이후로 최고의 프로젝트 였던거같아요.

 

회의 할때마다 웃음이 끊이지 않았고 서로서로 맛있는것도 사주고 나눠먹고 너무 행복했어요

 

마지막 제가 발표를 하는 그 순간 마저도 이 시간이 안 끝났으면 좋겠었어요 진짜 

 

PROBLEM

가장 큰 고난은 5일을 고생했던 중첩가능한 필터이었어요. 

 

전체 경우의수를 생각하지 못했던 부분이 아쉬웠어요~ 미리 생각해고 진행했으면 기간을 축소 시켰을 수 있었을거같아요.

 

해당 필터를 진행하면서 다른 백엔드 분들과의 소통할 때 집중이 되지 않는 싱글쓰레드같은 뇌에 멀티 플레이가 되었으면 하는 생각을 했습니다

 

한가지에만 집중하면 다른 부분에 소홀해 지는 저의 단점을 깨달았어요~ 

 

Try

해당 problem 을 해결하고 싶어서 선택했떤 부분을 조원분들이 모르시는 부분을 물어보시기전에 먼저 찾아가 도움을 드림으로써 스스로 여러 상황에서의 순간 집중력을 올리려고 노력을 했어요 아직 많이 부족하지만 2차 프로젝트 진행 중에서도 도움이 필요한 사람이 보이면 스스로 찾아가 도움을 드리면서 멀티플레이가 가능한 뇌를 가진사람으로 진화하고 싶어요~

 

필터부분에서는 3일차 이후부터 질문하여 서로간의 지식을 공유 했던것으로 완료된 시간을 앞당긴거 같아요 

제가 어려움을 느끼는 부분을 최대한 영어의 4형식(s v o o.c) 방향으로 설명하였고, 동료들이 알고있는 부분은 이런식으로 하면 어때? 라면서 지식을 공유 받았어요 

 

이때 동료들과의 커뮤니케이션과 사람들과의 관계가 어쩌면 코드를 짜는것보다 더 중요하다는 느낌이 들었습니다.