일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 코딩테스트
- C
- 컨테이너
- 이진탐색
- 프론트엔드
- 프로그래머스
- 연결 리스트
- alexnet
- 웹팩
- pytorch
- 타입스크립트
- 큐
- 브라우저
- Machine Learning
- 포인터
- RT scheduling
- 알고리즘
- 프로세스
- 해시테이블
- 자료구조
- 배열
- 연결리스트
- cors
- 릿코드
- APOLLO
- 자바스크립트
- GraphQL
- RxJS
- vue3
- 스택
- Today
- Total
목록전체 글 (164)
프린세스 다이어리
어떤 컴포넌트 내에서 서버에 데이터를 요청해서 응답을 받아오는 경우가 있다고 가정하자. 그리고 이 컴포넌트에서 에러가 발생하면 센트리에 에러로그를 보내는 상황이다. 여기에서 센트리에 api 에러인 것과 클라이언트 에러인 것을 구분해서 클라이언트 에러인 것만 로깅하기 위해서는 api 요청 함수 내에 ServerException을 하나 정의해서 에러를 throw 해주면 된다. // exception.ts export class ServerException extends Error { constructor(msg: string) { super(msg); Object.setPrototypeOf(this, ServerException.prototype); } } 먼저 이렇게 에러를 extend하는 ServerEx..
테스트를 짜기는 했는데, 유사한 케이스가 너무 여러개인 경우에 대해 리팩토링을 진행했다. 안좋은 예시 테스트를 짰으니 테스트가 돌아가기는 하나, 테스트 케이스가 많아질 수록 코드 줄 수도 많아지고 뭘 적었는지 한눈에 보기 힘들다. describe('formatPhoneNumber 테스트 - 9자리 이상', () => { it('지역번호', () => { const result = formatPhoneNumber('0212341234'); expect(result).toBe('02-1234-1234'); }); it('지역번호 자릿수 미만', () => { const result = formatPhoneNumber('031123123'); expect(result).toBe('031-12-3123'); }..
1. 전체 거의 웬만한 국내 개인/업체 전화번호는 포맷팅 가능할듯. 물론 5자리 통신사 번호 같은 레어템은 안 침. const formatPhoneNumber = (str: string) => { if (typeof str !== 'string') return ''; str = str.replace(/[^0-9]/g, ''); if (str.indexOf('82') == 0) { return str.replace(/(^82)(2|\d{2})(\d+)?(\d{4})$/, '+$1-$2-$3-$4'); // +82 } else if (str.indexOf('1') == 0) { return str.replace(/(^1\d{3})(\d{4})$/, '$1-$2'); // 1588, 1566, 1677, ....
문제상황 탭을 클릭하면 탭별로 다른 컴포넌트를 불러오려고 하는데 다음과 같은 warning이 뜬다. 자매품: Invalid VNode type: undefined (undefined)도 이 문제 해결 중 떴다. 해결방법 컴포넌트가 제 때 잘 불러와지는지 확인해야 한다. 기존 코드 setup() { const componentName = ref(''); const selectedId = ref(0); const changeTab = (value: number) => { switch (value) { case 0: componentName.value = 'chart-one'; break; case 1: componentName.value = 'chart-two'; break; case 2: component..
문제상황 fetch 받아온 배열을 reduce 돌고 싶은데, reduce에 밑줄이 생기며 에러가 뜬다. reduce 뿐만 아니라 this.charData[0]와 같이 인덱스에 접근하는 곳에도 모두 타입에러가 떴다. 아마 map을 돌았어도 에러가 떴을 것이다. computed: { isChartDataEmpty(): boolean { return ( this.chartData.reduce((acc: number, cur: any) => acc + cur.y, 0) === 0 ); }, }, Property 'reduce' does not exist on type '(state: DashboardStateI) => ChartDataI[] | undefined'. 해결방안 chartData가 undefined..
문제상황 특정 시점에서 차트를 새로 그려주기 위해 methods에 다음과 같은 함수를 만들었다. refreshData(newData: dashboardData) { this.chart.series[0].setData(newData); }, 그런데 다음과 같은 타입에러가 떴다. 해결방법 기존에는 setUp에서 chart를 null로 초기화하고 타입을 지정하지 않았는데, 타입을 먼저 unknown으로 하고 내가 쓰고 있는 하이차트의 Chart 타입을 가져와 지정해 주었다. 수정 전 setup() { const chart = ref(null); ... return { chart, ... }; }, 수정 후 setup() { const chart = ref(null) as unknown as Chart; .....
입사 후 반년 동안은 우리 주문 결제 팀에서 FE를 담당하는 사람은 나 포함 두 명이었다. 그 기간 동안 나는 새하얀 신입으로서 5년 차 동료분을 열심히 따라가고 있었고, 내가 잘 모르는 부분은 동료에게 물어보면서 촉박한 개발 일정에도 무리 없이 소화하고 있었다. 타 부서 분들과도 원만하게 협업하며 잘 지냈고, 또 회사에서 지원해 주는 교육비를 의미 있게 활용하며 꾸준히 자기 계발을 하고 있었다. 최근 회사 규모가 커지면서 우리 프론트 파트에 두 명의 경력직 분들이 합류하셨다. 새 동료들은 우리 조직에 적응하고 있고 나도 그들에게 적응하는 중이다. 아직 4명으로서의 색깔을 찾아가는 중이기는 하다. 그런데 얼마 전부터 슬슬 내가 지금까지 업무에 적응하고 협업하는 방향이 맞았나 의구심이 들면서 머리가 띵할 ..
문제상황 git clone을 받으려고 하는데 "RPC failed; curl 18 transfer closed with outstanding read data remaining" 라는 문구가 뜨면서 클론이 안 되고 있다. 원인 규모가 큰 레포지토리를 클론하려고 하는데 로컬에서 네트워크 상황이 좋지 않은 경우, 원격 연결이 끊어지고 클론이 취소가 된다. 해결 방법 먼저 얕은 클론을 한 후(--depth 1) -> 점진적으로 레포를 가져온다(fetch --unshallow) $ git clone http://github.com/myrepo --depth 1 $ cd myrepo $ git fetch --unshallow 결과 잘 받아와짐