[클론프로젝트] 스타벅스코리아_보수필요
클론 프로젝트를 리뷰 받을 기회가 있었다.
그런데 그 리뷰를 하는 과정에서 치명적 실수가 발견되었다.
뭐.. 실수라기 보다는 내가 애초에 코드를 100%까지는 아니더라도 거의 비슷하게 따라 작성한 것이기 때문에
어쩔 수 없었다고는 생각하지만 실제 사용하는 것이었다면 치명적이었을 것이라 생각한다.
바로 모바일 웹 환경에서의 구동이다.
CSS에서 배너의 배경이나 사진들을 모두 크기를 px로 잡아버렸기 때문에 모바일로 전환하고
가로 길이가 줄어드는 순간 레이아웃이 모두 깨져버린다.
여기서 내가 할 일은 우선 리액트를 공부하거나 CSS의 내용을 모바일 용을 새로 만드는 것이다.
그리고 분기를 또 형성하여 깃허브에 푸시를 해야할 것이다.
그럼 어떻게 새로 만들까?
보수를 하면서 구글링 실력도 키워야 할 것 같다.
내가 필요한 자료를 빠르게 찾아내는 것도 개발자로서의 역량이라고 생각하기 때문에 이 프로젝트를 하는 과정에서 성장을 할 것이라 생각한다.
그리고 모바일 웹은 강사님의 코드를 따라 작성하는 것이 아니라 내가 스스로 작성해보려고 한다.
그래야 실력이 늘 것 같다.
대신에 오래 걸리겠지.
CSS를 좀 많이 엎을 것 같다. 상기 했듯이 대부분의 배너의 배경이나 사진은 px 단위로 만들었다.
이를 적절히 계산해서 vh단위나 vw 단위, % 단위로 바꿀 계획이다. 또한 가로화면과 세로화면에 따른 배치도 고민해야 할 것 같다.
그리고 모바일 화면이라면 헤더의 목록을 오른쪽 사이드바로 옮겨야 겠다.
우선 이게 대략적인 계획이다.
추가적으로 배우고 난 다음에 리액트와 타일윈드 css도 활용해야겠다.
내 혼자 힘으로 하는 것이고, 나도 지금은 당장 자바스크립트 심화, 노드js, 리액트를 공부해야하기 때문에 보수는 오래걸릴 것 같다.
그래도 최선을 다해야지. 실력이 느는건데.
