우아한 기술 과정 5차 FE 레벨 1 완료…

원래 계획은 레벨 1이 끝나면 회고전을 쓰는 것이었지만…

중간에 쓰기 미션 때문에 벌써 한 달 동안의 내 인생을 적었다…

사실 그 당시에는 말의 양에 한계가 있었고, 이전에는 말하지 못했던 말들이 많았습니다.

이번 글에서는 활동 시작 후 소감과 회고를 적어보려고 하는데, 선발 과정이 궁금하시다면 아래 링크로 들어가셔서 먼저 읽어보시면 될 것 같습니다.

(회고전) 엘레강트 테크 코스 5차 프리 코스(FE)
엘레강트 테크 코스 5차 프리코스(FE) 1차 합격!

우아한테크과정 5기(FE) 최종 코딩테스트 후기
2022년의 지출과 새해 결심

우아한 기술 과정의 커리큘럼은 엘레강트 테크 코스 공식 홈페이지배민같은에서 확인하실 수 있으며, 이전에 썼던 글, 엘레강트 테크 코스에서의 한 달 생활에 잘 쓰여있으니 생략하겠습니다.


우아한 기술 과정의 모든 미션은 Github 저장소에서 오픈 소스로 찾을 수 있으니 참고하시면 좋을 것 같습니다.

사명

1주 차 – 자동차 경주 게임

1 단계 (https://github.com/gabrielyoon7/javascript-racingcar/tree/step1)

GitHub – gabrielyoon7/javascript-racingcar: 자바스크립트로 구현한 자동차 경주 게임

JavaScript로 구현된 자동차 경주 게임. GitHub에서 계정을 만들어 gabrielyoon7/javascript-racingcar 개발에 기여하세요.

github.com

2 단계 (https://github.com/gabrielyoon7/javascript-racingcar/tree/step2)

GitHub – gabrielyoon7/javascript-racingcar: 자바스크립트로 구현한 자동차 경주 게임

JavaScript로 구현된 자동차 경주 게임. GitHub에서 계정을 만들어 gabrielyoon7/javascript-racingcar 개발에 기여하세요.

github.com

자동차 경주 게임은 node.js를 기반으로 한 콘솔 게임이었습니다.


프리코스와 달리 미션에 필요한 모든 기능을 직접 구현해야 했다.

심지어 테스트 코드를 직접 작성해야 했고, 그 과정에서 jest로 모의하는 방법이나 노드 버전에 따라 readline 기능이 지원되는지 여부를 알게 되었습니다.

하지만 비동기식을 쓰겠다는 당초 계획과 달리 콜백으로 쓰는 방식으로 돌아가 다시 자유 코스의 맛을 느낄 수 있는 미션이었다.

.every() 및 .some() 코드의 가독성을 위해 알아야 할 사항

JavaScript 클래스 구문을 작성하는 방법은 무엇입니까?

저는 JavaScript에서 클래스를 사용하는 것이 프로토타입에 신경 쓰지 않도록 도와주는 훌륭한 도구라는 것을 알게 되었습니다.

물론 프로토타입을 직접 다룰 기회가 없어서 다소 아쉬웠지만, 어쨌든 클래스는 거의 모든 상황을 커버할 수 있었습니다.

2주 차 – 로또

1 단계 (https://github.com/gabrielyoon7/javascript-lotto/tree/step1)

GitHub – gabrielyoon7/javascript-lotto: 자바스크립트로 구현한 로또 어플리케이션

JavaScript로 구현된 로또 어플리케이션. GitHub에서 계정을 생성하여 gabrielyoon7/javascript-lotto 개발에 기여하세요.

github.com

2 단계 (https://github.com/gabrielyoon7/javascript-lotto/tree/step2)

GitHub – gabrielyoon7/javascript-lotto: 자바스크립트로 구현한 로또 어플리케이션

JavaScript로 구현된 로또 어플리케이션. GitHub에서 계정을 생성하여 gabrielyoon7/javascript-lotto 개발에 기여하세요.

github.com

이번 임무에서는 콘솔에서 웹으로 포팅했습니다.

예전에 학교에서 Java 콘솔에서 Swing으로 포팅한 경험이 있었는데, 매우 유사한 작업이었습니다.

특히 이번 미션에서는 TDD를 체험할 기회가 있어서 콘솔에 쓰던 도메인 로직을 웹에서도 조립할 수 있었습니다.


이 미션 전까지 우리는 글로벌 변수를 globalThis처럼 취급하여 웹에서 전역 변수의 값을 공유했습니다.

컨트롤러 없이 데이터를 공유할 수 있는 방법에 대해 많이 고민했습니다.


이번 미션에서는 테코톡이 있어서 시간을 많이 보내지 못한 일주일이었습니다.

5차 프론트엔드에서는 클래스와 객체에 대한 TekoTalk 프리젠테이션을 처음 해보았는데 정말 재미있는 경험이었습니다.

TEKO TALK에서 사용되는 예시 및 발표자료

오랜만에 바닐라 자바스크립트로 웹 프로젝트를 작성하다 보니 jQuery로 했던 개발이 정말 잘못됐다는 생각이 들었습니다.

결정적으로 좀 더 효율적으로 쓸 수 있는 방법이 없을까 고민하는 기간이었습니다.

DOM에 특정 요소를 동적으로 붙인 후 이벤트를 어떻게 관리하고 잦은 드롭이 발생했을 때 효율적으로 처리할 수 있을지 고민하기 시작했습니다.

.onsubmit과 .addEventListener의 차이점

이벤트 리스너는 자바스크립트 개발의 핵심이자 다른 개발과 차별화되는 부분이라고 생각했는데 이번 프로젝트를 통해 생각이 더 강해졌습니다.

3주 – 점심으로 무엇을 먹을까

1 단계 (https://github.com/gabrielyoon7/javascript-lunch/tree/step1)

GitHub – gabrielyoon7/javascript-lunch: 우아한 기술 과정 레벨 1 점심에 먹을 것 미션

엘레강트 테크 코스 1급 점심 미션. GitHub에서 계정을 생성하여 gabrielyoon7/javascript-lunch 개발에 기여하세요.

github.com

2 단계 (https://github.com/gabrielyoon7/javascript-lunch/tree/step2)

GitHub – gabrielyoon7/javascript-lunch: 우아한 기술 과정 레벨 1 점심에 먹을 것 미션

엘레강트 테크 코스 1급 점심 미션. GitHub에서 계정을 생성하여 gabrielyoon7/javascript-lunch 개발에 기여하세요.

github.com

What to Eat for Lunch에서는 사용자 정의 요소에 대해 배웠습니다.

크루가 암시한 웹 컴포넌트 기술이었는데, 이 기술이 바닐라 자바스크립트를 풍부하게 해주는 기능이라고 생각했다.

특히 이번 미션에서는 커스텀 요소에 프록시를 적용하여 보다 다이내믹하고 체계적인 프로젝트를 만들 수 있었습니다.

JavaScript에서 프록시는 매우 독특하고 특이한 기능으로 작동하고 있었고 이벤트 기반 프로그래밍에서 유용할 것이라고 생각했습니다.


JavaScript에서 customElements를 사용한 독립적인 상태 관리
JavaScript의 customElements에서 프록시를 사용한 객체 변경 감지
HTMLElement와 JavaScript 간의 상호 작용을 개선하기 위한 데이터 세트(데이터 속성)

커스텀 엘리먼트는 웹 컴포넌트를 만드는 데 매우 유용하지만 한계가 분명한 기술이라고 생각했습니다.

여하튼 이 기술에서 html과 js의 상호작용은 매우 인상적이었고, SPA 시장에서 바닐라 자바스크립트가 다소 소외된 상황에서 어떤 노력을 했는지 알 수 있었다.

4주 – 영화 리뷰

1 단계 (https://github.com/gabrielyoon7/javascript-movie-review/tree/step1)

GitHub – gabrielyoon7/javascript-movie-review: 우아한 기술 과정 레벨 1 영화 리뷰 미션

우아한 기술 과정 레벨 1 영화 리뷰 미션. GitHub에서 계정을 만들어 gabrielyoon7/javascript-movie-review 개발에 기여하세요.

github.com

2 단계 (https://github.com/gabrielyoon7/javascript-movie-review/tree/step2)

GitHub – gabrielyoon7/javascript-movie-review: 우아한 기술 과정 레벨 1 영화 리뷰 미션

우아한 기술 과정 레벨 1 영화 리뷰 미션. GitHub에서 계정을 만들어 gabrielyoon7/javascript-movie-review 개발에 기여하세요.

github.com

외부 API인 tmdb를 사용하여 동영상을 표시하는 것이 미션이었습니다.

비동기 상황(특히 수신 후)에서 JavaScript를 제어하는 ​​방법을 경험할 수 있었습니다.


지난 점심 미션에서 다소 아쉬웠던 부분(Custom Element)에 대해 알 수 있는 기회였는데,

무한 스크롤을 구현하는 최신 방법에 대해 배울 수 있었습니다.

API 키를 숨기는 과정 등 클라이언트가 고민해야 하는 부분에 대해서도 다시 생각하게 되었습니다.

CustomEvent를 사용하여 개체를 customElements에 전달하는 방법
IntersectionObserver를 사용한 요소 감지 및 적용(무한 스크롤 및 전면 광고의 예 포함)
JavaScript의 모듈 시스템과 Singleton 패턴을 통한 객체 공유
자바스크립트의 cloneNode와 이벤트 버블링을 이용한 HTML 템플릿 태그 사용법

이번 미션에서 싱글톤 패턴, 커스텀 이벤트 등의 기술을 적용하면서 가장 크게 느낀 점은…

웹 컴포넌트 간의 통신이나 관계가 너무 복잡해지고 이를 관리할 수 있는 기능이 절실히 필요하다는 것이었습니다.

조금 더 시간이 있었더라면 이벤트 버스에 도전할 수 있었을텐데 아쉬움이 남는 미션이었습니다.

살아남은 우테코

Uteco에게 10개월은 결코 짧은 기간이 아닙니다.

이 기간을 오래도록 즐기기 위해 루틴을 짜기로 했다.

주변 사람들에게 칼날요정이라 불릴 정도로 정규직을 목표로 하고 있었다.

그 이유는 무엇입니까?

평일 분할


의욕과 열의가 오히려 높아졌다

프로그래밍에만 집중할 수 있는 커리큘럼에 만족하는 나에게는 휴식 === 프로그래밍.

바닐라든 리액트든 JavaScript와 관련된 모든 것은 재미있습니다.

온종일 캠퍼스에 있는 날과 칼을 놓고 온 날을 비교해보니 후자가 좀 더 내 성향에 맞았다.

나는 집에 와서 세수를 하면 새로운 하루가 시작되는 기분이다.

칼퇴는 하루를 반으로 쪼개서 1부와 2부로 나눈 느낌이었다.

공부 환경이 바뀌면 집중력과 체력이 충전되는 느낌이라고 해야 할까요?

출퇴근 시간에는 캠퍼스나 집에서 할 일을 찾는 데 시간을 보냅니다.

이때 나는 매일매일 흥미로운 아이디어를 발견하거나 호기심을 가지려고 노력한다.

아이패드 미니를 가지고 다니는 것은 특히 지하철에서 매우 유용했습니다.

출근길에 배운 사실이 캠퍼스에서의 배움을 진척시키기 위해

퇴근길에 알게 된 사실 뒤쪽에나는 공부하는 데 시간을 보냈다.

주말은…

나는 주말에 캠퍼스에 가지 않았다.

주말에 딱히 정해진 일정은 없었지만 대부분의 시간을 이렇게 보냈다.

토요일은 최대한 집에서 먼 곳으로 여행을 갔고, 일요일은 집에서 후기 백로그를 반영했습니다.

물론 노트북을 항상 가지고 다니기 때문에 항상 미션이 있는 주말이지만 전국 방방곡곡을 다니며 20대를 만끽하고 있습니다.

건강

몸이 아프거나 몸이 안 좋은 경우가 거의 없었기 때문에 건강에 대해 크게 걱정하지 않았는데, 캠퍼스 생활을 하면서 많이 좋아졌습니다.


확실히 술이 줄었다.

우리 가족의 음주 문화의 영향이 있을지 모르지만 나는 술에 매우 관대합니다.

그런데 지금은 과거의 술을 청산하고 술이 깨는 날이 많다.

다음날 일찍 일어나야 해서 저녁에 쉴 수가 없었다.

나는 더 일찍 잠자리에 들기 위해 술을 끊었다.

Uteco를 시작하기 전에는 오전 일정이 거의 없는 편입니다.

늦게 일어나기 => 저녁 반 잔 => 취해서 자정쯤 일어나기 => 새벽에 잠자리에 들기

우리는 이 악순환을 끊을 수 있습니다.


그러나 커피는 증가했습니다.

예전에는 하루에 1aa를 연습했다면 지금은 하루에 2aa를 연습하고 있습니다.

내가 마신 커피의 양이 늘어난 것을 확실히 체감한 것은 카페 주인이 내가 얼마나 많은 쿠폰을 가지고 있는지 알고 있을 정도였다.

커피를 많이 마시는 것이 건강에 안 좋은지는 모르겠지만 지금은 물보다 더 많이 마시는 것 같아요.

공부하다

유테코에서 가장 골칫거리가 공부다.

개인적으로 인강도 공부도 성공한 경험이 없었고 제 성향과 잘 맞지도 않았습니다.

특히 누군가와 함께 교과서를 읽거나 강의를 듣는 것은 매우 비효율적이라고 생각했기 때문에 공부할 생각이 없었습니다.

혼자 공부하다 보면 스케줄에 맞춰 폭풍우를 몰아가기도 하고, 미루기도 하고, 중간에 멈춰서 새로운 도전을 할 수도 있기 때문이다.

그래서 공부를 안 할 줄 알았다.


이 세상에 절대적인 것은 거의 없다는 것을 알면서도 나는 강하게 착각하고 있다.

그런데 결국 두 학과에 들어가게 되었는데, 분위기가 다른 학과들과 사뭇 다릅니다.

군단

저는 Uteco FE에서 처음으로 TEKO TALK 발표를 맡았는데, TEKO TALK 발표가 끝나자마자 몇몇 크루들이 모여서 제 발표 주제에 대해 토론했습니다.

제가 제시한 자료 중 가장 큰 이슈는 클래스의 getter/setter 무한 참조 문제였습니다.

1. 일주일에 한 번 모여 어떤 주제로든 공부합니다.

정해진 건 없고 슬랙에서 긴급통화로 모입니다.


2. 보통은 그 주에 있었던 TEKO TALK 발표회 주제를 세세하게 뜯고 뜯는 이른바 갈비채팅(?)을 합니다.

프레젠테이션에서 다루는 내용은 빠르게 건너뛰는 경향이 있으므로 자세히 살펴보겠습니다.


3. 당신이 회의에 오든 말든 아무도 신경 쓰지 않는다.

이 스터디는 정말 자유롭고 호기심을 자극할 수 있는 주제들로 가득 차 있는데, 보통 난이도가 높기 때문입니다.

낮은 결말로 끝나지만 그 과정에서 훌륭한 통찰력을 얻을 수 있습니다.

억지로 가라고 하는 분위기가 아니라 학문적 대화가 오가는 환경이 나에게 훨씬 더 잘 맞았다.

유테코 선릉캠 테크 살롱라는 개념이 있고, 이 문화에 가장 적합한 학문이라고 강력히 주장합니다.

블로그 게시물 연구

이 스터디에 들어간지 꽤 되었지만 매주 꾸준히 쓰는 스터디라고 합니다.

(사실 이름만 연구)

최근에 다시 블로그에 글을 쓰기 시작했는데 다른 크루들은 어떻게 쓰는지 궁금해서 가입하게 되었습니다.

물론 이 공부도 의무교육과 관련된 공부가 아니었기 때문에 들어갔다.

밀짚 주도 성장

Uteco는 성장하면서 주변 승무원의 능력을 흡수하는 것이 좋습니다.

나 자신에 대해 몰랐던 한 가지 큰 능력이 있었는데 그것은 빨대를 놓는 것이었습니다.


사실 나는 빨대 그 자체가 아닌가?

주변 크루들이 하는 걸 유심히 보고 따라해요.

제작진이 코드의 강점과 개발 방법론을 금방 배웠다는 걸 알게 됐다.

새로운 기술에 대한 공식 문서나 참고 자료를 보면서 더 빨리 사용하는 방법을 배우고 다른 크루들에게 설명했습니다.

물론 그 정보가 맞는지 아닌지는 돌아다니는 쓰레기를 생각하고 만드는데 최적화된 사람이건 아닌 것 같아요.

고속으로 배우다 보니 특정 기술의 스펙을 다 알기보다는 킬러 기능을 익히고 적용할 수 있는 것에 더 집중했던 것 같다.


어쩌면 나는 인간 스폰지가 아닌가?

나는 새로운 정보를 받아들이는 데 있어서 편견이 없다고 생각했었다.

주변의 정보를 흡수해 내 것으로 만드는 능력을 배운 시간이었다.

레벨 2에 대한 약속


거울을 보니 호랑이인 줄 알았다.

지난 2개월 동안 우테코 레벨 1에서 느낀 점을 정리하자면, 부족한 나 자신을 알아가는 시간이었습니다.

예비과정에서와 마찬가지로 내가 아는 세상이 전부가 아니라는 것을 깨달았고, 내가 무엇을 더 해야 하는지를 배우는 시간이었다.

열정적이고 훌륭한 크루들이 많아서 많이 배웠고, 나날이 기초를 탄탄히 다지면서 JS/TS에 대한 시야를 넓힐 수 있었습니다.

여러 대화를 통해 제작진이 이 모든 것에 동의하지 않는다는 것을 알고 있지만…

두 달 동안 라이브러리 없이 개발한 경험은 시간 낭비가 아니라 시야를 넓히는 과정이었다고 생각합니다.

이것을 넷 주도 학습이라고 표현하고 싶습니다.

.!

넷 주도 학습

보트에서 물고기를 잡는 방법?

물론 낚싯대로 해도 되지만 그물로 잡는게 더 안정적이지 않을까요?

그렇다면 더 많은 고기를 잡으려면 그물은 어떤 모양이어야 할까요?


좋은 그물은 많은 고기를 잡는다

이렇게 기초부터 배워가는 과정 메쉬를 조밀하게 만드는 과정나는 생각했다.

내가 알고 있는 지식의 조각이 늘어날수록 경험치가 쌓일수록 그물은 점점 더 조밀해진다.

그물이 촘촘할수록 더 작은 물고기를 잡을 수 있습니다.

즉, 기초를 제대로 공부하면 할수록 어려운 새로운 지식을 습득하기가 쉬워집니다.

그래서 저는 JavaScript를 배우는 것에 대해 진지하게 생각했습니다.

이제 반응입니다.

레벨 1과 마찬가지로 리액트는 반복되는 시행착오를 통해 지평을 넓히려 합니다.

꾸준히 쓸 수 있을까?

내가 배운 것을 추적하는 것은 휘발성입니다.

나는 열심히 일하고 있다.

그러나 기사를 작성하는 데는 많은 시간이 걸립니다.

회고적 글쓰기는 텍스트 구조에 조금 더 주의를 기울여야 하는 반면 기술적인 글쓰기는 예제에 더 많은 노력이 필요합니다.

그럼에도 글을 쓰다 보면 메타인지가 되어 기억에 더 오래 남는 것 같다.

레벨 1 회고전 끝!