기술 블로그

@Transactional 목적 : @Transactional 어노테이션은 해당 클래스나 메소드에 트랜잭션 관리를 적용하겠다는 것을 Spring에 알립니다. 트랜잭션이란 데이터베이스의 상태를 변화시키기 위해 수행하는 작업 단위를 말하며, 이 어노테이션을 사용함으로써 해...

ORM (Object-Relational Mapping) 라이브러리를 사용할 때 데이터베이스 내에서 자동으로 생성되는 컬렉션 이름이 모델 이름의 복수형으로 설정되는 것은 매우 일반적인 동작입니다. MongoDB와 같은 NoSQL 데이터베이스에서 ORM 또는 ODM (O...

Next.js에서 동적 임포트(dynamic import)를 사용하는 주된 이유는 code splitting과 SSR 최적화입니다. 0이 방법은 특히 클라이언트 사이드 전용 코드에 유용하며, 여러 가지 장점을 제공합니다. 여러 이유가 있지만, 크게 3가지로 분류하였습니...

우선 useRef를 쉽게 이해하려면 렌더링과 DOM에 대한 이해가 필요합니다. 렌더링: 사용자 인터페이스를 화면에 그리는 과정, React에서는 상태(state), 속성(Props) 변경이 발생하면 Component가 렌더링되어 변경된 내용을 화면에 반영합니다. 즉 화...

데이터베이스에서 데이터를 받아오는 중, ` TS18048: avatars is possibly undefined` 문제가 발생했다. 아래 코드에서, getLostArkAvatars 함수를 통해 데이터베이스에서 avatars 를 가져온 뒤, 이를 map 을 사용하여 렌더...

import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RestController; @RestController @Controller 웹 개발을 진행하...

정수 리스트 num_list와 정수 n이 주어질 때, n 번째 원소부터 마지막 원소까지의 모든 원소를 담은 리스트를 return하도록 solution 함수를 완성해주세요. 해설 불필요한 반복문 없이 배열 슬라이싱을 통해 원하는 결과를 얻을 수 있습니다. 더 간결하고 효...

해설 음수 원소를 찾으면 해당 원소의 인덱스를 반환하고, 음수 원소를 찾지 못하면 -1을 반환합니다. 이것은 주로 배열에서 특정 조건을 만족하는 원소를 찾을 때 사용되며, 이 경우에는 음수 원소를 찾는 예시입니다. const minusNum = num_list.find...

해설 solution이라는 함수를 정의하고, 이 함수는 두 개의 매개변수 arr과 k를 받습니다. 이 함수는 arr 배열의 각 요소를 조건에 따라 변환하여 새로운 배열을 반환합니다. 이 코드는 기존의 코드를 개선하여 간결하게 작성되었습니다. function soluti...

정수 리스트 num_list와 정수 n이 주어질 때, num_list의 첫 번째 원소부터 마지막 원소까지 n개 간격으로 저장되어있는 원소들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 해설 주어진 배열 num_list와 숫자 n을 인수...

문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string의 뒤의 n글자로 이루어진 문자열을 return 하는 solution 함수를 작성해 주세요. 해설 slice 메서드는 문자열에서 지정된 범위의 부분 문자열을 추출하는 데 사용됩니다. 이때 -n...

입출력 예와 같이 str1과 str2을 이어서 출력하는 코드를 작성해 보세요. 해설 Node.js 환경에서 사용되는 코드로, 사용자로부터 텍스트 입력을 받고 그 입력을 처리하여 결과를 출력하는 기본적인 기능을 수행합니다. input 배열은 나중에 사용자의 입력을 저장할...

정수가 담긴 리스트 num_list가 주어질 때, 리스트의 길이가 11 이상이면 리스트에 있는 모든 원소의 합을 10 이하이면 모든 원소의 곱을 return하도록 solution 함수를 완성해주세요. 해설 먼저 입력된 배열의 길이를 확인하고, 배열의 길이에 따라 다른 ...

한 자리 정수로 이루어진 문자열 num_str이 주어질 때, 각 자리수의 합을 return하도록 solution 함수를 완성해주세요. 해설 주어진 문자열 numStr에 있는 숫자들을 모두 더해서 그 합을 반환하는 JavaScript 함수를 정의하고 있습니다. input...

정수 start_num와 end_num가 주어질 때, start_num에서 end_num까지 1씩 감소하는 수들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 해설 숫자를 입력으로 받아서, 첫 번째 숫자부터 두 번째 숫자까지의 숫자들을 ...

WebP 이미지 포맷은 디지털 이미지 저장 및 전송의 효율성을 극대화하는 현대적인 기술로, JPG와 JPEG 포맷과 비교했을 때 여러 면에서 우월한 성능을 제공합니다. 주요 이점을 자세히 살펴보겠습니다. 압축 효율의 혁신 WebP 포맷은 동일한 화질의 이미지를 더 작은...

이전 버전의 layout prop 대신, fill prop을 사용하여 반응형 이미지를 쉽게 구현할 수 있습니다. 또한, 컴포넌트의 기본 이미지 요소를 style 또는 className을 사용하여 스타일링할 수 있습니다. 문제가 발생하는 기존 사용 방법 import Im...

Next.js 프로젝트에서 컴포넌트를 임포트하고 사용하는 방식은 표준적인 접근법으로, 다른 파일 또는 컴포넌트를 import 문을 통해 가져와 현재 컴포넌트에서 사용하는 것을 포함합니다. 일반적으로 Components 폴더에 생성 된 Component와 달리, Page...

CORS(Cross-Origin Resource Sharing)는 웹 페이지가 다른 도메인의 리소스를 요청하는 것을 가능하게 하는 웹 보안 표준입니다. 웹 브라우저는 기본적으로 보안 상 Same-Origin Policy를 따르기 때문에, 현재 웹 페이지와 다른 출처에서...

MongoDB는 별도의 설정이 없을 경우 'test'라는 이름의 데이터베이스를 자동으로 사용합니다. 그러나 특정 데이터베이스를 사용하고 싶다면, 데이터베이스 이름을 직접 설정해야 합니다. 이를 위한 방법 중 하나는 연결 문자열에 데이터베이스 이름을 포함시키는 것입니다....