분류 전체보기
ㅡ 9 더 사랑하고, 더 사랑받는 일
내가 상대를 사랑하는만큼, 상대가 나를 사랑하고 있지 않다는 마음이 들 때, 우리는 종종 사랑하는 일에 좌절감을 느끼곤 한다. 그러나 사랑은 서로가 동일한 방향에서, 동일한 깊이로 서로를 사랑하는 것이 아니라, 상대가 바라볼 수 없는 방향에서, 서로 다른 깊이의 고백을 실천하는 일이다. 우리는 누군가를 일방적으로 사랑할 수 없다. 상대가 우리를 조금이라도 사랑하지 않는다면 말이다. 실제로 모든 사랑은 언제나 불균형적이다. 누군가는 상대를 더 많이 사랑할 것이고, 누군가는 더 많은 사랑을 받을 것이다. 그리고 이는 모두가 기뻐하고, 고마움을 느껴야 하는 일이다. 누군가를 더 사랑할 수 있음에, 또한 누군가에게 더 사랑받을 수 있음에 말이다. 성숙한 사랑의 마음가짐은 언제나 이러한 불균형성을 기꺼이 받아들일..
자바스크립트 arguments를 사용한 가변 인자 함수 활용
자바스크립트의 aruments는 유사 배열 객체를 생성하는 내부 함수입니다. 이는 함수 호출 시, 함수에 선언된 매개 변수보다 더 많은 인자를 전달하는 경우 등에 활용할 수 있습니다. 유사 배열(Array-like)이란 arguments가 길이 속성과 프로퍼티를 갖고 있지만, 배열에서 사용할 수 있는 내장 메소드인 forEach(), map() 등을 사용할 수 없는 객체를 의미합니다. 먼저, arguments의 작동 방식을 이해해 보도록하겠습니다. 아래의 경우처럼, 각 함수에 할당한 인자가 arugments에 유사 배열 형태로 할당됩니다. function func1(a, b, c) { console.log(arguments[0]); // 1 console.log(arguments[1]); // 2 con..
자신만의 이야기를 쓰는 사람들에게 ⏐ 일상 에세이 ⏐ 28
가끔 블로그를 돌아다니다 보면 자신만의 이야기를 적어 내려가는 이들을 우연히 발견하곤 한다. 구글 SEO 최적화와는 거리가 먼 글들이라 대부분 검색에는 걸리지 않는, 어쩌면 돈 안되는 이야기들 적는 사람들이 있다. 나는 아주 오래 전부터 인터넷 상에 글을 써왔다. 그러니까 거의 처음으로 나만의 노트북을 갖게 되었던 스무살 무렵부터 적어도 10년이 넘게 글을 써왔다. 그래서 글을 잘 썼다는 이야기는 전혀 아니다. 싸이월드가 한창이던 때는 새벽 3시, 나만의 감성 터지는 글을 게시판에 올렸다가 다음 날 지우기 일쑤였고, 페이스북이 인기있던 때도 다음 날 이불킥을 차기 일쑤였다. 지금에야 그런 글을 잘 공유하지 않지만, 여전히 나는 생각과 감정을 기록해 두는 것을 좋아한다. 그때의 나는 왜 그랬을까? 아마도 ..
flex 속성 사용 방법: 좌측, 우측, 중앙 정렬 등
CSS flex의 이해 CSS flex는 크게 컨테이너와 아이템으로 구성됩니다. flex 속성을 통해 아이템을 정렬하려면, 컨테이너가 필수적입니다. 즉, 기본적으로 부모 태그에 display: flex; 또는 display: inline-flex 속성이 적용되어 있어야 합니다. 두 방식의 차이점은 컨테이너의 수직 추가, 수평 추가의 차이입니다. 부모 요소에 flex 속성을 추가하면, 자식 요소에는 자동으로 해당 속성 효과가 부여됩니다. flex속성은 컨테이너와 아이템 즉, 부모 요소와 지식 요소를 함께 사용합니다. 아이템 정렬은 주축(main-axis)에 의해 결정됩니다. 기본 값은 row이며, 이는 왼쪽에서 오른쪽으로 아이템이 정렬됨을 의미합니다. 이를 column으로 변경시 주축 방향이 위에서 아래로..
자바스크립트 클로저 설명, 예시, 활용
자바스크립트의 모든 함수는 함수가 선언된 당시의 주변 환경을 기억합니다. 여기서 주변 환경이란 함수가 정의된 상위 스코프, 즉 실행 컨텍스트를 의미합니다. 이는 함수를 호출하는 위치가 아닌, 선언된 위치에 따라 결정되며, 따라서 함수는 언제나 상위 스코프의 식별자를 참조하고, 이에 할당된 값을 변경할 수 있습니다. 클로저란? 클로저는 함수와 해당 함수가 참조하고 있는 주변 환경(렉시컬 환경)과의 조합이다. 다른 말로 하자면, 클로저 기능은 내부 함수에서 외부 함수 스코프에 접근할 수 있게 하는 것이다. 자바스크립트에서 클로저는 함수가 생성될 때마다, 함수가 생성되는 시점에 생성된다. A closure is the combination of a function bundled together (enclose..
자바스크립트 엄격 모드 "use strict" 차이점 설명
'use strict';는 자바스크립트에서 코드를 엄격 모드(strict mode)로 실행하는 것입니다. 'use strict';를 사용하면 선언하지 않은 변수를 사용할 수 없으며, 변수 및 함수를 삭제할 수 없는 등 자바스크립트 엔진에 보다 엄격한 기준이 적용됩니다. 선언하지 않은 변수는 사용할 수 없는 것이 원칙입니다. 그러나 다음 예시에서 보듯 x는 var, let, const 의 키워드를 통해 선언되지 않았기 때문에 에러가 발생할 것 같지만, 실제로는 자바스크립트 엔진이 전역 객체에 프로퍼티를 생성하여 5가 출력됩니다. function foo() { x = 5; } foo(); console.log(x); // 5 이처럼 자바스크립트 엔진은 변수가 키워드를 통해 생성되지 않은 경우, 암묵적 전역(..
자바스크립트 타이머 setTimeout / setInterval 설명
자바스크립트에서 함수를 호출하면 함수가 바로 실행됩니다. 그러나 setTimeout과 setInterval을 사용해 함수 실행을 조정할 수 있습니다. 자바스크립트 엔진은 싱글 스레드로, 타이머 함수는 비동기 처리 방식으로 작동합니다. setTimeout setTimeout은 특정 시간이 지난 뒤 함수를 호출합니다. 첫 번째 인자에 실행할 함수를, 두 번째 인자에 지연 시간, 이후 순서의 인자에는 필요한 인자를 전달할 수 있습니다. setTimeout(() => console.log('Hello!'), 1000); setTimeout(date => console.log(`Today: ${date}`), 1000, '2020-11-07'); setInterval setInterval은 특정 간격으로 함수를 ..
자바스크립트 프로토타입이란?
프로토타입이란? 프로토타입(prototype)은 프로토타입 객체의 줄임말로 자바스크립트에서 상속을 구현하는 방식입니다. 모든 객체에는 하나의 프로토타입이 존재하며, 이는 모두 생성자 함수와 연결되어 있습니다. 프로토타입을 통해 자식 객체는 부모 객체의 프로퍼티를 자유롭게 사용할 수 있습니다. function Person (name) { this.name = name; } Person.prototype.age = 31; const person = new Person("Hwi"); console.log(person.age); // 31 프로토타입 체인 자바스크립트는 객체의 프로퍼티에 접근했으나 해당 프로퍼티가 존재하지 않는다면, 해당 객체의 부모 역할을 하는 프로토타입의 프로퍼티를 탐색합니다. 이러한 계층 ..
