[KUIT] 2024-1 웹 파트장 후기

0. 네? 제가 파트장이요?

올해 1월 말이었을 것이다. 날씨는 꽤나 추웠고, 봄이 온다는 것이 상상이 되지 않았다. 나는 동아리에서 웹 프론트엔드로 참여한 프로젝트 작업을 하며 시간을 보내고 있었다. 느슨했지만 아예 놀지는 않았던, 조금은 여유로웠던 순간이었다. 그러다가 디스코드로 연락이 왔다. 동아리 차기 회장이 되는 친구였다. 프로젝트에 대해, 그리고 머지 않아 진행될 다음 학기 수강 신청에 대해 이야기를 주고받았다. 그러다 갑자기, 나보고 다음 학기 웹 파트장을 할 생각이 없냐고 물어봤다. 음?

주관적으로, 아니 객관적으로도 내가 웹 부원 중에서 파트장을 맡을만큼 실력이 좋았냐고 물어본다면, 아니라고 답할 수 있다. 훨씬 논리적이고 코딩 잘하는 친구들의 얼굴이 스쳐지나갔다. 왜 갑자기 나한테 이런 기회가 온거지? 생각해본 적이 없는 제안이 오게 되면, 잠시 얼어붙게 된다. 마음 속으로 땡을 외치고, 5초 정도 고민한 뒤 한다고 했다. 사실 해보고 싶긴 했다. 누군가를 가르친다는 것은 멋진 일이니까. 진짜로 하게 될 줄은 몰랐지만.

 

디스코드로 파트장 제안이 왔다.

---

1. 그러면 이제 강의를 찍자

우리 동아리가 어떻게 진행되냐면,

1. 파트장이 녹화한 강의를 토요일에 올린다.
2. 부원들은 녹화한 강의를 보고 워크북을 작성하고 미션을 수행한다.
3. 그 다음 주에 같은 조의 부원들과 튜터가 예약한 공간에서 스터디를 진행한다.
4. 미션과 워크북은 금→토 넘어가는 12시 전에 완료해야한다.(못하면 1아웃)
5. 3out이 되면 방학 때 진행하는 프로젝트에 참여를 못한다!

파트장이 됐으니, 강의를 찍어야한다. 재밌겠다는 생각 20%에 갑자기 몰려드는 막막함 80%.

 

머지 않아 새로 운영진이 된 사람들과 만나게 되었고, 10주 동안 진행되는 스터디에서 나는,

 

5주차 - React 프로젝트 설정 및 기초,

6주차 - React로 생각하기(state),

9주차 - Data Fetching,

 

총 3주간의 스터디 강의를 녹화하기로 했다.

 

일단 5주차를 녹화하기로 했는데, 작년 강의부터 참고하려고 영상을 다시 돌려봤다. 참고로 작년은 파트장 한 명이 10주차 강의를 전부 녹화했었다. 학기를 병행하면서. 사람이 할 짓이 아닌데, 도대체 어떻게 했을까.

 

먼저 카페에 죽치고 앉아서 강의 PPT를 만들고, 다음 날부터 강의 녹화를 시작했다. 녹화를 시작하기 전에는 두 시간만에 강의 촬영을 끝내겠다고 다짐했었다. 말도 안되는 소리. 혀가 꼬이고, 말이 헛나왔다. 실수를 하지 않고 길게 녹화를 하는 것은 불가능하다는 것을 깨닫고 짧게짧게 녹화를 해서 이어붙이기로 했다. 이틀 정도 열심히 녹화를 했다. 찍은 영상들은 총 36개였다. 조금 힘들긴해도 무사히 영상 하나를 만들었다는 것에 감사했다.

 

처음 강의 찍을 때 영상들 캡처. 총 36개.

 

연이어서 6주차 강의를 촬영하려고 했으나, 갑자기 감기에 걸려버렸다. 코가 막혀서 발성이 별로 좋지 않았다. 그런데 뭐, 이왕 하기로 했어가지고 계속 녹화했다. 5주차와 다르게 코드를 입력하는 화면이 많아서 영상이 좀 길어졌다. 총 1시간 17분. 만약 내가 교수님 강의를 틀었는데 영상 길이가 1시간 17분이라면 별로 기분이 안 좋았을 것 같다. 부원분들이 조금 짜증나지 않으려나 걱정은 조금 됐지만, 쓸데없이 길게 늘린게 아니기 때문에 다들 이해해주시겠지, 그렇게 생각했다.

 

내 예상보다 영상들이 조금 길어서 살짝 미안했다 ㅎㅎ

 

---

2. 개강 후, 동아리의 시작

시간은 흘러 학교가 개강했고, 많은 분들께서 동아리 웹 파트에 지원해주셨다. 많은 분들이 보내주신 서류를 읽고, 회의를 했다. 그리고 면접 일정이 잡혔다. 작년에는 내가 면접을 보는 입장이었는데, 이제는 내가 면접을 진행한다니.. 잘 믿기지 않았다. 서류를 보고, 면접을 진행할 때 머리 속을 떠나지 않던 생각이 있다. ‘내가 누군가를 평가할 자격이 있나?’ 사실 이 생각은 아직도 유효하다. 누군가를 합격시키고, 또 누군가를 불합격시키고. 이 질문에 대한 답변은 아직 찾지 못했다. 그래서 그냥 열심히 했다. 정신없이 3일이 지나고, 동아리 부원분들의 명단이 결정되었다.

 

다시 봐도 부끄럽다. 수상경력은 없다.

 

 

머지 않아 동아리 OT가 진행되었다. 중간에 운영진을 소개하는 순서가 있었다. 파트장 중에 한 명만 대표로 자기소개를 하면 되서 나는 편하게 인사만 하고 들어왔다. 물론 내 자기소개가 스크린에 띄어질 때 많이 쑥스러웠다.

 

OT가 끝나고 뒤풀이가 있었는데, 내가 면접 볼 때 조금 무서웠다는 충격적인 말을 들었다.

지금 뒷풀이 때랑 분위기가 완전 다르다고. 왜지? 내가 긴장을 많이 했어가지고 표정이 많이 굳어있었던 것 같기도 하고. 억지로라도 조금 웃을걸 그랬나하는 생각이 들었다 ㅎㅎ.

 

스터디 시간이 정해졌다. 1조는 수요일 5:00~6:00, 2조는 화요일 5:00~6:00(추후 4:30~5:30으로 조정된다), 3조는 목요일 6:30~7:30. 스터디 장소 예약과 스터디 진행은 튜터가 진행한다. 파트장은 스터디 참석이 필수는 아니었지만, 그래도 최대한 많이 참석했다. 1주차부터 10주차까지 화요일 스터디는 매번 참석했고, 수요일 스터디는 한두번 빠졌었다. 목요일은 하필 일정이 겹치는 때가 많았어가지고 참석 못한 적이 꽤 있었다. 이 부분은 조금 미안하긴한데, 목요일 튜터 친구가 나보다 실력이 좋아서, 사실 딱히 스터디 걱정을 크게 하지는 않았다.

 

질문을 하는 입장에서 질문을 받는 입장으로 바뀌니 많이 긴장이 되었다. 질문에 대해서 답변을 잘 못할까봐 불안했다. 자바스크립트에서 클로저가 무엇인지, 타입스크립트에서 never는 어떨 때 쓰이는지, Type assertion에서 as Number를 쓰고 연산을 하면 왜 오류가 나타나는지와 같은 질문을 받을 때는 머릿 속이 하얘졌다. 그래서 앞에 노트북을 키고, 질문이 들어오면 재빨리 검색을 하고 내가 알고 있는 정보들을 최대한 짜내서 답변을 했다. 이런 과정을 반복하면서 겉핥기로 알고 있었던 개념들에 대해서 이해를 할 수 있었고, 많은 도움이 되었다.

 

 

부원분들이 이번 주차 워크북을 작성해서 스터디 때 발표를 하면, 워크북에 대해서 추가로 설명하고 싶은 내용들이 떠올랐다. 그래서 부원분들의 발표가 끝나면 추가로 설명하고 싶은 내용을 발표하고 이번 주차 스터디가 전부 끝나면 디스코드에 이 내용을 업로드했었다.

워크북 보충 내용을 디스코드에 업로드 했었다.

 

(또 추가적으로 알려주고 싶은 내용이 있으면 작성해서 디코에 올렸다. 블로그에도 동시에 올려놔서 밑의 링크에서 올린 글들을 모아볼 수 있다!)

https://quickchabun.tistory.com/category/KUIT

---

3. 미션 망한 거 같은데..?

위에 언급했듯이 5주차, 6주차 영상은 개강하기 전에 녹화해놨다(미션도 물론 그 때 만들었다.)

 

문제는 9주차인데, 이론은 일찍이 녹화를 마쳤지만 미션은 무엇을 진행할지 몰라서 고민했었다. 데이터 페칭에 관련한 내용인데, 고민을 하다가 내가 예전에 진행했던(그리고 아직 완성을 못한) 사이드 프로젝트를 가져와서 활용하면 되겠다는 결론을 냈다.

(해당 프로젝트에 대해선 밑의 링크에서 확인할 수 있습니다!

https://quickchabun.tistory.com/category/Project/PROlog )

 

프로젝트를 복사해서 미션에 필요한 부분만 제외하고 전부 잘라냈다. 그리고 미션에 맞게, 코드를 수정했다. 데이터를 보내고 받아야하니까 json-server를 도입했다.

9주차 미션 프로젝트 실행 시 뜨는 화면

 

그래서 다른 파트장한테 가서 코드를 어떻게 리팩토링할지 리뷰 받고(언제나 감사합니다🙂), 부랴부랴 코딩해서 미션 공지를 올렸다.

 

그런데, json-server가 작동하지 않는다는 제보를 받았다!! json-server가 작동하지 않는다는 것은, 결국에는 아무것도 못한다는 뜻이라서 치명적인 오류이다.

 

json-server 오류 공지 카톡 캡처 화면

 

확인해보니 일부 json-server 버전에서는 최상위 레벨에 여러 개의 키-값 쌍을 가지고 있는 것을 허락하지만, 또 다른 일부 json-server 버전에서는 최상위 레벨에 객체의 배열만 포함하지 않으면 오류를 발생시키는 것 같았다.(추측이지, 100% 정확한 것은 아니다.)

 

json-server를 업데이트하면 오류가 나지 않는 것을 확인해서, 부랴부랴 디스코드에 관련 공지를 올렸다.

[9주차 미션 json-server 오류 관련 공지]

9주차 미션을 실행시키려면 다음과 같은 과정을 거쳐야합니다.
'npm install' 명령어를 터미널에 입력해서 package.json에 있는 dependencies들을 설치합니다.
'npm run dev' 명령어를 터미널에 입력해서 vite를 실행시킵니다.
'json-server --watch src/models/db.json --port 8080' 명령어를 터미널에 입력해서 json-server를 구동시킵니다.

하지만 현재, 3번 명령어를 입력 시
'Type of "code" (number)  is not supported. Use objects or arrays of objects.'라는 에러가 뜨는 경우를 확인했습니다.

-----------------------------------------------------------
왜 이런 일이 발생했는가?

src/db.json 파일의 구조는 아래와 같습니다.

{
  "code": 1000,
  "status": 200,
  "message": "요청에 성공하였습니다.",
  "result": [
    {
      "id": "d21b5245-79c7-da6c-de01-1e7afda7f5f6",
      "title": "테스트1",
      "body": "테스트1 본문입니다.",
      "time": "2024-05-19 01:27:56",
      "commentCount": 0,
      "author": "작성자",
      "likeCount": 0
    },
...

위 파일에서 확인했다시피 db.json은 최상위 레벨에 여러 개의 키-값 쌍을 가지고 있습니다.

일부 json-server 버전에서는 최상위 레벨에 여러 개의 키-값 쌍을 가지고 있는 것을 허락하지만,
또 다른 일부 json-server 버전에서는 최상위 레벨에 객체의 배열만 포함하지 않으면 오류를 발생시키는 것 같습니다.(추측이지, 100% 정확한 것은 아닙니다.)

-----------------------------------------------------------
그렇다면 어떻게 해야하는가?

저는 json-server 1.0.0-alpha.23 버전을 사용했습니다. 그리고 오류가 발생하지 않는 것을 확인했습니다.

따라서 위에 언급한 오류가 발생하신다면, 아래와 같은 절차를 따라주시면 감사하겠습니다.

터미널에 'json-server --version'을 입력하여 json-server 버전을 확인합니다.

json-server의 버전이 1.0.0-alpha.23이 아닐 시, 'npm i json-server -g' 명령어를 터미널에 입력해서 json-server 업데이트를 진행해주세요.
(만약 버전이 1.0.0-alpha.23임에도 불구하고 위와 같은 에러가 발생할 시 연락주시면 감사합니다.)

2-1. macOS에서는 관리자 권한이 있어야 위 명령어가 실행되는 것 같습니다. 위 명령어 실행이 안될 시 앞에 'sudo'를 붙여주세요. -> 'sudo npm i json-server -g' 명령어를 터미널에 입력해주세요.

2-2. Windows OS에서는 터미널을 '관리자 권한으로 실행' 해주시고 터미널에 명령어를 입력해주시면 감사합니다.(하지만 제 예상으로는, 관리자 권한이 아니어도 설치가 가능할 것 같습니다.)
--------------------------------------------------------

이 밖에도 오류가 발생해서 실습 및 미션 진행이 안되시거나, 궁금한 점이 있으시면 거리낌없이 바로 질문해주시면 감사하겠습니다!

그래서 한 숨 돌렸나 싶었는데, 문제가 생겼다.

 

아무래도 내가 만든 프로젝트에 코드를 추가하는거라 추가적인 설명이 필요할 거 같아서 스터디에서 설명을 하는데, 내가 미션을 어떻게 해야되는지 조리있게 설명하지를 못하는 것이었다. 그래서 부원분들도 감을 잘 잡지 못하는 것 같기도했다.

그래서 스터디가 끝나고 피그잼을 켜서, 프로젝트 구조가 어떻게 되는지 설명하고 미션을 어떻게 진행을 하면되는지 그림을 그렸다.

부랴부랴 피그잼으로 만든 9주차 미션 그림

 

 

다행히 효과가 있었는지, 많은 분들께서 미션을 잘 제출해주셨다. 시행착오가 조금(?) 있긴했어도, 어쨌든 이번 9주차가 무사히 마무리될 수 있어서 다행이었다.

 

---

完. 10주가 지나고, 스터디는 끝나고

KUIT은 스터디가 총 10주 동안 진행된다. 스터디가 끝나면 PM분들이 지금까지 기획한 프로젝트에 대한 설명회가 열리고, 개발 부원분들과의 지원과 매칭이 진행된다. 그리고 방학동안 매칭된 분들은 한 팀이 되어 프로젝트를 진행한다.

 

이번 주를 마지막으로 이번 학기, 총 10주차의 스터디가 마무리되었다. 내가 맡은 웹 파트의 부원분들도 이제 프로젝트에 지원을 하고, 지금까지 배운 내용을 바탕으로 방학 동안 개발을 한다. 이제 이번 학기 파트장으로서 할 일은 다 마무리되었다. 최선을 다했지만, 더 잘 했을 수도 있는 순간들이 떠올라 살짝 아쉬울 때도 있다. 가끔은 스터디에 시간이 뺏기는 것은 아닌가 하는 생각이 들기도 했다.

 

그럼에도, 이번 학기에 웹 파트장을 맡은 것은 정말 잘한 선택같다. 동아리 운영진을 맡으며 다른 파트 운영진분들과도 친해질 수 있었다. 강의를 찍고 스터디를 진행하며 질문에 답변을 하고, 글을 작성하면서 웹 프론트엔드 실력도 꽤 는 것 같다. 무엇보다도, 웹 프론트엔드에 관심있는 분들과 같이 교류하며 성장할 수 있어서 좋았다.

 

 

한 학기동안 고생했던 KUIT 운영진들, 특히 같이 웹 파트를 이끈 웹 파트장들, 스터디를 이끌어준 튜터들, 그리고 즐겁게, 때로는 열심히 스터디 따라와준 부원들한테 고맙다. 이제 기말고사도 코 앞인데 한 학기 다들 마무리 잘 했으면 좋겠다. 그리고 방학부터 지원하는 프로젝트도 다들 잘 됐으면 좋겠다.

 

방학 때, 그리고 다음 학기 때 무엇을 할 지는 모르겠지만, 이번 학기 때의 경험을 발판삼아서 더 열심히 뛰어야겠다. 다들 너무 수고많았고, 다음에 또 봐요 ㅎㅎ!

 

모두들 수고하셨습니다~~