프론트엔드 멘토링 2기를 시작하며

0. Introduction

시작하게 된 계기

프론트엔드 멘토링 1기의 기록들

• 2022년 10월 17일부터 2023년 7월 23일까지, 거의 9개월 가량 진행된 멘토링이 막을 내리게 되었다. 함께 하던 멘티분은 진로를 프론트엔드 개발자가 아닌 본업으로 돌아가고자 하셨고, 코딩은 취미 쪽으로 돌리고자 하셨다. 정말 열정적으로 참여해주시고, 질문도 잘 해주시고, 회고도 정성스럽게 남겨주셨는데 아쉬웠지만 종료를 해야만 했다.
• 나는 새로운 멘티를 찾고 싶었다. 누군가를 가르치기 위해서 준비하는 과정에서 공부가 많이 필요하고, 설명하면서 개념이 선명해진다. 이렇게 공부했을 때 가장 오래 남는다는 것을 알고, 또 무엇보다도 혼자 공부하는 것보다 같이 공부할 때 더 시너지가 나고 재미도 있다. 또한 내가 다른 사람을 도울 수 있다는 효능감도 얻을 수 있다.
• 내가 기획한 오프라인 면접 스터디에 참여하신 연지님에게 멘토링 제안을 드렸다. 연지님은 프론트엔드 개발자로 3년간의 경력이 있지만, JavaScript ES5 문법으로 jQuery를 사용하셨기에 JavaScript의 동작 원리나 React를 배우고 싶어하셨다. 연지님은 내가 과거에 진행했던 멘토링에 대해서 들으시고 흔쾌히 멘토링에 참석하고 싶으시다는 의사를 밝히셨다.

목표

8월 21일 월요일 오전 9시, 본격적인 멘토링 전에 멘토링의 일정과 목표, 규칙을 정하는 시간을 가졌다.

• 핵심 목표는 JavaScript의 동작 원리와 문법 대해서 제대로 이해하고 활용할 줄 아는 프론트엔드 개발자가 되는 것이다.
  • 지난 번 멘토링에서는 실행 컨텍스트나 비동기 부분 등 다루지 못한 부분이 있었다. 이번에는 당시에 다루지 못했던 부분까지 모두 깊이 있게 다뤄볼 것이다.
• JavaScript Deep Dive 책을 처음부터 끝까지 정독하며 자바스크립트에 대한 개념을 확고하게 다질 것이다.
• JavaScript로 직접 Web Application을 구축해 보며 숙련도도 높여볼 것이다.

진행 방식

• 멘토링은 7주(8/24~10/5)간 매주 목요일 2시간 오프라인으로 만나서 진행함
• 매주 멘티에게는 과제가 주어짐
• 약 1시간은 과제 리뷰, 1시간은 멘티가 준비한 수업으로 진행
• 멘토링 후 멘토와 멘티 모두 회고를 블로그에 남기기

 

1. 과제 리뷰

1주차 멘티 과제

• 황준일 개발자의 Vanilla JavaScript로 웹 컴포넌트 만들기 글을 정독하고 이해해보고, 블로그에 정리 및 코드 흐름 설명하기
  • 멘티가 정리한 블로그 글

리뷰 내용

• 멘티분은 아직 JavaScript의 기본 문법에 대해서 잘 모르시는 부분이 많아서, 코드를 이해하시는 데 어려움을 겪고 계셨다. 웹 컴포넌트를 만드는 것이 아직 멘티분에게 어려운 과제였고, 기초적인 문법부터 짚고 넘어가는 시간을 가졌다.
• 오늘은 아래와 같은 JavaScript 개념에 대해 설명드렸다.
  • 이벤트 버블링 & 이벤트 위임
  • this, this binding
  • module (export, import)
  • 생성자 함수
  • class
  • 식별자

 

2. 오늘의 수업: JavaScript 큰 틀에서 보기

An Introduction to JavaScript

자바스크립트의 문법을 파헤쳐보기 전, 이 언어에 대해 알아보자! JavaScript로는 무엇을 할 수 있으며, 다른 기술들은 JS를 어떻게 활용하고 있을까?

• 자바스크립트는 태초에 무엇을 위해 만들어진 언어일까?
  • 바로 웹 페이지에 생동감을 불어넣기 위해서! 동적으로 만들기 위해!
  • 정말 빠르게 만들어졌다. 1995년, 단 10일 만에 만들어졌다.
• script란 무엇일까?
  • 자바스크립트로 작성한 프로그램
  • script는 웹 페이지의 HTML 안에 작성할 수 있다.
  • script는 웹 페이지를 불러올 때 자동으로 실행된다.
    • 즉, 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성이 가능하고, 실행도 가능하다!
      • 하지만 사실 자바스크립트도 컴파일 과정을 거치는데.. 조금 복잡하니 이번에는 패스!
      • 이 블로그를 참고해보자.
• compile이 무엇일까?
  • 컴퓨터는 0과 1로 된 명령을 이해할 수 있고, 실행한다.
    • A라는 문자를 입력하더라도 컴퓨터는 이것을 0, 1로 이루어진 이진 코드로 해석한다.
    • 이 A라는 문자를 해석하는 것이 바로 컴파일러이다.
  • 정리하자면 사람이 이해하는 언어를 컴퓨터가 이해할 수 있는 언어로 바꿔주는 것이 컴파일이다.
  • 참고 블로그
• 왜 이름이 JavaScript일까?
  • 처음 자바스크립트가 만들어졌을 때는 LiveScript였다.
  • 그런데 당시에 Java 언어의 인기가 좋았다.
    • JavaScript를 Java의 동생 격으로 홍보하면 잘 홍보되겠지?라는 생각
  • 하지만 언어 자체는 정말 다르다. 아무런 연관이 없다.
  • JavaScript는 꾸준히 발전하며 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어가 되었다.
• JavaScript는 어디에서 실행할 수 있을까?
  • Browser
    • JavaScript virtual machine이라는 엔진이 내장되어 있음
  • Server
    • Node.js
  • JavaScript engine이 들어 있는 모든 디바이스
    • V8 - Chrome, Opera에서 쓰임
    • SpiderMonkey - Firefox에서 쓰임
• JavaScript Enigne은 어떻게 동작할까? (간단히)
  • 프론트엔드 엔지니어가 알아야 하는 것, 제대로 알려면 정말 오래 걸림. 기본만 알고 넘어가보자!
  1. 엔진이 script를 읽는다.(parsing)
  2. 읽어 들인 script를 기계어로 전환한다.(compile)
  3. 기계어로 전환된 코드가 실행된다. 기계어로 전환되었기 때문에 실행 속도가 빠르다.
  • 엔진은 프로세스 각 단계마다 최적화를 진행한다.
    • 심지어 컴파일이 끝나고 실행 중인 코드를 감시하면서, 이 코드로 흘러가는 데이터를 분석하고, 분석 결과를 토대로 기계어로 전환된 코드를 다시 최적화하기도 한다.
    • 이런 과정을 거치면 스크립트 실행 속도는 더 빨라진다.

Can & Can’t

What can in-browser JavaScript do?

Modern JavaScript is a “safe” programming language.

• 자바스크립트는 왜 안전한 프로그래밍 언어라고 할까?
  • 메모리, CPU 같은 저수준 영역의 조작을 허용하지 않기 때문이다.
  • 애초에 이런 접근이 필요하지 않은 브라우저를 대상으로 만든 언어이다.

JavaScript로 할 수 있는 것은 실행 환경에 따라 다르다.

• Browser 환경
  • 웹 페이지 조작
    • 페이지에 새로운 HTML 추가하기
    • 기존 HTML이나 스타일 수정하기
    • 마우스 클릭, 포인터 움직임, 키보드 눌림과 같은 사용자 행동에 반응하기
  • 클라이언트, 서버의 상호작용
    • 네트워크를 통해 원격 서버에 요청을 보내거나 파일 다운로드, 업로드하기 (AJAX, COMET과 같은 기술 사용)
    • 쿠키 가져오기, 설정하기, 사용자에게 질문을 건네거나 메시지 보여주기
    • 클라이언트 측에 데이터 저장하기(Local Storage)
• Node.js 환경
  • 파일을 읽거나 쓰기
  • 네트워크 요청을 수행하는 함수 지원

What CAN’T in-browser JavaScript do?

• 브라우저는 왜 자바스크립트의 기능에 제약을 걸었을까?
  • 보안을 위해서!
  • 악성 웹 페이지가 개인 정보에 접근하거나, 사용자의 데이터를 손상하는 것을 막기 위해서.
• 웹 페이지 내의 script는 디스크에 저장된 파일을 읽거나 쓰고 복사하거나 실행 시 제약 받을 수 있음
  • 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀 있기 때문
  • 모던 브라우저를 사용하면 파일을 다룰 수는 있지만, 접근은 제한되어 있다.
    • 사용자가 브라우저 창에 파일을 끌어다 두거나, <input> 태그에서 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용한다.
  • 카메라, 마이크같은 디바이스와 상호작용하려면 사용자가 명시적으로 허가해야만 한다.
    • JavaScript가 활성화된 페이지에서 사용자 몰래 웹캠을 작동시켜 수집한 정보를 국가안보국(NSA)과 같은 곳에 몰래 전송하는 것을 막기 위해서이다.
• 브라우저 내의 탭, 창은 서로의 정보를 알 수 없다. (대부분)
  • JavaScript를 사용해서 하나의 창에서 다른 창을 열 때에는 예외가 적용된다. 하지만 이 경우에도 도메인, 프로토콜, 포트가 다르다면 페이지에 접근할 수 없다.
    • 이러한 제약사항을 동일 출처 정책(Same Origin Policy)라고 한다. 이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야 하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 한다. 이 정책 역시 사용자의 보안을 위해서 만들어 진 것이다. http://anysite.com에서 받아온 페이지가 http://gmail.com에서 받아온 페이지 상의 정보에 접근해 중요한 개인정보를 훔치는 걸 막기 위함.
• 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있다.
  • 하지만 다른 사이트나 도메인에서 데이터를 받아오는 것은 불가능하다.
  • 가능하려면 원격 서버에서 명확히 승인을 해 줘야 한다(HTTP Header등을 이용해서) - 이것 역시 보안을 위한 것.
  • 브라우저 환경이 아닌 서버라면 이러한 제약은 없다.
  • 모던 브라우저에서는 추가 권한 허가를 요청하는 플러그인이나 익스텐션 설치가 허용된다.

What makes JavaScript unique?

There are at least three great things about JavaScript:

• Full integration with HTML/CSS.
• Simple things are done simply.
• Supported by all major browsers and enabled by default.

이 세 가지를 모두 지원하는 브라우저 연관 기술은 JavaScript 뿐! 이러한 특징 때문에 자바스크립트는 브라우저 인터페이스를 만들 때 가장 널리 사용되고 있다. 이외에도 서버, 모바일앱을 만드는 것도 가능하다!

Languages “over” JavaScript

자바스크립트 너머의 언어들

• 자바스크립트의 문법(syntax)가 어떤 이들에게는 맞지 않을 수 있음
  • 프로젝트마다 요구사항이 달라서 당연함. 어떤 프로젝트에는 JS가 아닌 다른 언어가 더 찰떡일 수 있다
  • 그래서 최근에 새로운 언어가 좀 많이 등장했는데 이런것들은 브라우저에서 실행되기 전에 JavaScript로 트랜스파일(transpile, convert) 된다.
• 최신 툴을 사용하면 이 트랜스파일을 빠르게 진행할 수 있다. 개발자는 자바스크립트가 아닌 다른 언어로 코딩하고, 이것이 자바스크립트로 자동 변환(auto-converting) 되는 것이다.

Examples of such languages:

• CoffeeScript
  • Syntactic sugar for JavaScript
  • It introduces shorter syntax, allowing us to write clearer and more precise code.
  • Usually, Ruby devs like it.
• TypeScript
  • strict data typing(자료형 명시하기)
  • developed by Microsoft
• Flow
  • also adds data typing but in a different way
  • developed by Facebook
• Dart
  • a standalone language that has its own engine that runs in non-browser environments (like mobile apps), but also can be transpiled to JavaScript.
  • Developed by Google.
• Brython
  • a Python transpiler to JavaScript that enables the writing of applications in pure Python without JavaScript.
• Kotlin
  • a modern, concise and safe programming language that can target the browser or Node.
• There are more.
  • Of course, even if we use one of these transpiled languages, we should also know JavaScript to really understand what we’re doing.

Reference: https://javascript.info/intro

 

3. 필수 참고 자료

JavaScript 번들러로 본 조선시대 붕당의 이해 - 재그지그의 개발 블로그

모듈 내보내고 가져오기

웹 브라우저의 역사

 

4. 다음 주 멘티 과제

• JavaScript Deep Dive 1장부터 15장까지 정독하고 공부 후 테스트
  • 정독하면서 몰랐던 내용, 더 공부해 볼 내용을 블로그에 정리
• 테스트 문항은 멘토가 만들고, 면접 형식으로 물어볼 예정

 

5. 회고

• 저번 멘토링은 100% 온라인으로 진행했었는데, 이번 멘토링은 오프라인으로 진행하니 새로운 느낌이 났다. 확실히 더 생생하고, 전달력도 더 좋아진다는 생각이 들었다.
• 내가 알고 있다고 생각하는 것도 다른 사람에게 설명을 하려고 하면 막상 막히는 경우가 많다. JavaScript의 this에 대해서는 알고 있었지만, this binding에 대해서 구체적으로 설명하려니 막혀서 책을 참고해야 했다. 이 과정에서 바인딩의 의미도 복습할 수 있었다.(바인딩은 식별자와 값을 연결하는 과정, 변수를 선언하는 것은 변수의 이름, 즉 식별자와 확보된 메모리 공간의 주소를 바인딩하는 것. this 바인딩은 this와 this가 가리킬 객체를 바인딩하는 것! 이것도 나중에 한 번 제대로 정리를 해야겠다.)
  • 그건 제대로 알지 않기 때문이다. 대충 알기 때문에 안다고 착각하는 것이다.
  • 또 평소에 JavaScript의 동작 원리에 대해서 말하는 기회가 많지 않기 때문일 수도 있다. 언급이 많이 되지 않다 보니 점점 잊혀지게 되고, 그러다보면 설명하기도 어려워진다.
  • 개발에 관해서 계속 이야기할 수 있는 자리를 더 마련하고, 활발하게 이야기해야겠다고 느꼈다.
• 멘토링이 끝나는 7주 후에 지금의 나를 돌아봤을 때, ‘와 정말 성장했다’라는 생각이 들 수 있을 정도로 좋은 멘토링이 되었으면 좋겠다.