TIL

TIL/코테

부분 문자열이 가능한 "시작 위치의 개수"를 구하는 방법

크기가 작은 부분 문자열 (https://school.programmers.co.kr/learn/courses/30/lessons/147355) 기본 개념 문자열 t의 길이: N (예: N = t.length) 찾고자 하는 부분 문자열 p의 길이: M (예: M = p.length) t에서 길이가 M인 부분 문자열을 모두 찾으려고 할 때, 부분 문자열이 시작할 수 있는 마지막 인덱스는 N - M다. 부분 문자열이 t의 끝까지 정확히 M 길이를 유지하기 위해서는, 시작 인덱스가 N - M 이어야만 한다. 문자열 t: "12345" (N=5) 부분 문자열 p: "678" (M=3) 여기서 t에서 길이가 3인 모든 부분 문자열을 찾으려면, "123", "234", "345"가 되어야 한다. 시작 인덱스는 각각..

TIL

리액트쿼리 + MSW 테스트하기

보호되어 있는 글입니다.

TIL

커스텀 에러 코드 정의하기

Custom Error Code가 왜 필요했을까? 1. 도메인 첫자리는 도메인에 따라서 나누었다. 각 도메인별로 숫자를 부여 number domain 0 Auth 1 WRITE_TRANSFER 2 ALARM 3 PAYMENT 4 PURCAHSE, SALE 5 YANOLJA_ACCOUNT 9 SEARCH 2. 에러 종류 세 번째 자리는 어떤 상황에서 에러가 발생하는지에 따라 숫자를 부여. number situation 0 도메인 또는 dto 객체를 생성할 때 잘못된 경우,즉 MethodArgumentValidException 또는 ConstraintViolationException이 발생한 경우 1 도메인 로직 상의 오류인 경우 2 인증, 인가가 안된 경우 3 존재하지 않는 리소스에 접근한 경우 4 외부 ..

TIL/React

Errorboundary 야무지게 사용하기

내가 사용했던 방식의 문제점: 기존의 에러바운더리 적용 방식은 Global ErrorBoundary 라고 명명할 수 있을 것처럼 전체를 감싸는 에러바운더리를 작성해서, 잘못된 페이지를 접속했거나, 요청이 잘못되었을 때 등 발생하는 에러를 모두 한꺼번에 처리해서 상황에 따른 핸들링을 하지 않는 방식으로 사용했습니다. 이렇게 사용한 에러바운더리는 다음과 같은 유저의 불편함을 만들었습니다. 📍 Global ErrorBoundary / API ErrorBoundary 나누기 기존의 errorBoundary를 GlobalErrorBoundary로 설정하고 전체를 감쌉니다. 내부의 api 관련 에러들을 핸들링 하기위해 지역적인 errorBoundary인 ApiErrorBoundary를 생성하고, ApiErrorBo..

TIL/React

리액트 Hooks: useCallback 훅의 역할

보호되어 있는 글입니다.

TIL/TypeScript

타입스크립트: PropsWithChildren

📚 PropsWithChildren type PropsWithChildren = P & { children?: ReactNode }; https://github.com/DefinitelyTyped/DefinitelyTyped/blob/813a8799e465a7d5f0d6776643f20f93681e85e4/types/react/index.d.ts#L820 1. generic 타입 매개변수 P를 받아온다 2. 해당 타입에 ReactNode 타입의 children 속성을 추가해준다. 📚 PropsWithChildren 사용하기 PropsWithChildren타입은 말 그대로 children을 가진 props 타입을 의미한다. 직접 children의 타입으로 명시해주어야했던 ReactNode와는 다르게 chi..

TIL/TypeScript

타입스크립트 as const는 왜 사용하는 걸까?

깃헙 레포를 보다가 객체에 `as const`를 선언하는 것 몇번 봤었다. `as const`가 뭐지? 왜 객체에 선언할까? 한번 알아보자 🤔 📚 as const 상수가 아닌 것을 상수로 타입단언 (const assertion)한다. 이때 리터럴 타입으로 추론해준다. 리터럴 타입으로 추론되기 때문에 상수가 아닌 것에도 상수처럼 관리할 수 있다! 📚 const assertion을 활용한 상수 관리하기 const Colors = { red: "#FF0000", blue: "#0000FF", green: "#008000" } 각 컬러의 대문자를 담은 Colors 변수를 선언해줬다. Colors 변수 내부에 추론된 값을 보면 각 속성 별로 리터럴 타입이 아닌 `primitive type(string)`으로 추론..

TIL

유용한 WebStorm 단축키 정리

자꾸 까먹어서 정리하는 나름 유용한 웹스톰 단축키~! 코드 감싸기: 드래그 한 후 Cmd + Opt + T 멀티 커서: Opt + Click 열 선택 모드: Cmd를 누른 상태에서 원하는 텍스트를 드래그 다중 커서를 활성화하여 여러 줄의 텍스트를 동시에 편집할 때 유용함 코드 끝으로 이동: Cmd + →\ 현재 라인 복제: Cmd + D 현재 라인 삭제: Cmd + Backspace 현재 라인(또는 선택한 블록) 이동: Cmd + Shift + Up/Down 코드 포맷팅: Cmd + Opt + L 자동 완성: Cmd + Space 코드 실행: Cmd + R\ 현재 커서 위치에서 단어 선택 확장: Opt + Up/Down 스니펫 만들어서 사용할 수도 있던데 나중에 만들어봐야겠다...

TIL/JavaScript

javascript의 Observer-Subscribe 패턴

보호되어 있는 글입니다.