목록분류 전체보기 (276)

mingg IT

[이펙티브 타입스크립트] 4장 타입 설계

아이템 28 유효한 상태만 표현하는 타입을 지향하기 타입을 잘 설계하려면 유효한 상태만 표현할 수 있는 타입을 만들어야함 타입 설계가 잘못 된 예시 1 interface State { pageText: string; isLoading: boolean; error?: string; } function renderPage(state:State) { if(state.error) { return `Error`; } else if(state.isLoading) { return 'loading currentPage'; } return 'currentPage' } isLoading이 true이고 동시에 error 값이 존재한다면 로딩 중인 상태인지, 오류가 발생한 상태인지 명확하게 구분이 힘듬. async funct..
FrontEnd 2023. 6. 30. 18:34
[React+TS] apexcharts 차트 고도화 예시(Pie)

프로젝트에서 apexcharts라는 라이브러리르 사용하고 있다. https://apexcharts.com/ ApexCharts.js – Open-Source HTML5 JavaScript Charts See it in action Below is a code snippet to show a glimpse of how easy it is to create interactive charts. apexcharts.com 우선 사용하기가 쉽고, 공식문서가 굉장히 친절하다. 그냥 type='pie' 'bar' 이런식으로 차트의 종류를 선택해서 쓸 수 있다. 커스텀을 엄청나게 빡세게 하지않아서 그런지 아직은 사용하는데 불편함이 없었다. 보통 통계 부분을 시각화를 많이해서 사용하는데, 조금이라도 더 유저가 친환경적으..
FrontEnd 2023. 6. 30. 15:51
이미지 최적화 기법

보호되어 있는 글입니다.
FrontEnd 2023. 6. 29. 14:49
[이펙티브 타입스크립트] 7장 코드를 작성하고 실행하기

주요 내용 자바스크립트와 타입스크립트 호환 관련하여 지양해야할 점 정보 은닉 하는 방법(클로저) 소스맵 정의 아이템53 타입스크립트 기능보다는 ECMAScript 기능을 사용하기 타입스크립트와 자바스크립트간의 호환성문제로 유의해야 하는 것들 enum const enum Flavor { V = 0, C = 1, S = 2, } function scoop(flavor: Flavor) scoop('vanilla'); // 자바스크립트에서는 정상 scoop('vanilla'); // 타입스크립트에서는 에러 'vanilla' 형식은 'Flavor' 형식의 매개변수에 할당될 수 없습니다 자바스크립트와 타입스크립트에서 동작이 다르기때문에 문자열 열거형은 사용하지 않는 것이 좋다. 열거형 대신 리터럴 타입의 유니온을 ..
FrontEnd 2023. 6. 20. 21:33
[이펙티브 타입스크립트] 6장 타입 선언과 @types

주요 내용타입스크립트에서 의존성 동작 방식의존성 관리시 발생할 수 있는 문제 및 해결방안타입에 대한 테스팅 기법 아이템45 devDependencies에 typescript와 @types 추가 하기 dependencies 런타임에서 사용하는 라이브러리들이 포함됨 devDependencies 개발 및 테스트에서는 사용되지만, 런타임에는 필요없는 라이브러리들이 포함됨 typescript, cypress, jest 등 테스트 프레임 워크 peerDependencies 런타임에 필요하지만, 의존성을 직접 관리하지 않는 라이브러리들이 포함됨 플러그인 타입스크립트를 시스템 레벨로 설치하기보단 devDependencies로 관리해야하는 이유팀원들과 동일한 타입스크립트 버전 보장 프로젝트 셋업시 단계 단축@types ..
FrontEnd 2023. 6. 12. 21:20
[firebase] firebase hosting(배포 후) Slack으로 알림 연동 받기

스테이징, 라이브 배포 주기가 매우 짧아짐에 있어서, 매번 배포 내역을 공유하기가 번거로웠다.(나는 사실 항상 한다.. ) 여튼 필요로 인해 배포완료가 되면 슬랙 채널로 알림이 오도록 기능을 추가했다. (++추가) 내가 이용한 방식은 firebase 배포 스크립트에서 슬랙 웹훅 URL로 api를 쏘아서 배포 완료 알림을 받도록 하였다. 따로 firebase에서 설정할 필요는 없었다. 혹시 다른 좋은 방법 있으면 댓글로 남겨주시면 감사하겠습니다~ 1. https://api.slack.com/ 에 접속한다. 2. Create New App 클릭 3. Create an app > From scratch 클릭 4. App Name 작성 및 슬랙 워크스페이스 선택 5. Settings > Incoming Webh..
기타 2023. 6. 12. 11:32
[GA4] 실전 구글 애널리틱스 활용하기: 라이브 서비스에서의 유용한 팁

이전 포스팅에서 GA4를 React 프로젝트에 적용하는 방법에 대해 포스팅 했었다. https://mingg123.tistory.com/194 [Firebase] React + Firebase Google Analytics 이용 약 이틀전에 React 프로젝트에 Google Analytics를 붙여놓았었는데 https://mingg123.tistory.com/192 [구글 애널리틱스] React 에 GA(구글 애널리틱스) 붙이기 구글 애널리틱스는 웹 사이트 방문자의 데이터를 수 mingg123.tistory.com 라이브 서비스를 배포하고 GA4를 적용했지만, 대시보드를 통해 원하는 정보를 파악하기 어려웠다. 제대로 이해하고 활용하기 위해 간단하게 정리를 해보려고 한다. 트래픽과 세션 트래픽 로그 데이터..
데이터분석 2023. 5. 26. 16:09
[React] 웹뷰로 앱 개발시 주의 해야할 점(CSS 노치 영역, 줌인 줌 아웃 등 )

진행하고 있는 프로젝트가 결과적으로 개발~배포까지 총 6개월이 걸렸다. 웹뷰 형태로 앱을 만들어본 경험이 드물어서 배포 전에 발생했던 문제점에 대해서 정리를 하고자 한다. 배포 직전에 다른 사람들 아이폰(내가 테스트한건 iphone SE)를 빌려 했더니 어찌나 많은 문제들이 발생하던지.. 잊지 않기 위해 정리해 보려고 한다. 1. zoomIn, zoomOut WebView를 이용하여 앱을 개발하고, 배포를 하려돈 와중에 해당 문제를 발견했다. 화면을 줌인, 줌아웃 할 때마다 앱의 화면이 함께 늘어났다 줄어드는 것이다. ㅎㅎ 웹 일땐 이럴 일이 없었는데.. 해결법은 아래와 같다. touchAction: 줌인, 줌아웃 이벤트를 막음 userSelect: 더블클릭으로 텍스트 선택을 막음 import { Sta..
FrontEnd 2023. 5. 18. 15:40
이전 Prev 1 ··· 4 5 6 7 8 9 10 ··· 35 Next 다음