TIL37 [4주차] 20220429 엘리스 TIL (JavaScript 심화) 01. 행맨 게임 만들기 01. 행맨 게임 소개 • 알파벳을 하나씩 선택하여 주어진 기회 안에 단어를 맞추는 게임. • 초기에는 단어의 길이와 공백 정도의 정보만 주어진다. • 알파벳을 하나씩 선택할 때마다, 그 알파벳이 들어 있는 위치가 드러난다. • 단어에 들어 있지 않은 알파벳을 선택하면 점차 행맨이 완성된다. • 총 7번의 기회, 혹은 60초 안에 단어를 맞추지 못하면 패배한다. 02. 행맨 게임 코드 구조 - 상태 관리 상태관리란? 행맨 게임에서는 남은 시간, 남은 기회, 선택한 알파벳, 게임의 진행 상태 등의 데이터를 저장하고, 그 정보에 따라 필요한 UI를 화면에 그려야 한다. 이때, 데이터를 앱의 상태라 한다. 앱의 상태는 하나의 State 객체로 관리한다.(이 State 객체는 불변한다... 2022. 6. 30. [4주차] 20220428 엘리스 TIL (JavaScript 심화) 04 async / await async / await Promise를 활용한 비동기코드를 간결하게 작성하는 문법 (syntactic sugar 라고도 함) async/await 문법으로 비동기코드를 동기코드처럼 간결하게 작성할 수 있다. async 함수와 await 키워드를 이용한다 await 키워드는 반드시 async 함수 안에서만 사용해야 한다 async 로 선언된 함수는 반드시 Promise를 리턴한다 async 함수 async function asyncFunc() { let data = await fetchData() let user = await fetchUser(data) return user } async 함수는 function 키워드 앞에 async를 붙여 만든다 async 함수 내부에서.. 2022. 6. 30. [4주차] 20220427 엘리스 TIL (JavaScript 심화) ** JSON 프로퍼티의 키는 문자열 큰 따옴표로 묶어줘야 한다. * db.json 의 내용을 변경한다고 바로 반영되지 않는다. ** json 저장소 생성 명령어(port 주소 조정해서 생성) npx json-server --watch -p 3004 db.json -p 3004 부분이 꼭 들어가야한다. 3004 부분이 주소 조정 부분 *** promise hell (callback hell) fetch('http://localhost:3004/topics') .then(function(response){ return response.json(); }) .then(function(topics){ let firstId = topics[0].id; fetch('http://localhost:3004/topic.. 2022. 6. 30. [2주차] 20220412 엘리스 TIL (JavaScript) ** for문 배열 순회, for ... of 반복문 https://celltong.tistory.com/entry/JavaScript-%EB%B0%B0%EC%97%B4-%ED%95%98%EB%82%98%ED%95%98%EB%82%98-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0-for%EB%AC%B8-for-of-forEach?category=992498 https://bigtop.tistory.com/59 [JavaScript] 자바스크립트 for...of 반복문 이해하기 for.. of 반복문이란? for.. of 반복문은 일반적으로 배열에 많이 사용되는데, 배열의 요소 개수만큼 반복하고, 반복 때마다 각 요소들을 사용할 수 있는 변수가 주어지는 독특한 반복문이라고 할 수 bi.. 2022. 6. 30. 이전 1 2 3 4 5 6 7 ··· 10 다음