1. ESModule 사용 후 발생한 net::err_aborted 404 (not found) 에러 타입 스크립트를 사용한 프로젝트에서 ESModule을 사용해 불러오기를 하였는데 [그림 1]과 같은 에러가 발생했다. 2. 모듈의 확장자까지 작성해야 한다! 아래의 코드와 같이 app.ts 파일에 new 키워드로 클래스의 인스턴스를 생성했다. new ProjectInput(); app.ts에는 ProjectInput 클래스가 없으며 components 폴더 내 project-input.ts 파일에 클래스가 존재한다. 따라서 아래와 같이 해당 모듈을 임폴트했다. 이때 직접 작성하지는 않았고 VSCode의 "ctrl + space" 단축키를 이용해 자동 완성하였다. import { ProjectInput }..

1. DEBUG CONSOLE에 Slf4j 로그가 찍히지 않는 문제 코딩하는 오후 채널의 "스프링 부트 : 보안"을 실습하던 중에 테스트 코드를 실행했는데 DEBUG CONSOLE에 로그가 찍히지 않는 문제가 있었다. 구글링을 통해 이 문제를 해결했고 해당 영상에 없는 내용이라 이 글을 작성하여 정리하고자 한다. 😉 코딩하는 오후 "스프링 부트 : 보안" 동영상 강의 : https://youtu.be/3CY2pk-Ug10?feature=shared 2. lombok 테스트 코드용 설정 2.1. 의존성 설정 build.gradle 파일의 의존성(dependencies)에 아래 코드를 추가해야 한다. testCompileOnly 'org.projectlombok:lombok' testAnnotationPro..

1. MySQL 연동 실패 MySQL 연동 시 application.yml 파일의 database-platform 속성을 MySQLDialect로 작성해야 한다. 이렇게 설정하지 않고 시도했을 때 아래와 같은 에러를 만났었다. org.hibernate.boot.registry.selector.spi.StrategySelectionException: Unable to resolve name [org.hibernate.dialect.MySQL57Dialect] as strategy [org.hibernate.dialect.Dialect] 2. application.yml 설정 사례 Spring boot에서 MySQL 연동을 위해 application.yml을 다음과 같이 설정해 주었고 연동에 성공했다! # ..

섹션 8: 데코레이터(장식자) 📌 데코레이터 사용 준비 // tsconfig.json { // (생략) "experimentalDecorators": true, // (생략) } 📌 데코레이터 // 여느 함수 처럼 대문자로 시작하지 않아도 되지만 대부분의 라이브러리 데코레이터의 경우 대문자로 시작 function Logger(constructor: Function) { console.log("Logging..."); } @Logger class Person { name = "김일남"; constructor() { console.log("Creating person object..."); } } const pers = new Person(); console.log(pers); /* 출력 결과 Logging..

섹션 7: 제네릭 📌 제약 조건 작업하기 제약 조건은 제네릭 타입을 더 효율적으로 최적화된 방식으로 활용할 수 있도록 해 주어서 불필요한 오류나 예기치 않은 작동을 피할 수 있다. 아래 예제에서는 extends object로 제약 조건을 추가한 것이다. Object.assign()의 인수로는 object 타입의 값만 의미가 있다. 만약 제약 조건을 추가하지 않은 상태에서 merge()의 두 번째 인수에 30(number 타입)을 인수로 넣는다면 30은 무시된다. 이런 경우에 타입 스크립트에 의해 걸러지지 않는데, 제약 조건을 추가하면 잘못된 타입의 값임을 알려준다. // 제약 조건 ❌ function merge(objA: T, objB: U) { return Object.assign(objA, objB)..

1. 카카오 지도가 렌더링 되지 않았다! 서버 이전을 하고 pm2로 애플리케이션을 구동했는데 콘솔에 "ReferenceError: kakao is not defined" 에러가 찍혀 있었고, 카카오 지도가 렌더링 되지 않았다. 기존 서버에서는 정상 동작하는데 새롭게 이전한 서버의 IP에서 위 같은 문제가 발생했다. Vue.js로 작성한 코드에서 카카오 지도 API 연동에 문제가 있는 줄 알고 코드 고치며 무한 삽질했다 ㅠ_ㅠ 2. 사이트 도메인(또는 IP)을 추가해야 한다! [그림 1]과 같이 카카오 API 사이트에서 변경된 도메인을 등록해야 한다. DSN가 아닌 IP를 등록한다면 포트 번호도 입력해야 한다. 카카오 API : https://developers.kakao.com/console/app 등록..

섹션 6: 고급타입 📌 인터섹션 타입 1. type과 & type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; type ElevatedEmployee = Admin & Employee; // 두 타입의 속성 모두 사용 가능 const e1: ElevatedEmployee = { name: "김일남", privileges: ["create-server"], startDate: new Date(), }; 2. interface와 extends interface AdminInter { name: string; privileges: string[]; } interface Emp..

섹션 14: React.js 및 TypeScript 📌 React.js + TypeScript 프로젝트 생성 .은 현재 경로에 프로젝트를 생성하는 것을 말한다. npx create-react-app . --template typescript 😉 공식 문서 : https://create-react-app.dev/docs/adding-typescript/ 📌 React.FC // src/app.tsx import React from "react"; // React.FC는 리액트 함수 컴포넌트 사용함을 의미 const App: React.FC = () => { return ; } export default App; 📌 React.FC와 React.FC에 화살 괄호 를 사용해 props의 타입을 지정할 수 있다..