📌 변수 선언과 스코프 블록 스코프 안에서 정의된 변수 i는 블록 범위를 벗어나는 즉시 접근할 수 없습니다. 따라서 결과로는 ReferenceError가 나오게 됩니다. 이번엔 앞서 보았던 코드와 동일하나, 변수 선언을 let 대신 var를 이용했습니다. 이번엔 결과가 어떻게 될까요? 이에 대한 결과는 5입니다. 어떻게 블록을 벗어났음에도 불구하고 변수 i에 접근할 수 있는 것일까요? 결론부터 말하면, var 키워드는 for 문이 만들어낸 블록 스코프를 무시합니다. ⭐️ var 키워드 var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따릅니다. 그러나, 주의! - 모든 블록 스코프를 무시하는 건 아닙니다. 화살표 함수의 블록 스코프는 무시하지 않습니다. 함수 스코프는 함수의 실행부터 ..
📌 스코프 개요 JavaScript에서 스코프(Scope)는 무엇일까요? 영어 단어의 뜻 자체도 ‘범위'를 의미하니까, JavaScript에서 이야기하는 스코프 역시 무언가 제한된 범위를 잘 들여다보기 위해 사용되는 개념이라고 추측해 볼 수 있습니다. 컴퓨터 공학, 그리고 JavaScript에서의 스코프는 "변수의 유효범위"로 사용됩니다. ⭐️ 스코프와 주요 규칙 스코프의 정의 - 스코프는 "변수 접근 규칙에 따른 유효 범위"입니다. 범위가 중괄호(블록) 또는 함수에 의해 나누어지고, 그 범위를 스코프라고 부릅니다. 여기서 우리가 알 수 있는 규칙은 바로 다음과 같습니다. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능합니다. 반면에, 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없습..
📌 원시 자료형(primitive data type) 객체가 아니면서 method를 가지지 않는 6가지의 타입 = string, number, bigint, boolean, undefined, symbol, (null) ✅ 원시 자료형 특징 1) 변수 하나당 하나의 데이터만을 담는다. 2) 원시 자료형은 고정된 크기의 보관함(stack)에 담긴다.'stack'이라는 저장공간에 변수이름과 데이터가 함께 저장된다. 3) 원시 자료형이 변수에 할당될 때 값(value) 자체가 담긴다. 4) 원시 자료형 데이터를 복사할 때, 복사본을 수정해도 원본데이터에는 영향을 주지 않는다.(immutable) let A = 1; B = A; B;//1 B = 9; A;//1 B;//9 변수 A에 담긴 원시 자료형을 B에 복..
📌객체 내부에 값으로 들어 있는 배열과 객체 , 함수도 똑같은 방법으로 접근 가능하다. 위와 같은 객체가 있다고 치자. 객체 내부에 배열 키가 수강중인과목인 프로퍼티를 접근하겠다. 위 이미지를 보면 배열에서 쓰는 push() 메서드를 똑같은 방법으로 사용해 수강중인과목이라는 키를 가진 배열 값 끝에 'c언어'를 추가하였다. 객체 내부에 있는 객체인 키가 여자친구 인 프로퍼티를 접근하겠다. 여자친구라는 키를 가진 객체에 사는 곳이라는 키를 가진 프로퍼티 추가 했다. 객체 내부에 있는 함수에 접근하겠다. 키가 기쁨인 함수를 똑같이 호출 가능하다. 📌 객체 메서드 📐 Object.keys() -> key를 모아서 배열로 📐 Object.values( ) -> value(값)을 모아서 배열로 📐 Object.a..
📌 객체 다루기 ✅ 프로퍼티를 참조(Read)하는 방법은 두 가지가 있다. 위 객체를 선언 했다고 치자. 1️⃣ Dot notation Dot notation은 객체이름에 .(점)을 붙이고 키(속성명)을 입력해주면 된다. 2️⃣ Bracket notation Bracket notation은 사용시 반드시 문자열을 입력해야 한다. 위 이미지를 보면 [ ] 안에 문자열이 들어오는걸 볼 수 있다. 키(속성명)을 문자열로 입력해야 작동된다. 만약 문자열로 입력안하면 어떻게 될까? 위 이미지와 같은 에러가 뜨게 된다. 에러가 발생 했을 땐 항상 왜 에러가 발생했는지 읽어보자. ReferenceError , not defined 참조되지않고 정의가 되지않았다. 그렇다면 age,job,여자친구를 변수로 정의해준다면 ..
📌 배열(Array) 개요 다량의 데이터를 다룰 수 있는 데이터 타입인 배열. ✏️ 배열(Array)이란? 배열(Array)을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 합니다. 인덱스는 1이 아닌 0부터 번호를 매깁니다. ✅ 배열(Array)의 특징 1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다. 2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다. 3. 자바스크립트에서 배열은 Array 객체로 다뤄집니다. 📐 Array.length Array 인스턴스의 length 속성은 배열의 길이를 반환합니다. 반환값은 부..
CSS 기초 개요 HTML이 웹 페이지의 구조 담당 CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는 역할을 담당 📌Chapter1-1. CSS와 프론트엔드 개발 CSS(Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.CSS가 개발자인 우리에게 어떤 의미가 있을까? 미래의 프론트앤드 개발자로써 앞으로 CSS에 대해 가져야 할 마음가짐을 공유하고자 한다. CSS는 좋은 사용자 경험(UX)을 제공하기 위한 도구이다. 직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양이다. 좋은 사용자 경험(UX)은 직관적이고 쉬운 UI에서 나온다. 📌Chapter1-2. CSS 따라하기 CSS는 스타일링 도구이므로, 독립적으로 기능하지 않는다. 반..
📌 HTML 심화 개요 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한것입니다.웹 애플리케이션을 개발할 때, 와이어프레임은 레이아웃의 형태를 잡는 단계를 의미합니다. 이 단계에서는 와이어프레임을 설계하는 방법과, id와 class속성을 목적에 맞게 사용하는 방법을 학습합니다. 📌 Chapter3-1. 웹 페이지의 구조잡기 HTML은 틀과 구조를 만드는 언어이다. 마크업언어라는 것은 구조를 만드는 언어이다. 이 사진은 N사이트의 댓글창이다. 이 화면을 만드는 과정을 소개하겠다. 결과적으로 이 화면을 만들기위해서는 HTML과 CSS가 필요하다. 어떻게 설계를 할까? 실제로 우리가 작업을 완료하면 이 댓글창이 완벽하게 작동이 되..
HTML(HyperText Markup Language)은 JavaScript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업언어입니다.이번 섹션의 목표는 하나의 완성된 웹 애플리케이션을 만드는 것입니다. 이를 위해 HTML로 구성된 뼈대 위에 JavaScript로 기능을 구현하고, CSS로 스타일을 입히는 과정을 거치게 될 것입니다. 따라서, 이 단계에서 HTML에 대한 기본적인 개념과 사용법을 충분히 익히는 것이 중요합니다. Chapter2-1. HTML 기본 구조와 문법 HTML - 웹 페이지의 틀을 만드는 마크업 언어 선언을 빼고 나머지 태그들은 쌍이 있다. 여는 순서와 닫는 순서가 철저하게 지켜지고있다. 이것을 트리 구조라 한다. HTML 태그들은 정말 많이 있다. 다 외우기..
📌 변수 개요 JavaScript에서도 데이터를 편하게 다루기 위해 데이터에 이름을 붙일 수 있다. 그 이름을 바로 변수라고 부른다. 데이터를 편리하게 저장하고 꺼내 쓸 수 있도록 변수에 대해 학습하자. 각각의 데이터에 이름을 짓는 방법을 알게 된다. 개발자답게 표현하자면 변수를 선언하고 값을 할당할 수 있는 것을 의미한다. 또 변수를 활용하여 복잡한 작업을 간단하게 처리할 수 있게 된다. 📌 변수의 선언과 할당 ✏️ 변수의 선언과 할당 문제를 해결하기 위해 컴퓨터와 소통하기 위해서는 특정 데이터에 대해 같은 이름을 공유하고 있어야 한다. JavaScript에서도 특정 데이터에 이름을 붙일 수 있는데, 이를 변수라고 한다. **반복적으로 사용하는 숫자를 컴퓨터가 특정한 이름(변수명)으로 기억하도록 하고 ..
