활동내역.zip/Bootcamp

[2022WinterBootcamp] 2주차 회고

  • -
728x90

2023 Serieses

 

[ 2023 ] CheckPoint, 2023년

2023년동안 작성했던 회고록들을 모아 둔 게시글이다 2023년 동안 작성한 회고들을 계속해서 업데이트 해 나갈 예정이다 [ January ] - 변화의 시작, 1월 [2022WinterBootcamp] 0~1주차 회고 개발자가 되기로

time-map-installer.tistory.com


본문

아이디어 회의가 모두 끝이 났다

괜찮은 아이디어를 찾기 위해 3번에 걸쳐 아이디어를 내고 디자인하고 새로시작하고를 반복하였고,

드디어 괜찮은 아이디어를 결정할 수 있었다

 

아이디어 회의를 3회동안 진행하면서 어떤 점을 배웠을까?

  • 아이디어를 내고 디자인과 아키텍처, ERD를 만들고 지우는 과정을 반복하였다
  • 전체적인 과정에 대한 속도가 점점 빨라졌다
    • 7일 -> 5일 -> 2일로 실시간으로 빨라지는 모습을 보았다
  • 최신 디자인에 대한 정보를 얻고, 회의를 진행하며 사람들이 좋아할 만한 디자인에 대해 알 수 있었다
    • 심플한 디자인
    • 따듯한 색감 혹은 파스텔 톤의 단색의 디자인
    • 오브젝트들이 많으면 화면을 보는 것만으로도 피로감을 느낄 수 있다
    • 오브젝트들이 너무 커도 화면이 작아보이게 할 수 있다
    • 모바일은 최대한 단순한 느낌으로, 웹은 같은 디자인이어도 세련되게
  • 많은 부분을 고려하면서 사람들이 흥미 있어할 만한 주제에 대한 공통점을 찾았다
    • 접근성 - 주위에서 쉽게 볼 수 있어야 하는가
    • 흥미 - 지나가다가 보았을 때 한 번쯤 해 볼 만 하다고 생각이 드는가
    • 확장성 - 다른 아이디어들을 접목시켰을 때 확장이 용이한가
  • 데이터베이스 설계 시 고려해야 할 부분
    • 이전에 학교에서 수업으로 데이터베이서 설계 과목을 들은 적이 있었는데, 그 수업을 열심히 들어두길 잘했다는 생각이 든다
    • 확장성을 고려한 타입 지정
      • 예를들어 상태관리를 위한 칼럼 'state'를 넣는다고 생각 해보면
      • boolean 타입으로 True, False를 이용하여 두 개로 나누기 보다는
      • varchar 타입을 지정해주면서 가입됩, 탈퇴됨, 관리자 등으로 추후에 확장 될 수 있는 부분까지 고려한다
    • 모든 Table에는 고유한 int 형 ID가 필요하다 - 이는 후에 관리를 용이하게 만들어준다
  • 서로 다른 의견이 나왔을 때 이에 대한 수용이 중요하다
    • 무조건적으로 수용하는 것이 아닌 합당한 뒷받침 의견이 있을 경우에 해당된다
    • 자신의 의견과 상대의 의견을 섞어보는 것도 예상치못한 시너지를 불러일으킨다
  • 시스템 아키텍처를 그려보며 웹의 구동방식에 대해 알 수 있었다
    • 하지만 아직도 많이 헷갈리는 부분이다
    • 응용해보라고 하면 애를 먹을 것 같은 부분이다

 

확실히 처음 들어가는 분야라서 그런 지 이론적인 부분부터

팀워크에 관련되어있는 부분에 대해서는 많은 점을 배운 것 같다

 

아직까지 팀워크와 리더십, 팔로워십에 대한 궁금증이 남아 상담을 하고 팀원들과 소통을 진행 해 볼 예정이며,

다음 주차의 회고에서는 팀워크에 관련된 내용을 주로 다룰 것 같다

 

나는 이번 부트캠프에서는 프론트엔드를 담당하여 개발을 하였다

사실 백엔드 개발자를 목표로 하고 있지만, 프론트엔드에 대해서도 이해를 하는 것이 도움이 될 것이라는 말에

시작은 진입장벽이 낮고, 결과가 즉각적으로 나타나는 프론트엔드를 추천받아 진행하기로 했다

요즘 굉장히 많이 쓰이고 있는 리액트에 대해 다루어 보고 싶기도 했던 것이 크다

 

그렇게 프론트를 맡아서 Figma를 이용하여 디자인을 하였고, 퍼블리싱을 시작했다

나는 그 중에 네비게이션 바와 메인 페이지를 담당하였다

 

여기서 알게 된 점은 퍼블리싱이라는 단어인데, 디자인을 한 내용을 바탕으로 웹에 옮겨넣는 것을

퍼블리싱이라고 한다는 것을 알았다.

디자인을 웹에 옮겨 넣는 데에도 많은 어려움이 있었다.

프레임을 구성하고, 프레임의 배열 방식에 따른 오브젝트 배치, 점점 늘어나는 코드와 정리가 안되어 더러워지는 코드까지..

 

프레임을 구성하는 것에 대해서는 피그마에서 미리 시뮬레이션 페이지들을 그려넣은 뒤 div 배치를 해 보았는데, 이 방법이 도움이 되었던 것 같다.

프레임 나누는 과정 설계

프레임의 배열 방식에 따른 위치 같은 경우는 flex와 아이템 배치에 대한 추가적인 이해가 필요하지 않았나 생각한다

거의 무지에 가까운 상태로 학습을 하다보니 쓰면서도 이게 맞나 싶었지만 어떻게든 완성되는 모습이 신기했다

또한 반응형으로 탭과 웹에 대한 부분까지 만들다 보니 css에 대한 이해도가 높아진 것 같다

css는 Tailwind를 이용하여 디자인 하였는데, 역시 러닝커브가 낮고 깊게 파고 들어갈 수도 있어 초심자들에게 정말 좋은 것 같다고 생각했다

또한 Prettier tailwind plugin을 통해 클래스명을 자동으로 정렬해주는 기능을 써서 가독성을 조금이나마 높였다

단점으로는 보일러플레이트 코드였는데, 같은 tailwind 코드들이 여러 곳에서 반복되면서 가독성이 떨어졌던 것 같다

이 부분에 대한 이슈는 추후 학습을 통해 개선 해 나갈 것이다. 분명 해답이 있을 것이라 생각한다

 

아직 타입스크립트를 통한 본격적인 기능 구현에 들어가지는 않았지만,

퍼블리싱을 통해 디자인을 옮기는 것이 절반, 기능 구현이 나머지 절반 인 것 같았다.

- 이에 대한 개인적인 의견은 다음 주 회고에서 달라지지 않을까 생각한다

 

마지막으로 현재까지의 나의 생각을 포함한 요약 내용을 아래에 정리해두고 마치도록 하겠다


요약본

아이디어 회의 종료

반복되는 아이디어 회의를 통해 개발 초기 부분에 대한 숙련도 높아짐

 

디자인 작업과 퍼블리싱 진행

어떤 디자인이 유행하고, 요즘 트렌드인지 알아볼 수 있었음

 

나의 역할 : 프론트엔드

 

내가 담당한 페이지 : 메인페이지 & 네비게이션 바

사용한 기술 : 리액트, 테일윈드

처음 시작했지만 점점 실력을 늘려나가지 않을까 기대 중

 

퍼블리싱에서 디자인을 옮기는 작업이 50%, 기능을 추가하는 작업이 50%를 차지하지 않을까?

 

테일윈드에서 보일러플레이트 코드가 자주 등장을 하는데, 이를 개선할 수 있는 방법이 있을까?

 

그래서 내가 생각하는 개발은 무엇일까?

  • 코딩
  • 원활한 의사소통
  • 좋은 팀 분위기 유지
  • 정보공유

End

728x90
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.