코드스테이츠 seb41_pre_017팀 팀프로젝트

깃허브 주소

https://github.com/codestates-seb/seb41_pre_017/tree/main

GitHub - codestates-seb/seb41_pre_017

 

시작

약 2주동안 프론트엔드 3명 백엔드 3명 총 6명이서 팀을 이루어 스택오버플로우를 클론코딩하는 팀 프로젝트를 진행을 했다

먼저 스택오버플로우를 클론코딩하기 위해 분석을 하는 과정을 진행하였다

우리 팀에서 프로젝트 경험이 있는 사람은 나 뿐이여서 내가 주도적으로 진행을 하였고 그 과정에서 팀장의 역할을 맡게 되었다

 

분석/설계

코드스테이츠 과정에서 살짝 배운 figma를 이용하여 1시간동안 분석과 설계를 했는데 팀원들이 모두 만족하여 우리팀은 바로 개발을 시작했다

원래는 3일정도 분석,설계시간이 주어지는데 우리팀은 내가 만든걸로 하기로 결정해서 1시간만에 분석 설계가 끝났다

* 분석과 설계시간이 너무 짧아서 나중에 문제가 발생한다 ㅠㅜ

https://www.figma.com/file/PXqhHI3hyuYhvAjIE3M5QY/GOAT-%ED%8C%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8?node-id=0%3A1&t=SYAg75Ym9j4qzt5z-1

Figma

 

초기 설정과 목표

목표

1차 목표는 헤더, 사이드바, 푸터, 질문리스트 페이지, 질문상세페이지를 구현하는 것 이였다

그리고 배움에 목적을 두고 외부 라이브러리 사용은 최대한 안하기로 했다

 

설정

개발을 시작하기 전에 깃허브 브런치 이름 규칙, 폴더설정, 패키지,라이브러리 설치를 했다

 

폴더/파일 규칙

먼저 Page 폴더를 만들고 구현할 페이지 카테고리별로 (home, questions, user...)  폴더를 만들고

그 안에 다시 페이지별로 폴더를 만들고 시작지점은 index.js으로 만들었다

공통적으로 사용하는 함수나 스타일들은 Components에 만들기로 결정했다

 

CSS

css는 styled-components를 사용하기로 했다

 

초기 업무 분담

나는 헤더,사이드바,푸터,질문 전체리스트페이지를 만들고 라우터 설정과 전체적인 레이아웃조정을 담당하였다

나머지 팀원들은 각각 질문페이지와 질문생성페이지를 담당하였다

 

중간점검(1주차)

중간점검때 어려움을 겪었는데 프론트엔드 팀원분들이 기능구현에 어려움을 겪고 있었다

팀원분들은 각각 질문생성페이지에서 텍스트에디터와 질문상세페이지 로직에 대한 어려움을 겪고 있었다

텍스트에디터의 문제는 줄바꿈이나 코드블럭삽입 굵은 글씨등을 구현하는것에 어려움을 겪고 있었고

질문상세페이지는 마크업만 완성된 상태였고 그 다음부터 어떤것을 할지 감을 못잡고 있었다

다행이 내가 담당한 부분은 완료가 되어서 팀원들을 도와주기로 했다

 

팀원들의 멘탈문제

중간점검때 확인했던 텍스트에디터와 질문상세페이지 로직때문에 팀원들의 멘탈이 안좋아진거 같았다

팀장으로 매일 멘탈체크를 하고 케어를 해주려고 매일같이 대화를 했다

이제와서 말하는거지만 프로젝트 중간점검까지는 팀원들이 갈팡질팡하고 멘탈도 안좋아서

프로젝트 진행이 거의 안됬던거 같았다

 

업무 추가...

나머지 두 팀원분들이 담당했던 텍스트에디터와 질문상세페이지를 결국 내가 하게되었다

다행이 두 팀원분들이 마크업까지는 해놨기 때문에 기능구현만 했다

이때는 1주일 내내 토일 할꺼없이 5~6시간만 자면서 코드만 만진거 같다...

 

로직에 대한 고민

텍스트에디터를 어떻게 만들지 고민하고 검색도 많이 해봤다

검색하면 라이브러리 사용하는것만 나온다 ㅠㅠ

그래서 나름 고민해서 만들어봤는데 해결방법으로는 내가(개발자가) 미리 정해논 키워드를 입력했을시 html 코드로 바꾼다는 계획이였다

코드블럭이나 글씨 색상은 css를 이용하여 구현하였다

텍스트를 TextToCode 함수로 바꾸고 출력할떄는 CodeToHtml함수로 바꿔서 출력했다

export const TextToCode = (data = '') => {
    let result = data;
    result = result
        .replaceAll(/(\n|\r\n)/g, '<br>')
        .replaceAll(/(<script>)/g, `<red>Don't &nbsp use  &nbsp script &nbsp commands</red>`)
        .replaceAll(/(<[/]script>)/g, `<red>Don't &nbsp use &nbsp script &nbsp commands</red>`)
        .replaceAll(/((int)\s)/g, `<orange>int&nbsp</orange>`)
        .replaceAll(/((let)\s)/g, `<orange>let&nbsp</orange>`)
        .replaceAll(/((const)\s)/g, `<orange>const&nbsp</orange>`)
        .replaceAll(/((boolean)\s)/g, `<orange>Boolean&nbsp</orange>`)
        .replaceAll(/((char)\s)/g, `<orange>char&nbsp</orange>`)
        .replaceAll(/((short)\s)/g, `<orange>short&nbsp</orange>`)
        .replaceAll(/((float)\s)/g, `<orange>float&nbsp</orange>`)
        .replaceAll(/((double)\s)/g, `<orange>double&nbsp</orange>`)
        .replaceAll(/((return)\s)/g, `<orange>return&nbsp</orange>`)
        .replaceAll(/((exports)\s)/g, `<orange>exports&nbsp</orange>`)
        .replaceAll(/((require)\s)/g, `<orange>require&nbsp</orange>`)

        .replaceAll(/((class)\s)/g, `<blue>class&nbsp</blue>`)
        .replaceAll(/((Class)\s)/g, `<blue>Class&nbsp</blue>`)
        .replaceAll(/((function)\s)/g, `<blue>function&nbsp</blue>`)
        .replaceAll(/((typeof)\s)/g, `<blue> typeof &nbsp</blue>`)
        .replaceAll(/((for)\s)/g, `<blue>for&nbsp</blue>`)
        .replaceAll(/((while)\s)/g, `<blue>while&nbsp</blue>`)
        .replaceAll(/((if)\s)/g, `<blue>if&nbsp</blue>`)

        .replaceAll(/((this)\s)/g, `<green>this&nbsp</green>`)
        .replaceAll(/((object)\s)/g, `<green> object&nbsp</green>`)
        .replaceAll(/((module)\s)/g, `<green> module&nbsp</green>`)
        .replaceAll(/(('undefined')\s)/g, `<green>'undefined'&nbsp</green>`)
        .replaceAll(/(('function')\s)/g, `<green> 'function'&nbsp</green>`)

        .replaceAll(/((import)\s)/g, `<purple>import&nbsp</purple>`);

    return result;
};

export const CodeToHtml = (data = '') => {
    let result = data;
    result = result
        .replaceAll(/(<orange>)/g, '<span class=OrangeText>')
        .replaceAll(/(<[/]orange>)/g, '</span>')
        .replaceAll(/(<blue>)/g, '<span class=BlueText>')
        .replaceAll(/(<[/]blue>)/g, '</span>')
        .replaceAll(/(<red>)/g, '<span class=RedText>')
        .replaceAll(/(<[/]red>)/g, '</span>')
        .replaceAll(/(<purple>)/g, '<span class=PurpleText>')
        .replaceAll(/(<[/]purple>)/g, '</span>')
        .replaceAll(/(<green>)/g, '<span class=GreenText>')
        .replaceAll(/(<[/]green>)/g, '</span>');

    return result;
};

export const CodeToText = (data = '') => {
    let result = data;
    result = result.replaceAll(/(<br>)/g, '\n');

    return result;
};

 

어디 내놔도 부끄러운 코드로 만들었다...

replaceAll을 여러번 사용하여 구현을 했는데 이렇게 만들어도 되나 싶었다... 

시간이 없어서 구현을 목표로 만들다보니 괴상한 코드가 되어버린거 같다...

 

마지막 주(2주차)

팀원들의 성장이 매우 놀라울 정도였다

2주차때 멘탈을 회복하더니 작업효율과 능력이 올라갔다

두 팀원들이 각자 유저프로필과 로그인,로그아웃,회원가입을 담당하였는데

원본인 스택오버플로우보다 훨씬 잘 만들었다

 

팀장으로써 반성할점

프론트엔드 팀원분들의 멘탈을 케어해주다보니 백엔드 팀원분들과 소통을 소홀히 한거같다

백엔드 팀원중 1분이 연락이 잘 안되었다 ㅠㅠ

백엔드 팀원중 1분이 없어지니 백엔드에 업무과중이 발생하였다

나머지 2분이 새벽까지 밤을 새면서 중간에 이탈한 1분의 자리를 매꿔주셨다 (진짜 감사합니다)

 

프로젝트를 끝내고서

지금와서 느끼는거지만 우리팀의 분석/설계시간이 너무 짧았던거 같았다

나도 그때당시를 떠올리자면 1시간만에 대충 만든거라 당연히 여러가지 논의를 하면서 수정을 할 줄 알았다

근데 팀원전부 이대로 해도 괜찬다고 말해서 바로 프로젝트 진행을 했었는데 이것때문에 위에서 설명한 팀원이탈,멘탈문제가 발생한거 같다

1시간만에 대충 만든 분석과 설계에 30분만에 설계에 대한 회의가 끝났다

당연히 같은 분석과 설계이지만 제대로 논의를 나누고 프로젝트를 시작한것이 아니라 팀원들이 각각 생각하는것이 달랐고

이것때문에 구현에 대한 어려움, 막막함이 발생하여 다들 힘들어하고 멘탈에도 안좋았던거 같았다

팀장의 권한으로 하루정도는 더 분석과 설계시간을 가졌다면 지금보다는 좀더 좋은 결과가 있었을꺼같다

 

결과물

이런저런 어려움을 겪었지만 내가볼때는 약 40개의 팀중에서 우리팀이 제일 잘한거 같다

외부 라이브러리를 사용하지 않고 이정도로 퀄리티있게 구현한팀은 우리팀밖에 없는거 같다

 

배운점

기능구현은 자신이 있었는데 css부분이 부족하다고 항상 생각이 들었는데 요번 스택오버플로우를 클론코딩을 하면서

스택오버플로우 개발자들이 설정한 css를 분석하고 참고하다보니 css를 어느정도 내 마음대로 다룰 수 있는 수준까지는 끌어올린거 같다

또한 무작정 개발을 하기 보단 분석과 설계 그리고 팀원들과 논의를 하는 시간에 대한 중요성을 느꼈다