멋쟁이사자차럼 12기를 돌아보며 - 해커톤 준비

짠~~~ 해커톤 준비 편으로 바로 넘어와서 이야기를 풀어볼까 한다. 앞 포스트에서 말했듯, 나는 프로젝트 경험이 전무했다. C프로그래밍 게임 만들기 팀플 수준도 프로젝트로 쳐줄게 아니라면 말이었다.

'에이스팀'
근데 나만 빼고...

우리 해커톤 팀은 백엔드 총 3명 (Django 2명, Spring 1명), 기획 1명, 마지막으로 프론트엔드(React) 나 한명이었다. 팀원 과반수가 프로젝트 유경험자이고, 프론트엔드 관련해서 물어볼 사람 없이 팀을 이뤘기에 걱정이 이만저만이 아니었다. 기획자 분이 '어느 수준까지 구현해봤냐, 혹시 전에 했던 작업물 있으면 봐도 되냐'고 충분히 물어보실 수 있는 부분마저 제대로 답을 하지 못했다.

불안할 시간에 뭐라도 구글링을 하자

그나마 다행이었던 건, 내가 평소에도 AI 파인튜닝 및 UI 용어에 관심이 있고, 웹프로그래밍 수업과 멋사 스터디 세션을 통해
js를 전혀 못 쓰는 상태는 아니었던 점이었다. 기획 초안이 나오기 전까지 AI파인튜닝 팁, IT 프로젝트 소통 팁, chatGPT로 웹페이지 만들기, chatGPT 코딩봇, UI 디자인 설명 , UI용어 정리 사이트, 기타 js&css꿀팁 등을 열심히 구글링했던 기억이 난다. 특히 UI용어는 현직자 사이에서도 통일되지 않고 다르게 부르는 게 꽤 있다고 하여 기획이 여러명이면 꽤 도움될듯하다. 기획과 소통할 프론트엔드가 읽기에도 무척 좋고! 다만 우리팀은 기획이 1명이어서 용어를 혼용할 사람(...)이 없었기에, 내가 UI공부하는 정도에서 그쳤다.

프론트엔드는 한명이지만 commit과 push는 열심히

앞으로의 과정 서술은 간단하게, 적을만한 내용을 에피소드 형식으로 간추려 적도록 하겠다. 사실 깃허브에 프론트엔드 Repo가 파진 시점에서 고민을 했다. '진리의 Ctrl+Z만 해도 충분히 쓸만한데, 게다가 프론트엔드가 나 혼자인데 굳이?'라는 생각이 들었다. 다만 백엔드 spring 담당 선배의 조언으로 꾸준히 간단한 commit메시지와 함께 push를 했다.
이후 새 Detailed.js(상세페이지)를 만들었더니 이유를 찾을 수 없는 버그가 있어, 마지막 commit버전으로 돌려서 겨우 해결한 적이 있었다. 지금와서는 아마 css 특유의 전역변수 현상으로 새로만든 js와 연결된 css의 변수가 겹쳐서 충돌이 일어난 걸로 추측하나, 당시에는 정말 개발 경험이 없던 터라 초멘붕에 빠졌고, 꾸준히 commit의 중요성을 다시금 느끼며 안도의 한숨을 쉬었던 기억이다.당시 작업기록... 멘붕와서 저날은 계속 똑같은 코드 붙들고 있었다. 결국 과감히 이전 commit으로 돌리고서야 해결.

CORS? 프록시 서버?

이후 기획팀에서 받아온 웹페이지를 열심히 만들고... 대망의 백엔드 api 연결을 위해 우선 서버 연결을 시도해보는데...!!! CORS에러가 뜨고 말았다. 진짜 수없는 구글링을 통해 프론트엔드측에서 해결하는 방법, 백엔드 측에서 해결하는 방법을 각각 알아냈고 우선 프론트엔드 측 해결방법을 시도했다. 얼핏 기억나는건 프록시 서버를 통해 우회하고, 관련 모듈을 열심히 깔아주고, package.json, package-lock.json 측 설정 건드려주고... chatGPT로 해보고 안되면 이 블로그 그래도 안되면 저 블로그 방법으로 그래도 안되면 chatGPT로... 윤회의 굴레도 이정도는 아닐 거 같다. 대략 4시간의 대장정은 모듈만 실컷 깔고 실패로 돌아갔고, 앞서 찾아낸 백엔드 측 해결방법을 Slack으로 백엔드 spring 선배한테 공유했다.
그러나 발빠른 선배는 이미 관련 설정을 추가했고, DB까지 채운 뒤 서버 재배포 생각이었다고, CORS 관련해서는 더 안찾아봐도 될거라고 말을 덧붙였다.
프론트엔드도 백엔드 지식이 필요해지는 시대에 조기경험한 셈쳤다.

chatGPT 길들이기

사실 이 부분을 제일 쓰고 싶었다. 누누히 언급했듯 React관련해서는 프로젝트 경험이 제대로 쌓여있지 않아 AI가 큰 도움이 되었다. 나의 프롬프트 팁을 간략히 적어보자면 다음과 같다.

0. 내가 누구고 앞으로 어떤 요구를 할건지 간단히 파인튜닝

1. []태그 안에 요구사항을 명확하고 자세하게 요구

2. chatGPT로 해결 안된 문제는, chatGPT가 제시한 키워드로 다시 구글링 한 뒤, 새로 알아낸 걸 다시 chatGPT한테 질문 (chatGPT한테 구체적인 레퍼런스 멕이는 과정)

3. chatGPT한테 큰 틀을 먼저 만들어달라 한 뒤, 세부사항 차근차근 요구(step-by-step)

4. 한 chatGPT페이지에는 그거 관련 내용만 묻기

정도가 있겠다. 해커톤 끝나고 찾은 '2024년부터는 코딩 작성을 중단했습니다' 글도 참고하면 좋을 거 같다. 읽으면 알 수 있듯 큰 맥락은 일치한다.

또한 당연! 하지만! 그냥 chatGPT한테 시키기만하면 실력이 늘지 않는다.

chatGPT가 만든 코드를 일단 읽고, 이해가 안되면 코드리뷰를 요구하거나, 구글링을 좀더 해보는 등 적어도 이 코드가 왜 돌아가는지 이유도 모르는 채 묻는 사태를 방지했다. 결국은 공부를 해야 나중에 또 같은 문제로 물어보지않고, 다음에 할 질문을 보다 똑똑하게 할 수 있다. 또 이런식으로 공부하다보면 어느 순간 chatGPT한테 묻기전에 그냥 혼자 후루룩 빠르게 코드 적고 넘어가는 일이 생긴다.

AI시대가 열린다고 해서 인간이 구태여 바보로 남을 이유는 없다.

프롬프트 예시1. chatGPT에게 앞으로의 질문은 모두 React와 css 위주 일것이란 힌트를 미리 줄 수 있다.
프롬프트 예시2. '성공시 금전적 보상을 주겠다'는 프롬프트가 도움이 된다는 글을 꽤 봤는데, 유의미한 차이는 못 느꼈다. 하여튼 요구사항을 구체적으로 썼더니 잘 알아듣는 모습이다.프롬프트 예시3. 기존에 작성된 코드를 요구사항에 맞게 고치는 것 역시 잘한다.

CSS 전역변수 현상

사실상 css관련 제일 큰 빌런이었던 거 같다. 각 js에 연결된 css의 부모-자식 상속관계 속성 지정, 구조 안 무너지게 잘 쌓기, 랜딩페이지 인터랙티브 디자인 적용까지는 그래도 배워가며 작업 재미가 있었는데 얘는 대체... 심지어 프로젝트 중반에 알아채서 더 고생했던 거 같다. 앞서 마지막 commit버전으로 돌리고 겨우 해결해야 했던 문제도 돌이켜보면 여기서 파생된 거였다. 결국 중반부터는 최대한 안 겹치게 클래스명을 짜고, 이미 짠 코드는 '해당 js파일이름+원래 변수명' 형태로 재작성했다.
덕분에 이런 JAVA 뺨치고 갈 길이의(...) 변수명이 탄생했다. 또, 여기서 더 생각해본 것은 '아예 이걸 진짜 전역변수처럼 써버릴 수는 없나?!' 였고, 마땅한 답을 찾았다. CSS 변수(--variable) 사용법 링크를 참고하면 좋을 듯 하다. CSS 강제 우선순위(!import) 쓰는법 링크도 겸사겸사 보길... 나는 프로젝트 후반부에 가서 이 정보들을 알았기에 제대로 쓰지 못했다.

background: #000000; 

일일이 이러고 썼다. 역시 사람은 뭐든지 알아야 쓸 수 있는 법이다.

끝!

이번글은 이쯤에서 마쳐본다. 다음 글은 해커톤 현장편으로 올릴 예정이다.