벌꿀오소리의 아카이브

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이라고 이름붙인..

와 11월의 첫번째 주말이라니. 수업은 벌써 2주가 지났단다. 세상이 날 내버려두고 2배로 시간 흐르는 게 아닐가? 하루하루가 비슷한 듯 미묘하게 달라서 시간 가는 줄 모르고 산다. 그래도 이런저런 일들은 있긴 있다. 언제나 그렇듯이. 노션 알게 된 후론 지금까지 온갖 군데 흩어진 데이터를 하나로 모아 관리하는 게 제법 편해졌다. 완전 노션 신봉자임; 수업 아카이빙도 벌써 몇페이지를 훌쩍 넘어간다. 그래도 한 번 정리해놓고 나니까 마치 내 필기노트처럼 틈틈이 열어보고 내용 추가할 수 있는 게 좋다. 수업은... HTML이랑 CSS 할 땐 그저 재밌었지... ^^ 배열과 객체 뿌수는 중인데 이게 이론 자체는 단순해도 함수에 넣고, 반복문 돌리고, 변수 받고~ 이러다보니까 머릿속에 개념이 산재하고 있다. k..

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..

⚠️ 주의! ⚠️ 이 글은 '기획'을 잘 하는 법을 알려주는 글이 아닙니다! 제가 신입일 때 알았으면 좋았던 내용들, 제 부사수에게 바빠서 알려주지 못했던 내용들을 정리한 글입니다. 강의로는 알려주지 않는 시시콜콜하고 사소한 실무, 잘 하지는 못해도 내 앞가림이라도 하고 싶었던 그간의 기록을 나열해 봅니다. 왜 이 글을 쓰기 시작했나요? 대학교 졸업 전에 취직한 첫 직장... 문화기획 스타트업이었음. 인턴 시절 만난 기획자분이 퇴사 후 회사를 만들며 마침 사람을 구한다고 연락을 주셨다. 마침 졸업전시가 막 끝나 취업 준비를 하던 참이라 단박에 오케이 함. 여차저차 일하게 되었는데... 문제점은 그것이었다. 함께 일하는 이들은 8년차, 9년차 기획자였고 나는 인턴기간 9개월(그것도 기획파트가 아닌)에 불과..

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