Today I Learned

• JavaScript Ajax, RESPful API, Promise에 대해서 배웠다.
• 알고리즘 문제 해결 전략 책을 샀다. 틈틈히 알고리즘 공부를 해야겠다.

Today I Learned

• JavaScript Event를 연습하기위해서 TodoList를 여러가지로 구현했다.
• Class를 이용해서 구현하는 방법도 알았다.
• Event Listener를 Class의 method로 만들었을 때 해당 메소드의 this는 class의 instance가 아니라 event를 바인딩한 DOM객체가 되는 문제
  • bind로 event listener method에 this를 binding
  • this가 없는 Arrow function을 사용해서 상위 lexical scope, 즉 class의 this를 바인딩하게 하는 방법

Todos 1.0

What is Promise?

자바스크립트는 비동기 처리를 위해서 callback 함수 패턴을 사용한다. 그러나 callback 패턴은 가독성이 나쁘고 에러의 예외 처리가 곤란하다. ES6에서 Asynchronous processing을 위한 패턴으로 Promise를 도입했다.

Promise는 비동기 처리를 하고 Response가 오면 해야할 일을 약속하는 것이다.

REST(Representational State Transfer) API

open API를 이용하기 위해서 문서를 찾아다닐 때 가장 많이 본 단어가 RESTful API이다. REST는 웹의 장점을 최대한 활용할 수 있는 architecture로 처음 소개되었으며 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하는 방법론이다. REST의 기본 원칙에 충실한 서비스 디자인을 RESTful이라고 한다.

1. Ajax (Asynchronous JavaScript and XML)

브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 서버에서 요청받은 페이지(HTML)을 반환한다. 이 때 HTML에서 로드하는 CSS나 JavaScript 파일도 함께 반환한다. 서버에서 웹페이지를 받으면 브라우저는 파일을 렌더링해서 화면에 표시한다. URI이 바뀌면 전체 화면 렌더링을 다시해야해서 화면이 깜빡하는 문제가 있다.

FDS12 Pair Hackaton

오늘 약 5일간 기획하고 준비한 페어 해커톤을 마쳤다. 오전 10시부터 오후 5시까지 약 7시간동안 하나의 결과물을 내는 것이다. 내 생애 첫 해커톤에서 1등을 했다. 오늘은 이론을 공부하지는 않았으나 그것보다 훨씬 더 많은 것을 배웠다.

우선 나는 프로젝트 경험이 적어 개발 능력에 자신감이 없는 편이었는데 이번 해커톤으로 자신감을 많이 얻었다. 그리고 무엇보다 내가 생각한대로 기능을 구현하는 것이 너무나 재미있었다.
삐그덕거리던 프로그램을 차근차근 고쳐서 모든 게 맞아 돌아가게끔 할 때의 쾌감이란! 확실히 개발은 재미있다. 고통 속에서 느끼는 희열이 있다. 그리고 기획이 얼마나 중요한 것인지도 알았다. 비지니스적인 시야가 넓은 팀원의 주제 제안과 꼼꼼한 기획 덕에 완성도 있고 의미 있는 프로젝트를 할 수 있었다. 또한 디자인적인 감각을 키우는 것도 내가 해야할 공부 중 하나라는 것을 깨달았다.

두번째로 아직 내가 가야할 길이 멀다는 것을 배웠다. 무언가 엄청나게 멋있(어 보이는)는 것을 만들기에 시간은 한없이 모자랐다. 마음이 조급해지니 중간에 혼잣말로 징징거리기도 많이 했다. 결국 프로젝트는 원하던 것의 80%정도밖에 구현하지 못했다. 아쉽지만 분명히 미래의 나에게 좋은 밑거름이 될거라 믿는다.

마지막으로, 나는 발표를 할 때 긴장을 참 많이 한다. 막상 앞에 나가서 무슨 정신인지 여유로운 척 농담을 하고 발표를 했지만 끝나고 돌아와 앉는 순간까지 손과 다리가 떨리는 게 느껴졌다. 오늘도 발표를 하고 들어왔는데 어떻게 한 건지 정신이 하나 없었다. 그런데 같은 스쿨 분들이 안 떤 것처럼 느껴졌다고, 잘 했다고 말해줘서 많이 안심했다. 내가 막연하게 무서워하는 것들. 막연하게 내가 못 할 거라고 단정지었던 것들은 사실 내가 충분히 해낼 수 있는 거였다. 오늘의 경험을 잊지 않고 앞으로 나아가기 위해 기록한다.

✨Team Doctor on Devpost

✨Team Doctor Github

1. Event

브라우저의 이벤트는 사용자의 동작에 따라 어느 시점에 발생할 지 미리 알 수 없고 순서 또한 예측할 수 없다. 브라우저에서는 이벤트를 감지할 수 있고 이벤트 발생 시 통지를 해서 사용자와 웹 페이지의 Interaction이 가능케 한다.

이벤트 발생시 실행될 함수를 등록할 수 있다. 이벤트와 함수를 연결하면 함수는 이벤트 발생 전에는 실행되지 않다가 이벤트가 발생하면 실행된다. 이런 함수를 Event Handler 또는 Event Listener라고 한다.

Today I Learned

• JavaScript의 Class, super 키워드에 대해서 공부했다.
• 해커톤 자료구조를 설계하고 사용할 카카오맵 API를 테스트했다.
• JavaScript Event에 대해서 읽어보았다.

1. DOM (Document Object Model)

• DOM : DOM Tree + DOM API

  • 브라우저의 렌더링 엔진이 웹 문서를 파싱해서 메모리에 저장한 결과물

  • 즉, DOM이란 모든 element와 element의 attribute, text를 각각의 객체로 만들고 이 객체들을 부모-자식 관계를 나타낼 수 있는 트리 구조로 구성한 것

  • DOM은 자바스크립트를 통해 동적으로 변경할 수 있고 변경된 DOM은 브라우저 렌더링에 반영된다.

  • DOM API(Application Programming Interface) : 웹 문서의 동적 변경을 위해서 DOM에 접근할 수 있도록 제공하는 자바스크립트 객체의 프로퍼티와 메소드의 집합. DOM API를 통해서 DOM에 접근하고 변경해서 웹 페이지를 동적으로 변경할 수 있다.

원래 모듈화를 하거나 파일을 분리하면 각 모듈, 파일 별로 개별적인 스코프를 가져야하는데 자바스크립트는 파일을 분리해서 함께 사용할 때 하나의 전역 스코프만을 가진다. 즉, 여러 개의 js 파일에서 식별자 명이 겹칠 경우 의도한 바와 다르게 동작할 수 있다.

이전에는 각 파일을 IIFE(Imediately Invoked Function Expression)로 감쌌으나 근본적인 해결책은 아니다. 특정 클래스나 함수를 외부에 노출시키고 싶지 않을 때는 클로저를 사용해서 선택적으로 노출했다.

ES6에서 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능이 추가되었다. script tag에 type="module" 어트리뷰트 추가시 해당 자바스크립트 파일은 모듈로 동작하며 파일 스코프를 가진다. 모듈화된 자바스크립트 파일을 사용할 때는 확장자 명을 .mjs라고 한다.

그러나 아직까지 문법이 엄격하고 구형 브라우저(IE 등)에서는 ES6 모듈을 지원하지 않는 문제가 있다. 그러니까 아직은 바벨 / 웹팩 등을 사용해서 개발해야한다.