[우아한 테크코스 3기] LEVEL 1 회고 (51일차)
안녕하세요? 제이온입니다.
오늘은 멘붕의 연속이었습니다. 왜 그런지는 제 이야기를 들어보시면 아실 수 있습니다.
특강
오늘은 우테코 2기 호돌과 우테캠 한 분(성함을 까먹었습니다..)이 오셔서 좋은 말씀을 해 주셨습니다. 호돌은 두 가지 조언을 해 주셨고, 첫 번째는 편식을 하지 말라는 것이었습니다. 우리는 우테코에서 프론트엔드와 백엔드로 나눠서 교육을 듣지만, 현장에 나가면 두 분야를 모두 알아야 하는 경우가 많다고 알려주셨습니다. 그래서 "나는 백엔드니까 프론트엔드는 안 해도 되겠지?"라는 생각을 갖지 말고 백엔드와 더불어 학습할 것을 조언해 주셨습니다. 사실, 그동안 JS를 거부해왔는데 이번 기회에 투두 리스트 미션을 수행하면서 열심히 해 봐야겠다고 다짐했습니다.
두 번째는 친구를 많이 만들고 적당한 선에서 놀라는 것입니다. 간혹 가다가 혼자만의 벽을 쌓고 공부하는 크루들이 있는데, 그러지 말고 다양한 크루와 교류하면서 인맥을 쌓을 것을 추천해 주셨습니다. 이건 개인적으로도 긍정적으로 느끼는 것인데, 친한 사람을 많이 만들어 두면 모르는 점을 언제든지 물어볼 수 있어서 좋은 것 같습니다. 그 외에도 고민 상담이나 놀고 싶을 때 불러서 놀 수 있는 등등 장점만 있다고 생각합니다.
우테캠 선배님은 실력 차이가 많이 나든 적게 나든 모든 상황에서 배울 점이 있으므로 주어진 상황을 잘 이용하라고 말씀해 주셨습니다. 가령, 자기보다 실력이 낮은 사람이 있다면 애매하게 알고 있던 내용을 복습하는 효과가 있고, 실력이 높은 사람이 있다면 그거대로 모르는 점을 배울 수 있는 것이죠.
두 분의 이야기를 들으면서 앞으로 8개월 우테코 생활에 적용해 보겠다는 생각을 했습니다.
체스 미션
체스 1, 2, 3단계 미션이 merge가 되었습니다. 4, 5단계 미션은 여태까지 만든 콘솔용 체스를 웹 애플리케이션으로 만들고 DB와 연결하는 것입니다. 그 중에서 4단계 미션은 Spark Java 웹 프레임 워크를 이용하여 웹으로 구현해야 합니다.
저는 프론트엔드 공부를 아주 아주 맛만 봤기 때문에 사실상 노베이스였고, get과 post 방식도 어렴풋이 이해할 정도였습니다. 그래도 포비의 녹화 영상을 잘 따라가면서 약간 느낌은 잡았다고 생각합니다. 그리고 템플릿 엔진이라는 것을 사용하여 동적 웹사이트를 만드는데, 방식이 저에게 있어서 굉장히 독특했습니다.
import static spark.Spark.*;
import java.util.HashMap;
import java.util.Map;
import spark.ModelAndView;
import spark.template.handlebars.HandlebarsTemplateEngine;
public class MyTemplateEngine {
public static void main(String[] args) {
port(8080);
get("/helloworld", (req, res) -> {
Map<String, Object> model = new HashMap<>();
model.put("name", "pobi");
return render(model, "/helloworld.html");
});
}
public static String render(Map<String, Object> model, String templatePath) {
return new HandlebarsTemplateEngine().render(new ModelAndView(model, templatePath));
}
}
Handlebars 라는 템플릿 엔진을 사용하며, 위와 같이 Map 자료구조를 사용하여 데이터를 보내는 방식입니다. 그러면, helloworld.html에서는 Map의 키값을 {{key}}와 같이 중괄호 2개로 감싸서 value로 얻어올 수 있습니다. 위 예에서는 helloword.htl에서 "이름 : {{name}}"라고 입력해 놓았다면, 웹 페이지 상으로는 "이름 : pobi"라고 출력되는 것입니다. 이때, 주의할 점이 value의 타입이 Student같은 객체라면 반드시 getXXX() 메소드가 있어야 합니다. 제가 실험해 봤는데, getName()은 가능해도 일반 name()은 불가능했습니다.
어찌저찌 포비의 강의는 이해하였지만, 체스를 바로 시작하려고 하니까 너무 막막했습니다. 어떻게 체스의 말들을 띄우고 이미지를 넣을지 굉장히 고민하였습니다. 더군다나 저는 html, css, js 지식이 없는거나 마찬가지였어서 구글링을 열심히 해 보았지만, 하면 할수록 현타가 왔습니다. 왜냐하면, 모르는 내용이 쏟아져 나오는데 기한은 다음 주까지여서 조급한 마음이 생겼기 때문입니다. 그러다가 쥐어짜서 나온 index.html 코드는 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>체스 게임</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>체스 게임</h1>
<div class="chess-board">
<table>
<tr>
<td class="a8"><img src="{{a8}}.png"></td>
<td class="b8"><img src="{{b8}}.png"></td>
<td class="c8"><img src="{{c8}}.png"></td>
<td class="d8"><img src="{{d8}}.png"></td>
<td class="e8"><img src="{{e8}}.png"></td>
<td class="f8"><img src="{{f8}}.png"></td>
<td class="g8"><img src="{{g8}}.png"></td>
<td class="h8"><img src="{{h8}}.png"></td>
</tr>
<tr>
<td class="a7"><img src="{{a7}}.png"></td>
<td class="b7"><img src="{{b7}}.png"></td>
<td class="c7"><img src="{{c7}}.png"></td>
<td class="d7"><img src="{{d7}}.png"></td>
<td class="e7"><img src="{{e7}}.png"></td>
<td class="f7"><img src="{{f7}}.png"></td>
<td class="g7"><img src="{{g7}}.png"></td>
<td class="h7"><img src="{{h7}}.png"></td>
</tr>
<tr>
<td class="a6"><img src="{{a6}}.png"></td>
<td class="b6"><img src="{{b6}}.png"></td>
<td class="c6"><img src="{{c6}}.png"></td>
<td class="d6"><img src="{{d6}}.png"></td>
<td class="e6"><img src="{{e6}}.png"></td>
<td class="f6"><img src="{{f6}}.png"></td>
<td class="g6"><img src="{{g6}}.png"></td>
<td class="h6"><img src="{{h6}}.png"></td>
</tr>
<tr>
<td class="a5"><img src="{{a5}}.png"></td>
<td class="b5"><img src="{{b5}}.png"></td>
<td class="c5"><img src="{{c5}}.png"></td>
<td class="d5"><img src="{{d5}}.png"></td>
<td class="e5"><img src="{{e5}}.png"></td>
<td class="f5"><img src="{{f5}}.png"></td>
<td class="g5"><img src="{{g5}}.png"></td>
<td class="h5"><img src="{{h5}}.png"></td>
</tr>
<tr>
<td class="a4"><img src="{{a4}}.png"></td>
<td class="b4"><img src="{{b4}}.png"></td>
<td class="c4"><img src="{{c4}}.png"></td>
<td class="d4"><img src="{{d4}}.png"></td>
<td class="e4"><img src="{{e4}}.png"></td>
<td class="f4"><img src="{{f4}}.png"></td>
<td class="g4"><img src="{{g4}}.png"></td>
<td class="h4"><img src="{{h4}}.png"></td>
</tr>
<tr>
<td class="a3"><img src="{{a3}}.png"></td>
<td class="b3"><img src="{{b3}}.png"></td>
<td class="c3"><img src="{{c3}}.png"></td>
<td class="d3"><img src="{{d3}}.png"></td>
<td class="e3"><img src="{{e3}}.png"></td>
<td class="f3"><img src="{{f3}}.png"></td>
<td class="g3"><img src="{{g3}}.png"></td>
<td class="h3"><img src="{{h3}}.png"></td>
</tr>
<tr>
<td class="a2"><img src="{{a2}}.png"></td>
<td class="b2"><img src="{{b2}}.png"></td>
<td class="c2"><img src="{{c2}}.png"></td>
<td class="d2"><img src="{{d2}}.png"></td>
<td class="e2"><img src="{{e2}}.png"></td>
<td class="f2"><img src="{{f2}}.png"></td>
<td class="g2"><img src="{{g2}}.png"></td>
<td class="h2"><img src="{{h2}}.png"></td>
</tr>
<tr>
<td class="a1"><img src="{{a1}}.png"></td>
<td class="b1"><img src="{{b1}}.png"></td>
<td class="c1"><img src="{{c1}}.png"></td>
<td class="d1"><img src="{{d1}}.png"></td>
<td class="e1"><img src="{{e1}}.png"></td>
<td class="f1"><img src="{{f1}}.png"></td>
<td class="g1"><img src="{{g1}}.png"></td>
<td class="h1"><img src="{{h1}}.png"></td>
</tr>
</table>
</div>
</body>
</html>
엄청난 하드 코딩이 되어 버렸습니다. 이미지는 각 체스말들과 빈 공간들로 준비해서 디렉토리에 넣어 놓았고, css는 가운데 정렬 및 배경색을 입히는 정도만 하였습니다. 현재 웹 페이지의 모습은 아래와 같습니다.
각 체스말들 배경색을 RGB 코드를 이용하여 바꿔주었는데, 이 부분도 노가다를 하였습니다.
@charset "UTF-8";
h1 {
text-align: center;
}
table {
width: 700px;
height: 700px;
margin:auto;
}
img {
width: 60px;
display: block;
margin: auto;
}
.chess-board {
width: 700px;
display: flex;
flex-direction: column;
margin: auto;
}
.a8, .c8, .e8, .g8,
.b7, .d7, .f7, .h7,
.a6, .c6, .e6, .g6,
.b5, .d5, .f5, .h5,
.a4, .c4, .e4, .g4,
.b3, .d3, .f3, .h3,
.a2, .c2, .e2, .g2,
.b1, .d1, .f1, .h1
{
background-color: rgb(204, 204, 204);
width: 60px;
height: 60px;
}
.b8, .d8, .f8, .h8,
.a7, .c7, .e7, .g7,
.b6, .d6, .f6, .h6,
.a5, .c5, .e5, .g5,
.b4, .d4, .f4, .h4,
.a3, .c3, .e3, .g3,
.b2, .d2, .f2, .h2,
.a1, .c1, .e1, .g1
{
background-color: rgb(000, 102, 051);
width: 60px;
height: 60px;
}
그 외에도 가운데 정렬해 보겠다고 별의 별짓을 다 했던 것 같습니다. 문제는 제가 이해를 하고 쓴 것이 아니라, 이거 안 되면 저거 쓰고, 저거 안 되면 다른거 쓰는 행위를 반복하다가 아다리 맞은 것 뿐입니다.
오늘 생각했던 체스판 형태를 띄우는 목적 자체는 달성했지만, html 코드도 매우 비효율적이고 무엇보다도 제가 html, css, js에 지식이 없어서 만족스럽지가 않았습니다. 거의 뭐 오늘은 개발자가 아니라 코더가 아닐까싶은 수준이었죠.
To-Do List 클론 코딩
결국 프론트 미션인 투두 리스트부터 해야겠다고 생각했습니다. 그 전에 JS의 감을 잡기 위하여 이곳에서 클론 코딩을 진행하였습니다. 원래는 기초부터 탄탄히 배워서 프로젝트를 수행하는 것을 선호했지만, 마감 기한이 있으므로 일단 부딪혀 보는 방법을 택했습니다.
어찌저찌 따라가면서 DOM에 대해서 어렴풋이 감을 잡았고, 친구의 설명을 통해서 DOM 구조를 약간이나마 이해할 수 있었습니다. DOM은 HTML tag를 조작하도록 도와주고, 구조는 트리 구조라는 정도라고 받아들였죠.
아직 완벽하지는 않지만, 내일부터는 기존의 투두 리스트 미션을 진행하면서 JS를 응용할 계획입니다. 그리고 이미 다 끝냈다는 제리가 있으니까 어떻게든 물어봐서 끝내려고 합니다.
정리
체스 미션 Spark Java, 프론트엔드 미션 바닐라 JS, SQL 퀴즈, 체스 미션 DB, 글쓰기까지 총 5개의 할 일이 갑자기 쏟아지면서 현재 정신을 못 차리고 있습니다. 오늘 우테코하면서 가장 힘들었던 날인 것 같습니다. 하지만, 이제 막 레벨1 후반이고, 이정도의 새로운 개념이 우루루 나오는 것은 레벨2를 위한 것이라 생각하고 잘 견뎌내야겠습니다.
'각종 후기 > 우아한테크코스' 카테고리의 다른 글
| [우아한 테크코스 3기] LEVEL 1 회고 (53일차) (8) | 2021.03.26 |
|---|---|
| [우아한 테크코스 3기] LEVEL 1 회고 (52일차) (0) | 2021.03.25 |
| [우아한 테크코스 3기] LEVEL 1 회고 (50일차) (2) | 2021.03.23 |
| [우아한 테크코스 3기] LEVEL 1 회고 - 체스 1, 2, 3단계 미션 1차 피드백을 받아보다(49일차) (0) | 2021.03.22 |
| [우아한 테크코스 3기] LEVEL 1 회고 (46일차) (2) | 2021.03.19 |
댓글