2- 나의 두번째 공모전, 교내 코딩 대회 '로커톤'-2편-개발기록

우리 프로젝트의 어플 아이콘이었다.

나의 두번째 공모전, '로커톤'에서 배운 개발 기술적 관련된 부분 기록이다.

 

나는 코딩을 할 줄 몰랐다.

 

하지만 일단 네 네 라고 했다.

 

나의 멍청함을 느낀 팀원분들이 나를 '프론트 엔트'로 배정해 주었다.

 

당시엔 '프론트 엔드'가 무엇인지도 몰랐다.

"프론트.. 엔드? 이름이 뭔가 멋있네"

 

그래서 프론트 엔드를 하게 되었다.

 

그래서 한 수상 경력 있는 팀원 분이 notion을 만들어서 개발 계획을 구체화 해주셨다.

 

이 글을 쓰면서 그때 기억이 생각나서 한번 보러 가야겠다.

그 기술 계획 틀은 
"

프로젝트 개요

• 프로젝트명:
• 목적:
• 대상:
• 차별점:

---

핵심 기능 우선순위 (MVP 기준)

1순위 (MVP 필수 기능)

• 기능:
• 설명:
• 기술 구현 방식:

2순위 (의미 있는 향상 기능)

• 기능:
• 설명:
• 기술 구현 방식:

3순위 (고도화 기능)

• 기능:
• 설명:
• 기술 구현 방식:

---

기술 스택 요약

• 영역:
• 기술 스택:

---

결과물

• (결과물에 대한 목록)"
  
  다음과 같았다. 와 지금 봐도 꽤 많은 것을 알고계신다는 것 같다.

그런데 프로젝트의 "차별점"부분이 틀에 있는걸 보면 '차별화'가 수상에 꽤 중요하단걸 아셨던거 같은데

왜 이 기획에 문제 제기를 안하셨지..?

 

아무튼,, 다시 봐도 훌룡한 개발 계획이다.

 

그렇게 나는 '프론트 엔드'에 배정이 되어 '리액트네이티브'라는 것을 다루게 된다.

 

내가?

 

나는 파이썬 함수 하나 짤 줄 모르고.. 코드 읽을줄도 모르는데.. 개발을 해야한다

하지만 괜찮다! 다 내친구 gemini에게 물어보면 되니까!

 

그렇게 나는 로커톤 프론트엔드 개발을 시작하게 됐다.

 

일단 할 줄 아는게 없어서, 팀원분이 해야한다는 기획을 싹다 복사해서 gemini에게 넣어보았다.

 

gemini가 알았다 했다.

 

팀원분이 react native 기본 구조를 만들어야 한다고 했다.

 

그런데 난.. 만들 줄 몰랐다. 이게 만들려고 블로그를 따라했다.

 

블로그를 따라하다가 계속 오류가 나서 실패했다.

 

결국 팀원분이 기본 프로젝트 폴더를 만들어서 깃허브에 올려주셨다.

 

나는 할 줄 아는게 없었다..

그냥 만들어야 된다는 것들을 복사해서, 요청이 들어오면 gemini에게 물어보고 복사하고 물어보고 오류나면 오류코드 복사하고

그렇게 300번 가까이 반복하다 보니 어느정도 프론트엔드가 만들어 지더라...

 

그런 과정에서 배운 것들이 몇가지 있다.

 

https://www.youtube.com/watch?v=RAu1gTpv8RA

(이 글을 쓰면서 듣는 노래이다.. 학교 축제 때 잠깐 들었는데 너무 좋다)

 

1. gemini에게 프로젝트를 물어볼 때, 항상 '파일 트리구조'를 제공

 

2. '파일 문법 오류'는 '~한 현상이 있어', '~가 안돼'라 말하지 말고 '정확한 오류코드 제공' 이게 맞다..

뭐 오류코드가 안나오는 문제면.. 솔직히 그건 사용자가 직접 코드 보고 해결이 맞지 않나..?

하지만 나는 코드를 읽을 줄 모르니 프롬프팅으로 잘 할 수 밖에..

 

3. 자바스크립트 파일 색깔이 빨간색이면 문법 오류가 있는거다(난 문법 오류 어떻게 보는지도 몰랐음...)

그래서 문법 오류 27개 만들어 놓고, 프론트엔드 개발 했다고 브랜치에 올린거 보면 팀원분들은 무슨 생각이었을까..? 진심.. 하지만 이것도 하다보니 깨달았다. "아 문법 오류를 고칠 수 있게 되니까 개발 능력이 올라갔다..!"

 

4. 코드를 쓸 줄도, 읽을 줄 몰라도 대회 참가가 가능한 시대가 열렸다.

 

5. 계속 코드를 제공하고 복붙하면서 보다보니, 어느정도 간단한 코드 수정정도는 할 줄 알게 되었다...(그냥 써진 텍스트 교체하기 정도..)

 

6. 깃허브 사용법도 배웠다. 단순히 2025-1 전공 필수 수업인 '오픈소스와 SW개발방법및도구'

 

그래서 이번 해커톤에서 얻은 깨달음으로, 2025-1 디자인적 사고라는 과목(팀프로젝트 개발 수업)에서
마지막에, 해당 대회를 준비하면서 얻은 지식으로 각성해서 6시간만에

기존의 밋밋하던 index html페이지와 csv만 있던 프로젝트폴더에서

html 리팩토링, css수정, 단순 로컬에서 벗어나 배포(deployment)까지 완료했다.

그러니까 교수님께서 노력을 가상히 보시고 A+을 주셨다..

 

실제로 서버 배포를 해본 첫 경험이었다.

바이브 코딩이란걸 해본 첫 경험이었다(이 시기에는 이게 '바이브 코딩'이란 건지도 몰랐다. 불과 3달 전만 해도.. 바이브 코딩이란 개념이 널리 퍼지지 않았다..)

 

바이브 코딩과, 서버 배포.. 그리고 깃허브 쓰는 능력을 기를 기회였다.

 

이 대회를 준비하면서 깃허브 실력이 조금이나마 늘었다.

 

'협업'이 무엇인지도 배웠다.

 

시연 영상 찍는 법도 배웟다.(그런데 대충 찍는 법을 배워서, 다음 코딩 공모전 때, 잘못 배웠다는걸 깨달았다)

 

지금 바쁜 일이 생겨서.. 더 기억나는거 있으면 마저 적겠다.

 

해시태그

💻 개발/기술 관련

• #프론트엔드
• #리액트네이티브
• #ReactNative
• #바이브코딩
• #서버배포
• #깃허브협업
• #오류해결
• #프로그래밍성장기
• #코딩배움기록

🎓 대회/학습 관련

• #해커톤기록
• #로커톤
• #개발자기록
• #개발자성장
• #대학생활
• #팀프로젝트