10/19 Javascript 문법 6, 개인과제 1

내일배움캠프 오늘 학습 내용

 

• JavaScript 문법 5주차 :closure에 대한 내용 학습
• 5주차 과제 : 숫자를 예측해 맞추는 게임을 구현해보았다. (DOM 사용)
• 개인 과제 : 영화리스트를 구현하기 위해 API를 가져와 json 파일로 html에 출력하는 것까지 성공하였다.

 

closure

 

함수와 그 함수가 선언된 렉시컬 환경의 조합으로 내부 함수에서 외부 함수의 범위에 대한 접근을 제공하는 것을 말한다. 함수를 호출하는 것으로는 scope가 겹치지 않기에 closure를 사용할 수 없고, 함수가 정의될 당시에 내부 함수로서 포함되어 있어야 사용이 가능하다. 이미 끝나버린 외부환경 값을 종료하지 않은 내부함수가 가지고 있을 수 있기 때문에 용이하게 사용할 수 있다.

 

const increase = (function () {
  let num = 0; //inner 함수 외부환경에 있는 num이 된다.

  //closure를 사용하기 위해선 내부함수를 사용해야한다.
  return function () {
    return ++num;
  };
})(); 
//즉시 실행함수이다. increase함수는 increase변수에 할당된 함수의 함수를 반환해 실행하게 된다. 
//즉시 outer는 소멸되기 때문에 num = 0으로 초기화되지 않는다.

console.log(increase());
//외부에서 접근한 값은 소용이 없다.
var num = 100;
console.log(increase());

 

 

5주차 과제

 

랜덤한 숫자를 정하고 숫자보다 높거나 낮음을 알려주며 맞출 때까지 반복하는 동작을 구현한다. 정답을 알려주는 circle을 그리는 함수를 수행하고 나서 그 해당 값을 html에 입력해 화면에 그림을 그린다. 또, 사용자가 입력한 값에 맞게 circle을 그려 사용자가 크기를 비교할 수 있도록 한다.

 

숫자를 입력받아 랜덤한 숫자를 맞추는 게임

 

 

개인과제

 

정해진 API에서 데이터를 가져와 해당 파일을 html 파일로 불러오는 것에 성공하였다. JSON 파일로 각 영화마다 다시 쪼개어 CSS로 카드 형태로 정리하는 작업이 필요할 것이다. 또, 이미지 파일을 같이 불러와 해당 카드에 img url을 넣어 영화 카드를 완성해보는 것이 목표이다. 또, 제목에 따라 해당 영화만 출력해 검색이 가능하도록 만드는 것이 목표이다.