Architecture

Clean Architecture(클린 아키텍처) 공부 - 육각형 아키텍처, 엔티티, 유스케이스, 프레임워크, 드라이버, 관심사 분리(SoC), 험블 객체 패턴, 프레젠터, 뷰, 뷰모델, 아키텍처

저자는 육각형 아키텍처(Hexagonal Architecture), DCI(Data, Context and Interaction) 그리고 BCE(Boundary-Control-Entity)를 소개하면서 이들 아키텍처가 시스템으로 하여금 다음과 같은 특징을 지니도록 만든다고 한다. 관심사 분리 프레임워크 독립성 - 프레임워크의 존재 여부에 의존하지 않는다. 프레임워크를 도구로 사용하고, 이것이 지닌 제약사항으로 시스템을 욱여 넣도록 강제하지 않는다. 테스트 용이성 - 외부 요소 없이도 테스트가 가능하다. UI 독립성 - 시스템의 일부분을 변경하지 않아도 UI를 쉽게 변경할 수 있다. DB 독립성 - 다른 데이터 베이스로 바꾸어도 지장이 없다. 모든 외부 에이전시에 대한 독립성. 이러한 관심사 분리에 대해 ..

2024. 4. 20. 18:38

JavaScript

[자바스크립트 스터디] 클로저(Closure) 그리고 작동 원리

function outer() { var a = 1; var inner = function () { return a++; } return inner; } var increment = outer(); console.log(increment()); console.log(increment()); console.log(increment()); 클로저를 살펴보기 전에 위의 코드를 살펴보겠다. 단순한 변수 a의 값을 호출할 때 마다 inner의 함수가 scope체인 상의 변수 a를 가져와서 하나씩 늘린다. 밑의 결과를 보면은 납득이 될 것이다. console.dir(increment); 를 찍어보면 위의 사진처럼 Closure라고 되어있고 a = 4라고 되어있다. 이것이 바로 클로저이다. 클로저를 MDN에서 찾아보..

2024. 1. 11. 20:02

JavaScript

[자바스크립트 스터디] Scope(스코프), Scope Chain(스코프 체인)

저번 글에서는 Hoisting(호이스팅)에 대해 알아봤다. 이번 시간에는 스코프와, 스코프 체인 그리고 그를 도와주는 outerEnvironmentReferenece에 대해 알아 볼 것이다. 먼저 스코프에 대해 알아보려고 한다. Scope(스코프) var a = "Hello"; function outer() { console.log(a); function inner() { console.log(a); } var a = "bye"; inner(); } outer(); console.log(a); 스코프에 대해 먼저 알아보겠다. 스코프, 말 그대로 해석하자면 범위라는 뜻이다. JavaScript에서는 식별자의 범위라고 할 수 있다. 변수가 어디까지 유효하고 그 유효한 범위에 대해 접근 가능한 지에 대한 것이..

2023. 12. 30. 12:29

JavaScript

[자바스크립트 스터디] 자바스크립트에서의 호이스팅(Hoisting)

저번 글에서 Execution Context(실행 컨텍스트)의 environmentRecord가 미리 식별자의 정보를 수집한다고 언급했을 것이다. 이러한 environmentRecord에 대해 좀 더 자세하게 들여다 보겠다. environmentRecord는 해당 Lexical Environment에 있는 범위 내의 식별자를 정의한다. 매번 자바스크립트 코드가 평가될때 마다, 함수 선언, 블록 스코프 혹은 Catch와 Try구문을 발견할 때 마다 새로운 식별자가 바인딩 되어 environmentRecord에 기록된다. 이러한 environmentRecord에는 3개의 하위 클래스로 이루어져 있다. Declarative Environment Record(선언적 환경 레코드) var, let, const, ..

2023. 12. 28. 17:18

JavaScript

[자바스크립트 스터디] 자바스크립트의 실행 환경(Execution Context), Lexical Environment

ECMA-262 Edition5을 기준으로 설명합니다. 변수가 선언되고 할당되고, 초기화되기 까지 var num = 7; [자바스크립트 스터디] 자바스크립트의 데이터 타입, 참조형 [자바스크립트 스터디] 자바스크립트의 데이터 타입, 원시형 최근에 코어 자바스크립트를 통해 아는 친구의 대학 후배들과 스터디를 진행하고 있다. 그에 대한 내용을 정리할 겸, 이제부터 하나 kimkani.tistory.com 위의 코드는 아주 기본적인 자바스크립트에서의 변수 선언, 초기화 그리고 할당 단계가 함축되어 있는 코드이다. 데이터의 타입에 따라 어떻게 메모리에 할당되는지는 다르다. 그에 관해서는 이전 글에서 설명했다. 이번 글에서는 "그렇다면 이러한 변수들은 자바스크립트 실행 시 어떻게 활용될까?"의 관점에서 써보려고 ..

2023. 12. 22. 15:11

JavaScript

[자바스크립트 스터디] 자바스크립트의 데이터 타입, 참조형

[자바스크립트 스터디] 자바스크립트의 데이터 타입, 원시형 최근에 코어 자바스크립트를 통해 아는 친구의 대학 후배들과 스터디를 진행하고 있다. 그에 대한 내용을 정리할 겸, 이제부터 하나하나 찬찬히 참조해보려고 한다. 1. 자바스크립트의 데이터 kimkani.tistory.com 1. 스택과 힙 메모리 만약 당신이 변수를 선언하면, 자바스크립트 엔진은 이 변수들을 위해 두개의 메모리 지역 - 힙과 스택 - 에 변수들을 할당한다. 앞 글에서 설명했듯이 스택에는 미리 사이즈를 알 수 있는 데이터만이 들어가며, 그 외에 런타임시 변경될 수 있는 데이터는 힙에 들어간다. 이러한 데이터는 바로 Object(객체) 혹은 function(함수)이다. 위의 경우를 예시로 hobbies랑 person이 어떻게 되는지 한..

2023. 6. 15. 01:44

JavaScript

[자바스크립트 스터디] 자바스크립트의 데이터 타입, 원시형

최근에 코어 자바스크립트를 통해 아는 친구의 대학 후배들과 스터디를 진행하고 있다. 그에 대한 내용을 정리할 겸, 이제부터 하나하나 찬찬히 참조해보려고 한다. 1. 자바스크립트의 데이터 타입 위의 표를 보다싶이, 자바스크립트에는 다양한 데이터 타입이 존재하는데, 이를 표로 정리하여 하나하나 예시를 들어보려고 한다. 데이터 타입 해설 예시 String 문자열 데이터를 표시 "hello", "hello world!" 등등 Number 정수나 소수를 표시 3, 3.234, 3e-2 등등 Boolean 참 혹은 거짓을 표시 true, false undefined 변수는 선언되어 있으나 값이 들어있지 않은 상태 let a; null 명시적으로 값이 없음을 표시 let a = null; Symbol 인스턴스가 유니..

2023. 4. 30. 01:42

JavaScript/Vue

Vue.js 알아보기 - Component, Vue 3 컴포넌트 만들기

What is, and Why we use Component? 먼저 컴포넌트에 대해서 이야기해봐야 겠다. 컴포넌트는 마치 하나의 Instance라고 할 수 있으며, 템플릿을 여러 파로 자를 수 있는 거의 유일한 방법이다. 또한 코드의 재사용성을 높여주는 하나의 방법이라고도 할 수 있다. 일단은 Vue의 Single File Component(SFC)에 대해 이야기해보겠다. Vue의 SFC는 이미 완벽한 유저 인터페이스 단위로, HTML 마크업과 상호작용을 위한 스크립트 그리고 표현을 위한 스타일로 이루어져있다. 추상적인 레벨에서 SFC는 다음과 같은 섹션으로 이루어져 있다. Template Script Style 내가 짠 코드 중에 다음과 같은 코드 부분을 예시로 들어서 이야기해 보겠다. Back Doo..

2023. 1. 9. 23:36