이번 주는 뭘 하든지 간에 처음이라 매 순간순간이 무겁다.
본캠프 첫 주이자 첫날, 첫 팀 프로젝트, 첫 코드 리뷰 등등…….
첫 프로젝트는 다름 아닌 팀 소개 웹 사이트 제작하기. 우리 팀은 어느 부분을 맡을지 정할 때 아래와 같은 기준으로 판단했다.
첫째, 캠프에 참여하기 전 팀 프로젝트를 진행한 경험이 있는가?
둘째, 캠프에 참여하기 전 프로그래밍 언어를 배운 적이 있는가?
셋째, 다른 사람이 쓴 코드를 읽고 의견을 제시해 줄 수 있는가?
우리 팀은 딱 둘씩 나뉘었다. 처음에는 서로 부담을 줄이고자 메인 페이지 1명 / 구글의 파이어베이스(Firebase) 연결 2명 / 디자인 1명으로 각 구역을 쪼갰는데, 튜터님께 피드백을 받고 프로젝트 계획과 방향을 수정했다.
'제한 시간 안에 제대로 된 결과물 완성하기'가 아닌 '학습'을 목적지로 잡았다.
경험이 많은 두 팀원이 프로젝트 결과물로 제출할 코드를 작성하는 동안, 나와 다른 팀원은 두 분이 만들어 준 와이어프레임(Wireframe)과 웹 사이트 초안을 보고 각자 배운 내용으로 html과 CSS를 짰다. 오늘은 웹 퍼블리셔로 경력을 쌓은 팀원분에게 코드 리뷰를 받았다. 역시 이론과 현실은 달랐다. 프로젝트가 끝나고 나면 각자 얻어갈 깨달음의 깊이와 양 또한 다를 터였다. 다만 한 가지는 똑같았다.
누구 하나 빠짐없이 html과 CSS를 짜고, 제이쿼리(jQuery)를 쓰고, 데이터베이스에 데이터를 저장하고 가져오기를 실행한다.
모든 팀원이 프로젝트를 구성하는 모든 구역을 거친다.
모두가 이 프로젝트를 겪는다.
본캠프에 참여한지 정확히 삼일째 되는 오늘은,
첫 팀플이라 각자 진도가 다를 수밖에 없다는 사실을 밀어내는 죄책감과,
마음 쓰지 말라는 팀원들의 따뜻한 말과 다르게 너무나도 냉혹한 현실과,
흐름을 못 따라가서 대화 도중 물어볼 때면 지독하게 따라붙는 무기력과,
누구보다 조그맣고 초라한 나 자신을 경험했다.
어제 분명히 미용실 ASMR을 틀어놓고 잤는데 꿈속에서 코드를 짰다. 꿈에서라도 좋으니, 쓸모 있는 코드 좀 짜면 더 바랄 나위가 없겠다.
[습관 관련]
지금 할 수 있는 일이 아침 기상과 데일리 루틴(Daily Routine) 챙기기 뿐이라, 생존 본능에 이끌려 7시쯤 되면 이불 속에서 엉금엉금 기어 나온다. 첫 번째 알람을 듣기 전에. 오늘로 아침과 점심, 저녁때 운동한 지 딱 삼 일째가 된다. 어제부터 점심과 저녁때 운동 시간을 각각 10분에서 20분으로 늘렸다. 60분 안에 운동을 마치고 밥을 먹어야 해서 굼벵이인 양 꾸물대기가 어렵다. 차라리 시간에 틈을 주지 않는 편이 조바심을 떨쳐내기에 그나마 효과가 좋았다.
이상하게 표를 보면 꼭 빈칸 없이 꽉꽉 채워야 한다는 무언의 의무감이 물결처럼 일렁인다. 'Lv1 (40.0%)'라는 수치를 마주한 찰나, 절반은 넘어야 한다는 오기가 발동했다. 어쩔 수 없었다.
[학습 관련]
1. 파이어베이스(Firebase) addDoc 사용
$("#button01").click(async function () {
let nickname01 = $('#nickname01').val();
let comment01 = $('#comment01').val();
let doc = {
'nickname01': nickname01,
'comment01': comment01
};
await addDoc(collection(db, "writtenComments"), doc);
alert('댓글이 등록되었습니다.');
window.location.reload();
})
$("#button02").click(async function () {
let nickname02 = $('#nickname02').val();
let comment02 = $('#comment02').val();
let doc = {
'nickname02': nickname02,
'comment02': comment02
};
await addDoc(collection(db, "writtenComments"), doc);
alert('댓글이 등록되었습니다.');
window.location.reload();
})
$("#button03").click(async function () {
let nickname03 = $('#nickname03').val();
let comment03 = $('#comment03').val();
let doc = {
'nickname03': nickname03,
'comment03': comment03
};
await addDoc(collection(db, "writtenComments"), doc);
alert('댓글이 등록되었습니다.');
window.location.reload();
})
$("#button04").click(async function () {
let nickname04 = $('#nickname04').val();
let comment04 = $('#comment04').val();
let doc = {
'nickname04': nickname04,
'comment04': comment04
};
await addDoc(collection(db, "writtenComments"), doc);
alert('댓글이 등록되었습니다.');
window.location.reload();
})
정말 다행스럽게도 댓글이 파이어베이스에 잘 저장됐다. 여기서 한 가지, 댓글 등록 버튼마다 id가 달라야 한다는 사실을 팀원 덕분에 배웠다. 만약 id가 동일하면 네 팀원 모두의 댓글 값이 같아진다고. 실습이긴 하나 정말 손에 꼽는 성공이라 이때 좀 그나마 마음이 편해졌다.
간 떨어지는 말이 두 번이나 나와서 보고 식겁하긴 했지만. 두 번이라 철렁 내려앉은 심장이 반동으로 제자리에 돌아왔으니 다행인가.
2. [24.11.09 추가] html 및 CSS 리뷰
<!DOCTYPE html>
<html lang="en">
<!--en 대신 ko 입력하기-->
<!-- 작업 진행 순서: 뼈대인 html 먼저, 그다음 style 작업-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 반응형 웹 제작 시 필수로 입력해야 한다.-->
<title>Document</title>
<style>
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
/*url이 길어서 어떤 글꼴 사용 예정인지 주석을 달아야 좋음*/
* {
font-family: "Pretendard Variable";
/*글꼴이 너무 많으면 적용이 안 될 수 있으므로 주의*/
}
body {
background-color: black;
color: white;
}
.head-title-practice {
margin: 10px auto 20px auto;
width: 600px;
height: 100px;
color: white;
text-align: center;
/*자주 고치는 정체성 요소 먼저, 그다음 꾸미는 요소 순으로 정렬*/
}
.subtitle {
margin: 10px auto 20px auto;
text-align: center;
font-size: 25px;
}
.spanPart {
font-weight: bold;
color: rgb(0, 183, 255);
}
</style>
</head>
<body>
<h1 class="head-title-practice" style="font-size: 70px">아, 저장안했다</h1>
<!--이름 붙일 때 하이픈(-)은 2개 이하로 사용하기-->
<!--예) head-title-practice-1 대신 head-title-practice-->
<div class="subtitle">
<p>
<span class="spanPart">저장</span>을
<span class="spanPart">사랑</span>하는 사람들의
<span class="spanPart">모임</span>
<!--<span>이 어디까지인지 잘 보이도록 조정하자.-->
</p>
</div>
<ul>목록
<!--<li>는 반드시 <ul> 안에 있어야 한다.-->
<li>
list-style: none; 반영 전
</li>
</ul>
<ul style="list-style: none;">
<li>
list-style: none; 반영 후
</li>
</ul>
<ul style="list-style:lower-greek;">
<li>
list-style:lower-greek; 반영
</li>
</ul>
</body>
</html>
코드 리뷰를 받은 당일엔 줄글로 적었는데 다시 읽어보니 머릿속에 잘 떠오르지 않았다. 폴더에 쑤셔 넣다시피 한 메모를 정리할 겸 다시 코드를 입력해 보면서 감을 잡았다. 역시 직접 해봐야 머리와 손에 익는다.
3. 유용한 사이트
ⓐ Reset CSS: 브라우저마다 존재하는 기본값을 없앨 수 있는 사이트. 예를 들어, <margin>을 주지 않았는데도 기본값 때문에 반영되었을 수 있으므로 모든 값을 0으로 만들어줄 때 활용할 수 있다.
ⓑ CDNFonts: 무료 글꼴 모음 사이트
[기타 사항]
내일 오후 2시에는 'Git&GitHub 특강'을 해주신 튜터님의 'TIL 특강' 일정이 있다. 정말 여러모로 힘들었는데, 이런 마음을 미리 알아채고 격려해 준 팀원들에게 고마움을 어떻게 전할지 고민했다. 문득 '이곳에 팀원들의 개발일지 링크를 걸면 좋지 않을까?'하는 생각이 스쳤다. 파이어베이스 연결로 어제만큼 끙끙댈 때 곧장 질문에 답해 준 팀원과, 시간을 내어 중구난방인 코드를 꼼꼼하게 읽고 리뷰해 준 팀원과, 사전캠프 일정 없이 바로 본캠프에 들어와서 힘들 텐데 누구보다 성실한 태도로 임하는 팀원의 개발일지 링크를, 감사의 뜻으로 남긴다.
"저희 오늘 기분 축 처진 상황 또한 발표 때 경험에 넣으면 좋을 듯해요. '프레임워크(Framework)를 잘 사용하는 개발자가 되자!' 느낌으로다가요. 시행착오 또한 값진 경험이잖아요."
팀원의 위로에 힘입어 내일은 오늘보다 더 힘낼 수 있기를.
'끝을 보는 용기' 카테고리의 다른 글
| Spring 본캠프 Day 033 - 미니 프로젝트 100%, 첫 KPT, 첫 다면평가 (0) | 2024.11.08 |
|---|---|
| Spring 본캠프 Day 032 - 미니 프로젝트 90% (0) | 2024.11.07 |
| Spring 본캠프 Day 030 - 미니 프로젝트 40%, 책 『비전공자를 위한 이해할 수 있는 IT 지식』 읽기 20% (0) | 2024.11.05 |
| Spring 본캠프 Day 029 - 미니 프로젝트 20%, Git&GitHub 복습 1번 (0) | 2024.11.04 |
| Spring 사전캠프 Day 028 - 자바(Java) 공부: 배열 (4/4), 책 『비전공이지만 개발자로 먹고삽니다』 읽기 100% (0) | 2024.11.03 |