Flutter 상태 관리 기초: stateful, provider, riverpod
·
모바일/플러터 Flutter
Flutter 입문자를 위한 상태(State) 관리 기초 가이드Flutter를 처음 접하면 가장 헷갈리는 개념 중 하나가 바로 상태(State) 입니다.이 글에서는 Flutter 입문자를 대상으로 다음 질문에 답하는 것을 목표로 합니다.Flutter에서 말하는 "상태"란 무엇인가?StatelessWidget과 StatefulWidget은 무엇이 다른가?비교: stateless, stateful, provider, riverpodProvider와 Riverpod은 왜 등장했는가? 들어가기 전프로젝트 실행 방법# 레포지토리 클론git clone https://github.com/koseha-blog-examples/flutter_state_basics.gitcd flutter_state_basics# 의존성..
[NestJS | 테스트] 외부 라이브러리(bcrypt) 테스트 코드 작성 1
·
백엔드
들어가며안녕하세요, 새하(seha)입니다.오늘은 NestJS 프로젝트를 만들어 보면서 사용한 bcrypt 라이브러리에 대한 테스트 작성 방법을 알아보겠습니다. NestJS와 테스트 코드 작성 연습을 동시에 진행하고 있기 때문에 부족한 부분이 있을 수 있습니다. 그러한 부분은 친절히 알려주시면 감사하겠습니다. 참고 깃허브 주소 : github - koseha/nest-panda-migration 외부 라이브러리 사용: bcryptbcrypt는 비밀번호 같은 민감한 데이터를 안전하게 저장하기 위한 해시 함수 라이브러리입니다.NestJS에서 사용자 인증 시스템을 구축할 때 bcrypt는 비밀번호 해싱(hash) 및 비교(compare) 에 자주 사용됩니다. 키워드설명`bcrypt`해시 함수 라이브러리로, 비밀..
[NestJS | 테스트] Chat GPT한테 물어본 테스트 코드 설계 템플릿
·
백엔드
✅ NestJS 테스트 설계 템플릿1. 🔍 테스트 대상 서비스 요약항목내용서비스 이름YourServiceName테스트 대상 메서드targetMethod()주요 의존성ConfigService, ExternalLibService, 등2. 📋 테스트 시나리오 정의시나리오 ID설명조건 (Given)입력 (When)기대 결과 (Then)TC-01정상 동작ConfigService.get()이 10 반환targetMethod("abc") 호출expectedResult 반환 + 내부 함수 호출 확인TC-02환경변수 없음 → 기본값 사용get()이 undefined 반환메서드 호출기본값 적용되어 호출됨TC-03외부 라이브러리 에러외부 함수에서 예외 발생호출에러가 throw됨3. 🛠 테스트 모듈 구성 체크리스트테스트..
[Next.js | app router] TanStack Query로 Server Side Rendering 구현하기
·
프론트엔드
들어가며안녕하세요, 새하(seha)입니다.오늘은 NextJS - SSR 구현에 TanStack Query를 사용하는 방법을 알아보려고 합니다. 간단하게 진행하고 있는 팀 프로젝트에서 프론트팀은 데이터 패칭에 TanStack Query를 사용하고 있습니다. 자동 캐싱, 캐시 유지, 자동 리패칭, 로딩, 에러 상태 관리, Mutation 지원처럼 널리 알려진 장점과 더불어 무한 스크롤, 페이지네이션 구현이 쉽다, 실무에서 많이 쓰인다라는 점 때문에 채택하게 되었습니다. 또 Next 이전, React에서 TanStack Query를 사용하던 것이 관성적으로 넘어온 것도 있습니다. Next를 활용하면서 SSR을 고민하고, 데이터 패칭 구현할 때 저희는, 마찬가지로 TanStack Query를 사용하고 싶었습니다..
Backtracking, 백트래킹, JavaScript
·
알고리즘/이론
Backtracking, 백트래킹백트래킹이란?백트래킹은 DFS (깊이 우선 탐색) 의 한 형태로, 모든 후보 해를 탐색하되, 해답이 될 수 없는 부분은 미리 가지치기하여 탐색 범위를 줄이는 기법입니다. 예를 들어, 특정 조건을 만족해야 하는 조합, 순열, 그래프의 경로 문제에서 자주 활용됩니다.핵심 아이디어는 다음과 같습니다:해단 노드(상태)가 유효한지 검사한다.만약 유효하지 않다면(조건을 만족하지 않는다면) 바로 백트래킹(Backtracking)하여 이전 단계로 돌아간다.유효하다면 다음 노드(상태)로 이동하여 탐색을 이어간다.목표 조건(해를 찾았는지 or 모든 후보를 탐색했는지) 달성 시까지 1~3번 과정을 반복한다. 핵심 개념과 동작 원리상태(state)상태는 현재까지 내린 결정(선택)들의 집합을 ..
[스프린트|초급] 팀 프로젝트 회고: 협업과 작업
·
프로젝트
안녕하세요,새하(seha)입니다.얼마 전에 첫 팀 프로젝트를 마무리하였습니다. "과연 우리가 원하는 기능들을 무리 없이 구현할 수 있을까?"라는 막연한 걱정이 함께했지만, 팀원 간의 협업과 꾸준한 작업 관리를 통해 성공적으로 완성할 수 있었습니다. 이번 회고에서는 특히 '협업'과 '작업' 측면에서 우리가 얻은 교훈들을 되돌아보고자 합니다.  들어가며‘협업’과 ‘작업’이라는 단어는 누구나 한 번쯤 들어봤을 것입니다.  하지만 막상 팀의 관점에서 “어떻게 협업하지?” 혹은 “어떻게 작업해야 하지?”라는 질문에 마주하면, 막연해지기 마련입니다.  어떤 방식으로 아이디어를 공유하고, 어떻게 목표를 설정하며, 또 누가 어떤 역할을 맡아 진행할 지를 떠올리는 일은 생각보다 쉽지 않죠.  결국 고민이 깊어질수록 더 ..
DP(Dynamic Programming), 동적 프로그래밍, JavaScript
·
알고리즘/이론
DP, 동적 프로그래밍DP란?DP(Dynamic Programming, 동적 프로그래밍)은 복잡한 문제를 작은 하위 문제로 나누어 각 하위 문제의 답을 저장해두고, 저장된 결과를 재활용하여 전체 문제를 풀어내는 방법론입니다. 이 접근법은 중복 계산을 줄이고, 시간 복잡도를 획기적으로 개선할 수 있다는 장점이 있습니다. DP는 크게 두 가지 구현 방식으로 나눌 수 있습니다:Top-Down (메모이제이션, Memoization)재귀 함수를 사용하면서, 이미 계산된 값들을 배열 또는 객체 등에 저장해두고 재활용합니다.Bottom-Up (타뷸레이션, Tabulation)작은 문제(가장 작은 인덱스나 가장 작은 입력)부터 차근차근 계산하여, 점차 큰 문제의 결과로 확장해갑니다. 특징중복되는 하위 문제(Overla..
BFS(Breadth-First Search), 깊이 우선 탐색, JavaScript
·
알고리즘/이론
BFS, 너비 우선 탐색BFS(너비 우선 탐색, Breadth-First Search)은 그래프 혹은 트리에서 한 노드(정점)로부터 시작하여 가까운(직접 연결된) 노드부터 차례대로 방문하는 알고리즘입니다. 즉, 루트 노드(시작 노드)에 인접한 노드들을 먼저 모두 탐색한 뒤, 그다음 레벨의 노드들을 방문하는 방식입니다. 특징큐(Queue)를 사용 : 먼저 들어온 노드를 먼저 처리하는 FIFO 구조.계층(Level) 기반 탐색 : 시작 노드로부터 거리가 같은 노드들을 먼저 모두 방문.방문 기록(Visited) 필요 : 무한 루프 방지 및 중복 탐색 방지를 위해 방문 여부를 저장.시간 복잡도 O(V + E) : V는 노드 수, E는 간선 수이며, 모든 노드와 간선을 한 번씩만 확인. 활용 분야가중치가 없는 그..
DFS(Depth-First Search), 깊이 우선 탐색, JavaScript
·
알고리즘/이론
DFS, 깊이 우선 탐색DFS란?Depth-First Search의 약자이자 깊이 우선 탐색으로 부르며, Graph (그래프)에서 깊은 부분을 우선적으로 탐색하는 알고리즘입니다. 즉, 그래프의 루트 노드(혹은 임의의 노드)에서 시작해서 다음 분기(branch)로 넘어가기 전에 해당 분기를 완벽하게 탐색하는 방법입니다. 간단하게는 시작 노드에서 출발하여, 한 방향으로 갈 수 있을 때까지 깊이 탐색한 뒤 더 이상 갈 수 없으면 직전에 방문했던 노드로 되돌아가 다른 경로를 탐색하는 방식이라고 할 수 있습니다.  특징깊이 우선으로 진행 : 갈 수 있는 곳까지 재귀적으로(또는 스택을 사용하여) 끝까지 들어간 뒤, 더 이상 진행할 수 없으면 되돌아노는 방식트리 구조나 그래프 모두 탐색 가능방문 기록(visited ..
눈여겨 보는 font 모음
·
프론트엔드
구글 - Geist, Geist Monohttps://fonts.google.com/?query=geist 구글 - Space Groteskhttps://fonts.google.com/specimen/Space+Grotesk