개발/TMI

    [Next.js13] middleware 사용법

    현재 프로젝트에서 NextJS13 버전을 사용중이다. NextJS의 이전 버전을 사용해본 적이 없어서 얼마나 많은 차이가 있는지는 모르겠다. NextJS13의 특징을 간략히 정리하면 다음과 같다. server-component와 client-component app router fetch 함수를 이용한 SSR, ISR 등의 구현 따라서, 이 프로젝트를 진행하며 app router를 사용하고 axios 대신 fetch 함수를 사용하고자 노력했다. 1. 문제상황 현재 프로젝트의 경우는 별도의 백엔드 서버가 있고 DB관련 연산은 모두 백엔드 서버에서 수행한다. 백엔드 서버는 API를 제공하므로 NextJS를 이용해 DB 등에 접근할 일은 없었다. 인증 방식으로는 JWT를 사용했으며 JWT의 정보를 쿠키에 담아..

    [TypeScript + Jest] TypeScript 프로젝트 시작 + Jest 적용

    TypeScript를 적용하면서 동시에 Jest를 이용한 단위 테스트를 하고싶다면 어떻게 해야하는지에 관한 글이다. TypeScript와 Jest를 동시에 적용하기 위해 어떻게 해야하는지, 어떤 것을 설치해야 하는지에 대한 과정이다. 프로젝트 시작 (VSCode, NodeJS와 같은 기본적인 것이 준비되어 있다는 가정) npm init -y 위의 명령어로 npm 프로젝트를 시작한다. 위의 명령어를 입력하면 디렉토리에 package.json 파일이 생성된다. -y 명령어를 입력하지 않는다면 프로젝트에 관한 세부적인 내용도 함께 설정할 수 있다. 위와 같은 내용으로 채워진 package.json이 생성된다면 성공이다. TypeScript 설치 npm i -D typescript ts-node @types/n..

    [SvelteKit] 스벨트 킷에 테일윈드CSS 적용하기 (SvelteKit + tailwindCSS)

    스벨트를 사용하고 싶어졌다. 리액트도 있지만 최근 뜨고 있는 스벨트라는 프레임워크에 더 관심이 간다. 스벨트의 장점인 빠른 개발 속도를 살리기 위해 tailwindCSS를 적용하면 시너지가 좋을 것 같다는 생각이 들었다. 이미 만들어진 디자인을 클래스 형식으로 사용할 수 있기 때문에 간단한 페이지를 만드는데는 도움이 많이 될 것 같다. 1. Svelte 프로젝트 생성하기 스벨트는 npm을 사용해서 프로젝트를 생성할 수 있다. npm create svelte@latest 프로젝트이름 위의 명령어를 통해 프로젝트 생성을 할 수 있다. 순서가 진행되며 여러가지를 물어보는데 선호하는 옵션을 선택하면 된다. 프로젝트가 완성되었다면 해당 디렉토리로 이동하여 npm install을 입력한다. 그럼 패키지들이 자동으로..

    [Python] copy와 deepcopy

    파이썬에서 배열을 복사하려면 어떻게 해야 할까? arr = [1, 2, 3, 4] arr2 = arr print(arr) print(arr2) 위와 같이 작성하면 될 것 같다. 실제로 출력 해보면 같은 값이 출력된다. 하지만 위의 방법에는 문제가 있다. 💣 파이썬 배열 복사의 문제점 위의 출력 결과는 배열이 복사된 것 처럼 보인다. arr = [1, 2, 3, 4] arr2 = arr arr2.append(5) print(arr) print(arr2) 만약, 기존 배열을 복사하여 원소 하나만 추가하고 싶다면 위와 같이 작성할 것이다. 하지만 위 코드의 출력 결과는 아래와 같다. [1, 2, 3, 4, 5] [1, 2, 3, 4, 5] arr2를 바꾸기를 원했지만 arr도 함께 변경된다. 변수를 생성하고 ..