끄적끄적

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..

배열 push, pop, shift, unshift let arr = new Array(); let arr_1 = new Array(5); // empty array 5 let arr2 = []; arr.push('a'); // 맨 뒤에 추가 arr.push(1); arr.push({name: 'hello'}); arr.unshift(10); // 맨 앞에 추가 arr.pop(); // 맨 뒤 arr.shift(); // 맨 앞 splice, slice arr.splice(2,1,6,7,8); // 인덱스 2부터 1개 삭제, 그 자리에 6,7,8 추가 arr.splice(3); // 인덱스 3부터 끝까지 삭제, 삭제한 배열 리턴 let newArr = arr.slice(1, 4); // 인덱스 1~3 요..

맥북으로 유데미 강의를 듣는데, 아무래도 들으면서 실습을 하거나 필요한 자료 찾으려면 아이패드랑 미러링 해서 보는 게 훨씬 편해서 미러링을 했더니 화면이 그냥 검은 화면만 나오고, 소리와 자막만 재생되었다. 처음엔 그게 미러링 탓인줄도 모르고, 그냥 동영상 재생이 안되길래 당황했는데, 알고보니 미러링 때문이었다... 아마 영상 캡쳐로 인식하거나 그런 것 같다. 케이블 연결도 시도해보고 했는데, 찾아보니 https://business-support.udemy.com/hc/ko/articles/115005369487-%EB%8F%99%EC%98%81%EC%83%81-%EC%9E%AC%EC%83%9D-%EB%AC%B8%EC%A0%9C 이 링크에서 '브라우저 하드웨어 가속 설정' 을 해제하라고 해서 시도해봤다...

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..