기술 블로그

1. Canonical 태그 설정 Canonical 태그는 구글에 표준 페이지를 알려 중복 콘텐츠 문제를 해결하는 데 사용됩니다. Next.js의 app directory 구조를 사용하여 모든 페이지에 Canonical 태그를 추가할 수 있습니다. app/layout....

클로저(Closure)란 무엇인가? 클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다. 즉, 함수가 생성될 때의 스코프를 기억하고 있는 함수입니다. 클로저는 외부 함수의 변수에 접근할 수 있는 내부 함수를 정의할 때 자주 사용됩니다. function createG...

Node.js 프로젝트를 진행하다 보면 의존성 문제를 자주 겪게 됩니다. 이러한 문제를 해결하는 데 도움이 되는 두 가지 명령어가 바로 npm install --force 와 npm install --legacy-peer-deps 입니다. npm 의존성 관리의 기본 n...

한자리 숫자가 적힌 종이 조각이 흩어져있습니다. 흩어진 종이 조각을 붙여 소수를 몇 개 만들 수 있는지 알아내려 합니다. 각 종이 조각에 적힌 숫자가 적힌 문자열 numbers가 주어졌을 때, 종이 조각으로 만들 수 있는 소수가 몇 개인지 return 하도록 solut...

비내림차순으로 정렬된 수열이 주어질 때, 다음 조건을 만족하는 부분 수열을 찾으려고 합니다. 수열을 나타내는 정수 배열 sequence와 부분 수열의 합을 나타내는 정수 k가 매개변수로 주어질 때, 위 조건을 만족하는 부분 수열의 시작 인덱스와 마지막 인덱스를 배열에 ...

숫자나라 기사단의 각 기사에게는 1번부터 number까지 번호가 지정되어 있습니다. 기사들은 무기점에서 무기를 구매하려고 합니다. 각 기사는 자신의 기사 번호의 약수 개수에 해당하는 공격력을 가진 무기를 구매하려 합니다. 단, 이웃나라와의 협약에 의해 공격력의 제한수치...

어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리 · 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페인트가 벗겨진 벽이 보기 흉해져 학교는...

코니는 영어 단어가 적힌 카드 뭉치 두 개를 선물로 받았습니다. 코니는 다음과 같은 규칙으로 카드에 적힌 단어들을 사용해 원하는 순서의 단어 배열을 만들 수 있는지 알고 싶습니다. 예를 들어 첫 번째 카드 뭉치에 순서대로 ["i", "drink", "water"], 두...

1와 0로 채워진 표(board)가 있습니다. 표 1칸은 1 x 1 의 정사각형으로 이루어져 있습니다. 표에서 1로 이루어진 가장 큰 정사각형을 찾아 넓이를 return 하는 solution 함수를 완성해 주세요. (단, 정사각형이란 축에 평행한 정사각형을 말합니다.)...

해설자가 선수의 이름을 부를 때마다, 그 선수는 바로 앞에 있는 선수를 추월합니다. 처음 시작 순서는 'players' 배열로 주어지며, 해설자가 부른 선수들의 순서는 'callings' 배열에 담겨있습니다. 문제의 목표는 경주가 끝났을 때의 선수 순서를 반환하는 's...

과제는 정해진 시각에 시작합니다. 새로운 과제가 시작되어야 하는 시각에 이전 과제가 아직 진행 중이라면, 이전 과제는 일시 중단하고 새로운 과제를 시작합니다. 이전에 진행하던 과제를 완료했을 때, 일시 중단한 과제가 있다면 그 과제를 재개합니다. 만약 과제를 끝낸 시각...

프로젝트, 기존 코드베이스를 다룰 때 의존성 관리는 어려운 작업이 될 수 있습니다. 최근 많은 개발자들이 겪고 있는 문제 중 하나는 ESLint와의 피어 의존성(peer dependency) 충돌입니다. 피어 의존성 이해하기 해결책을 알아보기 전에 피어 의존성이 무엇인...

비동기 작업은 웹 애플리케이션의 성능을 향상시키고, 사용자 경험을 개선하는 데 중요한 역할을 합니다. 1. 비동기 프로그래밍의 필요성 비동기 프로그래밍은 장기 실행 작업이 완료될 때까지 애플리케이션이 응답하지 않는 문제를 해결합니다. 웹 요청, 파일 읽기, 타이머 등 ...

구조 분해 할당이란? 구조 분해 할당은 배열이나 객체의 속성을 변수로 쉽게 추출할 수 있는 JavaScript의 표현식입니다. // 배열 분해 할당 const numbers = [1, 2, 3]; const [one, two, three] = numbers; // 객체...

문제를 해결하기 위해 다양한 접근 방식을 시도해 본 결과, 문제의 원인은 잘못된 API 키 사용에 있었습니다. 정확히는 개발 환경에서 사용하는 dev 키를 배포 환경에서 그대로 사용한 것이 문제였습니다. Clerk는 인증 및 사용자 관리를 위한 서비스로, 개발 환경에서...

CI/CD(Continuous Integration/Continuous Deployment) 파이프라인은 현대 소프트웨어 개발에서 필수적입니다. Node.js와 Express.js로 작성한 애플리케이션을 AWS EC2에 배포하고, CI/CD 파이프라인을 구축하는 방법입...

※ (개인적으로) 웹 개발을 진행하면서 사용 경험이 적은 기능입니다. break-before 클래스를 잘 활용하면, 인쇄 및 다중 열 레이아웃에서 페이지, 열 또는 영역의 흐름을 정확하게 제어할 수 있습니다. break-before란? CSS의 break-before ...

소프트웨어 개발에서 "아키텍처 패턴(Architecture Patterns)"과 "디자인 패턴(Design Patterns)"은 코드의 구조를 체계적으로 설계하고, 유지보수성을 높이며, 재사용성을 극대화하는 데 중요한 역할을 합니다. 아키텍처 패턴 (Architectu...

비밀번호 암호화는 필수적입니다. bcrypt 는 비밀번호를 안전하게 해시하고 저장하기 위한 강력한 라이브러리입니다. bcrypt란? bcrypt 는 Blowfish 암호를 기반으로 한 비밀번호 해시 함수입니다. 이 함수는 입력된 비밀번호를 암호화하여 해시 값을 생성하며...

웹 개발을 하다 보면 특정 요소 이후에 페이지나 섹션을 나누어야 할 때가 있습니다. Tailwind CSS는 이러한 작업을 손쉽게 처리할 수 있도록 돕는 break-after 유틸리티를 제공합니다. 요약 break-after-auto: 기본 설정으로 필요할 때 자동으로...