이 문서는 개발을 하면서 차차 채워나갈 예정입니다. 회사에서 Tailwind CSS를 도입하게 되면서, Tailwind CSS에 대해서 알아보기로 하였다. Angular 프로젝트에 Tailwind CSS 도입하기 너무 감사하게도 ng eject로 Webpack 설정을 바꾸지 않고, Angular 프로젝트에 Tailwind CSS를 도입할 수 있는 ng-tailwindcss라는 좋은 CLI가 있다. 설치 방법 npm i ng-tailwindcss -g : 글로벌에 Angular 프로젝트에 Tailwind CSS를 도입할 수 있도록 도와주는 ng-tailwindcss를 설치한다. npm i tailwindcss -D : 해당 프로젝트에 tailwindcss 라이브러리를 추가한다. npx tailwind in..
인젝션 토큰 앞서 알아본 값 프로바이더에서 문자열이나 숫자 등을 토큰으로 문자열을 사용하거나, 클래스를 사용하여야 했다. 값 프로바이더에서 문자열을 토큰으로 사용할 경우 중복될 위험이 있고, 클래스를 토큰으로 사용할 경우 로직이 이상해졌다. 인젝션 토큰은 클래스가 아닌 객체, 문자열, 함수 등을 위한 토큰을 주입받기 위해 사용한다. export const GET_API_URL: string = 'https://api.myapp.com/api/get'; export const API_URL = new InjectionToken('api-url'); export const ApiUrlProvider = { provider: API_URL, useValue: GET_API_URL ..
프로바이더 (Provider) Angular는 서비스의 인스턴스 생성과 구성요소에 그 서비스를 주입하는 권한을 위임 받았다. 그러나, Angular는 인스턴스를 어떻게 생성하는지 모르므로 이를 알려줘야 한다. 그 역할을 프로바이더가 한다. 따라서 프로바이더는 Angular에 의존성 인스턴스의 생성 정보를 알린다. 프로바이더 사용 방법 @Injectable의 provideIn 프로퍼티 // 루트 인젝터에 제공 @Injectable({ providedIn: 'root', }) // 특정 모듈에 등록 // 그 모듈의 **모든 구성요소에서 주입할 수 있음.** @Injectable({ providedIn: YourModule, }) @Component 메타데이터의 providers 프로퍼티 // ..
서비스 (Service) 사용하는 이유 컴포넌트의 독립성을 보장하여 재사용성을 높이기 위해 프로젝트의 복잡성을 낮추기 위해 특정 기능을 어플리케이션 전역으로 분리하여 사용하기 위해 코드 서비스를 처음 생성하면 아래와 같은 기본 코드가 생성된다. import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class TempService { constructor() { } } @Injectable 데코레이터 서비스를 정의하는 클래스 위에 @Injectable이라는 데코레이터가 있다. 이 데코레이터는 Angular가 서비스를 정의하는 이 클래스를 서비스로서 인식하고 Dependency..
흔한 객체지향 언어에서의 this this는 Java와 같은 객체지향 언어에서 주로 이 인스턴스(즉, 자신)를 가리키기 위해 사용한다. 아래 코드와 같이. class Person { private String name; Person(String name) { this.name = name; } } 위 예제는 Java에서의 this의 용례를 보여주기 위한 코드이다. Java에서 this는 주로 매개변수와 인스턴스 자신의 프로퍼티(멤버) 변수의 이름이 같을 경우 이를 구분하기 위해 사용한다. JavaScript에서의 this 그러나, JavaScript에서의 this는 함수 호출을 어떻게 하느냐(선언이 아님!!)에 따라 다른 객체들이 바인딩된다. this는 기본적으로 전역객체를 참조한다. 전역 함수는 물론이..
이 문서에서 사용되는 그림은 모두 네이버 D2의 브라우저는 어떻게 동작하는가?에서 발췌하였습니다. 브라우저의 구성 요소 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용. 자바..
Sementic Tag란? 글자 그대로 해석하면, "의미론적인" 태그라는 뜻이다. 즉, 보다 더 명시적으로 의미를 알아볼 수 있는 태그를 쓸 수 있다는 것이다. 라는 이름의 태그는 딱 봐도 앱의 헤더 부분을 나타내는 태그라는 것을 알 수 있고, 는 딱 봐도 앱의 아래 부분을 나타내는 태그라는 것을 알 수 있다. 반면에 나 태그는 내부의 요소가 어떤 의미를 가지는지 알 수 없다. 따라서, non-sementic 태그인 것이다. 또한, 시맨틱 태그는 SEO 최적화가 된다. 검색 엔진이 정보를 검색할 때, 시맨틱 태그에서 중요한 정보를 뽑아 탐색에 반영한다. 이처럼 시맨틱 태그를 통해 웹 문서가 구조화되어 의미 있는 내용을 탐색할 수 있도록 하는 웹을 시맨틱 웹이라고 한다. Sementic Tag 종류 자세히..
관련 포스트 JavaScript ECMAScript란? Arrow Function의 특징 function 표현에 비해 구문이 짧다. 자신의 this, arguments를 바인딩하지 않는다. 항상 익명 함수로만 사용된다. 생성자로서 사용할 수 없다. Arrow Function 사용하기 매개변수가 없을 때 const func = () => { ... } 매개변수가 1개일 때 const func1 = i => { ... } // 소괄호의 지정 불필요! const func2 = (i) => { ... } // 소괄호 지정해도 무관! 매개변수가 2개 이상일 때 const func = (x, y) => { ... } 함수 Body const func = i => { return i * i; } 한 줄의 구문만 있는..
관련 포스트 JavaScript ECMAScript란? 변수의 Block-scoped 선언 let let을 이용해 Block-scoped인 변수를 선언할 수 있다. 중괄호로 구분된 영역을 Block-scoped 영역이라고 한다. 이는 기존의 var 키워드의 문제점을 해결할 수 있다. function funcVar() { console.log(k); // undefined var k = 1; console.log(k); // 1 } funcVar(); function funcLet() { console.log(a); // ReferenceError: Cannot access 'a' before initialization (오류 발생) let a = 1; console.log(a); // 1 ..
var var는 ES6 등장 이전에 사용되던 키워드이며, 변수를 생성할 때 앞에 붙여서 변수임을 명시합니다. 그러나 이는 개발에 있어서 엄청 큰 단점을 가지고 있어 현재에는 거의 사용하지 않습니다. (사용하면 안됩니다..) 먼저 아래 코드를 봅시다. var a = 123; console.log(a); // 123 var a = 567; console.log(a); // 567 a가 2번 선언되었음에도 불구하고, 오류는 발생하지 않았습니다. 만약 방대한 프로젝트를 개발한다면 똑같은 이름의 변수를 몇 번이나 사용해도 오류는 발생하지 않으니, 로직 상의 오류는 빈번해질 것이고 그 오류를 발견하기는 또 굉장히 어렵게 될 것입니다. 그런데, 왜 이런 현상이 나타나는 것일까요? 그 이유는 바로 Hosting(호이스..
ECMAScript란? ECMA International이라는 정보통신 비영리 표준화 기구에서 정의한 스크립트 언어에 대한 '사양'입니다. 스크립트 언어로서 준수해여 하는 규칙, 지침들을 규정합니다. ECMAScript vs JavaScript? JavaScript는 ECMAScript의 사양을 준수하는 스크립트 언어입니다. 즉, JavaScript는 ECMAScript의 사양을 따라 제작된 '언어'이며, 우리는 이 '언어'를 이용해 스크립트 코딩을 할 수 있는 것입니다. ECMAScript 6 === ES6란? ES6은 ECMAScript의 여섯 번째 릴리즈라고 생각하시면 됩니다. 기존의 콜백 지옥과 같은 불편했던 부분들을 상당 부분 개선하여 내놓은 표준으로,..