우아한테크코스 4기 프론트엔드 프리코스 후기 + 팁

---

0. 우아한테크코스 프리코스

1. 프리코스 1주차

2. 프리코스 2주차

3. 프리코스 3주차

4. 프리코스 후기

---

   0. 우아한테크코스  프리코스 

https://woowacourse.github.io/faq.html

프리코스는 우아한테크코스를 맛보기 해보는 과정으로 3주동안 한 주에 과제 1개씩 수행해 나가면서 진행하는 테스트이다.

3주동안의 프리코스를 모두 완수해야만 마지막 최종 코딩테스트를 치룰 수 있다. 

 

백엔드 파트는 Java로 구현하고 

프론트엔드 파트는 Vanila JS로 구현한다 (그냥 쌩 JS)

 

나는 웹 프론트엔드로 지원했으나 

JS는 인터넷에서 복붙만 해봤지 직접 많이 만져본적은 없어서

그냥 모르고 처음부터 시작한다 생각하고 임했다.

 

   팁

프리코스를 진행하면서 가장 애먹었던 부분이 서버 구축이다.

 javascript환경에서 로컬에서 테스트 해볼 때

파일로 열게되면 CORS policy정책으로 인해 제대로 확인할 수가 없어서

아무것도 모르던 1주차 때는 express.js 를 이용해서 웹서버 구축을 하여 localhost 에서 진행을 하여 확인을했었다.

 

근데 이건 너무 복잡한 해결방법이다. 진짜 쉬운 해결방안이 있다. 

VS Code에서 확장프로그램으로 Live Server를 설치하면 

프로젝트에서 우측 하단을 보면 Go Live가 생기는데, 이를 누르면 자동으로 localhost로 연결 해준다. 짱짱 편하다!

 

 

 

   1.  프리코스  1주차  - 숫자 야구 게임

우테코 4기 1주차 프리코스는 숫자 야구 게임이었다.

숫자 야구게임은 우테코3기에서도 같은 과제였기 때문에 생각보다 참고할 수 있는 게 많았다. 

(제가 작성한 코드를 보는 방법은 branch를 main이아닌 브랜치를 확인하면 됩니다.)

https://github.com/ellynhan/javascript-baseball-precourse

GitHub - ellynhan/javascript-baseball-precourse: 숫자 야구게임 미션을 진행하는 저장소

그리고 난이도도 쉬웠기 때문에 금방 완성할 수 있었다.

 

1주차 프리코스를 통해서는  javascript의 전반적인 문법부터 시작해서

코드 컨벤션, 모듈화, 이벤트처리, html과 js사이 상호작용 등을 배울 수 있었다고 생각한다.

 

프리코스를 진행하면서 가장 어려웠던 것은 함수 길이를 15줄 이내로 맞추는 것이었다.

 

프로그래밍 요구사항, 기능 요구사항, 과제 진행 요구사항이 있는데 

과제 진행 요구사항에서 요구하는 대로 commit message를 작성해보고

프로그래밍 요구사항에서 요구하는대로 코딩 스타일을 지켜가면서 하는 것 역시 많이 까다로웠다.

 

이 점을 익혀간다는 생각으로 진행하면 될 것 같았다. 

 

생각보다 쉽지 않았던 부분.

 

 

   2. 프리코스  2주차  - 자동차 경주 게임

우테코 4기 2주차 프리코스는 이전 기수 프리코스와 다르게 자동차 경주 게임이었다.

 

https://github.com/ellynhan/javascript-racingcar-precourse

GitHub - ellynhan/javascript-racingcar-precourse: 자동차 경주 게임 미션을 위한 저장소

 

이번 과제에서는 배운 점이 MVC(model - view - controller) 구조로 컴포넌트를 분할해보는 것,

(https://developer.mozilla.org/ko/docs/Glossary/MVC  이 내용을 참고했다.)

 

그리고 queryselectAll을 따로 export하여 사용하도록 Utils를 만들고 이를 이용하고 

Utils에 constants를 넣어 사용하는 것처럼 편리하게 이용하는 Utils를 익힐 수 있었다. 

이 부분은 1주차 과제에서 다른 지원자 분들이 사용하는 것을 보고 배웠다. 

 

마지막으로는 공통 요구사항을 지키기 위해 2주차에서는 eslint와 prettier를 이용했었는데 

나오는 경고문구를 통해 많은 점을 개선해볼 수 있었다. 그 중 하나 더 배운 것이 JS의 순환참조였다.

import, export, export default와 관련된 경고문구를 통해 알게 된 것이다. 

이 문제는 import하는 부분을 한 곳에 모으니 확실히 간결해졌고 문제가 발생하지 않아졌었다. 

 

 

   3. 프리코스  3주차  - 자판기

마지막 우테코4기 3주차 프리코스는 자판기었다.

https://github.com/ellynhan/javascript-vendingmachine-precourse

GitHub - ellynhan/javascript-vendingmachine-precourse

개인적으로 3주차 프리코스의 난이도는 이전 과제의 10배정도는 됐던 것 같다.

 

이전 과제들은 index.html이 만들어져 있는 상태에서 시작해서 상당히 편리했던 반면,

3주차 프리코스에서는 index.html에는 기본 틀만 있었기 때문에

거의 모든 Dom 구조를 javascript를 통해서 생성해야했다.

이로인해  코드가 많이 복잡해지고 메서드도 15줄이 훨씬 넘어버려서 문제가 생겼다.

 

그래서 이를 해결하기위해 Dom관련으로

컴포넌트화해서 불러오는식으로 작성했다.

 

또 이 3주차 프리코스를 통해 알게 된 점이 localStorage와 dataset이라는 기능이다.

데이터를 저장하기 위해선 쿠키나 세션, 또는 데이터 베이스를 이용하면 된다라고만 알고있는데

localStorage를 이용하면 새로고침하거나 창을 닫았다 켜도 데이터가 유지된다는 것을 알게되었다. 

 

dataset은 사실 잘 완벽히 이해하고 이용하지 못한 것 같다.

그러나 이런 개념이 있다는 것을 알게된 것 또한 배움이었다고 생각했다.

 

난이도가 상당히 있다고 생각했던 과제였기 때문에

주어진 기능을 모두 구현했다는 것에 크게 뿌듯하고 만족했던 한 주 였다. 

 

   4. 프리코스 후기 

고작 3주동안, 주어진 요구사항에 맞춰서 스스로 진행하는 과제였음에도 불구하고 

정말 많이 성장했다고 느꼈다. 

 

생각보다 요구사항 자체도 상당히 체계적이었기 때문에

스스로 공부하는데 큰 지표로서 작동했다.

 

나는 프리코스를 시작하기 전에는 JS는 잘 모르는 초보였다고 할 수 있는데

프리코스를 끝내고서는 '나는 JS를 할 수 있다'하는 생각과 자신감이 강하게 생겼다.

 

그리고 10개월간의 우아한테크코스 과정을 거치면 

얼마나 성장할 수 있을 지를  계속해서 꿈꾸고 기대하게 만드는 3주였던 것 같다.

 

이런 지원과정 & 교육과정을 만든 분들이 새삼 멋있다는 생각이 들었다.  

 

 

🔽 우테코 최종 코딩테스트 후기

https://waytocse.tistory.com/83?category=1003276 

우아한테크코스 4기 프론트엔드 최종 코딩테스트 후기