- 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 |
- React
- 백준
- JavaScript
- html
- 웹
- map
- git error
- 상태관리
- error
- 비동기
- 프론트엔드
- git
- 에러처리
- Angular
- deep dive
- 모던 자바스크립트 deep dive
- 자바스크립트
- js
- 백준 실버
- 그림으로 배우는 http&network
- http
- Java Script
- 이터러블
- get
- async
- 네트워크
- es6
- 알고리즘
- 모던 자바스크립트
- C++
목록분류 전체보기 (101)
sharingStorage
git push 명령어 사용시 error발생 error code: fatal: You are not currently on a branch. To push the history leading to the current (detached HEAD) state now, use git push origin HEAD: 원인 : 현재 상태가 브랜치에 있는 것이 아니라 옛날의 한 시점의 스냅샷을 보고 있다. 해결 : git push origin HEAD: master 명령어 사용 git push origin HEAD: master - ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 오류 발생 git push or..
git add . 명령어 사용시 발생한 error errorcode: warning: LF will be replaced by CRLF in src/components/Popup.svelte (in 이하 폴더위치) The file will have its original line endings in your working directory 원인 : Unix 시스템에서 줄의 끝은 줄바꿈(LF)로 표시되는데 window시스템에서 줄은 캐리지 리턴(CR)과 줄바꿈(LF)로 표현되므로 CRLF이다. 따라서 Unix 시스템에서 업로드된 git에서 코드를 받으면 LF만 있다. 해결 : Window시스템에서만 작업하는 단일 개발자이고 git이 자동으로 LF를 CRLF로 바꾸는 것에 신경쓰지 않는다면 git confi..
CSS의 position 속성은 문서상에 요소를 배치하는 방법을 지정합니다. static : 모든 태그들은 default값이 static이다. 태그들은 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. relative: static에서 위치를 살짝 변경하고 싶을 때 사용 top, bottom, left, right 속성을 사용해 위치 조절 가능. static일 때를 기준으로 태그들이 움직임. 같은 position이면 나중에 나온 태그가 위에 배치된다. z-index는 겹칠 때 어떤 태그가 위로 올라갈지 정한다. absolute: absolute는 position:static 속성을 가지고 있지 않은 조상을 기준으로 움직임. 만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없으면 b..
Angular Directive Angular에는 DOM모양이나 동작을 지시하기 위한 명령인 Directive가 있다. HTML에 Angular가 간섭할 부분을 표시한다고 이해하면 쉽습니다. 앵귤러의 Directive에는 -Component Directive : 템플릿과 함께 사용하는 디렉티브 같이 selector가 app-root인 app.component를 표출해달라는 뜻 -Attribute Directive : element나 component, 또다른 directive의 모양을 변경시키는 디렉티브 -Structure Directive : DOM element를 더하거나 빼서 DOM을 변화시키는 디렉티브. ngIf, ngFor, ngSwitch등이 있다. -Costomer Directive : 사용..
@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는 최소한으로 초기화해야한다. 일반적으로 컴포넌트는 가볍고 ..
부모 자식 디렉티브/컴포넌트끼리 데이터 공유하기 + @Input(), @Output 구조 알아보기. 이런 구조가 있다고하면 parent-component는 child-component의 컨텍스트를 제공하는 역할을 한다. @Input(), @Output() 데코레이터를 활용하면 자식컴포넌트가 부모 컴포넌트와 통신할 수 있다. input은 부모컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 output은 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 때 사용 @Input() import {Input} from '@angular/core'; Input 심볼을 로드해야한다. typescript 파일에서 html파일로 바인딩하려면 {{}} 이 문법 사용하면 되는데 ts파일끼리 데이터를 주고받으려면 데이터를 받..
HTTP HTTP는인터넷상에서 데이터를 주고 받기 위한 서버/클라이언트 모델을 따르는 프로토콜이다. 이때 HTTP요청에 포함되는 HTTP메소드는 서버가 요청을 수행하기 위해 해야할 행동을 표시하는 용도로 사용합니다. 애플리케이션 레벨의 프로토콜로 TCP/IP위에서 작동하며, 80포트를 사용합니다. 클라이언트가 서버에게 웹페이지를 보여달라는 것을 Request(요청)이라고 부르며 서버가 클라이언트에게 요청받은 것에 대한 대답으로 웹페이지를 표현하기 위해 html문서로 주는 것을 Response(응답)이라 부른다. - 프로토콜이란? 프로토콜은 통신규약으로 인터넷에서 데이터를 주고받을 수 있는 통신규약입니다. - 서버 클라이언트 모델이란? 서비스제공자와 서비스 요청자로 구분되는 네트워크 모델이다. 서비스 제공..
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..
Pure function(퓨어 함수) pure함수란 다음 두가지 조건을 만족하는 함수이다. predictable (예상가능한) no side effects (부수효과가 없는) predictable 여기서 predictable이란 퓨어함수가 호출된 횟수에 관계없이 동일한 input은 동일한 output을 반환해야한다는 것이다. no side effects 이것을 이해할면 side effect부터 알아야한다. side effect의 사전적 의미는 '원래의 목적과 다르게 작용하는 효과'인데 여기서는 '최종 output과 관련없는 함수가 수행하는 작업'으로 생각한다. (상태의 변화를 나타낸다고도 한다.) 예컨데 덧셈을 하는 add함수가 있는데 그 안에 console.log를 사용해 여러가지 값을 출력한다면 이것..