bkdragon's log

최근 golang 을 공부 중이다. 개인적인 관심도 있었고 업무에 사용할 일이 생겼기 떄문이다.io 란golang의 io 패키지는 표준 패키지로서 http 요청과 응답 , 파일, 메모리 버퍼, 네트워크 소켓 등의 입출력을 처리한다.io 패키지의 주요 인터페이스io.Reader데이터를 읽어오는 인터페이스. 데이터를 연속적인 스트림으로 처리할 수 있다. http의 request body가 io.Reader 이다.type Reader interface { Read(p []byte) (n int, err error)}Read라는 메서드를 가지고 있다. Read는 byte 슬라이스에 데이터를 읽어오고 다 읽으먄 EOF(end of file) 에러를 던진다.스트림 데이터를 이렇게 처리할 수 있다.for { ..

... 이런 html 구조가 있다. tailwind로 간단히 작성했다..div1 { flex : 1; display : flex; flex-direction : column; overflow : auto;}첫번째 div는 이런 스타일이 적용이 되어 있는 상태이다.flex : 1 은 간단하게 설명해서 기본 크기를 0으로 설정하고, 유연하게 늘어나거나 줄어들 수 있게 된다.두번째 div 에는 해당 속성이 적용이 안되어있어서 첫번째 div가 두번째 div를 제외한 크기를 차지하게 된다.이렇게만 보면 첫번째 div는 전체에서 가능한 만큼의 공간을 차지하고 내부 컨텐츠가 늘어남에 따라 스크롤이 생길 것으로 예상이 되는데 실제론 그렇게 안된다. https://stackoverf..

내 블로그의 유입 통계를 보면 항상 상위권은 React Query에 관한 글이다. 물론 내 블로그 유입 수가 많진 않아서 판단의 근거가 될 순 없지만 내 블로그에도 들어올 정도니 React Query에 대한 관심이 높아진 상황이라고 볼 수 있을 것 같다. 지금은 버전업이 좀 많이 되어서 큰 참고가 안될 것도 같다...아무튼 그런 의미에서 새로운 React Query 글이다. React Query 의 핵심을 결국 데이터 캐싱이라고 보는데 이 캐싱된 데이터를 식별하기 위해 쿼리키가 사용이 되는데 이걸 관리하는게 여간 귀찮은 일이 아니다. 그래서 라이브러리를 통해 관리하는 방법을 소개해보려고 한다.React Query (TanStack Query) 공식 문서에도 소개 되어있는 @lukemorales/quer..

마우스 이벤트를 활용하면 드래그를 통해 html 요소의 크기를 조절할 수 있습니다. 이걸 활용해서 그리드 내부의 요소의 크기를 조정해보겠습니다.마우스 이벤트 종류click설명: 해당 요소를 클릭했을 때(버튼을 눌렀다가 뗐을 때) 발생합니다.사용 예시: 버튼을 클릭하여 폼을 제출하거나 링크를 열 때 사용됩니다.mousedown설명: 해당 요소에서 마우스 버튼을 눌렀을 때 발생합니다.사용 예시: 드래그 앤 드롭 기능을 구현할 때, 요소를 선택하는 초기 동작으로 사용됩니다.mouseup설명: 해당 요소에서 눌렀던 마우스 버튼을 뗐을 때 발생합니다.사용 예시: 드래그 앤 드롭 기능에서 요소의 위치를 결정하거나, mousedown과 함께 사용하여 클릭 이벤트를 처리할 수 있습니다.dblclick설명: 해당 요소에..

버그는 개발자의 실수로 인해 발생하는 것이고, 에러는 사용자의 잘못된 사용 방식에 의해 발생하는 것입니다. 따라서, 버그가 없도록 개발하고 에러에 대한 예외 처리를 미리 준비하는 것이 좋은 방식입니다.이제부터 에러에 대한 예외 처리를 '에러 핸들링'이라고 언급하겠습니다.웹 애플리케이션에서 에러 핸들링은 크게 두 가지 방법이 있습니다. 하나는 클라이언트 사이드에서의 처리, 다른 하나는 서버 사이드에서의 처리입니다. 좀 더 간단히 말하면, 프론트엔드에서의 처리와 백엔드에서의 처리입니다. 각각에 대해 제 생각과 결론을 소개해보겠습니다.클라이언트 사이드 (프론트엔드)클라이언트 사이드에서는 사용자의 잘못된 행동을 막는 것이 중요합니다. 예를 들어, 접근할 수 없는 페이지로의 접근 시도를 막는 것이 있습니다. 이는..

양수 문자열을 반환하는 Absolute 타입을 구현해보았다. type Absolute = `${T}` extends `-${infer F}` ? F : `${T}` 템플릿 리터럴 타입의 막강함을 다시 느꼈다

문자열에서 특정부분을 모두 찾아 대체하는 타입을 만들어보자. 템플릿 리터럴 타입과 재귀를 이용해줘야 한다. 다만 이때 신경써야 하는 포인트는 이미 대체된 이후로 재귀가 되어야 한다는 것이다. 특정 부분이 대체되고 나서의 문자열에 대체하려는 요소가 새롭게 생겨나도 지나간 부분이기에 무시해줘야 한다. type ReplaceAll = From extends '' ? S : S extends `${infer F}${From}${infer R}` ? `${F}${To}${ReplaceAll}` : S From을 To 대체하고 남은 부분 (R)부터 재귀에 들어가는 것을 볼 수 있다. 간단해보여도 어려운 문제였다!

타입 시스템에서는 배열 타입의 길이를 Type['length'] 로 간단하게 구할 수 있다. 아쉽게도 문자열 타입에는 먹히지 않는다. 그래서 문자열의 길이를 구하려면 배열을 이용해야 한다! type LengthOfString = S extends `${infer F}${infer R}` ? LengthOfString : T['length'] 빈 배열을 처음 파라미터로 받고 재귀적으로 하나씩 쌓아간다음 마지막에 배열의 길이를 반환한다. 풀이가 좀 짧지만 글로 남기는 이유는 타입 시스템에서 사용할 수 있는 테크닉이 꽤 포함되어 있기 때문이다. 1. infer infer 키워드는 조건절에서 타입 추론을 도와준다. 2. 재귀 문자열은 하나씩 줄이고 배열은 하나씩 늘리면서 재귀적으로 들어간다. 3. length ..

오랜만의 글이다! 최근에 취업에 성공해 바쁘게 살고 정신없이 살다보니 소홀해진 것 같다. 공부는 꾸준하게 하고 있다. 오늘은 변신가능한 폼을 만들어서 소개해보려고 한다. 페이지를 사용하다 보면 다양한 형태의 폼을 만날 수 있다. 처음 페이지를 들어가서 거의 바로 회원가입 폼과 로그인 폼을 만날 텐데 이 둘만 하더라도 약간의 형태가 바뀐다. 프론트엔드 개발자로서 이런 것들을 한번에 처리하고 싶은 욕구가 생겨서 만들어보게 되었다! 물론! 로그인 폼, 회원가입 폼, 글 작성 폼 등 책임을 세분화하여 하는 것이 좋다. (코드를 이해하는 면에서도 그렇다 내가 짜서 잘 모르겠지만 어쪄면 변신 폼은 약간 어렵고 난해한 코드일 수 있다.) 포인트는 다음과 같다. 1. context api 없는 합성 컴포넌트 2. 비제..

Carousel 은 슬라이드쇼를 말한다. 회전목마라는 뜻을 가지고 있다. 이벤트와 같은 것들을 광고하는 용도로 사용되는 것을 종종 볼 수 있다. 예시 커머스 (ex. 쿠팡) 상품의 사진을 Carousel을 통해 보여준다. Netflix 인기 작품, 추천 작품을 Carousel을 통해 보여준다. 장점 눈에 띈다. 주목하게 되는 효과가 있다. 효율적인 공간활용. 페이지를 넘기지 않고도 다양한 정보를 제공할 수 있다. 다양한 variation 이 있다. 자동으로 돌아가게 한다던지 다음 요소를 약간 노출한다던지, 버튼을 통해 다음 요소로 넘긴다던지 등이 있다. 단점 웹 접근성 문제가 생길 수 있다. 성능 저하. 웹 페이지 로딩 속도에 영향을 미칠 수 있다. 다양한 variation. 이는 단점이 될 수도 있다고..