Tiny Bunny
본문 바로가기

전체 글157

[React][TS] MSW 2.0 오늘은 MSW 를 뿌셨다!! 어제 반나절 동안 파헤쳐보다 답 없는 것 같아서 포기하려던 찰나!나의 번뜩이는 정신과 MSW 공식문서와 어떤 멋진 블로거 분의 글과 지피티의 합작으로 성공했다 미텨따...ㅎㅎㅎㅎ 이거 뜨자마자 얼굴에 해가 뜸 ㅋㅋㅋㅋㅋㅋㅋ 욱기다 단순한 내 기분^^MSWMock Service Worker.브라우저에서 API 요청을 가로채고, 실제 서버와의 통신 없이 모의 데이터를 응답으로 처리할 수 있도록 해주는 라이브러리. So, MSW를 사용하면 server 없이, 실제로 API를 개발하지 않고도, 프론트 단에서 가짜 api와 data를 자체적으로 만들어 화면을 개발할 수 있다.그냥 mock 데이터를 api로 호출해서 불러올 수 있게 해주는 라이브러리. 라고 보면 된다. MSW 로 가짜 .. 2025. 5. 13.
[Docker] Docker로 인한 디스크 용량 차지 해결하기 ... 설치한 프로그램이 몇 없는데, 1TB인 C드라이브가 갑자기 터지려고 해서 정말 당황했다..(당황해서 C드라이브 용량이 터진 광경을 캡쳐하지 못했다.. 아쉽..ㅠㅜ) 진짜 시뻘게졌다가 0바이트 남았다고 죽어버렸다... 실행중인 프로그램이 docker 와 IDE 뿐이었기에, 이건 확실하게 docker의 문제라고 단언했다. 우선 이 어마어마한 용량을 정리하기 위해 시도한 방법들을 모두 나열해보겠다.소소한 방법부터 시작해서, 결국 해결해낸 방법까지. 1. 불필요한 Docker 리소스 제거i) 도커 내 용량 확인docker system df 이 명령어를 통해 image, container, volume, cache 가 얼마나 쌓여있는지를 알 수 있다. 많은 용량을 차지하고 있는 게 있으면, 그에 맞게 비워.. 2025. 5. 2.
[Git] git stash git stash를 하는 이유git repository 내에서 작업 했을 때, 작업물을 unstaged area 혹은 staged area 둘 중 하나에 저장된다.이때 작업물을 commit 하지 않고 다른 branch로 변경할 경우 변경사항이 같이 따라가거나 conflict가 발생하게 된다. 따라서 이러한 작업물을 저장할 임시 공간이 필요하다.그 공간으로 작업물을 보내주는 명령어가 바로 git stash 이다. git stash ?git stash는 working directory와 staging area의 작업물을 임시 저장공간에 저장하는 명령어이다.아래 두 가지 명령어로 stash를 저장할 수 있다.git stash 위 명령어는 작업 도중 브랜치를 변경해야 할 때 매우 유용하게 사용할 수 있다. gi.. 2025. 2. 7.
[React][TS] useLocation useLocation현재 위치(작업중인 코드)의 location 객체를 반환.위치가 변경될 때마다 새로운 location 객체를 반환하기에, 위치 변화에 따른 동적인 UI 업데이트나 조건부 렌더링에 유용하게 사용 가능. useLoaction의 주요 속성- pathname : 현재 위치의 경로- search : 현재 위치의 query parameter- hash : 현재 위치의 hash- state : 라우팅된 component로 전달되는 상태 객체- key : location 객체의 고유 식별 useLocation 객체의 state 속성 예제import { useLocation } from 'react-router-dom';interface SelectedTable { table_id: string; .. 2025. 1. 15.
[TS] TypeScript 기초 변수 선언let스코프 범위 : 블록 스코프 (중괄호)변수 선언 이후 (메모리 주소) 값 변경 가능const스코프 범위 : 블록 스코프 (중괄호)변수 선언 이후 메모리 주소 값(레퍼런스) 변경 불가능배열 or 객체 할당 시 값 변경 가능var스코프 범위 : 함수 스코프 or 전역 스코프호이스팅 : 선언 전 접근 가능 (undefined)*사용 권장하지 않음 Type Annotations변수 선언let username: string = "nowag"; 객체 변수 선언let myInfo : { name: string; height: number; isConditionGood: boolean; gender?: string // 선택적 속성}= { name: "nowag", hei.. 2025. 1. 14.
[TS] TypeScript 가 뭐야 TypeScriptJavaScript에 type을 부여한 언어, JacaScript의 확장판. TypeScript를 쓰는 이유1. 에러 사전 방지TypeScript의 정적 타입으로 코드의 가독성이 높아지고 타입 안정성이 보장된다. 2. 유지보수타입 명시가 가능하기에, 유지보수 및 협업 시 용이하다. 3. 코드 자동완성과 가이드FrontEnd 개발 시 가장 빈번히 사용되는 vscode 툴의 내부가 TypeScript 로 작성되어 있어, TypeScript 개발에 최적화 되어있다. 4. 높은 생산성직관적인 코드 작성이 가능하고, 실행속도가 매우 빠르다. TypeScript vs JavaScript TypeScriptJavaScript타입 결정 방식정적동적자동 타입 변환XO타입확인/에러검출 시기컴파일런타임장점.. 2025. 1. 13.
[CS] RDB vs NoSQL 관계형 데이터베이스 (Relational DataBase, RDB)데이터 종속성을 관계(Relationship)로 표현한다.table로 이루어져 있으며, table은 key와 value 값으로 나타낸다. 특징- 데이터의 분류, 정렬, 탐색 속도가 빠르다.- 신뢰성이 높고, 어떠한 상황에서도 데이터의 무결성을 보장한다.- 기존에 작성된 스키마를 수정하기 어렵다.- 데이터가 증가할수록 성능이 저하될 수 있다.- Scale-up (수직적 확장) : 하나의 DB로, 해당 DB의 성능을 향상시킨다. 대표적 RDB : MySQL, PostgreSQL, Oracle, .. * 관계?각 table 의 행과 행이 연결되는 관계를 의미한다. table 간 관계- 일대일 (1:1)- 일대다 (1:N)- 다대다 (N:N) 각.. 2025. 1. 13.
[Python] Comprehension Comprehension사전적 의미 : 이해, 이해력, 포용, 포용력, 포함, 압축 ..python 에서 사용되는 comprehension 은 여러 자료형(list, dictionary, set) 에서 사용된다.List Comprehension 반복되거나 특정 조건을 만족하는 List 를 보다 쉽게 만들어 내기 위한 방법. 1. 반복문을 사용한 Comprehension[i for i in range(4)]# [0, 1, 2, 3][i * 2 for i in range(4)]# [0, 2, 4, 6][i + 3 for i in range(4)]# [0, 4, 5, 6] 2. 조건문을 사용한 Comprehension[i for i in range(10) if i % 2 == 0]# [0, 2, 4, 6, 8.. 2025. 1. 10.
728x90
반응형

티스토리툴바