2차 프로젝트 - 혼란 속 완성은 되어가는가?
링크: https://github.com/LuiGee3471/BitCampProject2nd
정말 수도 없이 뜯어 고치고 있습니다. 오늘도 집에 와서 오늘의 커밋을 받아보니 무려 41개네요. 적지 않은 커밋이 병합 커밋이기는 하지만 그래도 많이 작업하고 있습니다. 프로젝트 규모가 커지니 다른 파트를 하고 있는 경우는 어떻게 진행되는지도 잘 모를 정도네요. 큰 기업으로 가면 내 작업물이 무슨 역할을 하는지 전혀 모르겠다는 말이 이해가 가기 시작합니다. 그래도 어느 정도 페이지도 눈에 보이기 시작하고 있습니다.
1. 완전 잘못쓰고 있었던 PreparedStatement
사실 완전까지는 아닙니다만 오늘 하나 문제가 있었습니다. PreparedStatement에 포함된 ?를 잘못 생각하고 사용하려다 이유도 모르는 에러에 꽤 긴 시간을 헤맸습니다.
검색 조건을 다르게 해서 DB를 조회하는 함수였는데 처음에는 LIKE 문을 사용한게 문제인가해서 애먼 LIKE 문만 괴롭혔습니다. 하지만 문제는 바로 컬럼명에 ?를 넣어버린 것.
저는 PreparedStatement를 쓰면 ?로 무엇이든 넣을 수 있는지 알고 있었는데 그게 아니었습니다. PreparedStatement의 set 함수로 ?에 넣는 것은 오직 값만 가능하더군요. 그래서 계속 실행이 되지 않았습니다. 결국 저 SQL 문자열을 분할, 위의 switch 문을 이용하여 컬럼을 구하고 문자열을 합치는 식으로 해결할 수 있었습니다.
2. CSS의 자신감을 가져다준 Flexbox
이번 프로젝트는 Font Awesome의 아이콘말고는 외부 라이브러리나 프레임워크 없이 디자인을 순수 CSS로 진행하고 있습니다. 연습의 의미도 있었지만 이전 과제들을 통해서 어느 정도 자신감을 쌓아왔기에 한 결정이기도 한데요. 사실 적절한 색을 입히거나 배치를 하는건 감각이기도 하고 경험이기도 하지만 제가 처음 CSS를 접했을 때부터 가장 괴로웠던 것이 바로 요소들이 제가 원하는 곳으로 도통 가지 않는다는 것이었습니다. float는 툭하면 다른 곳으로 도망가버려서 굉장히 힘들었었거든요.
그래서 진지하게 CSS 유료 강의라도 수강할까 고민하고 있다가 찾아낸 것이 Flexbox입니다. display: flex;로 시작하는 이 방식 덕분에 위치 잡는게 엄청 편해졌습니다. 원하면 가로든 세로든 정렬할 수 있고 내부에서 다른 정렬이 필요하면 div로 묶어서 다시 한 번 flex로 걸어주면 되니까요. 오늘은 CSS를 할 때 생각 그대로 요소가 배치가 되어서 좋았습니다.
Flexbox는 여기 두 곳을 참고해서 배웠습니다. 여기 사례만 잘 읽고 해봐도 어느 정도 감이 잡히실 겁니다.
네이버 D2 : https://d2.naver.com/helloworld/8540176
또 하나 재미있게 하고 있는 것은 JavaScript를 이용해서 요소를 숨겨놨다 튀어나오게 하는 방식입니다. display: none; 등을 가지고 있는 클래스를 배정해두고 이벤트 발생 시 해당 클래스를 지워주는 간단한 방식으로 하고 있는데 이것만 해도 꽤 근사한 느낌이더군요. 다만 안 보인다고 작동을 안하는 건 또 아니니 그런 것들을 잘 캐치해야할 것 같습니다.
하루를 더 썼는데도 내일이 원래 일정대로면 코딩 작업 마감인데 과연 가능할지 모르겠네요. 주말 작업 등을 대비해 DB 구조라도 가져와야 할 수 있다는 이야기를 조원들과 공유했습니다. 내일은 술술 풀려서 계획대로 되면 좋겠네요.