본문 바로가기

분류 전체보기125

this this : 메서드 내부에서 객체에 접근할 수 있는 지시자? 예약어? let company = { name: "nhn", where: "pangyo", companyName() { alert(this.name); // this 는 현재 메소드의 객체인 company를 나타낸다. } }; company.companyName(); 동일한 코드는 다음과 같이 작성할 수 있다. let company = { name: "nhn", where: "pangyo", companyName() { alert(company.name); return company.name; // this. 대신 user 사용 } }; company.companyName(); 다만 후자의 경우, 원하지 않는 형태의 동작을 할 수도 있다. 예를.. 2020. 12. 31.
DI(Dependency Injection : 의존성 주입) 의존성이란? 한 객체가 다른 객체와 상호참조하고 있다면, 현재 객체는 다른 객체에 의존성을 가진다. 의존성 주입이란? DI 를 간단히 말해 외부에서 의존 객체를 생성하여 넘겨주는 것을 의미합니다.따라서 의존 관계가 내부가 아닌 외부의 설정 파일에 의해서 결정되게 됩니다. 소프트웨어 프로그래밍의 관점에서 Dependency Injection 즉 의존성 주입을 간단히 설명한다면 하나의 객체(C)가 다른 객체(B)를 필요로하는 특정 객체(A)에게 의존성을 대신 간접적으로 전달해주는 역할이라고 말할 수 있습니다. 아래의 예시를 보겠습니다. A라는 특정 객체가 B라는 다른 객체를 참조하고 싶다면 이전 같은 경우에는 A가 B를 직접적으로 참조하였습니다. 그러나 의존성 주입을 활용한다면 C라는 하나의 객체가 A라는 .. 2020. 11. 10.
싱글턴 디자인 패턴 싱글턴 패턴이란 ? 전역변수를 사용하지 않도록 객체 하나만을 생성하도록 하며, 생성된 객체는 어디서든 참조할 수 있도록 하는 디자인패턴 싱글톤 패턴은 다음과 같은 상황에 적용할 수 있다. 프로그램 내 에서 어떤 객체가 단 1개만 존재해야 한다. 프로그램 내부의 여러 부분에서 이 객체를 공유하며 사용한다. 위와 같은 상황에서, 싱글톤 패턴은 객체가 프로그램 내부에서 단 1개만 생성됨 을 보장한다. 멀티 스레드에서 이 객체를 공유하며 동시에 접근하는 경우에 발생하는 동시성 문제도 해결할 수 있다. class Node { private static Node singleton; // 싱글톤의 특성은 생성자가 private이다. // 그러므로 외부에서 new로 선언할 수가 없다. private Node() { }.. 2020. 11. 10.
Web Pack이란 무엇인가 단순 정의 WebPack이란 모듈을 번들링하는 도구다. WebPack 공식 홈페이지의 메인화면에서 돌아가는 이미지를 보면 보다 쉽게 이해가 될 것이다. 대충봐도 복잡한 의존성 모듈들을 묶어서 정적 요소로 합쳐주는 것이다. 다음은 공식 홈체이지에 잇는 예제이다. src/index.js import bar from './bar'; bar(); src/bar.js export default function bar() { // } webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle... 2020. 11. 6.
Cookie, Local Storage, Session Storage 각각의 차이점 0. 공통 데이터베이스를 사용하지 않고 데이터를 임시적인 용도로 저장 할 때 사용하는 것 대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토리지를 적절히 사용해야한다. 대부분 임시적인 용도의 데이터나 캐시, history 기능을 위해 사용한다. 글 작성 중간에 임시로 글을 저장하는 용도로도 많이 사용된다. (form) 쇼핑몰의 장바구니, 좋아하는 콘텐츠(찜, 좋아요와 같은 기능들)등 수시로 변경되는 정보를 저장 할 때 사용한다. 방문자의 이동 경로를 저장하였다가 이동 시에 사용한다. 그 외 서버에 저장할 필요가 없는 정보들을 저장 할 때 사용한다. 가장 중요한 것은 보안적인 문제가 될 만한 것들을 저장할 때 사용하면 안된다. Cookie 브라우저 요청이 있을 경.. 2020. 11. 5.
Stacking Context? Stacking Order? HTML에서 각 요소 레이어가 화면에 쌓이는 순서와 쌓이는 맥락(?)을 의미하는데, 아래 예제가 가장 유명한 듯 하다 Red Green Blue 주석처리한 opacity를 활성화하면 이렇게 된다. stacking order인지 context떄문인지는 모르겠다. 다른 예제로 z-index를 활용한 예제가 있는데, 보다 명확하게 이해할 수 있을 것 같다. (적어도 z-index를 활용한 부분에 대해서만큼은) Division Element #1 position: relative; z-index: 5; Division Element #2 position: relative; z-index: 2; Division Element #4 position: relative; z-index: 6; Division Eleme.. 2020. 11. 5.
JS Object에서 .forEach 루프와 .map() 루프 사이의 주요 차이점 forEach 배열의 요소를 반복합니다.(공통점) 각 요소에 대해 콜백을 실행하며 값을 반환하지 않습니다.(차이점) const a = [1, 2, 3]; const doubled = a.forEach((num, index) => { return num*=2; }) console.log(doubled)// doubled = undefined map 배열의 요소를 반복합니다.(공통점) 각 요소에서 함수를 호출하여 결과로 새 배열을 작성하여 각 요소를 새 요소에 매핑합니다.(차이점) const b = [1, 2, 3]; const doubledmap = b.map((num, index) => { return num*=2; }) console.log(doubledmap)// doubledmap = [2,4,6].. 2020. 11. 5.
CSS 전처리기의 종류와 장단점 CSS 전처리기란? 간단히 말해, CSS의 한계를 뛰어넘기 위해 개발된 새로운 형태의 CSS라고 할 수 있습니다. 내가 CSS를 보다 쉽게 작성할 수 있게 다른 개발자들이 내가 작성한 CSS를 보다 쉽게 이해할 수 있게 CSS로는 구현 불가능한 변수 또는 함수를 사용할 수 있게 CSS 전처리기 프레임워크의 종류 Sass Less Stylus 왜 전처리기를 사용해야 하나 개발적인 측면에서 유지보수성과 동일한 스타일을 적용해야하는 대상을 보다 쉽게 관리할 수 있기 때문 너무 큰 CSS파일을 수정하기에 해당하는 위치를 찾아가기가 어렵기 때문 CSS 전처리기 사용시 장단점 장점: CSS 코드를 여러 파일로 나눠 유지보수성이 향상 CSS파일도 나눌 수 있지만, CSS를 다운로드하기 위한 HTTP 요청이 다수 발생.. 2020. 11. 5.
ngModel cannot be used to register form controls with a parent formGroup directive. ERROR Error: ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example: In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions: Example: 해결방법 : formGroup 속성을 가진 태그의 하위.. 2020. 5. 27.
반응형

티스토리툴바