프론트엔드 공부할 때 가장 많이 하는 실수 6가지와 공부 방법

 

제가 프런트엔드 개발 공부할 때 가장 많이 하는 실수 6가지와 공부 순서 공부 비중 강의 추천까지 깡그리 본 영상에서 말씀드릴 테니 끝까지 시청하시면 분명 도움이 되실 겁니다. 요새 프런트엔드 개발을 어떤 순서로 또 어떤 방향으로 공부해야 할지 막막해하시는 분들이 참 많은 것 같습니다. 제가 정말 많이 본 망하는 케이스 중 하나가 HTML CSS 자바스크립트를 대충 훑고 바로 타임 스크립트나 리액트로 넘어가는데 이해 안 되니까 그냥 무지선 클론 코딩하는 경우입니다. 이렇게 되면 결국 실력 하나도 안 늘거나 결국 포기하는 경우가 대다수입니다. 제가 강조드리고 싶은 거는 초심자분들은 방향만 잘 잡고 하지 말아야 하는 것들만 주의하면 100% 성공합니다. 그럼 바로 흔히 하는 실수 6가지를 바로 말씀드리겠습니다.

 

흔히 하는 실수 첫 번째는 웹부터 공부하지 않고 바로 HTML CSS 자바스크립트부터 공부하는 경우입니다.

 

아니 당연히 이것부터 공부해야지 무슨 소리야라고 할 수 있겠지만 누가 이렇게 커리큘럼을 짠 건지 모두가 하나같이 HTML CSS 자바스크립트 이 순서대로 공부를 하고 있더라고요. 제가 개발 공부하시는 분들께 매번 말씀드리는 내용은 기술은 항상 어떠한 문제를 해결하기 위해 등장했다입니다. 기술이 등장하기 전에 어떤 문제가 있었고 이 기술은 그 문제를 어떤 식으로 해결했는지 이해하는 것이 그 기술의 본질을 이해하는 것입니다. 본 영상을 보시는 분들은 hml CSS 자바스크립트를 처음 들으시는 분은 아마 없을 거예요. 그래도 한 번쯤이라도 타이핑은 해보셨을 거라 믿습니다. 여기서 제가 묻고 싶은 거는 HTML만 있었을 때는 어떠한 불편함이 있었을까요? 또 이 문제를 CSS는 어떻게 해결했을까요? HTML과 CSS만 있었을 때 어떠한 불편함이 있었고 이를 자바스크립트는 어떻게 해결했을까요? 이것부터 공부하고 코딩을 시작하신 분은 매우 드물 겁니다. 

 

이런 것들이 왜 등장했고 어떤 문제를 해결하려고 했는지 이해하려면 무조건 웹을 알아야 합니다. 웹을 공부하다 보면 hml CSS 자바스크립트가 왜 필요할 수밖에 없었구나를 이해하실 수 있습니다. 하지만 웹이 추상적인 개념이다 보니 초심자분들은 웹을 어디까지 공부해야 할지 막막해하실 것 같은데요. 그래서 제가 다음 질문들을 준비해 봤습니다. 저는 다음 8개의 질문에 답할 수 있으면 HTML CSS 자바스크립트를 배울 준비가 되었다고 생각합니다. 

 

 

 

 

첫 번째 웹이란 무엇인가 두 번째 웹은 왜 탄생하였는가 세 번째 초기의 웹 페이지는 어떤 형태였는가 네 번째 웹에서 웹 브라우저는 무슨 역할을 하는가 다섯 번째 tml의 약자는 무엇인가 여섯 번째 하이퍼텍스트란 무엇인가 일곱 번째 CSS는 어떤 문제를 해결하기 위해 등장한 것인가 여덟 번째 자바스크립트는 어떤 문제를 해결하기 위해 등장한 것인가 솔직히 이거 각 잡고 공부하면 2~3일 이내에 끝난다고 생각합니다. 이 질문에 답을 하기 위해 공부를 하고 HTML CSS 자바스크립트 강의를 듣는 것과 이걸 공부하지 않고 들었을 때 와닿는 게 정말 다를 겁니다. 왜냐하면 이 질문에 답을 할 수 있다는 것은 hml CSS 자바스크립트의 본질을 이해한 것이기 때문입니다. 그런데 대부분의 학생들은 강의 커리큘럼이 그냥 이 순서대로 되어 있으니 그냥 하니까 하려나 보다라면서 그냥 공부하시는 것 같아서 정말 안타깝습니다. 

 

물론 초심자분들께서는 완전 처음부터 이렇게 본질을 공부하는 게 쉽지 않을 거예요. 하지만 오래 걸리더라도 이렇게 공부하는 습관을 들이다 보면 분명 이 과정이 자연스럽게 빨라지고 체화될 것입니다. 그럼 어떻게 공부해야 할지 막막해하신 분들을 위해서 제가 직접 공부할 때 도움받았던 영상을 참고하세요.

 

WEB

https://opentutorials.org/course/3084 (명불허전 생활코딩님 무료 강의)

 

https://www.youtube.com/watch?v=aY1TCdRWGfU&t=326s (코딩하는 거니님 웹브라우저의 역사)

 

HTML + CSS

https://nomadcoders.co/kokoa-clone (노마드코더 유료강의)

https://opentutorials.org/course/3086 (생활코딩 무료강의)

 

Git

https://www.inflearn.com/course/git-%EA%B0%95%EC%A2%8C-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9 (생활코딩 무료강의)

https://www.inflearn.com/course/%EA%B9%83-%EC%9E%85%EB%AC%B8 (최주호님 무료강의)

https://www.yalco.kr/yalcodic (얄팍한 코딩사전 유료강의)

 

JS https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8 (생활코딩님 무료강의)

https://www.inflearn.com/course/%EB%A0%88%EC%B8%A0%EA%B8%B0%EB%A6%BF-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 (제로초님 무료강의)

 

ES6 https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-es6-%EA%B8%B0%EC%B4%88%ED%95%B5%EC%8B%AC (이룸코딩 무료강의)

https://nomadcoders.co/es6-once-and-for-all (노마드코더 유료강의)

 

 

흔히 하는 실수 두 번째는 HTML CSS 문법을 하나하나 공부하며 외우려고 하는 것입니다. hml 태그 종류만 142개가 있습니다. 5.2 버전에서는 115개만 남았다고 하는데요. 그래도 100개가 넘죠. 이거 다 외우실 건가요? 이거 솔직히 현업 개발자들도 다 모릅니다. 필요할 때 찾아서 적용하시면서 공부하시면 됩니다. 외우지 말고 외워지도록 많은 화면을 구성해 보셔야 합니다. 이것은 앞으로 공통적으로 적용되는 내용일 텐데 코딩을 할 때 절대 문법을 일일이 외우려고 하면 안 됩니다. 

 

꼭 필요한 것들만 숙지하기에도 내 용량이 부족한데 구글링 하면 1초 만에 나오는 것을 굳이 외울 필요는 없습니다. 많이 코딩을 해보면서 체화하고 외워지도록 해야 합니다. 또 그러면 자연스럽게 이런 문법은 별로 안 쓰이니까 좀 지엽적이네 이건 자주 쓰이니까 좀 더 깊게 공부해 볼까 이런 식으로 구분도 되실 겁니다. 이건 앞으로 리액트나 CSS 프레임워크들을 공부할 때도 똑같이 적용되는 내용입니다.

 

세 번째로 많이 하는 실수는 무지성 클롬 코딩입니다. 아까 도입부에서 HTML CSS 자바스크립트를 그냥 쓱 훑고 리액트로 넘어가서 이게 하나도 안 된 상태에서 무지선 클롬 코딩하는 경우가 굉장히 많다고 했죠. 이렇게 무지선 클롬 코딩을 하는 게 공부할 때는 정말 편한데 잘못하면 백수로 계속 편하게 살 수도 있습니다. 프런트엔드 개발자로 입사하면 프로덕트 디자이너가 이렇게 개발해 달라고 피그마로 디자인 시안을 줄 테고 이거 보고 화면 그리고 기능 개발 바로 해야 됩니다. 

 

현업 가면 아무도 코딩 안 해주고 따라 칠 코드도 없습니다. 본인이 스스로 저 화면을 구성하려면 어떻게 짜야하지 계속 고민하고 서치하고 직접 완성하는 연습을 미리미리 하셔야 됩니다. 개발자들은 문제 해결력이 중요하다 이런 말들을 많이 하잖아요. 이러한 과정들이 문제 해결력을 기르는 과정 중 하나입니다.

 

네 번째로 많이 하는 실수는 화려해 보이는 기술을 염탐하는 것입니다. 이건 첫 번째에서도 기술은 항상 어떠한 문제를 해결하기 위해 등장했고 그 문제를 어떤 식으로 풀었는지 이해해야 한다고 말씀드렸죠. 그런데 많은 학생분들이 HTML CSS 자바스크립트에 대한 본질적인 이해도 없이 바로 타입 스크립트나 리액트, 리덕스 엑스프레스, 노드 js NTD 같이 뭔가 화려해 보이고 멋있어 보이는 기술을 공부하려고 합니다. 

 

앞서 말씀드린 타입스크립트나 리액트 등도 마찬가지로 뭔가 기존에 불편한 것이 있었고 이를 해결하기 위해 등장한 것입니다. 이 문제가 무엇이고 이 기술들이 기존의 문제들을 어떻게 해결했는지 이해해야 본질을 이해할 수 있습니다. 그래서 순수한 HTML CSS 자바스크립트로 직접 코딩을 하면서 이렇게 화려한 기술들이 어떠한 불편한 문제를 해결하려고 했는지 몸소 느끼고 공부를 해야 합니다. 거의 다 왔습니다.

 

흔히 하는 실수 다섯 번째는 본인만의 미니 프로젝트를 만들지 않는다는 것입니다. 이 내용은 세 번째 말씀드린 무지성 클롬 코딩을 하지 말라는 얘기에서 계속 고민하고 직접 완성하는 연습을 해야 한다. 이것이 문제 해결력을 기르는 길이다라고 말씀드렸는데요. 라이브러리 프레임워크를 쓰지 않고 순수하게 HTML CSS 자바스크립트로 본인만의 작은 프로젝트를 직접 만들어야 합니다. 

 

그럼 도대체 어떤 프로젝트를 만들어야 하나라고 막막해하시는 분들을 위해서 프로젝트 주제도 직접 추천드리겠습니다. 만들고 싶으신 게 있으면 그걸 그냥 만드시면 됩니다.

 

마지막으로 흔히 하는 실수 여섯 번째는 자바스크립트를 겉핥게 한다입니다. 저는 자바스크립트를 이해하는 것이 프런트엔드 개발의 전부라고 생각할 정도로 굉장히 중요하다고 생각을 하는데요. 앞으로 프런트엔드 개발을 하시면 높은 확률로 리액트를 다루게 될 테고 여기서도 계속 자바스크립트에 콜백 프로미스 에이싱크 어웨이트 등의 개념들이 계속 등장합니다. 충분한 시간을 투자해서 자바스크립트의 기초를 다져놓으면 이후에 프런트 엔드 공부하실 때 정말 수월하실 겁니다.

 

이렇게 하지 말아야 할 것 6가지를 말씀드렸는데요. 너무 하지 말라는 것만 말씀드리면 좀 그러니까 보너스로 해도 괜찮은 공부도 정리해 드리겠습니다. 

 

첫 번째는 깃입니다. 현업에서는 무조건 누군가와 협업을 해서 개발을 하게 될 텐데요. 깃은 이 협업에 있어 필요한 가장 기본적인 도구입니다. 바로 공부하시지 마시고 자신만의 미니 프로젝트를 만들면서 빚으로 기록을 남기면서 익히시는 것을 추천드립니다.

 

다음은 에그마스크립트 ECMA Script입니다. 에그마라는 기관에서 만든 자바스크립트의 국제 표준화 버전이라고 생각하시면 되는데 각 브라우저 개발사들의 자바스크립트 엔진이 다르고 그에 따른 사용자들의 크로스 브라우징 이슈와 자바스크립트의 파편화를 방지하기 위해서 등장한 개념입니다. 쉽게 말해서 크롬, 사파리, 파이어폭스 등의 브라우저에서도 모두 동일하게 동작하게끔 표준을 정한 것이고요. 이건 너무 깊게 파실 필요는 없고 이런 게 있으니 나중에 현업 가서 쓰인다 정도로 처음 3개월은 가볍게 숙지하는 것을 추천드립니다. 마지막 보너스로 공부 비중까지 말씀드리겠습니다. 저는 웹 5%, HTML CSS 15%, 자바스크립트 80%를 추천드리는데요. 

 

100일이 있다고 하면 5일은 웹 공부, 15일 정도는 HTML CSS, 80일 정도는 자바스크립트에 투자한다고 이해하시면 됩니다. 그리고 다 공부한 후에 자신만의 작은 프로젝트를 직접 만드는 것으로 마무리하시면 됩니다.

 

요약합니다.

 

첫 번째 웹부터 공부하자. 두 번째 HTML CSS 문법 달달 외우지 말자. 필요하면 찾아서 공부하자. 세 번째 무지성 클롬 코딩 금지 본인이 직접 짜는 연습을 할 것. 네 번째 화려해 보이는 기술을 염탐하지 말고 순수한 HTML CSS 자바스크립트부터 공부할 것. 다섯 번째 직접 본인만의 작은 프로젝트를 만들 것. 여섯 번째 리액트를 배우기 전에 자바스크립트를 탄탄하게 공부할 것. 7번째 웹 5% HTML CSS 15% 자바스크립트 80% 정도의 비중으로 공부할 것. 여덟 번째 깃과 에그마스크립트를 함께 공부해도 나쁘지 않다. 

 

자바스크립트 프로젝트 주제 추천

 

날씨 앱: https://youtu.be/MIYQR-Ybrn4?si=47mtmihslEvd7k0L

투두 리스트: https://youtu.be/G0jO8kUrg-I?si=y4uacXHqsILXPb7c

퀴즈 앱: https://youtu.be/PBcqGxrr9g8?si=EQSktbHNoncTJ9_c

나이 계산기: https://youtu.be/_jd6x6Ze9Qg?si=fTytvofgWTK1t6fG

이름 랜덤 생성기: https://youtu.be/zleqgBEFTYM?si=vakmYwBfLRDJvsNy

flame 게임: https://youtu.be/LpAefnb_fbo?si=29Lnkf8SMsNhSl0E