프론트엔드 테스트를 처음 접하면 describe, it, mock, act 같은 낯선 키워드가 쏟아진다. 공식 문서를 읽어도 "그래서 실제로 어떻게 쓰는 건데?"가 해결이 안 된다.이 글은 Vitest + Testing Library 기준으로, 테스트 코드를 짜기 위해 알아야 하는 개념들을 예제 코드 중심으로 정리한다.1. 테스트 파일의 기본 구조import { describe, it, expect } from 'vitest';import { calculateBMR } from './calculateBMR';describe('calculateBMR', () => { it('남성의 BMR을 올바르게 계산한다', () => { const result = calculateBMR(70, 175, 25, ..

useCallback, useMemo, React.memo 제대로 이해하기React 성능 최적화를 공부하다 보면 꼭 마주치는 세 가지가 있습니다. useCallback, useMemo, React.memo. 이름도 비슷하고 다 "메모이제이션"이라고 하는데, 막상 언제 뭘 써야 하는지 헷갈리는 경우가 많습니다. 오늘 이 세 가지를 한 번에 정리해 보겠습니다.메모이제이션이란?세 가지 모두 메모이제이션(Memoization) 을 위한 도구입니다. 메모이제이션이란 이전에 계산한 결과를 저장해두고, 같은 입력이 들어오면 다시 계산하지 않고 저장된 값을 반환하는 기법입니다.React에서는 state나 props가 바뀌면 컴포넌트가 리렌더링되는데, 이때 불필요한 연산이나 리렌더링을 막기 위해 메모이제이션을 활용합니다..

특정 사이트를 제작 시 인증 시스템을 만들게 된다면 계속해서 인증 상태를 관리해주어야 할 필요가 있습니다. 예를 들어 JWT토큰을 사용중이라면, access_token의 상태를 체크하여 refresh_token으로 갱신을 지속적으로 해주어야 합니다. 이때 나만의 새로운 훅을 만들어 모든 페이지를 거칠 때마다 훅이 실행되도록 하는 방식으로 상태를 관리해줄 수 있습니다. // hooks/useAuth.js import { useEffect } from "react"; const useAuth = () => { useEffect(() => { const refreshToken = async () => { const refresh_token = localStorage.getItem("refresh_token")..

간단한 블로그 같은 CRUD 앱을 만드려면 페이징 기능은 거의 필수라고 봐도 무방합니다.Django의 REST Framework는 ListAPIView를 통해 이를 쉽게 구현할 수 있도록 여러가지 기능을 지원해주고 있습니다. ListAPIView클라이언트 측에서 데이터베이스의 내용을 불러오는 API 요청을 구현하려면 ListAPIView를 사용하면 편합니다.from rest_framework.generics import ListAPIViewfrom .models import Postfrom .serializers import PostSerializerclass PostListView(ListAPIView): queryset = Post.objects.all().order_by('-created_a..

JWTJson Web Token의 줄임말로, 말 그대로 Json 형태를 가지는 토큰입니다.여러가지 정보를 담은 뒤 암호화시켜서 정보를 교환하거나 사용자 인증을 시도할 때 사용됩니다. JWT는 Header, Payload, Signature 세 부분으로 나누어지며 각 부분에 들어가는 내용은 다음과 같습니다. Header 부분에는 토큰의 타입(JWT)와 해싱 알고리즘이, Payload 부분에는 필요한 정보가 담겨있습니다. Signature는 토큰의 검증에 필요한 부분으로 header + payload + 개인 암호키를 암호화한 것입니다. 토큰 자체는 base64로 인코딩한 형태이기 때문에 암호화된 Signature부분을 제외한 Header와 Payload부분은 쉽게 복호화가 가능한 것이 특징입니다. 따라서..

Teacher Assistants Knowledge Distillation Knowledge Distillation 지식 증류 1. Knowledge Distillation 이란 Knowledge(지식)을 Distillation(증류), 말 그대로 지식을 증류, 전달한다는 뜻입니다. 비교적 정확도가 높고 추론시간이 긴 복잡한 모델로부터 그 kimmimo.tistory.com 선생 모델과 학생모델의 큰 격차로 인해 지식증류가 잘 시행되지 않는 현상을 해결하고자 만든 모델, TAKD입니다. 두 모델 사이에 보조 모델(Teacher Assistant)를 배치하여 지식 증류가 잘 일어나도록 돕습니다. 파이썬의 Pytorch 라이브러리를 이용하여 간?단하게 구현할 수 있습니다. 사실 논문에 첨부된 깃헙 링크가 있..

넥슨의 메이플스토리에서 유저들이 사용할 수 있는 API를 출시했습니다.이것을 이용해서 간단한 인게임 정보를 불러오는 서버 기능을 만들어보려 합니다. 서버는 Django를 이용해서 만들어 보겠습니다.Django 프로젝트를 한 개 만들고 api라는 이름의 앱을 생성해주었습니다. 구현 대부분의 API를 살펴보면, 인게임 캐릭터의 정보를 가져올땐 세 가지 정보가 필요합니다.사용자의 API조회할 캐릭터의 OCID조회할 날짜 API는 사용자로부터 입력받는다고 가정하고, 가장 최신의 정보를 자동으로 불러오기 위해 날짜는 바로 어제로 설정합니다. 그렇다면 필요한 것은 캐릭터 OCID입니다. 캐릭터 OCID를 우선 가져올 view를 한 개 만들어줍시다. 사용자로부터 받아야 할 정보는 API키와 캐릭터의 닉네임입니다. ..

웹 앱을 배포할 때 서버와 프론트를 따로따로 배포하면 둘이 다른 도메인과 포트를 가지게 된다. 그래서 둘이 통신하려면 CORS(Cross Origin Resource Sharing) 과정을 거치게 되는데설정을 제대로 해주지 않으면 CORS오류가 생긴다. Django에서는 보통 corsheaders를 사용하여 settings.py에 CORS_ALLOWED_ORIGINS나 CORS_ORIGIN_ALLOWED_ALL = True를 사용하여 CORS 정책을 허용하지만 전부 포함을 시켰음에도 CORS 오류가 나는 경우가 있었다.그럴땐 API의 반환 HTTP 응답이 400번대인지 확인해보도록 하자. HTTP 200번대 응답에는 반환 헤더에 CORS헤더를 포함시키지만, 오류 응답(400, 403, 404 등)에는 C..