주제
우리가 정한 주제는 바로바로 "일반인들도 사용할 수 있는 코디네이터" 어플이다. 사실 어플은 아니고 웹앱이고, 일차적으로 웹앱으로 제작한 후에 완료가 되면 어플로 만들 예정이다.
1. 코디네이터 입장이되고싶은 사람들은 자신이 가장 잘입고 자신있는 분야를 고른 후, 포트폴리오를 작성한다.
2. 유저 입장의 사람들은 의뢰하고싶은 코디네이터들에게 의뢰를 하여
-> 옷을 잘 입는 사람은 소소한 용돈벌이를 할 수 있고
-> 옷을 잘 입지 못하는 유저는 작은 금액으로 #상황 #스타일 #트랜드 에 맞게 옷을 코디할 수있는 장점이 있다.
첫번째 모각작
일시 : 2023.09.01
장소 : 건대 엔젤리너스
도메인 설계
나의 역할은 프론트엔드 개발자 이지만, 예전부터 백엔드 개발 또한 어떤 플로우로 개발하는지 알고싶었다. 이번 첫번째 모각작에서는 백엔드 친구들과 같이 도메인 설계를 진행했다.
대학교를 다니면서 데이터베이스 설계 과목을 들은 덕분인지 다행스럽게도 백엔드 친구들이 하는 도메인 설계가 무슨말을 하는지 이해할 수 있었고, 간간히 의견도 낼 수 있었다.
( 휴.. 이래서 뭐든 열심히 하라는 말이 이런말인 것 같다. 사실 배울때는 이걸 어디에 쓰지.. 싶었지만 그럼에도 열심히 배웠는데 이런 뜻하지 않은 부분에 다 쓰이게 되는 것같다. )
협업 룰 정하기
사실 매번 프론트엔드 개발은 나 혼자 도맡아서 진행했던 경우가 대다수이다. 사실 대다수이라기보다 200% 다 내가 혼자했었던것같다. 그러나, 이번 기회에 프론트엔드 개발자와 함께 협업이라는 것을 진행하게 되었고, 이에맞게 commit 방법 혹은 레포 브랜치 설정 등등 협업에 필요한 디테일 한 것들을 정하기 시작했다.
이전에 회사를 다니면서 배웠던 협업이 있었으나, 퇴사하고 시간이 지나니 기억이 가물가물 했는데 이번 기회를 통해 다시 복기할 수있는 기회가 된것같다 다행이다. 복기하지 않았더라면 전부 까먹었을테니까..
첫번째 모각작 끗.
🎨 디자인
짧게나마 디자인 툴(Figma) 사용
회사다닐때부터 아무래도 스타트업이다보니 디자인까지 내가 맡아서 해야하는 부분도 있었는데, 그 과정에서 다양한 디자인 레퍼런스를 보고 디자인이라는 것을 접하게되었다. 그냥 개인적으로 생각하는 프론트엔드 개발자는 어느정도 디자인 지식과 어느정도 백엔드 지식이 있어야한다고 생각한다.
그래서 이번 기회에 피그마를 조금 배우고 만져보고 싶어 디자이너에게 부탁을 했고 흔쾌히 오케이 해주셔서 짧았지만 직접 피그마를 만져보고, 사용할 수 있었던 기회였던것 같다.
본격적인 프론트엔드 작업 시작
다른 프론트엔드 개발자와 함께 어떤 부분을 컴포넌트로 지정할지 정하고, 페이지 별로 나눠서 작업을 시작하였다.
사실 충돌 때문에 조금 작업을 할때 조심스럽게 진행하는것도 없지 않아있는 것같다. 이런 부분은 조금씩 같이 해본다면, PR보내보고 머지를 해보며 어떤 방법으로 진행해야 충돌이 덜 나고 소통을 최대화하며 자연스럽게할지는 정해질 것같다.
1. 가입 페이지
자세한 디자인은 보여드리지 못하지만 가입페이지-1 에는 내가코디네이터로 가입할것인지 혹은 유저로 가입할것인지 정하는 페이지이다.
여기에서 사용할 컴포넌트는
1. 상단의 버튼
2. 하단의 '다음'버튼
3. 코디네이터인지 유저인지 선택하는 박스
총 세가지라고 생각하였고, 이를 다른프론트엔드 개발자와 나눠서 각각 개발하였다.
다른 개발자가 잘 되지 않는 부분은 커밋을 올리고, 그 커밋을 받아 내가 봐줬으며 다른 개발자 또한 똑같이 진행하였다. 지금 문제점이 전체를
height : 100vh로 주어져있기 때문에 각각 자신이 사용하는 노트북에 따라 마진이 다르게 들어가게 되어 이 부분을 %로 고쳐 어떤 상황에서도 깨지는 부분이 없도록 진행해볼 예정이다.
👍 👎이번주는 좋은 것과 나쁜 것이 무엇이 있었나요?
👍 좋은점
프로젝트가 점점 더 구체화되가며 프로젝트에 대한 애정도가 점점 높아지고있다. 프론트엔드의 최고의 장점은 내가 수정한 코드가 바로 눈에 보인다는 점인데 그렇게 한페이지 한페이지를 만들다 보니 점점 애정도가 높아지는 것같다.
-
두개의 버튼 중 하나만 클릭이 된다고?
첫번쨰 페이지부터 두개의 버튼 중 하나만 클릭해야하는 기능이있었는데 사실 처음엔 이게 잘 안되었다.
(둘다 클릭이 되어 색이 둘다 같은색이 되는 참사) 이부분을 다른 팀원이 부모파일에서 자식 폴더로 함수를 넘겨줄 수 있다는 사실을 알려주었으며 이후 같이 화면공유를 하면서 진행하였다. 친구의 기본지식 + 나의 견해..? 덕분에 문제를 해결한 순간 사실 소름이 끼쳤다.. -
프론트끼리 같이하는게 뭔데?
이 말을 대략 362번 정도 한거같지만 이번 프로젝트의 최고의 장점은 다른 프론트엔드 개발자가 있으며, 모든 프로젝트의 규칙을 해당 팀원과 이야기를 나눌 수 있다는 점이 가장 최고의 장점인듯하다.
사실 혼자진행하게된다면 어떤 규칙을 지정하지않고 그냥 내 맘대로 코드를 짜면되기에 불편하고 시간이 오래걸릴 일 이 딱히 었다. 그러나, 이번 프로젝트에서 시간은 조금 더 걸리지만 질 좋은 코드를 위해서는 많은 고민을 같은 분야 사람과 해야한다는 사실과, 이렇게 같이 규칙을 정해가다보면 점점더 고도화된 코드가 나오는 것같다. -
요즘은 css도 코드로 취급한다며? feat. 스타일 컴포넌트
최근 개발에 관심많은 지인이 나에게 이런 소리를 해주었다. 난 솔직히 이소리를 들었을때 속으로 엥...? 싶었다 사실 html /css 는 코드로 취급하지 않는다는게 국룰이라고 생각했다.
그러나, 이번기회에 스타일 컴포넌트를 사용해보았고, 사용하면서 느꼈다.. 아 css도 코드로 인정해주는 이유를..ㅎㅎ
👎 나쁜것
사실 나쁘다고 할...건 아니지만, 여태 가로형에 관련된 반응형만 진행하다보니 width만 신경써서 했었고 height에 관련해서는 전혀 신경쓰고있지않았다. 다만, 뭐든 반응형이되기위해서 px을 사용하는 것이 좋지않다는것을 알고는있었지만, 이번에 팀원과 다른 노트북 인치를 사용하며 height또한 고려해야할 부분임을 깨달았다.
: 즉.. 지금의 나쁜점은 반응형에서 높이 부분의 마진으로 인해 원하는 ux가 나오고 있지 않다.
🤓 이번주 진행했던 학습/개발 내용은 무엇이었나요?
- ssr / csr / ssg : 랜더링 삼총사에 대하여 알게되었다.
- 잊고있던 깃허브 협업을 다시한번 기억해 내어 프론트끼리의 협업을 진행하였다.
- 이번 프로젝트에서 필요한 컴포넌트들을 나누었다.
- 개인정보입력 페이지중 첫번째 페이지를 완료하게 되었다.
🗯️ 오늘 가장 고민을 했던 부분은 무엇이었나요?
앞에서도 말했지만 해당 사진과 같이 '코디네이터모드'가 선택되면 '사용자모드'는 색깔이 원래있던 대로 풀려야한다.
그러나, 자꾸 둘다 색이 바뀌어서 머리가아팠는데 부모 - 자식 간 함수 전달이가능 하다는 지식으로 해결완료했다!
자세한 코드는 정리해서 올려놓을 예정이다.
아쉬운 부분을 개선하기 위해서 필요한 것은 무엇인가요?
이번에 처음으로 스타일 컴포넌트를 사용해 보았는데, 아직 처음인지라 어떤식으로 짜야 클린코드인지 확신이 안들고, css와는 다르게 자동완성이 없기에 모든 css 부분을 실수없이 기억해야한다는 단점..? 존재해서 해당 문제를 해결하기 위하여 css의 종류의 이름을 완벽하게 파악하는 것이 필요할 것같다.
📅 다음주는 어떻게 보낼 예정인가요?
- 훅에 대하여 완벽하게 이해 및 활용
- 디자인 올려놓은것 전부 완성
- 가능하다면 백엔드와의 통신으로 하드코딩이 아닌 백엔드와의 통신으로 화면에 띄어볼 예정
