- Today
- Total
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- git error
- 웹
- 이터러블
- 에러처리
- async
- http
- 상태관리
- git
- 모던 자바스크립트 deep dive
- JavaScript
- get
- 알고리즘
- 비동기
- Java Script
- React
- 백준
- 자바스크립트
- 모던 자바스크립트
- js
- 백준 실버
- Angular
- es6
- 네트워크
- C++
- error
- deep dive
- map
- html
- 프론트엔드
- 그림으로 배우는 http&network
목록Front-End (68)
sharingStorage
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/KXrug/btrrJlxWM5a/TjUHzKOKJyaSdZZsCSkiHK/img.png)
@NgModule NgModule이란 @NgModule 데코레이터가 지정된 클래스이며 이것은 모듈에 있는 컴포넌트 템플릿이 어떻게 컴파일 되는지 인젝터를 어떻게 생성할지 등을 설정한다. angular 애플리케이션이 모두 하나 이상 가지고 있으며 Angular 프레임워크가 제공하는 기능을 불러와서 사용할 수 있게 하는 것들을 말한다. Angular 프로젝트에서 app.module.ts는 Component를 관리해주는 역할을 한다고 볼 수 있다. declarations - 이 모듈에서 사용 가능한 뷰 클래스를 정의한다. angular에서는 component, directive, pipe 세 종류가 존재한다. 모듈에 선언된 구성요소는 모듈 내에서만 사용가능 exports - 다른 모듈이나 컴포넌트에서 접근할 ..
이번에는 Angular의 생명주기 훅을 다뤄보려고한다. 생명주기 훅은 constructor와 비슷한 역할을 한다. consturctor는 angular의 기능이 아니라 클래스 자체의 기능(자바스크립트 엔진)이여서 constructor가 호출되는 시점에는 Angular의 제어의 바깥에 있다. 따라서 앵귤러가 컴포넌트를 초기화 했는지 알기에는 적합하지 않다. 생명주기 훅을 만든 후 Angular는 컴포넌트가 생성된 후에 설정을 마무리하기 위한 메소드를 한차례 실행할 수 있게 되었다. ngOnInit 앵굴러가 컴포넌트 초기화를 완료했다는 점을 전달하기 위해 존재하며 바인딩한 값을 읽을 수 있다고 보장할 수 있는 상황에서 호출된다. constructor는 최소한으로 초기화해야한다. 일반적으로 컴포넌트는 가볍고 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/brF39f/btrq2jzLRXT/JnCZWtUggUi6tbJsC8KUX0/img.png)
부모 자식 디렉티브/컴포넌트끼리 데이터 공유하기 + @Input(), @Output 구조 알아보기. 이런 구조가 있다고하면 parent-component는 child-component의 컨텍스트를 제공하는 역할을 한다. @Input(), @Output() 데코레이터를 활용하면 자식컴포넌트가 부모 컴포넌트와 통신할 수 있다. input은 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 output은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용 @Input() import {Input} from '@angular/core'; Input 심볼을 로드해야한다. typescript 파일에서 html파일로 바인딩하려면 {{}} 이 문법 사용하면 되는데 ts파일끼리 데이터를 주고받으려면 데이터를 받..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cPBvFT/btrqvyZpJoB/kWvVGMvawDNk1vHbiJup30/img.png)
What? Angular란 google에서 만든 SPA방식의 프론트엔드 개발을 위한 자바스크립트 프레임워크이다. Angular는 Angular JS와 완전히 다른데 쉽게 생각하면 Angular 1버전을 Angular JS, Angular 2버전 이상을 Angular라고 부른다. (Angular JS는 11년만인 21년 12월31일 EOL에 도달하였으며 서드 파티지원만 가능하다고 한다.) Why Angular의 장점 - 컴포넌트기반 Angular를 이용한 프론트엔드 웹 개발은 DI의 강력한 지원을 통해 기능에 따라 코드를 분리하고 재사용이 용이하다. 기능을 담은 Service 클래스와 HTML 컴포넌트를 담당하는 Component클래스가 명확히 구분되고 이로인해 Service클래스는 여러 Component..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cgS0XU/btrqsGXgkXE/5UbtzDQmed86WheGV9JpNK/img.png)
- RxJS : RxJS는 Reactive Extension for JavaScript의 약어로 Javascript 라이브러리이다. Reactive X는 Observer패턴, Iterator패턴, 함수형 프로그래밍을 조합하여 제공하는 것이며 RxJS는 이벤트 스트림을 Observerable이라는 객체로 표현한 후 비동기, 이벤트 기반의 프로그래밍 작성을 돕는다. 이벤트 처리를 위한 API로 다양한 연산자를 제공하는 함수형 프로그래밍 기법도 도입되어 있다. ※Reactive Extensions : Reactive X프로젝트에서 출발한 Reactive Programming을 지원하기위해 확장한 것 . - Reactive Programming : : Reactive 하다는 것은 데이터를 다룰 때에 스트리밍형식..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/WpZzd/btroZENGfpz/tiepWMkEv9BMkfgWAIhijk/img.png)
객체와 원시 타입(int, string..)의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)' 저장되고 복사된다는 것입니다. 반면 원시값 (문자열, 숫자, 불린 값)은 값 그대로 저장 할당되고 복사됩니다. let message= "Hello"; let phrase= message; console.log(message); //Hello console.log(phrase); //Hello console.log의 결과값이 같은 것을 보아 두 변수에 각각 Hello라는 문자열이 저장되었음을 알 수 있습니다. 하지만 객체의 동작방식은 객체가 저장되어있는 메모리주소인 객체에 대한 참조값이 저장됩니다. let user={name: "Jone"}; let admin=user; admin.nam..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/beKHzU/btroDPAxHfU/Yh45M7kMDMAcIq6opaRoD1/img.png)
인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙 (속성의 타입) 함수의 파라미터 함수의 스펙 (파라미터, 반환타입 등) 배열과 객체를 접근 하는 방식 클래스 다음은 interface의 간단한 예제입니다. 함수의 구조에 인터페이스를 활용 sum의 구조는 SumFunction 인터페이스가 정의하고 있으므로 sum에 인자가 3개들어갈 수 없다. 따라서 배열의 인덱싱 방식도 인터페이스로 정의할 수 있다. 인터페이스를 활용한 딕셔너리 패턴 - 문자열과 정규표현식이 들어가야함 인터페이스의 확장
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/chstwJ/btrox1JxI19/WsCqG7GOnwSOQqUABOpXb0/img.png)
tsconfig.json 파일 - Typescript에게 어떻게 javascript로 변환하는지 알려주면서 옵션을 설정하는 파일. compilerOption - 실제 컴파일 할 경우 적용되는 옵션들 module: 어떤 모듈 방식으로 컴파일할지 결정 ex) "commonjs" : node.js를 일반적인 버전으로 사용하고 다양하게 import, export할 수 있게함 target: 원하는 자바스크립트 버전 ex) es6, es6, ES2015... outDir: 컴파일 후 js파일이 생성될 디렉토리 명 sourceMap: 빌드시 map파일을 생성할 것인지 true or false notImplicitAny: 모든 타입에 대해 타입을 넣어줘야함 (any라는 타입일지라도) include : 컴파일할 파일 경..