분류 전체보기 (30) 썸네일형 리스트형 [Node.js] package.json에서 dependencies와 devDependencies package.json을 보면 아래와 같이 dependencies 영역이 있고, devDependencies 영역이 있다. devDependencies에는 개발 환경에서만 사용하는 패키지들을 명시한다.{ "dependencies": { "express": "^4.17.1" }, "devDependencies": { "webpack": "^5.0.0", "webpack-cli": "^4.0.0" }} npm install을 하면 dependencies와 devDependencies 영역에 명시된 모든 패키지가 설치된다.프로덕션에서 devDependencies 영역에 해당하는 패키지들을 설치하지 않으려면 아래 두 명령어 중에 하나를 선택해서 패키지를 설치하면 된다.npm install.. [Git] error: origin 리모트가 이미 있습니다. 📌 상황1. A 리파지토리에서 프로젝트를 클론 해온 후 수정해서 B리파지토리로 업로드 시도.2. git remote add origin 명령어를 사용3. 아래 오류 발생error: origin 리모트가 이미 있습니다. 원인은 업로드 하려는 프로젝트에 이미 origin 리모트(A리파지토리)가 존재하기 때문이다. 💡 해결방법origin remote를 삭제한 후에 다시 origin remote를 넣어주면 된다.1. origin remote 삭제git remote rm origin 2. origin remote 추가git remote add origin https://github.com/{USERNAME}/{REPOSITORY_NAME}.git [CSS] CSS로 삼각형 그리기 CSS에서 삼각형을 만들기 위해서는 사각형을 활용한다. 단계를 거쳐 살펴보자.위에 있는 이미지가 아래에 첨부되어있는 코드에 대한 결과 화면이다.1. 가로 100px, 세로 100px인 사각형이 있다. 각 테두리의 색상을 다르게 해놨는데, 각 모서리를 잘 보면 하나의 테두리의 범위가 대각선 모양으로 끝나는 것을 확인할 수 있다. 이 점을 이용해서 삼각형을 만드는 것이다.2. 우선 높이를 0으로 만들어서 사각형의 밑면만 남긴다. 그리고 아래쪽 테두리를 제외한 나머지 테두리의 색상을 투명색으로 지정한다. 그럼 1번에서 봤던 사각형의 4가지 테두리 중에 아래쪽 테두리만 남은 것을 확인할 수 있다. 역시 테두리의 양 끝은 대각선으로 잘려있는 모습니다.3. 이제 2번에서 가로 길이를 0으로 줄인다. 그러면 2번의 .. [CSS] shadow로 후광 효과 주기 1. box-shadow객체에 그림자 효과를 줄 때 box-shadow 속성을 사용한다.다음 코드를 실행시키면 주황색 정사각형 뒤로 흰색 그림자가 생긴 것을 볼 수 있다. 그림자 효과를 주는 box-shadow 속성 부분을 보면 이렇게 되어있는데, 각 위치에 있는 값의 역할은 다음과 같다.첫번째 값: 그림자의 가로 위치(사각형 정 가운데가 0)두번째 값: 그림자의 세로 위치(사각형 정 가운데가 0)세번째 값: 그림자의 블러 크기네번째 값: 그림자 색상그럼 아래 코드가 의미하는 것은 "사각형 정 가운데로부터 30px 반경을 가진 흰색 그림자를 만들어 달라"가 된다.box-shadow: 0 0 30px white; 각 값을 조절해서 다양한 형태의 그림자 효과를 줄 수 있다. 2. text-.. private vs protected vs public private protected public 접근 가능 범위 해당 클래스 내 하위 클래스까지 어디서든지 Overloading vs Overriding Overloading/오버로딩 함수의 이름은 같지만 파라미터의 타입/수가 다른 함수를 중복으로 선언하는 것 함수의 로직은 같으나 파라미터만 달라질 때 사용할 수 있다. 파라미터의 수가 달라질 때는 순서대로 뒤에 차곡차곡 추가되어야한다. interface Print { print(data: string): string; print(data: number): number; print(data: string, extraData: number): string; // 파라미터 차곡차곡 print(extraData: string, data: number): string; // 차곡차곡이 아니라서 이건 안됨 } Overriding/오버라이딩 부모 클래스의 함수 구현 내용을 재정의하여 사용하는 것 --> 부모 클래스에.. OOP의 4가지 특징(캡슐화, 추상화, 상속, 다형성) 1. 캡슐화(Encapsulation) 데이터와 코드를 외부에서 알지 못하도록 하여 보호한다. 외부에서는 오직 public이나 protected 레벨로 공개된 객체나 메서드만 호출할 수 있으며, 내부 내용은 알지 못한다. 내부에 선언된 변수의 경우 getter/setter를 활용해서 접근할 수 있게 한다. 2. 추상화(Abstraction) 여러 객체들의 공통적인 속성과 메서드만를 정의해놓는 것이다. 하나의 속성이라도 abstract 키워드가 있으면 abstract class가 되어야한다. 추상 클래스(abstract class)내에 abstract 키워드로 정의된 메서드는 하위 클래스에서 반드시 구현해야하는 메서드임을 명시하는 것이다. 클래스의 틀을 정의해놓는다. 코드를 유지보수하기 좋다. abstra.. DI(Dependency Injection) 의존성 주입이란? DI란 두 클래스 간의 관계를 클래스 외부에서 설정하는 개념이다. 클래스에서 특정 클래스를 직접적으로 정의하지 않고, 두 클래스 사이에 인터페이스를 두고 런타임 시에 두 클래스의 관계를 동적으로 주입하는 것이다. 이렇게 하면 두 클래스 간의 의존 관계가 고정되지 않아서 유연하고 결합도(Coupling)가 낮은 모델을 만들 수 있다. 의존성이란? 한 클래스에서 다른 특정 클래스를 직접 사용하는 것 결합도(Coupling)/의존도란? 어떤 모듈이 다른 모듈에 의존하는 정도 예시) DI가 아닌 클래스 내 다른 클래스를 직접 사용할 때 class Kimchi { } class Milk { } class Refrigerator { private food:Kimchi; constructor(food:Kimchi) .. 이전 1 2 3 4 다음
