자바스크립트 (21) 썸네일형 리스트형 JSON에 대한 전반적인 개념 1. JSON 탄생 배경 JSON(JavaScript Object Notation)은 데이터 교환을 위해 만들어진 포맷입니다. 여러분이 만일 어떤 객체 내용을 네트워크를 통해 다른 프로그램에게 전송한다고 생각해 보세요. 여기서는 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메시지라고 간주해봅시다. 다음 객체를 어떻게 보낼 수 있을까요? const message = { sender: "김코딩", receiver: "박해커", message: "해커야 오늘 저녁 같이 먹을래?", createdAt: "2021-01-12 10:10:10" } 객체라는 것이 전송 가능(transferable)하려면 애초에 수신자(reciever), 발신자(sender) 모두가 같은 프로그램을 쓰거나, 아니면 문자열과 같이.. 클래스와 인스턴스에 대한 전반적인 개념 → 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴 [예시] → 예를 들어 청사진은 자동차 생산을 위한 설계도에 비유 / 클래스 → 자동차가 기능하기 위해서는 네 바퀴와 핸들, 좌석 그리고 엔진이 필요 → 기본적인 설계는 차의 종류에 상관없이 대체적으로 동일하게 적용 → 설계도(청사진)를 바탕으로 각각의 객체가 특정한 자동차 모델로 나오게 되는 것 → 자바스크립트에는 "객체"라는 개념이 객체 지향 프로그래밍과 무관하게 이미 존재 → 용어를 잘 구분하는 것이 중요 → 객체가 아닌 "청사진"을 바탕으로 한 객체는 인스턴스 객체(instance object), 줄여서 인스턴스(instance) → 청사진은 클래스(class.. 객체지향언어에 대한 전반적인 개념 → 절차 언어는 함수로 이동을 통해 절차를 정함 ( C, 포트란같은 언어) → 객체 지향 프로그래밍이라는 패러다임이 등장하면서 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과, 데이터의 처리 과정에 대한 모형을 만들어 내는 방식을 고안 → 데이터와 기능이 별개로 취급되지 않고, 한번에 묶어서 처리 → 자바스크립트는 엄밀히 말해 객체 지향 언어는 아니지만, 객체 지향 패턴으로 작성할 수 있습니다. → OOP는 프로그램 설계 철학 중 하나로서 OOP는 객체로 그룹화 → 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지 → 객체 내에는 "데이터와 기능이 함께 있다"는 원칙에 따라 메소드와 속성이 존재 → 객체는 공통적인 기능(클래스)과 고유의 속성(.. 함수 디버깅 방법 알고리즘 문제 풀때 내가 작성한 코드가 실제로 어떻게 작동하는지 한줄 한줄 볼수 있는 방법입니다. 수업 시간에 엔지니어분께서 한번 언급 하신적이 있어서 이미 사용하고 계신 분들도 있겠지만 저는 제대로 쓰는 방법을 모르다가 최근에야 알게 되어서 도움이 될까 공유해봅니다. 먼저 함수 첫줄에 debugger; 라고 작성합니다. (혹은 자신이 원하는 위치) function func1(num) { debugger; // 함수 내용... } 크롬 콘솔을 열고 함수를 복사해서 넣은 뒤 enter 를 칩니다. 함수를 실행시킵니다. 예) func1(4) 입력 내가 enter 를 누르는 동시에 sources 탭이 자동으로 열립니다. 이런 아이콘 목록을 볼 수 있는데 차례대로 설명드리면 함수 전체 실행(따로 설정한 brea.. 고차함수에 대한 전반적인 개념 → 자바스크립트에도 특별한 대우를 받는 일급 객체(first-class citizen) : 함수 → 자바스크립트에서 함수는 아래와 같이 특별하게 취급 1. 변수에 할당(assignment) 할 수 있다. 2. 다른 함수의 인자(argument)로 전달될 수 있다. 3. 다른 함수의 결과로서 리턴될 수 있다. → 함수를 변수에 할당할 수 있기 때문에, 함수를 배열의 요소나 객체의 속성값으로 저장할 수 있습니다. → 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미 → 변수에 함수를 할당 : 함수 표현식, 화살표 함수 → 함수 표현식(function expression)은 함수 선언식(function declaration)과 다르게 호이.. DOM에 대한 전반적인 개념 - DOM(Document Object Model) → DOM은 프로그래머 관점에서 바라 본 HTML → DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있습니다. → HTML 문서에 이미 작성되어 있는 엘리먼트에 접근하거나, 새로운 엘리먼트를 생성 또는 삭제할 수 있음 →DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model → 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다. → HTML의 아주 작은 부분까지 접근할 수 있는 구조(Model; Structure)를 이용하여 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습.. Spread문법과 Rset Spread 문법 → 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 질문: 어떤 값을 리턴하나요? → 6을 출력한다. → numbers[0],numbers[1],... 이렇게 일일이 넣는것이 아닌 ‘...배열명’으로 배열의 element를 모두 매개변수로 값을 넘겨주었다. → 여기서는 spread syntax가 사용되었습니다. spread syntax는 iterable 한 모든 것의 (대표적으로 문자열, 배열) 요소를 "펼쳐"주는 문법을 의미합니다. Rest 문법 → 파라미터를 배열의 형태로 받아서 사.. 클로저(closure)의 전반적인 개념 - 클로저(closure) 정의 : "함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. → 클로져 함수는 "외부함수의 컨텍스트(외부함수의 변수등)에 접근할 수 있는 내부함수" → 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수 / 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수 → 스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는지에 따라 결정된다. 이를 렉시컬 스코핑(Lexical scoping)라.. 이전 1 2 3 다음
