토이 프로젝트 1 회고

 

https://github.com/Dev-FE-1/Toy_Project_Team_1

GitHub - Dev-FE-1/Toy_Project_Team_1: 토이 프로젝트 1_사내 인트라넷 시스템 개발을 위한 1팀의 레포지토

 

 

막 가나다라를 배웠는데 글을 쓰라는 과제를 받은 기분으로 시작했다

초반 기획 회의에서 '코드 컨벤션도 비슷하게 갈까요 ?' 하는데

컨벤션이 뭔지 몰라서 크롬에 바쁘게 검색하면서도

표정은 평화로움을 유지하는, 물 안에서는 바쁘고 바빴다

토스트 팝업이 무엇을 말하는지 몰랐던 건 기본이며

git 기본 명령도 잘 몰랐고 무엇보다 한번도 써보지 않아서

내가 뭔가 잘못하면 팀 전체에 영향을 줄까봐 덜덜 떨던 시간들

화면공유로 이거 해보세요 저거 해보세요 해주었던 팀원들이 너무 고맙다

피그마를 다뤄보신 팀원 분이 초기 디자인을 다 해주셨고

프로젝트 경험이 있으신 팀원분이 초기 문서 작성을 해주셨고

무엇인가 나도 의견을 낸다던가 내가 도맡아 한다던가

그런 걸 하고 싶은데 몰라서 못하는 경험이 처음이다보니 속상한 마음이 들기도 했다

​

SPA방식으로 만들어야 하는데 일단 난 MPA도 처음이었고

여러가지 상황상 일단 MPA로 기능 구현을 하고 나중에 구조를 잡아

이사를 가는 방향으로 가는 걸로 정하고

html, css 그리고 아주 약간의 js 작업을 시작했다

html은 그렇다 치고 css가 생각보다 까다로운 녀석이었다

특히 직원관리 리스트를 table로 만들고 직원이 많아지면 넘어가는 내용은

overflow-y를 넣어서 스크롤을 구현해야 했다.

스크롤을 넣는 과정에서 전체 contents부분은 놔두고

직원 관리 테이블에만 스크롤을 넣고 싶은데

죽었다 깨어나도 전체 화면에 스크롤이 적용되는거다

알고보니 컴포넌트로 정해놓은 것이 우선 적용되고 있었다

다음 산은 테이블 반응형으로 만들기

table 자체가 까다로운데다가 직원 관리 페이지라

안에 내용이 많아서 초기 디자인대로 아예 구조 자체를 바꾸는게

정말 거의 일주일 넘게 ? 시간은 시간대로 쓰고

결과물은 안나와서 정말 스트레스 받았던 기억이 난다.

하다하다 안되서 아예 그냥 다 갈아엎고

새 테이블을 다시 만드는 느낌으로 갔고

다른 분이 테이블 반응형으로 만드는 거 성공하셔서

그대로 해보면 좋을거 같다고 해주셨는데

결국은 그냥 데스크탑 -> 태블릿 -> 모바일

화면이 작아질 수록 테이블 내용을 사라지게 만드는 방법으로 했다

이 부분은 리팩토링에서 다뤄봐도 좋을 것 같다

​

js 같은 경우 간단한 기능부터 구현을 시작했는데

본격적으로는 SPA로 이사를 가고부터 시작했던 것 같다

이사를 가고 js를 다루는게 어려웠던 이유는

이제 js로 코드만 짜면 되는게 아니라

라우팅으로 서버를 불러온다던지

데이터를 또 불러온다던지 하는 것들 때문이었다

다른 팀원분들이 작업하신 코드를 보고

코드 흐름을 익히면서 더듬더듬 따라해보는 식으로 했더니

그래도 (내 실력을 기준으로) 속도를 붙일 수 있었다

사실 서버를 연결하는 것 까지는 어떻게

ai의 힘을 빌려 해보았는데 json 파일에 더미데이터를 넣어

그걸 불러오는 것과 다르게 이번 프로젝트에서 사용한

mysql은 sql이 뭔지도 이해해야 하고

sql 문법도 알아야 하고 일단 기능 구현도 버거웠던 나에게는

그것까지 알아서 해내기에는 사실상 불가능한 영역이었다

그래서 기능 구현까지는 내가 맡고

데이터를 연결해주는 부분은 다른 팀원분이 도와주셨다

알고보니 직원관리 페이지와 마이페이지가

다른 페이지와도 연결되어야 하는 부분이라

까다롭고 기능 자체도 많은 페이지여서 후반부에

다들 여기저기 붙어주셔서 너무 감사했다

​

첫 술에 배부를 수 없듯이

내가 얻어갈 수 있는 인사이트 또한 굉장히 한정적일거다

같은 팀으로 같은 결과물을 제출했지만

그 안에서 기여한 정도는 다를 수 밖에 없었다

모달, 색상, 폰트, 페이지네이션 등

공통으로 쓰는 부분은 컴포넌트화하는 역할이라던지

(모달이나 페이지네이션이 마지막까지 애를 먹게 해서

결국 나는 모달을 쓰지 않기로 결정했다 ㅎ)

프로젝트 정의서, 기술 정의서 문서를 작성하는 역할이라던지

프로젝트 전체 구조를 짜는 부분이라던지 데이터 구조를 짜는 역할

이런 건 나의 역량이 아직 부족해서

그냥 팔로우 하는 걸로 이번 프로젝트는 마무리 했다

​

가장 크게 배운 것은

포기하지 않으면 어쨌든 무언가를 해낸다는 것

특히 혼자하는 것이 아니었기 때문에 가능했다

사실 원래 도움을 구하는 것이 익숙하지 않은 성격이라

여태 뭐든 혼자 낑낑대는게 일상이었는데

이건 안되겠다하고 회의 때 도움을 구하면

하루 동안 안되던게 10분 안에 해결되는

놀라운 현상을 경험하고 나서는

오히려 그런 자세가 일의 효율성을 저해할 수도 있겠구나 했다

아주 사소한 .. 하지만 초보라서 놓친 것들이 이유일 때

css 우선 적용을 잘 몰라서 왜 내가 설정한게 아닌데

이렇게 이상하게 배치가 되었을까 낑낑 거리다가

그냥 내가 적용하고 싶은 걸 더 구체적으로 적어주기만 하면 되는 것이었다

어이 없기도 하고 놀랍기도 하고 ㅎ

​

시간이 지날수록 우리의 페이지에

각자의 작업물이 합쳐지면서

무언가 만들어져 간다는 느낌에 힘이 나기도 했고

더 어렵고 복잡한 오류를 해결해나가는 팀원들이

대단하다는 생각을 했었고

나도 나만의 속도로 다음에는, 그 다음에는

그리고 언젠가는 내가 누군가에게 도움을 줄 수 있는

그런 사람이 되었으면 좋겠다는 생각을 했다

​

우리 조가 1등으로 발표라서 떨렸는데

발표해주신 분이 너무 잘해주셔서

속으로 감탄을 엄청 했던 기억이 난다

목표 -- 프로젝트 내용 -- 회고

이런 식으로 발표하는 포맷이 좋은 것 같다

강사님이 중간점검했을 때

결과물이 이정도 나오겠다 한 거보다

3-4배는 더 기능 구현을 많이해서

놀랐다고 해주셨고 디자인도 지적받지 않았다

조금 아쉽다고 해주셨던 건

리드미를 좀 더 간결하게 적으면 좋았을 것이라는 것과

가끔 페이지에 사용자 동선이 끊기는 부분을

개선하면 좋겠다고 해주셨다

​

다른 팀의 발표와 피드백을 들으면서 적어놓았던 것.

• swagger 서버 실무에서도 많이 쓰니까 연습하면 좋음
• 디자이너 까지는 아니더라도 최소한의 미적인 감각 필요
• 이미지 업로드에는 multer를 많이 씀
• 무언가를 수치화하는 건 좋은 습관
• 로그인 암호화 시도한 부분 좋음
• 소스가 부족할 때 백엔드 부분을 직접 개발하지 않고
  firebase와 같은 잘 만들어진 api 활용하는 것은 좋은 선택
  (3명이서 프로젝트 진행하면서 힘드셨을 것 같다)

• 사용자 동선. 유저에게 일관성을 제공하는 것은 중요함
• 파일 업로드할 때 express upload 써보기
• 개발하는 제품에 대해서 진심으로 생각하는 자세
  휴가신청 방법 등을 보여준 부분에서 ui적인 것만으로는
  커버하기 어려운 부분까지 구현한 것은 아주 좋음

• 트러블 이슈와 관련하여 어떤 문제가 발생했을 때
  원인 파악 뿐만 아니라 재발 방지를 위해 어떻게 해야할지
  논의를 진행하는 과정은 꼭 필요한 과정. 실무에서도 함
  문제 발생시 원인, 해결방안, 재발방지대책 생각해볼 것

​

다른조에서 반응형을 너무 잘 만드셔서

그거 어떻게 하는지 코드를 좀 뜯어보고 싶고

아무래도 잘 만든 웹사이트들을 보면서

웹 개발 관련 미적 감각을 키워보는 걸로 (?)

​

다음주에 이제 리액트를 이용하는 프로젝트가 시작되는데 .. ㅎ

이번 프로젝트에서 잘 숙지하지 못했던 부분이랑

리액트 공부 또 열심히 해봐야지

아무래도 12월 까지는 마음의 여유가 없을 예정 (?)

뭘 알아야 여유가 있고 숨을 쉬지 .. 나 참 ..

암튼 너무 조급해하지 말고 열심히 해보자

너무 수고했어 나 자신 ! 화이팅 !