본문 바로가기

모두 보기

 (96)
4. 서비스와 의존성 주입 (1) 2020. 6. 30. 22:52 0. 서비스 서비스란 어플리케이션에서 공통으로 사용하는 데이터나 기능을 묶어 정의한 단위입니다. 가령 여러 컴포넌트에서 공통으로 쓰이는 데이터는 서비스로 정의하여 접근할 수 있도록 한다면 모듈화와 코드의 재사용성이 높아질 것입니다. 일반적으로 뷰 컴포넌트에서는 뷰와 관련한 로직만을 남기고 그외의 서버와 관련한 로직 등은 서비스에 정의하는 것이 좋습니다. 서비스는 의존성 주입이 가능한 클래스로 @Injectable 데코레이터 하단에 클래스를 정의하면 이 클래스는 곧 의존성 주입이 가능한 클래스입을 명시하는 것입니다. @Injectable() export class MyService {} 앵귤러는 서비스 인스턴스를 의존성 주입을 사용하여 생성하는데 그 이유는 여기에서 찾을 수 있었습니다. 1. 의존성 주입을..
3. Modules 2020. 6. 26. 19:15 1. @NgModule 앵귤러에서 모듈은 자바스크립트의 모듈과는 다른 의미로 쓰입니다. 먼저, 자바스크립트의 모듈은 단일 파일에서 모든 멤버 클래스를 정의하지만 @NgModule은 declarations이라는 속성에서 선언 가능한 클래스*들의 리스트를 가지고 있습니다. 선언가능한 클래스*: 앵귤러에서는 컴포넌트, 디렉티브, 파이프, 서비스가 이에 해당합니다. 또한 @NgModule은 import문에 선언된 모듈과 자신의 선언가능한 클래스들만을 export할 수 있으며 그 외의 클래스는 불가능합니다. 공식문서에서 자세히 설명하고 있는 것처럼 앵귤러는 컴파일러에게 @NgModule의 메타데이터로 컴포넌트가 컴파일되는 시점의 컨텍스트를 제공합니다. 컴파일러는 해당 컨텍스트(작업 흐름)에 따라 컴포넌트를 컴파일..
[2020-06-21] 재미난 책들을 발견했다 2020. 6. 21. 15:27 You Don't Know JS, 카일 심슨, 2017 이책 너무 재밌다!!! 이전부터 유명했던 책인거 같은데 왜 이제 봤을까 ㅠㅠ 코어 자바스크립트를 5번 읽었지만 아직도 모르는게 많은 2년차 개린이... 이 책도 코어자바스크립트를 정리한 것처럼 세 번 읽고 내용이 이해될 쯤에 블로그에 하나하나 정리해야지 자바스크립트는 왜 그모양일까?, 더글라스 크락포드, 2020 JSON 창시자가 지은 책이라고 회사 동료분이 공유해주셔서 산 책이다 출퇴근하면서 짬짬히 읽기 시작했는데 자바스크립트에서 저자의 견해나 개인적인 의견을 담은 책이라 신선하고 재밌다 다만 번역이 You Don't Know JS보다는 매끄럽진 못해서 읽는데 살짝 거슬린다 ㅠㅠ 읽다가 뭔말이여?하고 다시 읽고 이해할 때가 많다 예시 코드들도 첫번..
2. Component와 Directive (2) 2020. 6. 20. 21:50 1. Content Projection Content Projection이란 부모 컴포넌트 셀렉터 태그 내부에 자식 컴포넌트 혹은 HTML 엘러먼트를 작성하여 특정 템플릿을 전달할 수 있는 기능입니다. 마치 리액트에서 props.children으로 내부에 작성된 엘리먼트를 props로 전달하는 것과 비슷합니다. 그렇다면 Content Projection은 왜 필요할까요? 그 이유를 여기에서 확인할수 있었는데 글에서 예제로 좌측에 아이콘이 달린 input 태그를 나타내는 fa-input 컴포넌트를 작성한다고 가정합니다. 글에서 제시한 Content Projection없이 작성한 fa-input 컴포넌트는 다음의 문제가 있습니다. input 태그에서 이용할 수 있는 31개나 되는 attribute를 일일히 ..
1. Component와 Directive (1) 2020. 6. 19. 14:58 0. Decorator 데코레이터란, 데코레이터 바로 하단의 클래스를 Angular가 어떤 타입으로 어떤 메타데이터를 가지고 사용할 것인가를 정의하는 장식자입니다. 데코레이터는 '@' 접두어로 표기됩니다. @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent {} 1. Component 컴포넌트(@Component()) : HTML 템플릿을 컴포넌트 데코레이터의 template으로 지정하면 해당 템플릿을 뷰로 지정하여 Angular 프레임워크가 제공하는 디렉티브와 데이터를 바인딩할 수 있는 마크업을 작성할 수 있습니다. 2. Directive 디렉티브(@Directive()) : ..
0. Angular 공부 목록 2020. 6. 15. 19:40 본 내용은 글쓴이가 회사에서 Angular 기초를 학습한 내용과 토이 프로젝트를 리팩토링하면서 진행한 과정 중 필요한 지식만을 담고 있습니다. 완전한 튜토리얼은 Angular 공식 문서 혹은 poiemaweb을 참고하시면 훨씬 도움이 될 것입니다. Angular 9를 기준으로 공부하였습니다. 1. Component와 Directive (1) 2. Component와 Directive (2) 3. Modules 4. 서비스와 의존성 주입 (1) 5. 서비스와 의존성 주입 (2) 6. RxJs와 NgRx (1) 7. RxJs와 NgRx (2) 8. 라우터 9. Reactive Form 1. Component와 Directive (1) 0. 데코레이터 1. 컴포넌트 2. 디렉티브 3. 데이터 바인딩 4. 컴포..
[번역] Error handling with Async/Await in JS 2020. 6. 5. 18:48 본 포스트는 Ian Segers의 Error handling with Async/Await in JS를 번역한 글입니다. Error handling with Async/Await in JS Learn error handling in JS. itnext.io 이 글은 다른 개발자들과 토론과 코드리뷰 동안 이해한 짤막한 글입니다. 본 내용은 주니어 JS 개발자들에게 초점이 맞춰져있습니다. A Simple Try Catch 간단한 try...catch 예시로 시작해보겠습니다. 다음은 예상한대로 동작할 것입니다. 일반 에러를 throw하는 thisThrows()를 호출하면 이 에러를 catch하고 log할 수 있습니다. 그리고 finally 블록에서 선택적으로 어떤 코드를 실행할 것입니다. 그다지 특별한 것은 ..
07. 클래스 2020. 5. 22. 16:44 본 내용은 책 코어 자바스크립트(2019, 정재남)를 세 번 정독 후, 글쓴이가 이해한 내용과 실제 업무에서 겪은 경험을 기술하였습니다. 다소 형식적이지 못합니다. ES6에 클래스 문법이 추가됐지만 클래스 문법은 Syntax Sugar일 뿐, 원래 자바스크립트는 프로토타입 기반 언어로써 상속을 제공하고 있지 않으므로 기존에는 어떻게 구현하고 있는지 알 필요가 있다. 1. 객체 지향 프로그래밍(Object Oriented Programming) 책에서는 클래스와 인스턴스에 대해 현실세계의 개념을 예시로 들어 설명하고 있지만 클래스 뿐만 아니라 객체 지향 프로그래밍을 전반적으로 정리해보기로 하였다. 객체 지향 프로그래밍(이하 OOP)란, 현실세계의 일련의 사건들을 객체로 모델링하여 이들 간의 상호작용을 객체..
[프론트엔드] 성능 최적화 정리 2020. 5. 22. 00:37 목차 0. 개요 1. 브라우저 동작 원리 2. 성능 최적화 2.1 페이지 로드 최적화 2.2 페이지 렌더링 최적화 3. 성능 측정 기준 3.1 브라우저 내부 이벤트 기준 3.2 사용자 기준 성능 지표 3.3 사용자 기준 성능 최적화 4. 정리 0. 개요 프론트엔드의 성능 최적화는 화면을 설계하는 당시에는 사실 고려하기 힘든 경우가 많았다. 회사의 납기를 준수하여야 하는 경우도 있고, 우선적으로 기능 구현을 해서 테스트를 진행하는게 중요했던 상황도 많았기 때문이다. 하지만 프로젝트가 끝나고 유지보수를 하거나, 다음 프로젝트를 하기 전 시간이 나는 경우에 틈틈히 프론트엔드 성능 최적화에 대해 학습하면서 적용해나가다보니, 다음 프로젝트를 착수하게 되었을 땐, "아, 이 부분을 이렇게 설계하면 성능이 더 좋겠구..
[팟캐스트] 2020-04-29 사이드 프로젝트, 꼭 해야 하나요? 2020. 5. 10. 02:24 동생 아이폰에 있는 팟캐스트로 디자이너 두 분이 나오셔서 사이드 프로젝트에 대한 좋은 의견들을 공유해주셨다. 디자이너 뿐만 아니라 개발자한테도 도움이 많이 될 듯 싶어 정리해 보았다. 개인적으로 사이드 프로젝트를 진행할 때 꼭 기억하고 싶은 키워드는 굵은 글씨로 표기하였다. 1. 사이드 프로젝트를 왜 하게 되었나요? - 회사에서 일정한 성취감을 유지하기 힘들어서 - 다양한 경험을 쌓고 싶어서 2. 사이드 프로젝트의 장점 - In-out discount 현상을 감소시킬 수 있다. In-out discount란 외부자의 의견보다 회사 내부의 의견의 설득력이 더 떨어지는 현상으로, 외부 프로젝트 경험을 통해 타인을 설득할 수 있는 힘과 요령을 쌓을 수 있다. 3. 사이드 프로젝트의 단점 - 주말도 사이드 프로..
[자바스크립트]프론트엔드 질문 모음 2020. 5. 6. 14:43 선배님들께 듣거나 기술 면접 때 나올만한(나왔던) 지식 정리용입니다. 주기적으로 업데이트 치는 중입니다. 목차 1. function () {} 표현식과 화살표 함수(_ => {})의 차이점은? 2. 리액트가 DOM을 업데이트하는 과정 3. 3/24에 봤던 탈탈 털린 면접 질문들 (코어 자바스크립트 + 비동기 등) 4. Javascript에서 OOP 구현하기 5. 리액트 redux 6. 이벤트 위임이란? 7. Map과 Set, 객체와의 차이점 8. 5/4 오답노트 1. function () {} 표현식과 화살표 함수(_ => {})의 차이점은? 더보기 - thisBinding 유무: function (){} 은 실행 컨텍스트에 thisBinding 존재, 화살표 함수는 thisBinding이 없어서 호이스..
[리액트] 컴포넌트와 Hook 2020. 4. 23. 15:04 "리액트에서 hook이 왜 등장했을까요?" "클래스 컴포넌트와 hook의 관계는 뭐라고 생각하세요?" 최근 받았던 이 질문들에 대한 답변을 잘 하지 못했다. React 사용자가 아니라 React 개발자가 되기 위해서는 컴포넌트를 제대로 알 필요가 있었다. 2021.02.11. 업데이트 (다시 읽어보니 좀 빈약해서 ^^;) 리액트 16.8 이전까지는 상태 관련 로직을 재사용하기 위해서는 render props, HOC를 사용하였으나 이는 많은 Wrapper컴포넌트 구조를 가지게 되어 코드 구조를 파악하기 어렵게 만듭니다. Hook은 리액트에서 상태관련 로직을 더 쉽게 공유하고 재사용하기 위해 고안되었습니다. React는 컴포넌트간에 재사용 가능한 로직을 붙이는 방법을 제공하지 않습니다. (예를 들어, 스토..

티스토리툴바