4월 넷째 주

January·2022년 4월 24일
0

weekend

목록 보기
1/2
post-thumbnail

[온스테이지2.0] wave to earth - seasons

04/24 토요일

과제....
클론 코딩을 처음 하기 때문에 공부했던 것을 써먹을 수 있겠구나 싶은 마음에 당당하게 CJ제일제당 사이트를 골랐는데 하면서 매 구간마다 계속 정체가 되고 한 가지 요소를 만드는 데 많은 시간이 들었다. 이러다가는 못 끝내겠다 싶어서 지금이라도 사이트를 바꿔야겠다 싶어 하남 스타필드 사이트로 시작했다.

Header에 실시간 날짜 구동, 타이틀 메뉴 동시 출력, 레이아웃 정리 등 점점 꼬이면서 코드 정리가 어려울 정도로 복잡해졌고 내 머리도 복잡해졌다. 그래서 난 과제하면서 스타필드의 코드를 따라하려는 마음을 줄이고 이렇게 하면 되겠다 싶은 생각으로 내가 짜보기 시작했다. 클론 코딩을 할 때는 사이트를 분석하고 원리를 찾아서 따라 해보는 것인데 코드 소스를 보지 않고는 분석만으로 초보인 내가 따라하기에는 벅찼던거 같다.

아무튼 아침엔 푹 자고서 낮부터 과제를 시작했는데 늦은 저녁이 돼서야 Header를 끝낼 수 있었다. 기억에 남는 것 중 날 괴롭혔던 코드는 Badge JS 동작이다. 클릭을 했을 때 클래스가 슬라이드 형태로 열리고 다시 클릭하면 닫혀야하는데 닫히는건 구현하지 못했다.

퍼즐을 보면 조각조각마다 어떤 색이고 어떤 모양인지 쉽게 안다. 하지만 조각의 위치를 모르기 때문에 1000피스 퍼즐이 어려운 이유다. 오늘 과제한 느낌이 퍼즐같은 기분이다. 코드 요소들을 짜맞추는 작업이 아직 나에겐 경험 부족이다. 이런 과정의 경험들이 빨리 쌓였으면 좋겠다는 생각이 든다. 더 열심히 하고 싶다는 생각이 들면서 내일을 위해 오늘 일정을 멈춘다.

04/25 일요일

오늘도 과제...
어제 Header와 Badge를 마치고 오늘 Main을 코딩했다. 처음부터 난관을 겪었다. 이럴 줄 알고 어제 밤 자기 전에 머리로 시뮬레이션 돌린 결과를 노트에 적어놓고 만족스럽게 잠들었는데 역시나. 실제로 코딩해 보면 말을 안 듣는다.

문제는 Swiper 이미지와 텍스트가 순차적으로 동작 안 하고 하나로 뭉쳐서 움직이다가 어디론가 없어진다. Swiper는 은근 단순한 건데 동작 오류가 뜨니 당황스러웠다. Swiper 링크 연결, 코드 맞춤법, html Layout 문제점을 구글링해가며 찾아봤다. 그러다 html은 맞게 쓴 거 같고 css부터 다시 써보자는 생각을 했다. Swiper의 css를 지웠더니 정상 작동을 한다. css는 플러그인이 관여하기 때문에 내가 초기설정을 만져서 계속 오류가 났던거다. 3시간 넘는 동안 찾은 문제점에 실망스러웠다. 더 대단한 문제점이였으면 보상처럼 느껴졌을텐데. 좀 더 생각해 보면 큰 교훈을 얻기도 했다.

플러그인을 제대로 이해하고 쓰자!

그리고 내 과제 사이트는 Swiper를 쓰지 않고 구동하는 거다. Swiper로 모양을 따라 해보려고 시도해 봤지만 실패했다. 이건 다른 방향으로 찾아봐야 할듯하다.

주말 동안 정말 많은 시간을 과제에만 투자했는데 결과물 양이 너무 적다. 디자인할 때에는 점점 사고가 작아지면서 디테일에 집착하면 시간 대비 효율이 극한이었는데 코딩하면서는 좀 더 얻는 것이 있는 거 같아서 동기부여가 되는듯하다.

화이팅 하자

0개의 댓글