brunch 클론코딩 종료 + 회고록

김태영·2021년 12월 12일

Wecode

목록 보기

2/5

1차 프로젝트를 끝내고 그동안 작업했던 내용과 과정을 돌아보며...

Branch 프로젝트

카카오에서 서비스 중인 작가들의 블로그 사이트인 Brunch의 클론코딩 프로젝트입니다.
개발자의 정보 공유 블로그들은 다양하지만 개발자의 언어가 나날이 업데이트되고 변하면서 기존 자료가 개발을 막 시작하는 초심자에게는 참고하기 힘든 경우가 많은데 이를 Branch의 작가 신청기능을 활용하여 최소한의 개발 지식을 가진 사람을 선별하고 해당 인증된 글이 노출되도록 하여 개발 초심자에게 더 정확한 정보를 제공하는 블로그 글을 모아둔 사이트로 컨셉을 설정하고 작업하였습니다.

개발 인원 및 기간

개발기간 : 2021/11/29~2021/12/10
프론트엔드 개발자 3명
백엔드 개발자 3명

적용 기술 및 구현 기능 적용 기술
Front-End : JavaScript, React.js, SASS, React-router-dom
Back-End : Django, Python, MySQL
Common : Git, Github, Slack, Trello, Notion

내가 구현한 기능

Nav

localStorage.getItem()을 활용하여 사용자 TOKEN의 유무에 따른 조건부 렌더링
State 값 True/false를 활용하여 drawer menu 영역 밖 클릭시 닫히도록 조건부 렌더링

메인 페이지

분수에 값을 저장하여 슬라이드 버튼 클릭 시 일정 길이만큼 슬라이드 이동
슬라이드 숫자에 맞춰 숫자버튼 클릭 시 슬라이드 이동
마우스 hover 애니메이션 적용
Tag의 id값과 일치하는 id를 가진 유저 정보를 불러오도록 구현
Style에 window.scrollY을 사용하여 버튼 클릭시 최상단으로 이동

진행률

메인페이지

1주차 진행률
- jsx, scss로 기본적인 메인페이지 구조 작성 [완료]
- 특정 높이값에 버튼 보여주기 [완료]
  - window.scrollY를 활용하여 최상단으로 이동시키는 버튼을 구현하고 버튼 스타일에 ```style={ScrollY < 260 ? { display: 'none' } : null}```를 사용하여 스크롤 높이값이 특정 높이 값만큼 내려오지 않으면 버튼이 보이지 않게 만들었다.
- 가로 이미지 스코롤 기능 [미완성]
  - 가로 이미지스크롤(캐로셀-Carousel)을 만들고 싶었는데 아직 미완성이면서 원하던 기능과는 다소 다른 기능이 만들어졌다.
    원하던 기능은 좌우 버튼으로 3개의 이미지가 이동하고 숫버 버튼으로 한개의 이미지씩 이동하기를 원했지만 다소 다르게 만들어져서 수정해야 한다 ㅠㅠ
    ```style={{transform: `translateX(${-위치값state(기본으로 0) * 슬라이드 버튼 클릭 시 움직일 길이}px)`,}}```
- scss 마우스 hover => 텍스트 및 테두리 색상 변경 [완료]
- 태그 카테고리에 따라 같은 태그를 가진 사용자 데이터를 보여주는 기능 [실패]
- 백엔드와 데이터 주고받아 state에 저장하고 활용하기 [성공]

2주차 진행률
- 가로 이미지 스크롤 기능 [완료]
- 태그 카테고리에 따라 같은 태그를 가진 사용자 데이터를 보여주는 기능 [완료]
- 백엔드와 데이터 주고받아 state에 저장하고 활용하기 [성공]

네비게이션 & 햄버거메뉴

1주차 진행률
- jsx, scss로 기본적인 메인페이지 구조 작성 [완료]
- 기능 구현 [대기중]

2주차 진행률
- 토큰 유무 => 조건부 렌더링 [완료]
- 컴포넌트 구조 변경 / 하위 컴포넌트 생성 [완료]
- 애니메이션 추가 [완료]

함께해서 가능했던 시간

좋은 팀과 좋은 분위기

나는 아직 개발을 시작한지 얼마되지 않은 주니어 개발자다. 그렇기에 나 혼자 작업을 했다면 즐거운 마음을 가지고 개발자로 성장할 수 있었을까? 하는 의문이 조금 남는다. 지금쯤 풀리지 않는 문제로 끙끙 앓면서 스트레스만 받고 있을 수도 있을텐데 팀이라는 나를 받쳐주는 사람이 있다는 것이 이보다 더 좋을 수가 없었다.
힘들어도 도와주고 도움받고, 먹을 것도 나눠먹으면서 짧은 쉬는 시간에는 이야기도 꽃도 피우면서 마음을 편하게 할 수 있는 시간을 가질 수 있었고 오랜 시간 한 자리에 앉아서 코드를 작성해야하는 힘든 시기에 휴식을 줄 수 있었다.

더 많은 것을 배운 시간

팀원간의 실력차는 어쩔 수 없이 발생한다. 아무리 비슷한 사람과 팀이 이루어진다고 해도 잘 하는 분야도 다르고 시간을 투자하는 것도 다르기 때문에 어쩔 수 없지만 이를 극복하도록 해주는 것이 팀원이었다.
모르는 것이 있다면 찾아보는 것을 기본으로 시작하지만 찾기만 한다고 문제가 늘 해결되지는 않는다. 그럴 때 팀원이 알려주면 어쩜... 그렇게 감사 할 수가 없다.
내가 사용한 코드를 보고 더 짧게 작성할 수 있는 방법을 알려주기도 하고, 다른 방향성을 제시해주기도 한다. 즉 내가 알던 지식과는 다른 지식을 주기도 하며 내 지식을 더 다듬어 주기도 하는 정말 좋은 시간이다.

기록으로 남겨야 나의 것이 된다.

프로젝트가 끝나서야 느끼는 기록의 중요성...

소통을 중요시하였고 많은 미팅과 작업간의 질문들이 오고가며 알아간 것도 많지만 상당부분을 기록하지 않았다. 기록하는 습관이 아직 부족하기도 했고, 새로운 것을 배우고 사용하다 보니 코드를 작성하는 것에만 시간을 너무 많이 사용하였고 지금 다시 코드를 살펴보면 이 기록하지 않았기에 생각나지 않는 것들도 다소 있다.
온전히 내 것으로 만든다는 것이 한번으로 가능할 리가 없고 기록을 해야 추후 다시 찾아보고 다시 한번 이해하는 과정을 반복하면서 내 것이 되도록 해야하는데 그런 점에서 기록하지 않았다는 것은 정말 큰 문제라고 생각한다.

다른 사람의 코드를 읽는 것이 그렇게 힘들 수가 없었다. 서로 맞춘다고 맞춘 여러가지 기초 세팅도 진행하다보면 본연의 작성법이 나오기도 하고 코드를 정말 깔끔하게 작성하는 사람이 있는 반면 그렇지 않은 사람도 있지 않은가... 다른 사람 코드를 보고 깨끗하다고 느꼈던 나는 아마 후자일거 같다.
즉 다른 사람이 작업한 내용은 말로 설명하고 직접 보더라도 이해하기 힘든 경우도 있다. 그럴때 참고했던 자료도 함께 정리했다면 더 도움이 됬을텐데 하는 아쉬움이 남는다.

지금이라도 기록하자

슬라이드 기능

props로 받은 데이터의 불변성을 유지하기 위해서 스프레드 문법을 사용하고 이미지가 많을 경우 21개 이후부터는 잘라내도록 하였다.
좌우 버튼을 클릭할 경우 State값을 +-3씩 변화를 주고

실직적으로 슬라이드가 움직이게 하는 로직은 자식 컴포넌트에서 이루어지는데 슬라이드 기능을 찾아보니 방법은 다양했는데 내가 사용한 방법은
props로 받은 슬라이드이미지 한 개의 사이즈 320px와 초기값이 0인 좌우 버튼을 클릭할 때마다 slideSize를 +- 3씩 변경하여 해당 값과 320을 곱한만큼 이동하는 style 속성에 적용하였다.

어떻게 해야할까?

2차 프로젝트까지 고작 2일밖에 남지 않은 상황에서 할 수 있는 것은 무엇일까? 사실 지금와서 모든 것을 다 정리하기는 시간이 부족하다고 느낀다. 솔직히 말해서 쉬고 싶기도 하고 밀린 집안 일도 해야하고...
그렇다면 짧은 시간에 모든 것을 한다는 생각을 버리고 간단하게. 정말 간단하게 메모장에 기록하고 이미지를 남기면서 조금씩 정리해나가도록 하자. 2차 프로젝트가 시작되면 할 것이많아질 테니 그날 배운 것은 그날 정확히 기록하고, 남는 시간에 미처 못 정리한 내용을 조금씩 한 문단이라도 조금씩 정리하도록 해야겠다.

같은 실수를 반복하지 말자!