기초 프로젝트 1편 : 코드잇 스프린트 프론트엔드 부트캠프 - 01
코드잇 스프린트 부트캠프 프론트엔드 14기의
기초 프로젝트 진행함.
사실 JS까진 괜찮았는데, 리액트를 배우기 시작하면서
기괴한 props 시스템과,
여러 파일을 왔다갔다 하며 프로젝트의 전체 흐름을 알고있어야 하는 것,
아직도 손코딩 못하는 AJAX,
그리고 Styled component로
한 파일에 html, css, js가 모두 한 파일에 있게 되는
대환장 파티 때문에 이해를 못하고 있던 상태에서
프로젝트가 시작됨.
계속 ‘민폐만 안끼치고 끝났음 좋겠다…’ 라는 생각만 들었다.
스프린트 미션이라고 하는 숙제만 그때그때 끝냈으면 이정도는 아니었을 것.
물론 팀원분들도 다 같은 마음이셨다고…
이런 걱정을 하는 와중에도 시간은 흘러 프로젝트 날이 다가왔다.
일단 어떤 거 해야할지 골라야함.
4개 정도 선택지가 있었고, 각각 다른 난이도였다.
여기서 우리팀이 고른 건…
k-pop 관련 사이트인
Fandom-K. 팬덤케이다.
부트캠프 티 덜나는 디자인.
사실 제일 높은 난이도였음.
근데 만장일치로 이걸로 결정됨.
왜냐면 이게…
이뻤으니까….
비교적 딱딱한 다른 프로젝트와는 다르게
실존하는 아이돌과 연관된 사이트라
더 매력적이었다.
그리고 곧
이쁘다는 이유로 프로젝트를 결정한 대가를
크게 치루게 된다.
D-1
프로젝트가 확정났기에
난 바로 제공된 피그마를 내 계정으로 복제해갔다.
그리고 보이는 컴포넌트들…
진짜 이걸 작업하라고 준 컴포넌트가 맞는지 의심스럽다.
이래서 난이도 상인가 싶었음.
???: 엥 뭐가 이상한 건디?
보통 이렇게 주는 게 정상이다.
곳곳에 UI/UX적으로 이상한 부분, 개선할 부분을 코멘트로 다 적어나가기 시작했다.
이때 팀원들도 다 초대해서 코멘트 남기기 시작
약 100개의 코멘트가 달렸다.
대부분 납득되는 의견이라 수렴함
그리고 그 사이에 런던에서 어깨넘어로 배운 것들 활용하기 시작함
사이트 맵 만들어주고 파트 분배했다.
확실히 이거 만들어 놓으니까 나누기 편했음
D-day
컴포넌트 그냥 처음부터 다시 만들었다.
팀원 중 내가 유일하게 피그마한테 월세 꼬박꼬박 내고 있는 디자이너 출신이라
일단 나 혼자 다 만들었다.
최근에 요금 또 올랐던데 진짜 진지하게 프레이머로 갈아탈까 고민중
내 첫 UI 프로젝트.....
피그마 평소 ppt 만들 때나 썼지 이렇게 제대로된 UI작업은 처음임
그래도 손에 익었던 상태라 나름 수월하게 작업했다.
또 컴포넌트별 분리 확실하게 하고 겹치는 컴포넌트 싹 정리해놔서
나중에 conflict도 안남^^
아니 근데 저거 할 때 열 받았던 거:
부트캠프에서 제공해준 프로젝트 피그마에서
대체 컴포넌트를 만들어놓고 안쓰인 건 뭐임?
아니 쓰이긴 쓰였는데
연결이 다 끊어져있어서 이게 무슨 컴포넌트인지 추적이 안됨
이럴 거면 걍 피그마 말고 스크린샷 찍어서 png로 주시지 왜
이 정도면 직장 내 괴롭힘이다.
부트캠프 내 괴롭힘으로 신고해도 할 말 없을 것
폰트도 정의를 해놓고 안씀
근데 정의 안된 폰트가 또 어디선가 쓰이고 있음
이런 말도 안되는 문제 발견하고
모든 폰트 다 뒤져봐야하나… 생각하다가
지푸라기 잡는 심정으로 플러그인 검색해봤는데…
와… 이게 있네
이거 쓰십쇼
같은 폰트 쓰인 곳 다 찾아줌;
그렇게 있는데 안쓰인 폰트 다 걸러내고,
찾아보니까 요렇게 폰트 알아서 정리해주는 플러그인도 있었다.
근데 디자인 맘에 안들어서 걍 내가 정리함
이게 맞지
태일윈드 쓸 것도 아니고 글로벌 스타일로 다 정리할 거라
좀 신경써야 했다.
이제 팀원들이 리드미 작성하고 있을 동안,
난 프로젝트 기본 베이스를 만들었다.
여기에 쓰인 것들:
- HTML/CSS/JS
- React
- Vite
- Axios
- React Router
- Styled-components
- Framer motion
- 깃헙/노션/디스코드/피그마
추가로 어디서 들은 건 있어서
reset.css 집어넣고,
Styled components의 Global style을 정의해줬다.
여기엔 폰트랑 컬러가 정의됨.
브랜드 컬러 그라디언트 쓰고싶다?
코드 길게 쓸 필요없이 걍
${colors(“primaryGradient”)}
이렇게 쓰면 된다~
혁신이다 이건
또 뭐 React router 세팅 해주고
팀원분이 작성해주신 폴더 구조 적용함.
이 구조 괜찮은 거 같아서 나중에도 써먹을듯
이러고 첫 push를 해줬다.
이게 뭐라고 겁나 떨렸음;
다행히 잘 됐고
담엔 본격적인 코딩 과정을 적어보겠다.