(TIL) 2020-07-24 기록

오늘 한 일

• 프로토타입에 대해 이 글과 이 문서를 참고하여 배웠다. 자바스크립트는 프로토타입 기반 객체지향 언어이다. 물론 ES 2015에서는 class 예약어가 생기긴 했지만 어쨌든 모든 것은 프로토타입 기반이다. 어떤 객체를 생성하면 그 객체는 프로토타입을 가진다. 프로토타입에는 빈 객체가 미리 할당되어 있는데 여기에 어떤 값이든 넣어두면 new 예약어로 생성자 함수를 실행했을 때 이 객체는 프로토타입에 저장돼 있던 객체를 또 프로토타입 객체로 가지게 된다. 프로토타입을 이용해 상속을 할 수도 있는데 어떤 객체를 생성할 때 그 프로토타입에 다른 객체를 넣어주면 그 다른 객체의 프로토타입까지 모두 가져오게 된다. 이로써 부모의 프로토타입 내의 데이터에 접근할 수 있는 것이다. JS에서는 이런 식으로 프로토타입이 꼬리에 꼬리를 물고 이어지는데 이것을 prototype chain이라고 하고 이것은 최상위 객체인 Object까지 올라가 prototype이 최종적으로 null이 될 때까지 이어진다.
• 이 문서를 참고하여 Shadow DOM에 대해 공부했다. Shaodw DOM은 일반적인 DOM과 같은 것이지만 캡슐화 되어 있다는 점이 다르다. 그래서 이 DOM 안에서 일어난 DOM Manipulation은 이 Shadow DOM 안에서만 효력을 발휘한다. 외부에서 접근하게 할 수도 있고 못하게 할 수도 있다.
• Strict Mode에 대해 공부하기 위해 이 문서를 참고했다. 이것은 웹 자체의 모드라기보다는 개발을 위한 모드라고 볼 수 있는데 좀 더 엄격한 문법 검사를 한다. 실수를 에러로 throw 하도록 바꾸고 몇 가지 일반 모드에서는 넘어가던 것들을 에러를 띄워줘서 안정성과 보안을 높이게 해준다.
• Git의 기본적인 사용법에 대해 배웠다. 이 사이트가 아주 간단명료하게 잘 설명해둔 것 같다. 그리고 Git의 branch 관리법에 대한 것도 배웠다. 이 글을 보면 branching model에 대해서 논하고 있는데 이걸 진작에 알았더라면 중구난방으로 push 하고 pull 하면서 git의 효용성에 대해 의문을 품던 무식한 내 과거가 조금은 바뀌지 않았을까 생각해본다 ㅜㅜ
• 기본적인 웹 보안에 관한 글들을 쭉 읽어보았다. (CORS,CSP, OWASP Vulnerability)
• npm에 대해서는 원래 알고 있었으나 npm script가 뭔지는 몰랐다. 이 글을 보면 단순히 npm으로 무언가를 할 때 실행할 터미널 명령어를 정해주는 것이다. 사실상 쉘 스크립트와 문법 자체는 거의 비슷하다고 보면 될 것 같다.
• 웹팩에 대해서도 배웠다. 복잡한 모듈 간 의존성 문제를 하나의 번들로 묶어 해결해주는 번들러인데 정말 편한 것 같다. 이것을 이용하면 js 파일 뿐 아니라 css, html, 이미지 파일 같은 것들도 하나의 번들로 묶어 배포할수 있다. 이런 개념은 좀 생소해서 여러 가지 글들을 읽어봤다. (글 1, 글 2, 글 3)
• 다음 단계로 react.js의 공식 튜토리얼을 진행했는데 바닐라 JS와 조금 다른 점이 있는 것 같아 이해가 안 되는 부분이 있다. 갑자기 마크업 언어가 JS 내에 튀어나오질 않나… 그래서 다음 주에는 이 영상을 보면서 React.js에 대해 배워봐야겠다. 리액트 코드를 타이핑하면서 느낀 점인데 플러터가 정말 웹과 리액트에 영향을 많이 받은 것 같다.

다음 주 할 일

• 기본 UI가 완성되지 않는다면 계속 프론트엔드 로드맵을 따라가봐야겠다.
• 리액트가 좀 익숙해지면 회사 홈페이지를 만들 겸 해서 웹 프로젝트를 따로 시작할 것이다.