참치코더의 꿈 메모장

타입 호환성 표 참조 .....! https://www.typescriptlang.org/ko/docs/handbook/type-compatibility.html Documentation - Type CompatibilityHow type-checking works in TypeScriptwww.typescriptlang.org - 타입스크립트는 구조적 타이핑(Structural Typing)을 기반으로 하기 때문에 형태(구조)가 같거나 더 많은 속성을 가지고 있으면, 호환 가능하다는 규칙을 가진다. 기본 타입(Type) 호환성 1. 더 넓은 타입 -> 더 좁은 타입 (슈퍼 타입이 서브타입에 들어가는것) 은 호환이 불가능하다 2. 더 좁은 타입 -> 더 넓은 타입 (서브 타입이 슈퍼타입에 들어가는 ..

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081// 타입 별칭// 일일이 유저별로 type을 지정하면 몇 백개씩 지정해야 하므로 // type을 사용하면 해당 타입을 따로 지정해서 타입을 사용할 수 있다. type User = { id: number, name: string, nickname: string, bio: string; location?: string;}; let user1: User = { id: 1, name: "홍길동", ..

1. 컴포넌트가 화면에 처음 렌더링 될 때 동작한다. (Mount Effect) - [ ] 빈 배열을 두 번째 인자로 전달하면, 컴포넌트가 처음 나타날 때 한번만 실행된다.- 초기 데이터 fetch, 구독 설정 등에 사용된다. useEffect(()=>{ console.log("처음 한 번만 실행");}, [ ]); 2. 특정 값이 변경될 때 실행되는 동작(update Effect / Dependency Effect) - 의존성 배열에 넣은 값이 바뀔 때마다 effect가 실행된다.- 상태 변화에 따라 API 재요청, 계산 업데이트 등에 사용된다. useEffect(()=> { console.log("count가 바뀔 때 실행");}, [count]); 3. 컴포넌트가 사라질 때 정리 작업 실행..

Next.js pages 디렉토리 기반 라우팅에서는 App 컴포넌트를 사용해 전체 앱의 공통 레이아웃을 설정하고,각 페이지에서 getLayout 패턴을 사용하여 개별 레이아웃을 지정할 수 있다. 전체 페이지에 공통 레이아웃 적용하기 - Next.js는 pages 라우팅에서 pages/_app.js 파일을 통해 앱의 루트 컴포넌트를 정의한다. 따라서 _app.js에서 원하는 공통 레이아웃(헤더, 푸터)을 감싸주면 모든 페이지에 자동 적용된다.123456789101112131415161718192021222324252627282930313233//components/Layout.js export default function Layout({children}){ return ( div>..

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667//numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num7: number = NaN; //stringlet str1: string = "hello";let str2: string = 'hello';let str3: string = `hello`;let str4: string = `hello ..

ISR(Incremental Static Regeneration) - Next.js의 페이지 모드(pages/ 디렉터리 기반 라우팅)에서 정적페이지(SSG)를 일정 주기로 자동으로 다시 생성하는 방식이다. - SSR과 SSG의 단점을 모두 상회하는 방식이다. - 빌드 타임에 만든 정적 페이지를, 요청이 들어올때 또는 일정 주기마다 다시 생성 해서 최신 데이터로 유지하는 방식이다.1234567891011121314151617181920212223242526 export default function Home({time}: {time: string}){ return ( div> h1> ISR 테스트 페이지/h1> p>현재 시간: {time}/p..

Named Query - Named Query는 미리 이름을 붙여 정의해두는 정적 쿼리입니다.- 프로젝트 빌드 시점에 JPQL 문법 오류를 잡을 수 있고, 재사용성도 높다.123456789101112131415// 정의하는 방법@Entity@NamedQuery( name = "Member.findByUsername", query = "select m from Member m where m.username = :username")public class Member { ...} // 사용 방법ListMember> members = em.createNamedQuery("Member.findByUsername", Member.class) .setParameter("username", "u..

TypeScript의 특징 1. 정적 타입 언어 - 실행 전(컴파일 시점)에 타입을 검사한다. JS는 런타임 에러를 나중에 알아 오류 방지를 하지 못하지만 TS는 미리 이것을 잡아주는 역할을 한다. 2. 타입 추론 - 명시하지 않아도 자동으로 타입을 유추한다.- let count = 3 -> count는 자동으로 number라고 인식을 한다. 3. 강력한 타입 시스템 - interface, type, enum, union, generic 등으로 복잡한 타입도 표현이 가능하다. 4. 객체지향 지원 - class, abstract, implements 등 컴파일 기반 프로그래밍 기법도 지원을 한다. 5. IDE 친화적 - 자동완성, 타입 힌트. 리팩토링 기능이 강력하게 작동한다. 6. 점진적 적용 가능..