[JavaScript for React] 자바스크립트를 이해하기 위하여

productuidev·2022년 4월 3일
0

VanillaJS

목록 보기
3/11
post-thumbnail

자바스크립트를 이해하기 위하여..

📌 자바스크립트가 어렵게 느껴지는 이유

🔥 매우매우 X 10000 공감되는 이야기 (ㅁㅈㅁㅈ) 🔥

계산기만 조작했기 때문에

오늘은 제가 공부 하면서 느꼈던 것, 먼저 알았으면 좋았을 것들에 대해
이야기를 해보려고 해요. 저처럼 프론트엔드 개발자 준비를 하고 계시는 분들에게 이야기.
JS 입문을 jQuery로 한 것!

보통 공부를 시작하겠다고 하면 배우려고 하는 어떤 것에 대해 기본부터 알고 시작을 하잖아요?
예를 들어 덧셈, 뺄셈을 계산기로 푸는 법을 먼저 배우진 않잖아요. 직접 손으로 풀면서 풀어가는 과정을 알아가잖아요? 근데 제이쿼리는 자바스크립트 라이브러리에요. 자바스크립트 DOM을 매우 쉽고 편리하게 사용할 수 있도록 해주죠. 그러면 자바스크립트를 편하게 쓰게 해준다는 거면 당연히 자바스크립트를 먼저 알아야겠죠? 근데 대부분의 국비수업은 제이쿼리만 가르쳐요. 그것의 바탕이 되는 자바스크립트에 대한 언급이 없죠. 그래서 저는 개인적으로 제이쿼리를 쓰는 내내 계속 혼란스러웠어요. 한마디로 계산기 조작법만 배운거니까
계속 이게 왜 이렇게 되는거지에 대한 과정을 이해 못한거죠.
이게 왜 이런 흐름인건데? ~혼돈의 카오스~
그리고 제이쿼리를 먼저 배우고 자바스크립트를 보잖아요? 그러면 이해가 1도 안돼요
근데 JS를 먼저 배우면 제이쿼리는 그냥 술술 읽힘 (=> Prototype 부분)
또한 보통 제이쿼리를 가르치는 수업에서는 다들 플러그인을 가져다 쓰라고 하시는데 그런 식으로 계속해서 작업을 하다보면 수정에 한계가 생겨요. 수정을 하고 싶어도 건드릴 수 있는 부분이 한정적인 거죠. 그리고 그렇게 플러그인만 가져다 쓰는 식으로 하면 플러그인 떡칠로 되어 있어요.
코드가 지저분 해지는 거고 결국엔 사이트 자체가 무거워질 수도 있어요. 그러니 여러분들은 꼭! 자바스크립트를 먼저 배우시길 바랍니다. 그 후에 라이브러리랑 프레임워크를 공부하셨으면 좋겠어요.
경아 님 GitHub https://github.com/Kyung-A

이 분도 국비지원으로 퍼블리싱 > 프론트엔드개발자가 되신 분인데 어쩌다 개발 브이로그 유튜브를 보다가 보게 되었다. (난 집에서 할 일 없을 때 TV처럼 하루종일 유튜브만 본다...🖥️)
2010년대 초반의 웹퍼블리셔 국비지원 수업 테크트리는 대부분 JS입문을 제이쿼리로 하니까.. (그리고 커리큘럼에 Ajax가 있는데 Skip하는 경우도 있다.. 어차피 실무에서 퍼블리셔들이 다루지 않기 때문인 거 같고 나도 나중에 생활코딩 강의를 보고 알았으니까..)

📌 자바스크립트 역사와 브라우저 실행원리

실제론 운영 업무를 할 때 필요한 메소드만 찾아서 하면 되지만, 내가 개발자 준비를 하면서 공부할 때는 예전과 같은 방식으로 하면 죽도 밥도 안되겠다는 생각이 들었고... 어떻게 하면 원리를 이해해서 코드를 짜는 방법을 익힐까를 고민중이다. (물론 복붙하면 되지만 계속 그렇게 하다간...)

자바스크립트 역사를 통한 개념 정리

  • 모자이크 > 넷스케이프네비게이터(라이브스크립트 > 자바스크립트) > MS 익스플로러 > 파이어폭스
  • 브라우저가 달라도 jQuery, dojo, mooTools 라이브러리를 통해 APIs만 호출하면 알아서 동작할 수 있게
  • 크롬 등장 > ECMAScript5(2009) > ECMAScript6(2015)에서 대부분이 정립됨
  • Babel : transcompiler

  • 엘리코딩 유튜브 역시 설명이 깔끔해서 모르는 거 있을 때 보기 좋음

WebAssembly

(위 영상보다가 처음 들은 개념인데 이런 것도 있군..)

  • 브라우저가 지원하는 언어가 HTML, CSS, JavaScript에서 WebAssembly까지 추가됨
  • WebAssembly : 브라우저에서 실행가능한 새로운 파일 형식 (.wasm)
  • 브라우저가 자바스크립트와 wasm 실행하는 원리

📌 자바스크립트의 동작원리 (Stack, Queue, event loop)

코딩애플 님 유튜브은 마치 야매로 알려주는 것 같지만 이해하고나면 오 이런..!!! 느낌 🤪

📌 자바스크립트 책

이 책은 거의 모던 자바스크립트로 바이블이나 대학교재로도 쓰인다고 하여
나는 종이책으로 살까 하다가 그냥 교보문고 전자책으로 샀다.

  • 아빠가 찬송가 들으려고 보시던 이제는 고물이 된 갤럭시탭8.9
    만화나 각종 문서 PDF 뷰어처럼 쓰고 있다... (어디 이벤트 경품으로 아이패드 당첨됐음 좋겠다...)

내가 종이책으로 사지 않은 이유는... 두꺼우면 들고다니지도 읽지도 않을 거 같아서.

난 디자인을 미술의 점,선,면처럼 배운게 아닌 웹페이지의 HTML으로 디자인하는 방법으로
배웠는데 그래서 디자인을 시작할 때부터 웹퍼블리싱 책을 엄청 샀다.
나중에 웹퍼블리싱>편집디자인기본서>포토샵/일러스트>UI디자인>UX디자인>BX디자인>웹기획..
이런 식으로 실무를 하면서 그때그때 필요한 책들을 사서 봤다.
솔직하게 말해서 다 읽은 것도 다 읽지 못했던 것도 있다.
거기다 이미 난 대학교 때 영문학을 전공했어서 같은 소설이나 희극 한 작품을 분석하려고
4~5권은 기본으로 읽어야 하는게 대부분이었다.. (평론가마다 작품에 대한 분석이 다 다르니까)

보통 흔히들 개발 공부할 때 책을 사서 공부해라라는 말이 많은데,
아마 개발도 동일하게 저자마다 같은 개념이어도 다르게 설명하는 방식은 같을 거다.

그런데 개인적으론 나는 개인적으로 코딩은 책 읽고 공부하는 것은
어떤 깊은 원리나 개념에 대해 정립할 때 아니면 Live Coding이나 강의를 통해 이해하는 방식이 더 나은 것 같다.

그리고 디자이너일 때 디자인 리뷰를 받거나 내 포트폴리오를 설명할 때도 느낀 게
아무리 디자이너가 말대신 시안으로 시각적으로 보여주고 내 디자인에 대해 설명해야 하는데..
가끔 디자이너들 중에도 시안으로는 비주얼적으로 완벽하지만 (설계나 UX적으로)
자신의 디자인에 대해 논리적으로 디자인 이론(UI/UX)이나 서비스 관점에 접목해
이를 설명하라고 할 때 제대로 설명하지 못하는 경우가 많다는 것을 느꼈다..

특히 UI/UX는 웹디자인같이 단순히 눈으로 보기에 예쁘니까요 이런 식으로는 설득하면 안됨.
어떤 식으로 서비스를 분석해 컨셉 도출을 하였고, 사용자 관점에서 어떤 행동유도 하기 위해 특정한 UI를 통해 이러한 넛지를 더 주고 있다 라든가.. 거기다 Data-Driven이면 그에 합당한 정량적인 데이터도 포함해야 할 것이고..
(그래서 제대로 하는 디자인이면 생각보다 눈에 보이는 것 이상으로 논리적인 분야라는 것을 알 수 있다..
오히려 주관적인 듯 해보여도 설득하기 위해 말을 더 잘해야하고)

특히 이론적인 내용을 알고 있어도 구어체로 그것을 설명하는 것에 어려움.

그래서 난 그때의 경험 때문인지 개발 공부를 하면서 단순히 이것을 책에 쓰여진
어색한 문어체로 설명하고 이해하는 것보다 Live Coding이나 강의를 보면서
실제 개발자들이 구어적으로 쓰는 언어에 가깝게 코드나 동작원리에 설명하는 것이
오히려 낫지 않을까? 라는 생각이 들었다.

물론 내가 실제 개발자가 된게 아니고 제대로 코드리뷰나 PR을 해본 건 아니지만 내 판단이 틀릴 수도 있지만, 딱딱한 문어체보다는 논리적이기는 하지만 누구나 들어도 이해하기 쉬운 실생활에 가까운 언어로 개념 설명하기. 이건 마치 10년 넘게 영어를 공부해도 영어회화는 어려운 것과 같은 느낌일거라고 생각했기에...

그래서 난 개인적으로 사람마다 학습 방법이 다르겠지만,

  1. Live coding이나 온라인강의로 먼저 큰 개념 이해
  2. 실제로 코딩이나 실습
  3. 책으로 다시 정리

이런 학습 방법이 더 나에게 맞다고 판단하게 되었다.

결론적으로.. 무슨 원리인지도 모르는데 두루뭉술하게 너무 구어적으로만 이해해도 안되고,
그렇다고 제대로 코드 작성도 못하는데 이론만 빠싹한 것도 좋은 건 아니라고 생각한다.
(특히 위에 경아 님이 말한 것처럼.. 퍼블리셔는 계산기 조작하듯 JS 입문했으니까...)

공부를 하다가 더 깊이 파면 더 효율적이면서도 유용한 학습법을 찾아볼 생각이다.

profile
필요한 내용을 공부하고 저장합니다.

0개의 댓글