TIL: 2022-09-16, 첫 솔로 프로젝트 짤막한 회고

⚙️ 학습 내용

솔로 프로젝트 '나만의 아고라 스테이츠 만들기'

github Pages: https://aemaaeng.github.io/fe-sprint-my-agora-states/

 

 

🐹 회고

대망의 솔로 프로젝트가 끝났다. 이걸 내가 했다고?의 또 다른 시리즈이다.

평소 UI/UX 쪽에도 관심이 많아서 이번 프로젝트의 목표는 유저와 상호작용하는 최대한 깔끔한 페이지를 만들어보는 것이었다. 

기능 구현은 Bare Minimum까지만 딱 하고 나머지 시간은 전부 CSS에 할애했다.

아직 Flexbox를 능수능란하게 다루지 못 해 여기에 시간을 많이 쓸 것 같아서이기도 했고, CSS는 봐도봐도 아쉬운 점이 계속 나올 것 같았기 때문이다.

그래도 Advanced를 아예 시도조차 못 해본 것은 아쉬움으로 남는다. 페이지네이션에 대해서 검색이라도 해볼걸...

 

CSS 작업에 앞서 ColorHunt에서 내 취향인 컬러 팔레트를 골라 이미지를 키노트에 넣어놓았다. 

가장 진한 색은 포인트 컬러로, 가장 연한 색은 배경 색으로 쓰는 방식으로 한 번 구현해봤다.

배경을 단색으로 하니 단조로운 느낌이 있어서 팔레트에 있던 색상들로 그라디언트를 적용해보았다.

 

그룹원분들 발표를 들으면서 여러 팁들도 얻었다.

내가 생각하지 못했던 기능을 구현해보신 분도 계셔서 동기부여가 팍팍 됐다.

클래스 네이밍 컨벤션이나 깃헙 커밋 메시지 양식 같은 것들은 나중에 분명 필요할 것 같아 꼭 알아둬야겠다고 생각했다. 

 

프로젝트를 하면서 구글링 실력이 엄청나게 늘었다! 원하는 정보만 쏙쏙 뽑아내는 능력이 점점 좋아지고 있음

확실히 평소에 영어 구글링이 습관이 되어 있던 게 도움이 된다. 항상 우리에게 영어 구글링을 강조하셨던 교수님 감사합니다..

 

그리고 왜 다들 뭔가를 직접 만들어보라고 하는지 알겠다. 혼자 부딪혀보면서 배우는 것이 훨~~씬 많다!

개발자 도구에서 CSS 속성 이것저것 만져보면서 아 여기가 바뀌는 거구나 깨닫기도 하고, 요소를 감싸는 기준이라고 해야 할까? 그런 걸 직접 보면서 익힐 수 있었다.

 

나중에 이 프로젝트를 살펴봐야 할 때 참고할만한 문서가 있으면 좋겠다고 생각했다. 이래서 다들 리드미를 작성하는 걸까?

키노트에다가 프로젝트에 사용한 폰트나 색상 팔레트, 와이어프레임을 대충 남겨놨었는데 한 번 리드미를 제대로 작성해볼까 싶다.

아니면 블로그 비공개글로 어려웠던 점이나 참고 링크 등을 주절주절 늘어놔도 좋을 것 같고?

다른 사람들 프로젝트 구경해보면서 다들 어떻게 관리하나 한 번 찾아봐야지. 

 

❓ 막히는 or 막혔던 부분

CSS Flexbox를 이용해 요소 정렬하기

 

질문 작성란의 label과 폼을 깔끔하게 정렬하는 데에서 많은 시간을 할애했다. 

스택오버플로우에서 관련 질문을 찾았는데 두 가지 해결 방법이 있었다. 

1. label에 inline-block 속성 부여 및 고정된 크기(width) 설정
2. CSS grid 이용

1번 방법은 오래된 방법이라 반응형 웹을 만들 때에는 권장되지 않는 방법이라고 한다. 그럼 남은 방법은 2번 뿐인데 그리드를 아직 배워보질 않아서 선뜻 사용해볼 수가 없었다. 그래서 일단 임시방편으로 1번 방식으로 구현해봤다. 

 

submit은 일반 버튼과 작동 방식이 약간 달라서 자바스크립트 코드를 짤 떄 많이 애먹었었다.

 

textarea는 input과 속성이 약간 달라서 label 텍스트의 정렬 방식도 따로 찾아봐야 했다. 

textarea에 vertical-align: top;을 적용해주면 아래에 있던 텍스트(여기서는 '질문 내용')가 위로 올라간다.

 

스크롤바에 display: none; 속성을 추가했더니 스크롤할 때조차도 스크롤바가 보이지 않는 상황이 발생했다.

스크롤할 때에는 보였으면 좋겠는데.. 못생겨서 숨겨둔 거라 스크롤 스타일을 깔끔하게 바꿔서 아예 보이게 만드는 것도 생각해봐야겠다.

 

🔍 공부가 더 필요한 부분

구현에 급급해서 제대로 학습하지 않고 코드만 그대로 참고한 부분이 몇 개 있었다. 

linear-gradient나 text-shadow가 그런 것들이었는데, 인자 개수에 따라 적용되는 부분이 달라져서 헷갈려가지고 그냥 코드만 긁어왔었다. 반성한다.....

조만간 제대로 한 번 공부를 해봐야겠다. 이 속성을 쓸 때마다 구글링하고 있는 나 자신을 발견하니 약간 현타온다.

 

깃헙 커밋 메시지 작성법

클래스 네이밍 컨벤션

랜덤 이미지는 어떻게 받아오는 걸까?? 풀리퀘스트를 보니 이걸 구현하신 분이 계시던데 그 분의 코드를 참고해봐야겠다.