JavaScript (36) 썸네일형 리스트형 변수의 정의, 변수 호이스팅, var / let / const의 특징 # 변수 - 메모리 : 데이터를 저장할 수 있는 메모리 셀의 집합체. 각 셀은 고유한 메모리 주소를 갖는다. 이 메모리 주소는 '메모리 공간의 위치'를 나타낸다. 메모리 주소를 통해 데이터에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높은, 매우 위험한 일이다. 만약 실수로 운영체제가 사용하고 있는 값을 변경하면 시스템을 멈추게 할 수 있는 치명적인 오류를 발생시킬수 있기때문에, 자바스크립트는 직접적으로 메모리를 제어하는것을 허용하지 않는다. 그래서 자바스크립트는 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기위해서 '변수'를 사용한다. - 변수 : 메모리 공간을 식별하기 위해 붙인 이름. 즉 값의 위치를 가리키는 이름. ex: 변수 'score'는 값 90이 저장되어 있는 메모리 주.. 스코프 checkpoint 문제 스코프에 대해서 공부하였고, 제대로 이해했는지 확인하기 위해 checkpoint 문제를 풀어보았다. //Q.1 let x = 30; function get () { return x; //전역변수 x에서 가져온다. 함수 스코프 내에서 x를 별도로 선언하지 않음. } let result = get(20); //30. 여기서 20을 인자로 받아 함수에 전달해주었지만 get함수 내부의 어떤 변수에도 할당되지 않음. // Q.2 let x = 30; function get (x) { //매개변수 x가 선언되어 있다. return x;//여기서 x는 전역변수 x가 아니라, get함수내의 스코프에 선언된 매개변수 x. 함수 스코프로 x=20을 선언한 것. } let result = get(20); //20 //Q.3.. SPA란? # 전통적인 웹사이트(MPA:Multiple Page Application) - 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"(html, css, js)를 불러와야만 했다. 아래 그림을 보자. 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA(Single Page Application)는 Menu, Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오고 있지 않다. 전통적인 웹사이트에서는 "페이지 전체를 불러오는 행위"를 보통 깜빡인다고 표현한다. - 새로운 페이지를 요청할때마다 서버에서 렌더링된(SSR) 정적 리소스(HTML, CSS, JavaScript)가 다운로드 된다. **렌더링 : HTML, CSS, J.. 10장 - 2. 객체 리터럴 (프로퍼티 / 메서드) 10.3 프로퍼티 var person = { name: 'Lee', //프로퍼티 키:name, 프로퍼티 값: 'Lee', age: 20 //프로퍼티 키:age, 프로퍼티 값: 20 } - 프로퍼티를 나열할 때는 쉼표(,)로 구분 - 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않지만, 사용해도 괜찮다. - 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 (**심벌 값 : ES6에 추가된 7번째 타입. 변경 불가능한 원시 타입의 값. 다른 값과 중복되지 않는 유일무이한 값. Symbol함수를 호출해 생성.) 1) 프로퍼티 값에 접근할 수 있는 이름으로서 '식별자 역할'을 한다. 하지만 반드시 식별자 네이밍 규칙을 따라야 하는것은 아니지만, 식별자 네이밍규칙을 준수하는 프로퍼티 키와 그.. 10장 - 1. 객체 리터럴 (객체 / 객체 리터럴) 10.1 객체란? - 객체 : 0개 이상의 프로퍼티로 구성된 집합. 키(key)와 값(value)으로 구성된다. - 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값 가능. 심지어 자바스크립트의 함수도 일급 객체이므로 프로퍼티 값으로 가능. 프로퍼티 값이 함수일 경우, 일반함수와의 구분을 위해 메서드(method)라고 부른다. 즉, 객체는 프로퍼티와 메서드로 구성된 집합체. * 프로퍼티 : 객체의 '상태'를 나타내는 값(data) * 메서드 : 프로퍼티(상태데이터)를 참조하고 조작할 수 있는 '동작'(behavior) 10.2 객체 리터럴에 의한 객체 생성 * 클래스 기반 객체지향 언어(ex: C++, Java) : 클래스를 사전 정의하고, 필요한 시점에 new 연산자와 함께 생성자(constru.. 1장. 프로그래밍 1.1 프로그래밍이란? 사람(자연어 사용) ————-> 컴퓨터(기계어 사용: 0과 1) : 컴퓨터에게 정확하고 상세하게 ‘요구사항’을 설명(코드를 통해)하고, 실행을 요구하는 일종의 사람과 컴퓨터간의 커뮤니케이션 실행을 요구하기 위해서는, 먼저 ‘무엇’을 실행시키고 싶은지 알아야 한다. 1. 해결해야 할 문제(요구사항)을 명확히 이해 - 대부분의 요구사항 : 복잡하고 불명확하다. 1> 문제를 명확하게 이해 2> 복잡함을 단순하게 분해 & 자료 정리 및 구분 3> 순서에 맞게 행위 배열 2. 적절한 문제 해결 방안 정의 - 이 때 필요한 것 : 컴퓨팅 사고. 1.2 프로그래밍 언어 문제 해결 능력을 바탕으로 정의된 문제해결방안 : '컴퓨터'에게 전달되어야 한다. 명령을 수행할 주체 : ‘컴퓨터’ 즉, 사람.. part3 1. 먼저 서버 실행시킨다. //package.json에 들어가보면 아래와 같이 나와있다. "scripts": { "server:part-3": "node part-3/__test__/app.js" } //즉, npm run server:part-3을 하게되면 node part-3/__test__/app.js가 실행되는 것 app.js가 서버로 실행된다. [app.js 파일] //HTTP 요청을 처리하고 응답을 보내 주는 프로그램을 웹 서버(Web Server). //node.js의 http 모듈을 이용해 웹 서버를 만듭니다. //express에서는 http모듈 사용 x. const express = require('express'); const cors = require('cors'); const ap.. fetch() API HTTP를 이용해서 서버에게 데이터를 요청해서 받아올 수 있는 방법으로 AJAX를 쓴다. AJAX : 비동기 자바스크립트와 XML 웹페이지를 동적으로 서버에게 데이터를 주고받을 수 있는 기술. 대표적인 예 : XHR이라고 하는 object. XMLHttpRequest 객체. 브라우저 API에서 제공하는 object 중 하나. 간단하게 서버에게 데이터를 요청하고 받아올 수 있다. 최근 XHR 대신 브라우저 API에 추가된 fetch API를 이용하면 간편하게 데이터를 주고받을 수 있다. XML : HTML과 같은 마크업 언어 중 하나. 태그들을 이용해서 나타낸다. HTML과 마찬가지로 데이터를 표현할 수 있는 방법. 하지만, 불필요한 태그들이 너무 많이 들어가서 파일의 사이즈도 커질 뿐만 아니라 가독성도 .. 이전 1 2 3 4 5 다음
