벌꿀오소리의 아카이브

Part 2 : Types ✅ 강한 연산자 === 과 느슨한 연산자 == ==는 실행 중 타입 변환(type coercion)이 일어나기 때문에 2 == ’2’가 ture라는 결과를 내놓는다. 다소 복잡하고 명확한 규칙이 존재하지 않아 프로그램의 작동을 예측하기 어렵게 만드는 것. 때문에 앞으로 엄격한 동치 연산(strict equality)인 === 사용을 권고한다. ✅ Addition (+) 더하기 연산자 참고 숫자 피연산자의 합을 구하거나, 문자열을 서로 연결한다. // number + number -> 덧셈 1 + 1 // 2 // string + string -> 문자열 연결 '1' + '1' // 11, string // number + string -> string으로 타입 변환 1 + '1..

MDN에서 설명하는 클로저(Closure)의 정의는 다음과 같다. A closure is the combination of a function and the lexical environment within which that function was declared. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합을 말한다. This environment consists of any local variables that were in-scope at the time the closure was created. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 여기서 키워드는 '함수가 선언'된 '어휘적 환경(lexical environment)'이다. JS는 함수가 호출되..

게임에서 스코프(Scope:범위)란 일반적으로 총에 장착하는 조준경을 말한다. JS의 Scope는 제한된 범위를 들여다보기 위한 개념으로, ‘변수에 접근할 수 있는 범위’로 사용된다. 이번 시간에는 Scope의 종류과 각 선언 키워드인 let, const를 어떻게 사용해야 하는지 알아본다. (수업 외 참고가 된 자료) Scope의 정의와 기초 규칙 Scope란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다. 즉, 변수 접근 규칙에 따른 유효 범위를 뜻한다. scope의 범위는 중괄호{} 또는 함수에 의해 나누어진다. 범위 밖에서 선언한 변수는 안에서 접근할 수 있다. 하지만 안에서 선언한 변수는 밖에서 접근할 수 없다. (안→밖 참조만 가능) 스코프의 가장 바깥쪽을 전역 스코프(..

데이터를 저장하는 방식에 따른 분류로 원시 자료형(primitive data type)과 참조 자료형(refrerence data type)이 있다. 원시 자료형 : 변수에 value값을 직접 지정한다. 고정된 저장 공간을 차지하는 데이터. (number, string, boolean 등) 참조 자료형 : 변수에 데이터에 접근할 수 있는 주소reference를 지정한다. 대량의 데이터를 다루기에 적합한 타입. (array, object 등) 참조 자료형은 원시 자료형과 달리 저장 공간이 유동적으로 늘어난다. 배열과 객체, 함수가 담긴 저장 공간은 특별한 저장 공간을 사용하기 때문이다. 이런 특성들에 대해 알아보자. 1. 원시 자료형 (primitive data type) 메모리를 stack이라고 이름붙인..

JS의 객체는 게임 캐릭터에 비유할 수 있다. 사용자들의 캐릭터는 동일하게 직업과 능력을 가지고 있지만, 세부적인 내용은 다르다. 누군가는 A라는 아이디에 mage라는 직업을, 누군가는 B라는 ID에 rouge라는 직업을 가지고 있다. 이렇게 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. 객체 기초 객체의 선언은 중괄호{}를 이용하며, 키(key)와 값(value)으로 구성되어 있다. let user = { name : 'Alex', age : 35, email : 'alex@gmail.com' } 여기서 name, age, email 등은 key(키)이다. 키에 속한 'Alex', 35, alx@gmail.com 등은 ke..

앞서 배운 변수는 JS에서 사용할 수 있는 다양한 타입의 값을 넣을 수 있지만, 하나의 변수에는 하나의 값만 넣을 수 있다. 대량의 데이터를 쉽게 다루기 위해 사용하는 것이 바로 배열(Array)과 객체(Object)이다. 1. 배열 기초 배열은 순서가 있는 값을 의미한다. 이 값을 element라고 부른다. 배열의 순서는 index라고 부른다. 1이 아닌 0부터 번호를 매긴다. 대괄호[]로 배열을 정의하고, 배열 안의 element는 쉼표로 구분한다. let myNum = [73, 98, 3, 61, 11]; // 0번째 인덱스값은 73이다. // 2번째 인덱스값은 3이다. 배열의 값에 접근하기 배열이름[인덱스]를 통해 접근한다. let fruits = ['banana', 'apple', 'pineap..

한 페이지 내 모든 콘텐츠는 고유 영역을 가지고 있고, 이를 박스(box)라고 한다. 박스는 너비(width), 높이(height), 테두리(border), 여백(margin/padding) 등 다양한 속성을 가지고 있다. 박스모델 기초 📌 block vs. inline block 줄바꿈이 되는 박스, 대표적으로 가 있다. inline 줄바꿈이 되지 않는 박스. 대표적으로 이 있다. inline은 콘텐츠의 크기에 따라 그 크기가 결정되므로, width나 height로 별도 크기를 지정할 수 없다. inline-block 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 갖도록, inline 박스에 'display:inline-block' 속성을 추가해 사용할 수 있다. 다른 요소의 옆으로 붙으면서 ..

HTML이 웹의 구조를 담당한다면, CSS는 HTML로 구성한 구조의 내/외부를 꾸미는 역할이다. 같은 HTML구조를 가지고 있더라도 각기 다른 CSS 파일을 적용하면 전혀 다른 웹사이트처럼 보이게 할 수도 있다. CSS와 프론트엔드 개발 CSS(Cascading Style Sheets)란 웹페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. HTML로 웹 페이지의 구조를 잘 세우고 난 뒤, 더 나은 사용자 경험(UX, User Experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹페이지를 완성할 수 있다. 📌 UI, User Interface 초기 컴퓨터는 자신이 만든 애플리케이션과 소통하기 위해 복잡한 코드를 이용해 소통했다. 하지만 최근은 이미 입력되어 있..