본문 바로가기

전체 글

(47)

ES6+ 함수와 자바스크립트 OOP의 원리 코드스피츠 강의를 듣고 복습하기 위해 포스팅을 정리해보았다. 사실 자바스크립트 엔진과 OOP는 다소 궁합이 안 맞는다. 그래서 개발자가 더욱 신경을 써야 하는 영역이다. 객체 지향적인 설계는 프로젝트 확장성에 큰 기여를 하기 때문에 초반 설계에 많은 시간을 들여야 하는 고된 작업이다. 코드 스피츠 수업은 두번째 수강인데 기초적인 개념을 넘어서 실무에 적용할 수 있을만한 견문을 넓힐 수 있는 좋은 강의였다. 1회차 sub routine flow는 상대주의적 관점을 가진다 메인 플로우, 서브루틴 중 누구를 기준으로 보냐에 따라 달라진다 메인 플로우는 서브루틴이 시작하고 돌아와야 할 point 위치를 가진다 서브루틴이 중첩될수록 중첩된 서브루틴들의 point를 메모리에 모두 keep 한다 = call stac..

컴파일러는 두 번 공격한다 #호이스팅 4. 호이스팅 4.1 컴파일러는 두 번 공격한다 한 스코프 안에서 선언된 변수는 바로 그 스코프에 속한다. 자바스크립트 프로그램은 1장의 컴파일러 이론에 따라 실행된다. 자바스크립트 엔진이 코드를 인터프리팅 하기 전에 컴파일한다. 컴파일레이션 단계 중에는 모든 선언문을 찾아 적절한 스코프에 연결해주는 과정이 있었다. 이게 바로 2장 렉시컬 스코프의 핵심이다. 변수와 함수 선언문은 모두 코드가 실제 실행되기 전에 먼저 처리된다고 보면 된다. “var a = 2;”는 하나의 구문이라 생각할 수 있지만 자바스크립트는 두 개의 구문으로 본다. var a; // 선언문 (컴파일레이션 단계) a = 2; // 대입문 (실행 단계) 이 과정에서 변수와 함수 선언문은 선언된 위치에서 코드의 꼭대기로 끌어올려진다. 이렇..

변수를 찾기 위해 정의된 규칙 #스코프 1. 스코프란 무엇인가 프로그래밍 언어는 변수에 값을 저장하고 → 저장된 값을 가져다 쓰고 → 수정하는 패러다임을 가진다. 이 기능은 프로그램에서 상태(state)를 나타낼 수 있게 해준다. 그렇다면 ✔️ 변수는 어디에 저장되는가? ✔️ 필요할 때 프로그램은 어떻게 변수를 찾는가? 특정 장소에 변수를 저장하고 그 변수를 찾는 데는 잘 정의된 규칙이 필요한데 이를 스코프라고 부른다. 그렇다면 스코프 규칙은 어디서 어떻게 정의되는걸까? 스코프 규칙에 대한 컴파일러 이론을 확인해 보자. 1.1. 컴파일러 이론 보통 자바스크립트는 ‘동적' 또는 ‘인터프리터'언어로 분류하나 사실은 ‘컴파일러 언어'다. 어떤 자바스크립트 조각이라도 실행되려면 먼저(보통 바로 직전에) ‘컴파일’되어야한다. 자바스크립트 컴파일러는 프..

값 할당 !== 선언 #타입 0. 개요 YOU DON'T KNOW JS의 주요 내용을 정리한다. 프로젝트 진행 중 막히는 개념이 있으면 챕터 별로 찾아서 읽는 것을 목적으로 한다. 예시 코드들은 ES6 기반으로 테스트하며 학습하며 정리 내용은 블로그에 에러노트와 함께 포스팅하며 복기한다. 220215_localStorage, 상태관리 목적으로 this 접근이 어려워서 this / 타입 / 스코프 부분을 공부했다. PART 1. 타입과 문법 1. 타입 1.2. 내장 타입 자바스크립트의 7가지 내장 타입 null → 얘네도 타입이다! undefined → 얘네도 타입이다! boolean number object → 유일한 참조타입. 나머지는 원시(primitives) 타입 symbol (ES6 new!) typeof 연산자로 확인한 값..

VanillaJS 스터디, 2주차의 회고록 1주차 🧊 팀 만들기와 아이스 브레이킹을 진행하면서 본격적인 1주차 미션이 시작됐다. 나는 사실 블랙커피 코드리뷰 스터디는 처음이 아니다. 약 1년 전에 5기에 참여했었는데 그때도 좋았지만 지금은 유데미 강의와 온라인 세션의 퀄리티가 비교 불가정도로 좋아지며 만족스러운 코드리뷰와 인사이트가 가능해 진 것 같다. 스마트한 스터디의 완성본같다고 할까? 특히 메타버스와 notion을 통한 세션 진행 방식은 정말 색달랐다. 우리 팀은 2주차 온라인 세션이 시작되기 전 자체 코드 리팩토링을 진행하기로 했다. 이를 위해 Github Organization을 따로 만들어 PR을 진행했다. 스터디 저장소에서 fork로 가져와 이를 기반으로 commit log를 유지하며 2가지 remote repo에 동시 반영이 가능할..

JavaScript로 코딩테스트 준비하기 (초보자 편) case 1. 입력값 정제가 최우선! 가장 먼저 문제에서 나온 input 입력을 잘 정제하고, 로직을 짜기 위한 적절한 형태로 parsing하기 출력값 full string은 키워드(”\n”)로 split()을 한다던가 / +변수 또는 Number()로 숫자로 형변환 해준다던가 / map()을 써서 array 변환하기라던가.. 기본적인 연산 API에 익숙해질 때까지 연습하기 블로그들을 참고하면 고수들의 심플한 코드가 많은데, 초보들은 너무 어려울 것이다.. 추천하는 방법은 입력 받자마자 console.log() 찍어보는 것. 더 명시적으로 문제 힌트를 얻을 수 있다. 그럼 이 값에 난 뭘 해줘야할까? 그다음엔? → 차근차근 값을 직접 console.log()로 값을 확인해보면서 푼다. case 1-1 처..

자료구조 & 알고리즘 공부를 시작하기 전 Key Point 자료구조 서비스나 어플리케이션에서 필요한 데이터를 메모리에 어떻게 구조적으로 잘 정리해서 담아두고 관리하고 최종적으로 가장 효율적인 방식으로 필요한 데이터에 빠르게 접근하고 필한 수정 삽입 삭제할 수 있도록 도와준다 서비스에서 클라이언트에게 데이터를 제공하거나 어플리케이션에서 사용자에게 필요한 데이터를 보여주거나 수정할 때 효율적으로 일을 처리하기 위해서는 기능에 적합한 알맞는 자료구조를 쓰는 것이 정말 중요하다. 어떤 자료구조를 쓰냐에 따라 사용자가 원하는 기능을 수행하는데 천차만별 차이가 나게 된다. 종류 배열 단일 연결 리스트 이중 연결 리스트 스택 해쉬테이블 자료구조 공부 시 Key Point 데이터들의 순서 보장 여부? 중복 데이터 가능 여부? 검색할 때 효율적인 정도? 원하는 기능에 따라 수정..

JavaScript에서의 OOP (Object Oriented Programming) 객체(Object) 란? 물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 고유 속성을 가지고 다른 것과 식별 가능한 것 따라서 소프트웨어에서 객체를 만든다는 것은 물리적 존재나, 추상적 생각의 구현물들을 속성과 메소드로 정의하는 과정이라고 볼 수 있다. 객체의 구성 객체 = 속성 + 메소드 자바스크립트에서의 Object JS의 객체 자료형 원시 자료형 (null, undefined, "string", 10, true, false ...) --> 객체처럼 다루지 않으면 객체의 특성을 가지지 않음 객체 자바스크립트는 데이터 저장을 위해 원시 자료형과 객체 이 2가지 종류의 자료형을 사용한다. 숫자나 문자열 같은 단일한 데이터를 저장하는 원시 자료형은 자바스크립트 안에서 사용하는 기본적인 데이터 저..

이전 1 2 3 4 5 6 다음

티스토리툴바

티스토리툴바