분류 전체보기

타입스크립트의 인덱스 시그니쳐 index signature 문법 [key: T]: U 언제 사용? 타입스크립트의 어떤 객체가 여러 키값을 가지고 있을 때 사용 "이 객체에서 모든 T 타입의 키는 U 타입의 값을 갖는다"는 것을 표현할 때 인덱스 시그니처를 통해 명시적으로 정의한 키 외에 다양한 키를 객체에 안전하게 추가 가능 주의할 점 인덱스 시그니처의 키(T)는 반드시 number 혹은 string 타입이어야 한다. 왜? 자바스크립트 객체의 키 타입은 문자열이므로 string 이어야 한다. 그렇다면 number 타입은? 배열은 결국 키 타입이 숫자인 객체의 일종이므로 number 타입도 키가 될 수 있다. 예시 코드 const airplaneSeating: {[seatNumber: string]: st..

바이너리 타입의 파일 응답 모킹하기 지금 사내 프로젝트는 백엔드 api와 프런트 개발을 동시에 병행적으로 진행하고있다. 따라서 서버단 API가 완성되고 배포되기 이전에는 msw라는 서버 API 모킹 라이브러리를 사용하고 있는데, 실제 백엔드 api 없이도 프런트단에서 mock 서버를 구현해서 가짜로 네트워크 통신을 할 수 있다. json 형식으로 통신을 주고받는 건 공식문서에도 잘 나와있어서 Mocking을 했었는데, 이번에 바이너리 타입의 이미지 파일을 get 해오는 부분에서 목서버를 구현하는데 큰 난관이 있었다. 응답 예시 프런트에서 이미지 파일을 get 해올때 서버에서 주는 응답은 아래와 같다. 바이너리 데이터 즉, 서버에서는 이 멀티미디어 데이터를 0과 1 값만 존재하는 이진 데이터로 응답해주는 ..

래스터 이미지 Raster 픽셀 pixel 이라는 점들을 가로 세로로 나열한 것 래스터 이미지의 품질은 정밀도/선명도에 따라 결정됨 1. 정밀도 얼마나 정밀하게 색을 표현하는지 - 각 픽셀당 색을 표현하는데 필요한 비트 수에 따라 색 표현의 정밀도가 결정 - 픽셀당 1bit 사용시 흰/검 두 색깔만 표현 - 8bit의 경우 256 컬러 (2⁸ = 256) 표현 가능 2. 선명도 해상도 resolution 얼마나 조밀하게 픽셀을 표현하는지 - 단위당 얼마나 많은 점(픽셀)을 보여줄 수 있는지를 의미 해상도가 높을수록 상세한 그림 표현함 이미 정해진 해상도를 높일 수는 없음 벡터파일 보다 더 다양한 색상 표현, 빛과 음영을 더 세밀하게 표현 가능 이미지 크기 확대시 품질 저하, 울퉁불퉁하게 표현됨 수백만개의..

Thoughts 개발자로 첫 일을 한 지 벌써 3개월이 지났다. 개발자로 전직했다는 생각이 잘 들고, 적성에 잘 맞다고 느낀다. 아직까진(?) 물론 새로운 개념이나 새로운 툴을 처음 배울땐 도대체 몇번을 봐도 어렵고 진짜 눈앞이 흐려지는... 느낌도 들긴하지만.. 내가 짜는 코드가 내가 원하는대로 화면에 촥촥 띄워질때 그 희열이란... 내가 개발자라는게 좋은 것 같다! 뭐 내 자신을 아직 개발자라고 부를 수 있는 수준인지는 모르겠지만... 🥲 아직 혼자서 모든걸 다 착착 잘 만들 수는 없다. 또 막상 잘 만든거같은데? 라고 pr을 올리고, 코드리뷰가 몇개 달리면 주눅이 드는 것도 사실이다. 그리고 내가 만든 부분은 지극히 너무 적은 부분인 거 같기도 하고.. 내 코드가 바로 100% 반영이 안되고 시니어..

객체 형식을 가진 배열 요소의 값을 수정하고 싶었다. 그런데 배열의 불변성을 지켜주는 map() 고차함수를 사용해서 객체의 요소를 수정했는데도, 원본 배열의 데이터가 아예 수정되는 현상이 발생했다. immutable과 mutable 차이를 제대로 알고 쓰기위해 정리해보려한다. 데이터 state라는 배열에 객체 형식의 요소가 들어가있다. const state = [ { id: 1, content: 'a' }, { id: 2, content: 'b' }, ]; 목표 특정 id로 객체 요소를 찾아 그 요소의 content 값을 바꾸는 함수를 작성한다. 그리고 처음 state값과 함수를 호출했을때의 반환되는 값과, 그 이후 state값이랑 비교해봄으로써 원본 state 데이터가 변경되었는지 (mutable), ..

상황 rebase를 하고 원격 저장소에 Push를 했다. 그런데 push하고 나서 rebase가 잘못 되었다는 것을 깨달았다. reset을 하자니.. 그 이전 커밋은 rebase되어서 없는데..? 해결책 1. git reflog로 rebase 했던 커밋 이력을 확인한다. git reflog reflog는 reference log 의 줄임말로 참조 로그라는 것이다. (git log 명령어로 커밋 히스토리를 로그로 보는 것과 똑같이 단순히 로그를 확인하는 명령어이다.) git 로컬 저장소는 이 참조 로그에 최근 이력을 모두 저장하고 있다. 따라서 reflog 명령어로 reset --hard하거나 rebase한 커밋 이력도 확인할 수 있다. 2. 이제 rebase를 하기 이전으로 되돌아가고 싶은 커밋 아이디를..

MVVM 아키텍쳐 디자인 패턴 MVVM은 Model - View - View Model의 약자로 애플리케이션의 비즈니스 로직과 사용자에게 보여주는 presentation UI를 분리하는 패턴이다. View 앱의 보여지는 UI View Model 앱의 비즈니스 로직을 담고있음 뷰와 모델 사이에서 뷰의 요청에 따라 로직을 실행 모델 데이터의 변화에 따라 뷰를 갱신 모델에 데이터를 요청, 데이터를 가공 Model 데이터를 처리 뷰모델에게 데이터를 응답 뷰 ui 컴포넌트이다. 상위 컴포넌트에서 props로 전달받은 상태에 따라서 화면이 동작한다. 사용자가 이벤트를 발생시키면 이벤트에 따른 데이터 변경을 뷰에서 바로 처리하지않고, 상위 컨테이너인 View Model 컨테이너에서 처리하도록 한다. interface..

데이터 구조 상태는 배열 타입이고, 배열의 요소는 각 object 객체이다. const initialState = [{id: '1', isDone: false }, {id: '2', isDone: false }, ...] 목표 위와 같은 데이터 구조를 가지고있는 전역 상태 state 배열에서 해당하는 요소를 먼저 찾고, isDone 속성을 바꾸고 싶다. redux toolkit을 사용해서 상태를 관리하는데, 배열 안 특정 요소의 속성 isDone을 유저가 누르는 checkbox 이벤트 값대로 바꿔야한다. UI 코드 유저가 체크하는 체크박스의 event.target.checked 값을 받아서 rtk 슬라이스로 dispatch하는 코드 export interface Todo { id: string; isDo..

원래 소문자로 시작했던 barChartSlice.ts 파일이름을 vscode에서 대문자로 BarChartSlice.ts 바꾸고, github의 원격저장소로 푸쉬했다. 하지만, 업데이트된 원격저장소에는 대문자로 바뀐 파일명이 반영이 안되어있었다. git은 대/소문자 구분을 하지 못한다. 따라서 파일 이름은 똑같지만 대/소문자만 변경해서 다시 원격저장소로 push 하는 경우, rename 해주는 명령어로 직접 파일이름을 수정해주어야 한다. 이때 쓰는 명령어? git mv mv는 move를 표현한 약자인데, 공식문서에 보면 move or rename a file, a directory라고 나온다. git mv 파일의 이름을 rename 해준다. git mv 파일이 위치해있는 디렉토리 위치를 이동시킨다. 그런데..

상황 d3 차트 라이브러리로 line 차트를 그리는데, 차트에 그려지는 value 값이 0일때는 라인 차트가 아예 나타나지 않고, 다른 값이 있을때는 차트가 그려지다가 0이 나오면 차트가 끊기는 이상한 현상이 있었다. Error: attribute d: Expected number, "M36.5,NaNL79.5,NaNL122…". 게다가 콘솔에는 이런 에러가 찍히고 있었다. 기존 import { line } from 'd3-shape'; const LineChart = ({bars, xScale, yScale}) => { const lineGenerator = line() .x((bar) => xScale(bar.data.indexValue) + bar.width / 2) .y((bar) => yScal..