봉보로봉봉

CSS Diner CSS 선택자를 학습할 수 있는 게임 CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 12번 13번 16번 19번 22번 나중에 다시 풀어보기 해답 CSS Diner 완료(답안/요점정리) (1/3) CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS selector를 velog.io Flexbox Froggy 플렉스 박스를 학습할 수 있는 게임 Flexbox Froggy A game for learning C..

AJAX (Asynchronous Javascript And XML) 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술 XMLHttpRequest 객체를 사용해 구현하는 비동기 통신 방법 요청 / 응답 과정을 통해 불필요한 부분까지 처리하지 않는다 필요한 부분만 별도로 요청하고 응답 받아 처리할 수 있다 불필요한 대역폭 감소가 가능 > 비용 절감 페이지를 새로고침 하지 않고도 필요한 데이터만 받아와서 내용을 업데이트 할 수 있음 = 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음 = 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있음 (예 : 티켓예매 사이트, 검색어 자동 완성) >장점 새로고침이 없으니 페이지전환이 부드러움 JSO..

REST API 과거의 SOAP이란 복잡한 형식을 대체한 RESTful한 형식의 API 정보들이 주고 받아지는데 있어서 개발자들 사이에 널리 쓰이는 일종의 형식 HTTP형식으로 요청을 보낼 때 어떤 URI에 어떤 메소드를 사용할 지 개발자들 사이에서 지켜지는 약속 HTTP프로토콜을 HTTP프로토콜답게 사용하자! 각 요청이 어떤 동작이나 정보를 위한 것인지 요청의 모습 자체로 추론 가능 자원을 구조와 함께 나타내는 형태의 구분자 > URI { topics : [ {id: 1, title: rest, body: ... }, {id: 2, title: ajax, body: ... }, {id: 3, title: json, body: ... } ] } Resource topics와 같은 데이터 Collectio..

use strict js파일 최상단에 선언 타입스크립트를 같이 사용하지 않을 땐 선언하는 것을 추천 'use strict'; use strict을 사용하면 비상식적인 문법들에 대해 오류를 띄워 줌 자바스크립트 엔진이 조금 더 효율적으로 코드를 분석할 수 있으므로 성능에도 도움이 됨

화살표함수 arrow function 화살표함수는 항상 이름이 없는 함수이다 간결하게 쓸 수 있고 함수형 프로그래밍에 좋음 // 같은 코드 // 함수표현식 const simplePrint = function () { console.log('simplePrint'); } // 화살표함수 const simplePrint = () => console.log('simplePrint'); // const simplePrint = () => {return console.log('simplePrint')}; 화살표 함수에서 {}을 사용하면 꼭 return을 사용해서 값을 리턴해줘야함

array.map() 배열을 순서대로 돌면서 인자로 전달된 함수를 실행하여 나온 결과를 새 배열로 반환 인자로는 함수가 들어가는 듯 let students = [ {id:1, name: 'Mike'}, {id:2, name: 'Lisa'}, {id:3, name: 'Tim'}, ]; let names = students.map(student => student.name); console.log(names); // ['Mike', 'Lisa', 'Tim'] let numbers = [1,2,3,4,5]; let newNumbers = numbers.map(number => number * 2); console.log(newNumbers); // [2, 4, 6, 8, 10] 이렇게도 사용 가능 let nu..

자바스크립트에서 function(함수)는 object(객체)이다 이름이 없는 함수를 익명함수라고 한다 함수 실행시 조건이 맞지 않으면 바로 종료하도록 빠르게 return을 넣어 짜는 것을 추천 // 비추천 function A (score) { if (score > 10) { // 길고 긴 코드 } }; // 추천 function A (score) { if (score 호이스팅이 된 이후부터 작성한 순서대로 실행됨 하지만 asynchronus(비동기적)인 함수도 있음 > 코드가 언제 실행될지 알 수 없음 예) setTimeout(); 비동기의 값은 실패, 성공만 가져옴 내가 요청한 value를 가져오지 않음, value는 콜백함수가 받음 콜백함수 callback function 함수에서 다른 함수를 인자로..

재귀 함수 : 함수가 실행될 때 자기 자신을 호출하는 함수 함수의 선언이 끝나기 전에 자신을 다시 호출하는 함수 function recursive (인자) { 작업수행 if (조건 충족) { return 결과 } else { return recursive(작업된인자) } } 함수 안에서 본인을 호출 function answerByStory (question) { // 임의의 이야기에서 답 찾기 let answer = findFromRandomStory(); // 이야기 속에서 답이 나오지 않으면 if (answer === null) { return answerByStory(question); // 재귀 호출 // 답이 나오면 } else { return answer; // 답을 반환 } } 비슷한 것으로..