분류 전체보기
자기 자신을 가리키는 값 this
자기 자신을 가리키는 값 this
2021.10.03This Binding 자바스크립트의 함수는 자기 자신을 가리키는 특별한 값인 this를 사용할 수 있으며, 이를 자기 참조 변수(Self-referencing variable)라 부릅니다. this가 가리키는 값은 함수를 호출하는 방식에 따라 동적으로 결정되는데, 이렇게 this의 값이 정해지는 것을 this 바인딩이라 합니다. 호출 방식에 따라 this가 어떻게 달라지는지 확인해 보도록 합시다. 일반 함수 호출 전역 실행 컨텍스트에서의 this는 항상 전역 객체를 가리킵니다. 실행 컨텍스트는 자바스크립트 코드 실행을 위한 정보가 담긴 메모리이며, 함수가 호출될 때마다 해당 함수를 실행하기 위한 정보를 담은 컨텍스트가 생성됩니다. 자바스크립트의 전역 객체는 실행 환경에 따라 달라지며 웹 브라우저에서는 ..
자바스크립트 코드의 유효 범위 Scope
자바스크립트 코드의 유효 범위 Scope
2021.10.03Scope 스코프는 변수에 접근 가능한 범위를 의미합니다. 자바스크립트에서 스코프는 함수 레벨 스코프와 블록 레벨 스코프 두 가지로 나뉘며, 함수나 블록을 선언한 위치에 따라 스코프가 중첩될 수 있습니다. 스코프는 정말 중요한 개념 중 하나이며, 클로저와 같은 문법들의 동작을 이해할 때 도움이 되니 알아두면 좋습니다. 함수 레벨 스코프 함수 레벨 스코프는 자바스크립트에서 흔히 만날 수 있는 스코프입니다. function foo() { var a = 1; function bar(b) { if (true) { var c = 5; } // 8 console.log(a + b + c); } bar(2); } foo(); 함수를 정의하면 그에 맞춰 함수 단위로 스코프가 결정됩니다. 그리고 var 키워드로 선언한 ..
프로세스와 쓰레드의 차이
프로세스와 쓰레드의 차이
2021.10.03프로세스 (Process) 🔥 프로그램이 실행되어 메모리에 올라가면 이를 프로세스라 합니다. 각 프로세스는 [ 코드 ・ 데이터 ・ 스택 ・ 힙 ] 영역으로 구성되며, 서로 독립적인 관계입니다. 또한 프로그램이 메모리에 올라가 프로세스가 되기 위해서는 먼저 프로세스 제어 블록(PCB)이라는 것이 생성되어야 합니다. 이 블록은 프로세스가 실행되기 위해 필요한 정보들을 담고 있는 자료구조이며, 프로세스 구분자, 메모리 관리 정보, 각종 레지스터 정보 등이 담겨 있습니다. 프로세스가 동작을 마무리하면, 메모리에서 내려감과 동시에 프로세스 제어 블록도 폐기됩니다. 5-State Process Model 운영체제는 프로세스를 효율적으로 실행하기 위해 5가지 상태 프로세스 모델을 사용합니다. 1. 생성 상태 (Cre..
얕은 복사 & 깊은 복사
얕은 복사 & 깊은 복사
2021.10.03Data Types 자바스크립트의 데이터는 원시형(Primitive Type)과 참조형(Object Type)이라는 두 가지 종류의 타입으로 나뉩니다. 원시형에는 정수, 문자열, 심볼 등이 해당되고, 참조형에는 배열, 객체 등이 해당됩니다. 데이터 타입을 먼저 얘기하는 이유는 특정 변수의 데이터를 다른 변수에 복사하고자 할 때, 원본 변수가 담고 있는 데이터의 타입에 따라 복사 방식이 다르기 때문입니다. 각 방식을 얕은 복사(Shallow copy)와 깊은 복사(Deep Copy)라 말합니다. 👏 얕은 복사 다음 코드의 결과를 예상해 보세요. let num1 = 123; let num2 = num1; console.log(num1 === num2); num2 = 456; console.log(num1 =..
유사 배열 객체 만들기
유사 배열 객체 만들기
2021.10.02Array-like Object 유사 배열 객체는 말 그대로 배열과 유사한 객체이며, 배열처럼 인덱스를 통해 요소에 접근할 수 있습니다. 유사 배열 객체 만들기 유사 배열 객체를 만드는 방법은 간단합니다. 객체 리터럴인 {} 안에 인덱스를 프로퍼티로 하여 값을 적어주고, 이러한 값의 개수만큼 length 프로퍼티만 추가하면 됩니다. 바로 다음과 같이 말이죠. const arrlike = { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5, length: 5, }; for (let i = 0; i < arrlike.length; i++) { // 1 2 3 4 5 console.log(arrlike[i]); } 몇 안 되는 프로퍼티만으로 유사 배열 객체를 만들어 봤는데 어떤가요? 정말 간단하죠? 이처럼..
일급 객체 (First Class Object)
일급 객체 (First Class Object)
2021.10.02First Class Object 자바스크립트를 공부하다 보면, 일급 객체(First Class Object)라는 용어를 종종 볼 수 있습니다. 어떤 의미에서 그냥 객체도 아니고, 일급 객체라고 부르는 것일까요? 자바스크립트에서는 다음 조건에 해당되는 객체를 모두 일급 객체라 합니다. 런타임 시점에 무명의 리터럴로 생성할 수 있다. 변수나 자료구조(배열/객체)에 할당할 수 있다. 함수의 매개변수로 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트에서 함수도 객체이기 때문에 묶어서 일급 객체라 부르겠습니다. 위 조건에 따라 코드로 구현하면 다음과 같습니다. // 1. 런타임 시점에 무명의 리터럴로 생성할 수 있으며, // 2. 변수나 자료구조(배열/객체)에 할당할 수 있다. const su..
script 태그는 어느 곳에 위치하는 것이 좋을까?
script 태그는 어느 곳에 위치하는 것이 좋을까?
2021.10.02자바스크립트를 불러오는 방법 HTML 문서를 작성하면서 자바스크립트 파일을 포함시켜야 할 때, 가장 기본적인 방법으로 head 안에 script 태그를 넣는 방법이 있습니다. 대충 아래와 같은 코드가 나오겠지요? 위 코드에 의해 우리는 HTML 문서에서 자바스크립트 코드를 불러와 사용할 수 있습니다. 하지만 이 코드에는 약간의 문제가 있는데, 이를 이해하기 위해서는 HTML 문서가 파싱(Parsing)되는 과정을 알아야 합니다. HTML 문서는 위에서부터 아래로 파싱이 진행되며, 중간에 script 태그를 만나면 파싱을 잠시 중단하고 스크립트를 먼저 불러오게 됩니다. 그리고 이 과정이 끝나면, 다시 HTML 파싱을 재개하는 식으로 동작합니다. 동작 과정을 그림으로 보면 다음과 같습니다. 언뜻 보기에는 큰..
호이스팅 (Hoisting)
호이스팅 (Hoisting)
2021.10.01Hoisting 🤔 호이스팅(Hoisting)은 변수나 함수의 선언문을 스코프의 최상단으로 끌어올리는 자바스크립트의 특별한 동작입니다. 이를 이해하기 위해서는 자바스크립트 엔진의 동작 과정이 소스를 평가하는 과정과 실행하는 런타임 과정으로 나뉘는 것을 알아야 합니다. 자바스크립트 엔진은 코드를 실행하기 전에 필요한 정보, 예를 들어 변수 선언을 포함한 모든 선언문(var, let, const, function, class 등)을 읽어 메모리에 등록합니다. 메모리에 등록된 식별자들은 평가 과정이 끝나고, 런타임이 진행되면서 값이 할당됩니다. 다음의 코드는 호이스팅이 발생합니다. console.log(x); // undefined var x = 'hello'; console.log(x); // hello v..
기본적인 컴퓨터 구조
기본적인 컴퓨터 구조
2021.10.01🖥 폰 노이만 구조 오늘날의 컴퓨터는 대부분 미국의 수학자인 폰 노이만이 고안한 폰 노이만 구조를 따르고 있습니다. 이 구조가 등장하기 전에는 컴퓨터를 사용할 때마다 전선을 새롭게 연결하여 회로를 구성해야 했습니다. 하지만 폰 노이만은 이런 과정이 너무나 비효율적이라 생각했고, 하드웨어는 그대로 두면서 작업을 위한 프로그램만 메모리에 올려 사용하는 방식을 생각했습니다. 이러한 생각은 결과적으로 컴퓨터 이용을 간편하게 만들어 주었고, 운영체제를 비롯한 모든 프로그램이 메모리를 이용하기 때문에 오늘날 프로그래밍 또한 가능해졌습니다. 폰 노이만 구조는 운영체제와 관련된 내용을 이해할 때, 정말 중요한 바탕이 되니 꼭 이해하는 것이 좋습니다. 🤔 하드웨어 알아보기 CPU CPU는 명령어를 해석하여 실행하는 장치..
운영체제(OS) 개요
운영체제(OS) 개요
2021.09.28컴퓨터를 잘 모르는 분들도 운영체제(OS: Operating System)라는 용어는 들어본 적이 있으실 거예요. 운영체제는 컴퓨터를 켤 때 가장 먼저 실행되는 소프트웨어로, 오늘날 많은 사람들이 이용하고 있는 Windows와 Mac OS, 그리고 Linux 등이 해당됩니다. 또한 운영체제는 컴퓨터에만 포함되는 것이 아닌, 기본적으로 스마트폰이나 스마트 와치, 자동차 네비게이션 등에도 들어가 있습니다. 이처럼 대부분의 기기들은 모두 운영체제를 포함하고 있는데, 운영체제는 어떤 이유에서 필요한 걸까요? 🤔 대표적으로 아래 4가지의 이유를 들 수 있습니다. 1. 효율성 우리는 컴퓨터를 사용할 때 한 가지 작업만 하는 경우는 그다지 많지 않습니다. 웹 서핑을 하면서 음악도 듣고, 중간에 지인에게 연락이 오면 ..
프로젝트를 멋지게 설명하는 README.md
프로젝트를 멋지게 설명하는 README.md
2021.09.25README.md README.md 파일은 깃허브 저장소를 돌아다니다 보면 흔히 볼 수 있는 문서 파일입니다. 이 파일은 프로젝트의 내용을 설명하기 위해 사용하는 파일로써 프로젝트가 어떤 목적에 의해 개발되었는지, 어떻게 사용할 수 있는지 등을 적어 놓습니다. README 문서의 내용은 저장소의 메인 페이지에 노출되기 때문에, 다소 귀찮더라도 신경 써서 작성하는 것이 좋습니다. GitHub는 저장소 최초 생성 시, README 파일을 작성할 수 있도록 안내하고 있습니다. 잘 작성된 README 문서의 예시로 facebook React 저장소를 가져와 봤습니다. 링크를 타고 들어가 보면 사진 속 내용 외에도 더 많은 내용을 확인할 수 있는데, React 뿐만 아니라 깃허브에 등록되어 있는 대부분의 프로젝트..
Branch의 종류와 사용법
Branch의 종류와 사용법
2021.09.25Git Branches Git Workflow는 수명이 항상 유지되는 메인 브랜치(master, develop)와 일정 기간 동안만 유지되는 보조 브랜치(feature, release, hofix) 총 5개의 브랜치를 사용합니다. 아래 그림은 "A Successful Git brancing model" 글에 첨부된 이미지를 가져온 것으로, 이보다 더 Git Workflow를 잘 설명한 그림은 없는 것 같습니다 😀 메인 브랜치 (Main Branch) master 브랜치는 배포 가능한 상태만을 관리하며, 커밋할 때는 태그를 사용해 배포(Release) 번호를 기록합니다. 위의 Workflow를 이용한 협업에서 작업한 결과물을 서브 브랜치가 아닌, master에 바로 올려 버..