끄적끄적

next 프로젝트를 하다가, 코드리뷰 중 interface 로 정의된 타입을 type으로 바꾸자는 이야기가 나와서 둘의 차이점이 뭔지 찾아보게 되었다. ChatGPT 답변 : Type과 Interface는 TypeScript에서 타입을 정의하는 두 가지 주요 방법입니다. 두 방법은 비슷한 목적을 가지고 있지만, 몇 가지 차이점이 있습니다. --- Type (타입 별칭): type 키워드를 사용하여 타입을 정의합니다. 주로 유니온(Union), 인터섹션(Intersection), 나머지(rest) 타입 등을 사용할 때 유용합니다. 새로운 타입을 정의하고 이름을 부여할 수 있습니다. 유니온 타입: type MyUnion = string | number; 인터섹션 타입: type MyIntersection =..

https://velog.io/@iooi75/%EA%B3%B5%EB%B6%80-%EB%A7%81%ED%81%AC-%EC%83%88%ED%83%AD%EC%97%B4%EA%B8%B0-%EA%B7%B8%EB%83%A5-%EC%97%B4%EA%B8%B0 [TIL] 링크 새탭열기, 그냥 열기 HTML 그냥 열기 네이버로 바로이동 HTML 새창열기 네이버 새탭으로 열기 velog.io https://stackoverflow.com/questions/34597835/how-to-get-current-route How to get current route The current docs only talk about getting route params, not the actual route segments. For ex..

아이콘이나 뱃지 등 이미지가 들어가는 컴포넌트를 만들 때, 나는 그냥 img 태그를 사용해서 넣었는데 다른 분들 코드에서는 background-img를 통해 넣는 경우가 더 많았다. 그래서 두 개의 차이에 대해 알아봤다. 태그 - 이미지에 구체적인 정보가 담겨 있거나, 출력이 필요하거나, 이미지의 크기가 레이아웃에 크게 영향을 주거나, 검색 엔진에 노출이 필요하거나, 사용자가 등록한 이미지 등일 땐 img 태그를 주로 사용한다. 즉, 페이지 내에서 중요한 역할을 하면 img 태그! background-img : 디자인 요소로만 사용하여, 로딩 되지 않더라도 콘텐츠를 이용하는 데 문제가 없을 때 사용. 그리고 이렇게 사용하는 게 개발/유지보수에 훨씬 효율적이다. https://inseq.co.kr/ko/b..

CSS 자식 컴포넌트가 부모 컴포넌트 width를 넘어서서 검색으로 -webkit-fill-available을 사용했는데, box-sizing 속성을 지정해주어서 해결됐다. box-sizing https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing#css 한 페이지에 div 를 너무 무지성으로 나누는 거 아닌가, 뭔가 구분을 둬야 할 것 같아서 찾아봤다. 차이점 - 의미적 차이 https://velog.io/@yunsungyang-omc/html-%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8-%EB%B8%94%EB%9D%BD%EC%9A%94%EC%86%8C-%EB%B9%84%EA%B5%90-arcicle-section-div (html) ..

Observable lazy loading Observable: 변화하는 데이터 소스들 ex) (user Input)events, HTTP Requests, triggered in Code... Observer: 관찰자, 코드의 다른 부분들 비동기 데이터를 다루는 새로운 표준 lazy하다. 각 이벤트에 subscribe 하면, 구독한 관찰자에게만 보내진다. ngOnDestroy에서 unsubscribe 해줘야함 : 안하면 메모리 누수! promise = 오직 하나의 값만 반환 observable = 구독을 하거나 취소하는 등 직접 관리. 앵귤러 라우팅 객체 (gpt 답변) Router: Router 클래스는 라우팅과 관련된 주요 동작을 제공하는 핵심 클래스입니다. navigate, navigateByUr..

오늘 할 일 : 버그 픽스 끝내기, 다른 페이지 수정 완료하기 버그 픽스는 끝냈고, 그룹 부분 수정 중복되는 코드가 많은데, 하나로 묶거나 추상화 하기에도 애매한 것 같다, 일단 Service에서 관리할 로직과 데이터, 그리고 컴포넌트에서 직접 관리할 로직과 데이터를 잘 생각해서 구분한 뒤에 중복되거나 재사용이 가능한 부분을 정리해서 따로 빼서 만들어야 할 것 같다. 지금은 그걸 정리 안한 채로 섞어서 사용해서 많이 헷갈리게 된 것 같다. search 나 sorting 은 서비스로 따로 빼기 데이터 다루는 부분도 한번 정리하기 굳이 양방향 바인딩이 아니어도 되는, 단방향이어도 되거나 바인딩이 필요 없는 변수에 바인딩을 주면, 쓸데없는 이벤트 훅이 돌 수도 있으므로 주의해야 함! ngOnChages() 이..

중복된 코드가 너무 많다. 예쁘게 함수로 만들고 중복 없이 사용하고 싶은데, 아직 코드가 너무 중구난방이라 어렵다. 오늘 목표: 다른 페이지 다 정리해서 PR 올리기, 서비스 상속 알아보기 서비스 부분 강의 다시 들어야겠다. 아니면 다른 방법 있는지 좀 더 알아봐야겠다. 기능 제대로 확인 안하고 머지해버렸다! 이게 말이 되냐고,,, 정신차리자 추상화된 데이터모델 T에 무조건 test라는 속성은 있었으면 좋겠다면? export interface Selected { selected: boolean } export interface T extends Selected { // ***** 요소 추가 } 근데 T가 정해지지 않은 추상화인데,,, 저러면 그냥 인터페이스를 만드는거 아닌가? 다시 찾아봐야겠다. ngDo..

컴포넌트별로 나누어서 개발하여 재사용에 용이하게 함 MVC(Model-View-Controller)모델 ng generate component test ng g c test ng g c test --skip-test // spec.ts 없이 생성 ng g c test/sub-test // test 폴더 아래에 생성 test.component.ts test.component.scss test.component.html test.component.spec.ts // 테스트용 파일이라 사용하지 않음. 네 개의 파일이 생성됨. 기본적으로 …/src/app/ 아래에 폴더 생성 후 생성된다. app-root import { Component } from '@angular/core'; @Component({ sele..

CPP00 / ex01 std::setw(10) 출력 너비 10 std::right 오른쪽 정렬 failbit 플래그 -> std::cin 에서 int 입력일때 문자를 입력하면 operator>> 가 failbit를 켠다. 이를 이용해서 잘못 입력했을 경우를 체크해줄 수 있음! std::getline() 함수에서 잘못입력할때와 eof가 들어갔을 땐 어떻게 해야할까?

CPP00 / ex01 std::cin c++ 에서 표준입력을 받을때 사용하는 함수. 에 정의되어 있다. 하지만 std::cin 으로 입력받을 때는 space 까지만 입력되므로, 공백을 포함한 string 형식의 입력을 받을 때는 getline() 함수를 사용해야 한다. std::getline() getline() 함수는 std::cin 의 멤버함수인 std::cin.getline() 함수와 에 정의되어있는 std::getline() 함수가 있다. 오늘 사용한 함수는 std::getline() 함수였는데, 아래와 같이 사용된다. std::getline(std::cin, firstName[i]); 이처럼 작성하면 firstName[i] 에 표준입력으로 개행까지 받을 수 있다. 원래는 매개변수가 3개로, 마..