728x90
반응형
- [HTML] 여러 html로 페이지가 구성된 홈페이지에서의 라우팅 문제2024-04-25 11:44:381. 모든 html 파일에서 메뉴명을 수정해야 하다니...회사 홈페이지의 서브 메뉴를 수정할 일이 있었다. 해당 html 파일을 열어 수정했고 다 끝났다고 생각했고 행복했다. 만약 이야기의 결말이 이랬다면 이 글은 쓰지 않았을 것이다.회사 홈페이지는 각 메뉴별로 각각 메뉴를 가지고 있는 방식이다. 다시 말해 메뉴별로 html 파일이 존재하고 각 페이지는 동일한 네브바 코드가 작성되어 있다. 심지어 어떤 메뉴는 서브메뉴도 이와 같은 구조로 되어 있다. 결국 소메뉴의 명을 하나만 수정할 것이 아니라 모든 html 파일에서 수정해야 한다는 것이며-어쩌면 처음으로-SPA가 무척 고맙게 느껴졌다.모든 html 파일에서 소메뉴의 명을 수정한다는 것은 이번 한번만이라면 해줄 만하다. 그래, 충분히 그럴 수 있다..
- [Node.js][TROUBLESHOOTING] 객체에 엉뚱한 속성이???2024-04-19 11:33:141. 객체에 엉뚱한 속성이??? 구동 중인 Node.js로 작성한 배치 서버에서 DB에 저장한 값이 간헐적으로 비정상적인 경우가 발견되었다. 콘솔에 에러 로그를 찍어 보았더니 다음과 같았다. YouError: WHERE parameter "apmac_id" has invalid "undefined" value 이 문제의 특이한 점은 정상적인 객체가 전달되다가 간헐적으로 이러한 에러가 발생한다는 것이다. 2. const 사용을 잊지 말자! 해당 속성이 없다는 에러가 발생하는 경우에 어떤 데이터가 오는지 콘솔에 찍어보았다. 정상적인 경우와 비정상적인 경우의 예는 아래와 같다. { apmac_id: 1, count: 92 } // 정상 { fromAP_id: 92, toAP_id: 89, count: 6 } ..
- [JavaScript] ESModule 사용시 발생하는 net::err_aborted 404 (not found) 에러2024-04-14 21:33:061. 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 }..
- [Spring Boot] gradle lombok Slf4j로 테스트 코드 로그 찍기2024-04-10 15:52:531. DEBUG CONSOLE에 Slf4j 로그가 찍히지 않는 문제 코딩하는 오후 채널의 "스프링 부트 : 보안"을 실습하던 중에 테스트 코드를 실행했는데 DEBUG CONSOLE에 로그가 찍히지 않는 문제가 있었다. 구글링을 통해 이 문제를 해결했고 해당 영상에 없는 내용이라 이 글을 작성하여 정리하고자 한다. 😉 코딩하는 오후 "스프링 부트 : 보안" 동영상 강의 : https://youtu.be/3CY2pk-Ug10?feature=shared 2. lombok 테스트 코드용 설정 2.1. 의존성 설정 build.gradle 파일의 의존성(dependencies)에 아래 코드를 추가해야 한다. testCompileOnly 'org.projectlombok:lombok' testAnnotationPro..
- [Spring Boot] MySQL 연동 application.yml 설정2024-04-08 12:44:281. 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을 다음과 같이 설정해 주었고 연동에 성공했다! # ..
- [TypeScript] 데코레이터(udemy 강의 "Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS" 섹션 8)2024-03-18 23:36:37섹션 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..
- [TypeScript] 제네릭(udemy 강의 "Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS" 섹션 7)2024-03-14 00:04:24섹션 7: 제네릭 📌 제약 조건 작업하기 제약 조건은 제네릭 타입을 더 효율적으로 최적화된 방식으로 활용할 수 있도록 해 주어서 불필요한 오류나 예기치 않은 작동을 피할 수 있다. 아래 예제에서는 extends object로 제약 조건을 추가한 것이다. Object.assign()의 인수로는 object 타입의 값만 의미가 있다. 만약 제약 조건을 추가하지 않은 상태에서 merge()의 두 번째 인수에 30(number 타입)을 인수로 넣는다면 30은 무시된다. 이런 경우에 타입 스크립트에 의해 걸러지지 않는데, 제약 조건을 추가하면 잘못된 타입의 값임을 알려준다. // 제약 조건 ❌ function merge(objA: T, objB: U) { return Object.assign(objA, objB)..
- [Vue.js] 서버 이전 후 애플리케이션을 실행했는데 지도가 렌더링되지 않았다! ReferenceError: kakao is not defined2024-03-13 13:13:051. 카카오 지도가 렌더링 되지 않았다! 서버 이전을 하고 pm2로 애플리케이션을 구동했는데 콘솔에 "ReferenceError: kakao is not defined" 에러가 찍혀 있었고, 카카오 지도가 렌더링 되지 않았다. 기존 서버에서는 정상 동작하는데 새롭게 이전한 서버의 IP에서 위 같은 문제가 발생했다. Vue.js로 작성한 코드에서 카카오 지도 API 연동에 문제가 있는 줄 알고 코드 고치며 무한 삽질했다 ㅠ_ㅠ 2. 사이트 도메인(또는 IP)을 추가해야 한다! [그림 1]과 같이 카카오 API 사이트에서 변경된 도메인을 등록해야 한다. DSN가 아닌 IP를 등록한다면 포트 번호도 입력해야 한다. 카카오 API : https://developers.kakao.com/console/app 등록..
728x90
반응형