기술 블로그

설명 Spring Framework에서 @Bean 과 @Configuration 은 스프링의 핵심 어노테이션 중 일부로, 스프링의 의존성 주입(Dependency Injection) 기능과 관련 있습니다. 이들은 스프링 애플리케이션 컨텍스트에서 빈(Bean)의 생성과 ...

생명주기 이벤트 처리란, 컴포넌트의 생성부터 소멸까지 일어나는 여러 단계에서 특정 코드를 실행하는 것을 말합니다. 이는 컴포넌트가 사용자의 인터페이스에 나타나고, 업데이트되며, 마지막으로 제거될 때까지의 과정을 포함합니다. React에서는 이러한 과정을 생명주기(Lif...

게시글 작성 전에 오류 페이지를 FrontEnd 섹션에 작성할지, BackEnd 섹션에 작성할지 고민했습니다. 사용자에게 보여지는 오류 페이지 측면에서 접근했기 때문에, 이 내용을 FrontEnd 섹션에 다루기로 결정했습니다. 기본 에러 페이지 관리 N ext.js에서...

boolean 변수 x1 , x2 , x3 , x4 가 매개변수로 주어질 때, 다음의 식의 true/false를 return 하는 solution 함수를 작성해 주세요. 이 함수는 네 개의 입력값 x1 , x2 , x3 , x4 를 받아 논리 연산을 수행하고 그 결과를...

정수 배열 arr 이 매개변수로 주어집니다. arr 의 길이가 2의 정수 거듭제곱이 되도록 arr 뒤에 정수 0을 추가하려고 합니다. arr 에 최소한의 개수로 0을 추가한 배열을 return 하는 solution 함수를 작성해 주세요. 배열의 크기를 결정하는 데 사용...

A 나라가 B 나라의 중요 군사 기지를 공격하였습니다. B 나라는 최소한의 비용으로 모든 공격을 막으려고 합니다. 이를 위해, 각 공격이 X축에 평행한 직선으로 표현되며, 요격 미사일은 특정 X 좌표에서 수평으로 발사되어 모든 걸치는 공격을 한 번에 막을 수 있습니다....

정수 n과 k가 주어졌을 때, 1 이상 n이하의 정수 중에서 k의 배수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 이 코드는 주어진 두 개의 정수 n과 k를 입력으로 받아, 1부터 n까지의 숫자 중에서 k로 나누어 떨어지는 숫...

문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string의 앞의 n글자로 이루어진 문자열을 return 하는 solution 함수를 작성해 주세요. JavaScript로 작성된 함수인 solution을 나타냅니다. 이 함수는 두 개의 인자를 받습니...

기능 Windows 단축키 Mac 단축키 기능검색 [ Ctrl ] + [ / ] [ Cmd ] + [ / ] 오브젝트 복제 [ Ctrl ] + [ O ] [ Cmd ] + [ O ] 투명도 조절 숫자키 0~9(00~0%) 숫자키 0~9(00~0%) 그룹(Group) [...

사용자로부터 데이터를 받는 일은 매우 흔합니다. 예를 들어, 사용자가 블로그 포스트를 작성하거나 회원가입을 할 때 정보를 입력해야 하죠. 이때, React와 같은 현대적인 프레임워크에서는 어떻게 데이터를 효율적으로 수집하고 관리할 수 있을까요? 구조화와 접근성 <for...

오라클 데이터베이스에서 쿼리의 성능을 향상시키기 위해 DBeaver의 실행 계획 기능을 활용하는 방법을 단계별로 알아보겠습니다. 1. 쿼리 준비 DBeaver에서 원하는 데이터베이스에 연결하고, 튜닝하고자 하는 SQL 쿼리를 준비합니다. 2. 실행 계획 확인 쿼리 에디...

React Hooks는 함수형 컴포넌트에서 상태 관리, 생명주기 이벤트 처리 등 클래스 컴포넌트에서 가능했던 기능을 사용할 수 있게 해줍니다. 각 Hook은 특정한 용도로 사용되며, 이해하기 쉽게 각각의 용도와 사용 예를 설명하겠습니다. 1. useState useSt...

GitHub는 전 세계 개발자들이 자신의 작업을 공유하고, 다른 개발자와 협력하며, 오픈 소스 프로젝트에 참여하는 중요한 플랫폼입니다. 효과적인 GitHub 프로필 설정은 당신의 개발 커리어에 큰 도움이 될 수 있습니다. 여기에 몇 가지 권장 사항을 제공해 드리겠습니다...

@icons-pack/react-simple-icons 패키지 소개 @icons-pack/react-simple-icons 는 1000개 이상의 SVG 아이콘을 제공하는 React 라이브러리입니다. 이 아이콘들은 주로 프로그래밍 언어, 디자인 도구, 소셜 미디어 플랫폼...

PostgreSQL 데이터베이스를 관리하고 개발하는 데 유용한 주요 그래픽 사용자 인터페이스(GUI) 툴에 대한 설명입니다. 데이터베이스 설계와 관리 작업을 간소화하여 사용자가 데이터에 쉽게 접근하고 쿼리를 효율적으로 실행할 수 있게 도와줍니다. pgAdmin - Po...

Marquee 패키지 소개 Marquee는 웹 페이지에서 텍스트나 이미지가 수평으로 또는 수직으로 자동으로 스크롤되게 하는 기능을 제공하는 JavaScript 라이브러리입니다. 이는 주로 뉴스 티커, 광고 배너, 또는 웹사이트에서 동적인 요소를 추가할 때 사용됩니다. ...

useState 는 Component 내부에서 변수의 상태를 관리하기 위해 사용, 사용자 입력, 버튼 클릭 상태 또는 다른 데이터 변화를 추적하고 반응하기 위해 활용됩니다. 사용자가 입력한 텍스트를 저장하고 표시하는 입력 필드에서 사용 useMemo 는 연산 결과값을 ...

문자열 배열 strArr가 주어집니다. 모든 원소가 알파벳으로만 이루어져 있을 때, 배열에서 홀수번째 인덱스의 문자열은 모든 문자를 대문자로, 짝수번째 인덱스의 문자열은 모든 문자를 소문자로 바꿔서 반환하는 solution 함수를 완성해 주세요. 해설 solution이...

Loading UI 생성 loading.js 는 React Suspense를 사용하여 의미 있는 Loading UI를 생성할 수 있도록 합니다. 이 규칙을 사용하면 서버에서 즉각적인 로딩 상태를 보여줄 수 있고, 경로 세그먼트의 콘텐츠가 로드되는 동안 사용자에게 피드백...

Next.js 애플리케이션에 Microsoft Clarity와 같은 타사 스크립트를 통합할 때, Next.js가 스크립트를 로딩하고 실행하는 방식으로 인해 특정 충돌이 발생할 수 있습니다. 흔히 발생하는 문제 중 하나는 JavaScript 오류입니다. 문제 설명 app...