여태까지의 과정
figma 구현을 끝내고 Stack over flow 홈페이지를 페이지 별로 나눠서 이틀만에 본인이 맡은 부분의 CSS 작업은 다 하고 합쳐보기로 했다.
figma에서 만든 질문페이지, 질문 쓰는 페이지 동일하게 맡게 돼서 다행이라고 생각했다.
아직 많이 실력이 부족해서 기본적인 기능에 충실하고 싶었고 잘 선택했다 싶었다.
Stack Over Flow CSS 클론
CSS 클론 1일차
이 날은 오전 10시부터 ~ 5시까지 팀원들이랑 회의만 한 날
깃허브 설정부터 사용자 요구사항 정의서, 역할분담까지 하느라 하루 종일 대화했다.
저녁부터는 맡은 부분 CSS 클론을 시작했다.
Stack Over Flow는 next.js로 되어있지 않기 때문에 클론하기 좀 더 까다로웠다.
처음에는 스택오버플로우에서 쓰는 global CSS 라이브러리를 다 복사하고 className을 갖다 쓰려고 저녁먹고 잠들 때까지 Next.js에 맞게 CSS를 다시 바꿔서 작업했었다.
그렇게 하니 진짜 스택오버플로우 페이지랑 비슷하게 나오기는 한데 단점은 global CSS 용량이 너무 커진다는 점..!
내 컴퓨터로 작업할 때는 문제 없지만 나중에 다른 분들꺼랑 합쳐지면 용량이 크면 안 될 것 같은 불안한 마음이 들었다.
CSS 클론 2일차
오전에 팀원들과 회의하면서 본인 작업물을 보여주기로 했다.
불안한 마음에 혹시 스택오버플로우가 갖고있는 global css를 써도 될까 물어봤는데..
다들 그렇게 했다가 용량이 너무 커지고 걷잡을 수 없어서 다 지우고 본인이 그냥 똑같이 만들고 있다고 하셨다.
그래서 회의 끝내고 global css설정 다 지우고 아무것도 없는 바닥부터 다시 CSS 작업을 시작했다.
필요한 글씨 색깔이나 배경색깔, 모양 같은 건 참고하고 flex 쓰는 건 내가 다 설정하고 최대한 비슷하게 만드려고 노력했다.
flex 지옥
아무리 Flex 강의를 들어도 이해가 잘 안 되고 어떻게 써야할 지 모르겠어서
개발자 도구에 이 flex 기능을 정말 잘 활용했다.
그리고 flex 쓸때는 border: 1px solid black; 이런 식으로 전체 크기를 파악하고 그 크기 안에서 flex를 조절해야 하기 때문에 width, height를 주는 것도 매우 중요했다.
2일차 컨디션
클론코딩을 시작한 1일차부터 깃허브 때문에 계속 팀원들끼리 회의하고 오류를 해결하느라 시간 보내고 CSS 작업도 해야해서 새벽 늦게까지 작업하고 일찍 일어나서 다시 작업하는 것에 반복이었다.
문득 이게 .. 현업 개발자 체험인걸까..? 라는 생각이 들었다..ㅎ_ㅎ..
팀원들끼리 같이 오류 해결하고 모르는 부분은 공부하고 구글링하면서 해결하는 삶..
이틀 밖에 안됐는데 여유없는 삶에 쫓기고 있는 기분이다.
