[패스트캠퍼스] 프론트엔드 부트캠프 한달차 후기✨(4주차)

꾸벅

 

안녕하세요 여러분? 어느덧 패스트캠퍼스 부트캠프 수업을 들은지 한달차가 되었다.

 

지금은 Javascript 1주차 수업 완료 상태!

그 동안 어떻게 지냈는지 짤막하게 나누고자 한다.

 

---

소식 1. 수강생 간 코드 리뷰

저번 HTML/CSS 과제 제출을 하고 나서 편성된 조 안에서 서로 코드 리뷰를 하는 시간을 가졌다.

근데 저는 제가 발견한 오점이 전부인 줄 알았거든요..? 근데 그게 아니더군요...😅

 

코드 리뷰해주신 분들의 의견을 적어보겠다.

 

1. 크로스 브라우징 이슈

 

일단 나는 윈도우 이용자다. 그렇기 때문에 에이.. 뭐 대충 크롬에서 돌아가면 다 잘 돌아가는거 아잉교?? 하면서 크로스 브라우징을 신경쓰지 못했다. (정확히 말하자면 안했다.)

 

근데 맥을 이용하시는 분께서 사파리에서는 grid 속성이 제대로 적용이 되지 않았다고 제보를 해주셨다.

사파리에서 확인한 모습

 

⬇️지난 과제를 확인하려면?⬇️

https://charmming5.tistory.com/102

[메가바이트스쿨] HTML/CSS 클론코딩 과제 후기✨(3주차)

 

 

그래도 이 정도면 괜찮게 하지 않았나? 하고 생각하고 있었던 터라.. 뒤통수 한 대 세게 맞았다.

 

autoprefixer 안 쓸거면 Parcel bundler 왜 사용했니이이이.....

 

여기서 잠깐, autoprefixer란?

 

🔷 벤더 프리픽스(Vendor Prefix)
벤더 프리픽스(vendor prefix)란 크롬, 파이어폭스, 사파리 등 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다.
아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 된다.

🔷 autoprefixer
공급업체 접두사를 각 속성별로 모두 외워 사용하는 것은 거의 불가능하기에 이를 자동으로 진행해주는 패키지가 autoprefixer이다.

$ npm i -D postcss autoprefixer postcss-loader​

 

🔹postcss: 스타일의 후처리를 도와주는 패키지
🔹autoprefixer: 공급 업체 접두사를 자동으로 붙여주는 패키지
🔹postcss-loader: postcss, autoprefixer가 webpack에서 동작할 수 있도록 도와준다.

 

 

앞으로는 프로젝트를 시작하기 전에 내가 어떤 기능들을 사용할 것인지, 이에 필요한 패키지는 무엇인지를 점검하고 설치 후 진행해야겠다!

 

 

2. body width 처리

body {width : 100%}로 viewport를 꽉 채우도록 했다.

여기까진 문제가 없어보이나, body의 하위 요소들도 width를 고정값이 아닌 body의 너비를 따라 비율을 잡은 것들이 꽤 있었다. 그래서 width가 1440px인 desktop이 아니라 다른 기기에서 보게 되면 레이아웃이 깨지는 현상이 일어났다.

 

반응형 레이아웃을 구현하지 않을거라면, 적어도 레이아웃이 깨지지 않도록 width를 구현할 크기에 맞게 꼭 고정 너비를 설정할 것!

 

 

코드를 작성하다 보면 꼬옥 사소한 부분이 내 발목을 잡더라.. ^.^

옛날에는 코드를 빨리 작성하는 것이 좋은 줄 알았는데, 요즘에는 신중하게 작성해야 함의 필요를 느낀다.

내가 작성한 코드가 어떻게 작동할 것인지 예측하는 능력이 필요하고 에러가 발생했을 때 어떤 부분 때문에 그런건지 캐치해내는 능력이 필요하다.

 

---

소식 2. 멘토님의 합류

4주차부터는 현직 프론트엔드 개발자이신 멘토님이 합류하시게 되었다!

 

수강생들의 공부하는 방법과 방향성에 얘기해주시는 시간을 가졌는데, 아주 정신이 번쩍 들었다.

다들 프론트엔드 개발을 공부함과 동시에 취업도 준비를 해야하다 보니, 부트캠프 첫주차부터 다들 사이드 프로젝트, 코딩테스트에 관심이 많으셨다. 나 역시도 그랬다. 자바스크립트 이론은 어느 정도 아니까, 실제로 문제를 풀면서 자바스크립트 다루는 능력을 키워가면 좋지 않을까? 하는 마음과 동시에 취업을 준비해야하는데 면접보다도 코딩 테스트가 더 높은 벽으로 느껴져 막막한 마음에 코테 입문 문제를 매일 풀었다. 거의 하루에 두 시간은 할애한 듯..?

 

수강생들 : 와아!!!!! 코딩테스트!!!! 코딩테스트를 연습하자!!!

 

 

멘토님 : 그거 아니야 애들아!!!!!!!!!!

 

 

개발자가 되기 위한 공부가 아니라 좋은 개발자가 되기 위한 공부를 해라.

 

자바스크립트를 사용해서 UI, DOM을 조작할 생각을 해야지 코딩테스트를 준비하려 하면 안된다.

알고리즘(최적화)은 일단 구현이 가능한 뒤에 생각해야 할 문제이다.

 

아직 부트캠프 초반인데 왜 다들 기능 구현보다 코딩테스트에 매달리는지 모르겠다.

실제 실무 능력을 길러야지 취업을 위해 공부하는 방향은 잘못된 것이다.

 

라며 답답해하시며 아주 따끔하게 혼내주셨다.

 

혼나야 정신차린다는 말은 나를 두고 한 것인가...✨

과제를 하면서 필요한 기능을 구현하는 방법을 제대로 알지 못해 계속해서 구글링하면서, 코딩테스트 준비하겠다고 나대고 있었다.

아무리 코딩테스트 만점을 받는다 해도 실무에서 기능 하나 제대로 구현 못한다면 그게 무슨 소용이 있을까.

 

프론트엔드 엔지니어링을 통해 사람들이 더 나은 삶을 살 수 있기를 원한다면서 그에 필요한 것들을 공부하지 않으면서 어떻게 그것을 실현하겠다는 것인가.

 

멘토님의 조언 덕분에 어떻게 공부해야할지에 대한 방향성을 다시 세울 수 있게 되었다.

그래서 이번 자바스크립트 과제가 끝나면 스스로 자바스크립트 토이 프로젝트를 계속 만들어볼 예정이다.

어떤 기능을 사용했는지 기술하는 포스팅을 작성하려고 하니, 다들 많관부!!

(엉망진창일 수 있음. 나아중에서야 포스팅 올라올 수도 있음 주의)

 

---

소식 3. 자바스크립트 과제 ing...

HTML/CSS 과제가 끝나자마자 바로 그 다음 주에 새로운 과제가 나갔다.

바로 The Open Movie Database API를 이용해서 영화 검색 사이트를 만드는 것!

 

음.. 메가바이트스쿨 수업을 들으면서 느꼈던 것은 강하게 키운다! 였다. ㅋㅋㅋ

항상 수업을 시작함과 동시에 과제를 주신다. 그러면서 온라인 강의와 검색을 통해서 어떻게 이걸 구현할 수 있을지 스스로 습득하게 하고 직접 몸으로 부딪히면서 코드에 대해서 이해하게 한다.

마치 새끼를 독수리답게, 튼튼하게 키우는 독수리의 양육 방식 같달까..✨

 

그래서 비전공자이신 수강생분들은 과제 때문에 많이 힘들어하시기도 했다.

실제로 나도 HTML/CSS 클론코딩을 몇 번이나 해봤는데도 적지 않은 시간이 들었기에..

 

아직 제대로 배우지도 않았는데 과제 내주는 건 조금 빡세지 않나라는 생각이 드는 동시에 오히려 좋아! 라는 생각도 들었다.

머리에 든게 적어서(...) 코드를 짜다가 막힐 때 검색을 하다보면 필시 영어로 된 문서를 만나게 된다.

번역도 보고 하지만(...)  그래도 MDN 문서랑 조금씩 친해지는 중!

그리고 기능을 구현할 때 이렇게 하면 될까? 저렇게 하면 될까? 하면서 코드를 수정하면서 결국에는 기능을 구현해낸다.

그 때의 희열이란...✨ 그리고 몸소 경험해본 것이라서 다음에 비슷한 기능을 구현할 때에도 정확하게는 기억 안나도 아 대충 이런 느낌이였는데~ 하는 감을 잡을 수 있었다. 

 

그리고 헷갈리는 용어와 문법을 다시 짚고 넘어갈 수 있었다.

요소에 class를 부여할 때, div.classList.add("hello")인데 계속 div.className.add("hello") 이러고 있질 않나, 퍼블리싱 할 때는 jQuery를 사용했어서 계속 바닐라 자바스크립트 사용 중인데도 jQuery 문법을 사용하지 않나... 대환장파티였다.😅

 

아직 과제 진행 중인데, 후... 자바스크립트 기능 구현에 대해 포스팅할게 좀 많다.. ^__^

 

 

아직 계속 작업 중이다! 한 번에 결과 20개 이상 출력하기, 더보기 버튼 대신 무한 스크롤 기능 구현하기를 목표로 코드를 더 작성 중! 완성되면 그 때 또 후기 남기겠습니다...ㅎ

 

 

---

 

 

느낀 점 :
하기 싫은 순간도 버텨내는 사람이 끝내 원하는 것을 쟁취할 수 있다.

 

공부를 하다보면 진짜 강의듣기 싫어서 미쳐버릴 때가 가끔 있다.

예를 들어 운영체제라던지.. 운영체제라던지... 운영체....ㅈ....

 

뿌애애애앵 듣기 싫어

 

울며 겨자먹기 식으로 꾸역꾸역 하루에 2강씩 듣고 있다. 들으면서도 이게 뭔 말이여~ 싶기도 하다.

코드를 짜다 막힐 때도 마찬가지이다. 남들은 쉽게 하는 것 같은데 나 혼자 한 부분에서 끙끙거리고 있을 때, 괜히 침대에 눕고 싶고 자괴감이 들고 소질이 없는걸까 하는 생각도 든다.

 

그런데, 그 고비를 넘겨야 비로소 자질을 갖출 수 있다. 고비를 넘겨야 앞으로 펼쳐질 여러 상황들을 이겨냄은 물론 내가 내 자신을 컨트롤할 수 있게 되며 무너지지 않을 수 있다.

 

그렇기에 남들하고 비교하는 것이 아니라 어제의 나보다 좀 더 나은 오늘의 내가 되는 것을 목표로 하고 있다!

속도는 느리더라도 걷는 것을 포기하지 않으면 끝내 마라톤을 완주할 수 있듯이, 남들보다 더 오랜 시간이 걸리더라도 공부하는 것을 멈추지 않으면 언젠가는 주니어 프론트엔드 개발자가 될 수 있지 않을까? ㅎㅎ

 

이번 한 주도 함께 하는 모든 분들 화이팅입니다!! ㅎㅎ

남은 6개월도 아자아자 화이팅!!