미츠

이번 이슈는 tsconfig.json의 설정으로 인해 Next.js 프로젝트에서 타입 추론이 꼬이면서 발생한 에러에 대한 정리다.✅ 한 줄 요약tsconfig.json의 "include"에 .next/types를 포함하면, Next.js가 자동 생성한 잘못된 타입 정의까지 타입 검사 대상에 포함되어 에러가 발생한다.1. .next/types에 자동 생성되는 타입app/ 디렉토리 기반 라우팅을 사용하는 Next.js에서는 내부적으로 props, metadata, routes 등을 분석하여.next/types/app/XXX/page.ts 같은 타입 파일을 자동 생성한다. 예를 들어 다음과 같은 타입이 생성될 수 있다:// .next/types/app/search/page.tsexport type PagePr..

개발을 위한 우분투 개발환경을 처음부터 구축하려면, 무엇보다 먼저 패키지 설치 속도 개선을 위한 APT 미러 설정을 선행하고, 그 다음 필요한 패키지들을 차례로 설치해야 한다. 이 문서는 Node.js 기반 프론트엔드 개발을 위한 우분투 초기 세팅을 순서대로 정리하였다.0. APT 서버를 Kakao 미러로 변경하기패키지를 설치하기 전에, 먼저 APT 서버 주소를 Kakao 미러(mirror.kakao.com)로 변경하여 속도 문제나 에러를 예방하자.먼저 vim과 sudo를 깔아주자.apt install vim sudo/etc/apt/sources.list.d/ubuntu.sources 파일 열기sudo vi /etc/apt/sources.list.d/ubuntu.sources 아래에서 URI의 archi..

윈도우 환경에서 리눅스 서버를 사용하고 싶은 경우, Docker를 활용하면 간단하게 우분투 서버를 실행할 수 있다. 이 글에서는 Docker 설치부터 우분투 컨테이너를 실행하고 사용하는 방법까지 간단하게 설명한다.1. Docker란?Docker는 컨테이너 기반의 가상화 플랫폼으로, 리눅스 기반의 환경을 격리된 공간에서 손쉽게 실행할 수 있게 해주는 도구다. Docker를 사용하면 가상 머신보다 더 가볍고 빠르게 리눅스 환경을 만들 수 있다.2. 사전 준비Windows 10 Pro, Enterprise, 또는 Education (Hyper-V 기능 필요)WSL 2(Windows Subsystem for Linux) 활성화3. Docker Desktop 설치 및 설정Docker 공식 홈페이지에서 Docker..

1. 프로토타입(Prototype)JavaScript의 모든 객체는 프로토타입 기반 상속 방식을 통해 다른 객체의 속성과 메서드를 재사용할 수 있다. 이 상속 구조는 숨겨진 링크인 [[Prototype]]을 통해 이루어진다.1.1 프로토타입의 원리객체가 다른 객체로부터 속성과 메서드를 상속받으려면, 숨겨진 링크 [[Prototype]]이 설정된다.이 링크는 __proto__로 접근 가능하며, 이는 프로토타입 체인을 형성한다.프로토타입 체인객체에서 특정 속성이나 메서드를 찾을 때, 해당 객체에 없다면 프로토타입 체인을 따라 상위 객체에서 이를 찾는다.프로토타입 체인의 끝은 Object.prototype이며, 여기에 기본 메서드들이 정의되어 있다.const animal = { speak() { con..

웹 접근성을 향상시키기 위해 사용되는 중요한 도구 중 하나는 바로 WAI-ARIA다. WAI-ARIA는 Web Accessibility Initiative's Accessible Rich Internet Applications의 약자로, 스크린 리더가 웹 페이지를 읽을 때 요소의 역할과 의미를 파악할 수 있도록 돕는다. 특히 JavaScript 같은 동적 언어를 사용해 페이지 요소가 변경되더라도 스크린 리더는 새로고침 없이 변경된 내용을 읽을 수 있다.스크린 리더란?스크린 리더는 시각적으로 웹 페이지를 읽는 것이 어려운 사용자들을 위해 컴퓨터 화면의 내용을 읽어주는 소프트웨어다. 우리가 웹 페이지를 만들 때 시맨틱 태그를 사용하지 않거나 시각적으로만 요소를 꾸민다면, 스크린 리더 사용자들은 웹 페이지를 ..

GitHub Actions에서 Elastic Beanstalk에 배포할 때 환경 변수를 설정하는 방법에는 $GITHUB_ENV 방식과 직접 Elastic Beanstalk 환경에 설정하는 방식이 있다. 이 두 방식이 어떻게 다른지, 그리고 어떤 상황에 어떤 방법이 좋은지 알아보자.1. $GITHUB_ENV 파일에 저장하는 방식먼저 $GITHUB_ENV 파일에 환경 변수를 저장하는 방식이다. GitHub Actions에서 echo로 환경 변수를 $GITHUB_ENV에 추가해두면, 이후 단계에서 바로 사용할 수 있다. 예를 들면:- name: Set environment variables run: | echo "DB_URL=${{ secrets.DB_URL }}" >> $GITHUB_ENV ec..

Spring Boot 3으로 작성한 애플리케이션을 AWS Elastic Beanstalk에 배포한 후, Nginx에서 502 Bad Gateway 오류가 발생하며 제대로 포트 포워딩이 되지 않는 상황을 겪었다. 기본적으로 Spring Boot는 8080 포트를 사용하고, Elastic Beanstalk의 Nginx는 5000 포트로 프록시하도록 설정되어 있어 이로 인해 충돌이 발생한 것으로 생각했다. 그러나 서버 포트를 수정했는데도 불구하고 계속 문제가 발생했다. 문제를 정확히 파악하기 위해 EC2 인스턴스에 직접 접근하여 상태를 확인해보기로 했다. 1. 문제 분석애플리케이션 설정 파일(application.yml)에서 서버 포트를 5000으로 설정했음에도 불구하고 여전히 502 Bad Gateway 오..

CI/CD1. CI (지속적 통합, Continuous Integration)지속적 통합은 개발자들이 코드를 자주 병합하고, 각 병합 시마다 자동으로 빌드와 테스트를 수행하는 것을 뜻한다.코드 변경 시 자동으로 오류를 발견할 수 있기 때문에 코드의 품질을 높이고, 개발과정에서 문제가 생겼을 때 빠르게 수정할 수 있도록 도와준다.CI 도구로는 Jenkins, GitHub Actions, GitLab CI, CircleCI 등이 있다.2. CD (지속적 전달, Continuous Delivery)지속적 전달은 CI 단계를 거쳐 코드가 테스트를 통과하면, 이를 배포 준비 상태로 자동화하여 유지하는 것을 의미한다.배포는 수동으로 수행할 수 있지만, 준비된 최신 버전의 코드가 언제든 프로덕션 환경으로 전달될 수 ..

1. CPU(중앙 처리 장치)CPU의 역할CPU는 컴퓨터의 두뇌 역할을 하는 중앙 처리 장치이다. 프로그램의 명령을 해석하고 실행하며 데이터를 처리하는 데 사용된다. 여러 작업을 빠르고 효율적으로 처리할 수 있는 범용 프로세서이다.하드웨어 구조CPU는 소수의 강력한 코어를 가지고 있다. 이 코어들은 복잡한 연산을 처리할 수 있으며, 클럭 속도가 높고 명령어 파이프라인, 캐시 메모리, 분기 예측 같은 고급 기술이 적용되어 있다.코어(Core): CPU는 보통 4~16개의 코어로 구성된다. 각 코어가 독립적으로 명령어를 처리할 수 있으며, 여러 작업을 순차적으로 처리하는 데 최적화되어 있다.캐시 메모리: CPU 내부에는 고속 메모리인 캐시가 있다. 캐시는 CPU가 자주 사용하는 데이터를 빠르게 접근할 수 있..

스프링 시큐리티(Spring Security)를 사용할 때, 요청이 서버로 들어오고 나가는 과정을 필터 체인이 담당한다. 이 필터 체인에서 JwtFilter는 JWT 토큰을 인증하고, ExceptionTranslationFilter는 인증 과정에서 발생하는 예외를 처리한다. 그렇다면, JwtFilter는 필터 체인에서 어디에 배치해야 할까?1. JWT 필터(JwtFilter)란?JwtFilter는 클라이언트가 요청에 포함한 JWT(JSON Web Token)를 확인하고, 유효하다면 해당 사용자의 인증 정보를 스프링 시큐리티의 SecurityContextHolder에 저장하는 역할을 한다. 이를 통해 클라이언트 요청이 인증된 사용자로부터 온 것임을 보장할 수 있다.public class JwtFilter ..