IT 성장일기

테이블 업데이트 할 때 컬럼 유연하게 적용하기MyBatis에서 UPDATE 구문 내 SET 절에 동적으로 컬럼을 설정할 때, 쉼표(,) 처리가 중요합니다.각 컬럼이 조건에 따라 추가되기 때문에, 마지막에 붙는 쉼표를 제거하지 않으면 SQL 오류가 발생할 수 있습니다. 이 때 태그와 태그를 적절하게 사용해서 안전하고 유연하게 구문을 작성할 수 있습니다.UPDATE USER ID = #{id}, NAME = #{name}, NUMBER = #{number}, 태그는 조건을 검사하고 유효한 구문만 추려서 SET 절을 완성해줍니다.변수로 받은 number가 nul이고 id와 name만 존재한다면 쿼리문은 아래와 같이 완성됩니다.UPDATE USERSET ID = #{..

자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법이전 글에서는 getElementsBy...와 같은 전통적인 방식으로 DOM 요소를 선택하는 방법에 대해 간단히 다뤄봤습니다.이번 글에서는 가장 범용적으로 쓰이는 querySelector 함수에 대해 예제 중심으로 정리해보겠습니다.🎯querySelector / querySelectorAllquertSelector 함수는 "CSS 선택자"를 인자로 받아서 조건에 맞는 DOM 요소하나를 반환합니다.querySelectorAll 함수는 조건에 맞는 모든 요소를 NodeList 형태로 반환합니다.const one = document.querySelector('.example'); // 가장 첫 번째 .example 요소const all = doc..

자바스크립트에서 DOM 요소를 선택하는 여러 가지 방법자바스크립트를 이용해 특정 요소를(또는 요소들을) 가져오는 방법을 정리해 보겠습니다.다양한 예제를 적어두고 지능이 퇴행되기 시작하면 종종 꺼내 읽도록 하겠습니다.getElementById('id')매개변수로 받은 문자열을 id 속성으로 갖는 요소를 반환합니다.하나의 dom에서 id 속성은 유일해야 하기 때문에 당연하게도 반환되는 요소의 개수는 1개입니다. const fruitContainer = document.getElementById('fruits');const appleDiv = document.getElementById('apple');const pineapplePane = fruitContainer.getElementById('p..

MIME 타입이란?MIME 타입(MIME Type)은 파일이나 데이터의 형식을 나타내는 문자열로,웹이나 이메일에서 어떤 종류의 데이터인지 브라우저나 서버가 이해할 수 있게 해주는 표준 형식입니다.MIME 타입의 의미이건가요?MIME = Multipurpose Internet Mail Extensions원래는 이메일에 텍스트 외 이미지나 오디오 등을 첨부하기 위해 만들어졌지만, 현재는 웹 전송의 핵심 포맷으로 사용되고 있다고 합니다.MIME 타입의 구조MIME 타입은 항상 다음과 같은 형식을 따릅니다.type/subtype 이 타입과 서브타입은 어느 한쪽이 생략될 수 없으며 아래와 같이 해석됩니다.text/html → HTML 문서image/png → PNG 이미지application/json → JSON..

태그에서 업로드 파일 타입 제한하기HTML의 file 타입의 input 태그를 통해 파일을 업로드 할 떄, 업로드 파일의 속성을 제한할 수가 있습니다.정확히 말하면 accept 속성을 사용하여 업로드 가능한 화이트리스트를 설정해주는 것이죠. 특정 파일 타입 허용하기MIME 타입을 이용해 특정 카테고리의 파일만 허용할 수 있습니다.//이미지 타입만 허용//오디오 타입만 허용//비디오 타입만 허용//여러 개의 카테고리 허용 몇몇 개의 특정 확장자만 허용하고 싶은 경우 아래와 같이 설정할 수 있죠.//JPG만 허용//PNG도 허용//문서파일만 허용'제한적'인 '업로드 제한'input 태그를 통한 업로드 제한은 클라이언트 조치이기 때문에 개발자 도구를 통해 우회하거나 파일 선택 단계에서 우회할 수도 있습니다.따..

요소에 이벤트 핸들러를 등록하는 여러 가지 방법브라우저는 사용자의 행동을 감지해 여러 가지 이벤트를 발생시킵니다. (버튼을 클릭한다던가 스크롤을 내리는 등)이 이벤트에 반응하기 위해 요소에 이벤트 핸들러를 등록하는 방법은 크게 세 가지 정도로 나누어집니다.뭐가 좀 달라?선언 방식이 다르다면 동작 방식에도 무언가 차이가 있을 것입니다. 없으면 이 글 안 썼지.각 방식의 차이와 장단점을 아래에 정리해 보겠습니다.핸들러 등록 방식의 차이와 장단점1. 인라인 어트리뷰트 방식HTML 요소의 속성으로 직접 이벤트 타입을 명시하는 방식입니다.선언과 사용이 편하지만 코드의 목적의 명확한 분리와 유지보수성이 중요한 프로젝트라면 사용을 지양하는 것이 좋습니다.인라인 방식 장점 : 간단한 선언 방식단점 : HTML과 JS..

[JPA] Cannot invoke "" because "entity" is null나 제발 네이티브 쿼리랑 마이바티스 사용하게 해 줘🥲JPA 사용 중 마주친 NullPointException 해결 과정을 정리했습니다.문제아직 개발 초기단계라 처음엔 단순히 고객의 활동 이력만 데이터베이스에서 조회해서 가져오는 부분까지만 구현해 둔 상태였습니다.하지만 활동 이력에 포함된 속성 중 가맹점 ID를 조인 조건으로 고객이 방문한 가맹점 정보를 함께 조회해야 했습니다.@Entity@Table(name = "TB_HISTORY")public class History { @Id private Long id; @OneToOne @JoinColumn(name = "MEMBERSHIP_ID") ..

URL Shortner 개발하기 (2)담당하고 있는 서비스에는 간소화된 URL을 사용해 컨텐츠를 공유하는 기능이 있었습니다.얼마 전 네이버 단축 URL 서비스가 종료됨에 따라 대체재로 사용할 URL 단축 서비스를 사이드 프로젝트로 개발하게 되었습니다. URL Shortner 개발하기는 두 편으로 나뉩니다.이번 포스팅에서는 URL 단축에 있어 실제적으로 사용된 기술과 예제 코드를 포스팅합니다.1. 개요개발 환경스프링, 자바, 마리아DB를 사용합니다.로직 자체는 굉장히 단순해서 언어와 플랫폼에 크게 구애받지 않고 응용할 수 있을 것이라고 생각합니다.URL 단축 방식원본 URL에 대한 ID를 생성하고, 생성된 ID를 BASE62 문자셋을 이용해 인코딩합니다.인코딩된 ID를 사용자에게 전달하는 방식으로 URL ..

URL Shortner 개발하기 (1)담당하고 있는 서비스에는 간소화된 URL을 사용해 컨텐츠를 공유하는 기능이 있었습니다.얼마 전 네이버 단축 URL 서비스가 종료됨에 따라 대체재로 사용할 URL 단축 서비스를 사이드 프로젝트로 개발하게 되었습니다. URL Shortner 개발하기는 두 편으로 나뉩니다.이번 포스팅에서는 단축 URL이란 무엇이며 어떤 과정을 거쳐 URL을 단축하는지 알아보겠습니다.1. 단축 URL원본 URL을 짧게 줄인 형태의 URL을 의미합니다.이때 단축 URL은 원본 URL과 같은 위치를 가리킵니다.단축 URL의 필요성문장도 그렇듯 URL도 너무 길면 전달하기도 읽기에도 쉽지 않겠죠. 조금 과장해서 비유하자면, '소금간 된 익힌 쌀에 볶은 당근, 채 썬 오이, 지단, 맛살과 부드러운..

DTO를 이용해 중첩된 구조의 JSON 객체 전달 받기객체 안에 또 객체가 들어있는, 중첩된 구조의 객체를 JSON과 DTO를 이용해 주고받는 예제입니다.예제ClientJSON 객체는 아래와 같은 구조로 이루어져 있습니다.let dto = { master : { title , description , } , url : { id , url , } , location : { id , lat , lon , }}ServerJSON과 매핑시키기 위해 동일한 구조로 dto를 작성해야합니다. (롬복 애너테이션 등은 생략하겠습니다.)public class Dto { private Master m..

한글 받침 유무 파악하기담당하고 있는 서비스에 사용자가 현재 열람하고 있는 컨텐츠와 유사한 컨텐츠를 추천해주는 큐레이션 영역이 있었습니다."현재 여행지 명와(과) 유사한 여행지"가 큐레이션의 타이틀인데, 조사를 와(과)로 표시하고 있는 부분이 조금 어색했습니다.컨텐츠명의 마지막 글자의 받침 유무를 판단해 조사를 결정지어서 표시하면 어떨까? 라는 생각으로 이어졌고,구글을 뒤져본 결과 어렵지 않게 다양한 예제코드를 발견할 수 있었습니다.예제 코드아래는 완성된 함수입니다.function hasJongseong(str) { if (!str || typeof str !== 'string') return false; const lastChar = str.charAt(str.length - 1); c..

There is no getter for property named 'url' in 'class java.lang.String'문제MyBatis 사용 중 아래와 같은 오류가 발생했습니다.ReflectionException: There is no getter for property named 'url' in 'class java.lang.String'원인이 예외는 MyBatis가 #{url}과 같이 프로퍼티를 처리하는 과정에서 String 타입의 url 변수에 대한 getter를 찾으려 하기 때문에 발생한다고 합니다. MyBatis는 프로퍼티를 매핑하는 표현식을 사용할 때, 해당 프로퍼티가 객체의 필드라고 가정하고 getter 메서드를 찾습니다.그런데 매개변수로 전달한 url은 단순한 String 타입이고..