전체 글

flex container 안에 있는 자식요소들 중에서 한 아이템만 따로 정렬하고 싶을 때 css의 margin 속성을 사용하면 복잡하지 않고 손쉽게 아이템을 정렬할 수 있다. 예전의 나는 이 flex container안에 나뉘어질 두 부분을 생각해서 2개의 container를 또 만들고, 그 2개의 컨테이너를 space-between 속성을 주어 사이 공간을 띄어주는 식으로 개발했었다. 🥲 그런데 아무래도 이 방법이 너무나도 비효율적인거 같아 찾아보니 이런 간단한 방법이 있었다. flex container안의 요소중에서 정렬되고 싶은 부분의 반대 속성에 margin 값을 auto로 준다. 이 예제에선 밑에 딱붙여서 정렬시키고 싶으므로 margin-top 속성 auto 를 주면 마법같이 컨테이너의 아래부..

아임 백!! 7월 8월 회고도 쓰고싶었지만 늘 날짜가 지나서.. 이제서야 벌써 6개월차의 회고를 쓰게 되었다. 내가 벌써 6개월이라니.. 정말 시간이 빠르다. 유난히 비가 많이왔던 올해 여름... 개인적으로 7월, 8월은 특히나 더 시간이 빨리간것 같다. 사내 어드민 웹앱을 만드는 프로젝트를 본격적으로 시작했고, 나의 학교 방학이 시작된 7-8월 동안에는 정말 집에와서도 회사코드를 붙잡고 자기전까지 코딩을 했던... 기억이 많다. 그리고 8월 말에 떠난 휴가까지!!! 정말 맨날 출근해서 코딩하고~ 밥먹고~ 코딩하고~~ 지금이 9월 마지막 날이라니... 믿을수없어...🥲 한참 여름에는 내 개인적인 시간을 정말 많이 들여서 회사 업무도 하고 밤이며 주말에도 많은 시간을 들여서 개발을 했는데도 내가 원하는 것..

타입스크립트의 인덱스 시그니쳐 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를 하기 이전으로 되돌아가고 싶은 커밋 아이디를..