Sentry란? 소개 공식 홈페이지 어플리케이션에서의 오류 발생을 알려주는 실시간 에러 트래킹 서비스 입니다. Javascript, node.js, python 등의 다양한 언어, 프레임워크, 라이브러리를 지원하며 Unreal Engine같은 게임 개발 도구도 지원합니다. 여러 프로젝트의 이슈를 한 곳에서 관리함으로써 에러 모니터링을 일원화 할 수 있습니다. 슬랙이나 카카오톡등 특정 프로그램과 연동하여 에러가 발생했을때, 특정 그룹 및 사용자에게 알람을 보낼 수 있습니다. 지원하는 플랫폼 더보기 요금제 무료 / 유료 버전에 따른 차이 멤버 수 제한 : 하나의 계정으로 로그인해야 해당 이슈들을 조회할 수 있습니다. (유료 사용의 경우 무제한) 에러 수 제한 : 무료 버전은 월간 에러 카운트가 5,000개로..

1. 개요 공식 사이트 링크 Tailwind CSS란? Utility-First CSS : 미리 설정된 유틸리티 클래스들을 조합하여 적용하는 방식 (예: Bootstrap) HTML 코드 안에 스타일 코드 작성 CSS 파일 별도로 관리할 필요 없음 클래스명때문에 고민할 필요 없음 로우 레벨의 스타일 제공 CSS 요소 수준의 유틸리티 클래스를 제공 세밀한 디자인 구현 가능 동일한 색상이나 사이즈, 간격등 일관된 디자인 적용 가능 2. 설치 및 설정 설치 설치 방법 tailwindcss CLI로 설치 PostCSS 플러그인으로 설치(권장) 설치 방법 PostCSS : JS플러그인을 통해 스타일 변형하는 도구 CRA에서도 사용 autoprefixer 기능 사용 가능 프레임워크에 추가 CDN 사용 설정 tail..

개요 SCSS란? Sassy CSS (Syntactically Awesome Style Sheets) CSS 에서 단순반복되는 부분이나 불편함을 해소시키기 위해 만든 언어 > SASS SASS 에는 Sass 와 SCSS 가 있음 (각각 확장자는 .sass, .scss) 기존 Sass 에서 들여쓰기와 줄바꿈에 의존하던 방식을, SCSS 에서는 중괄호를 사용하는 방식으로 사용 예제 .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px .list { width: 100px; float: left; li { color: red; background: url("./image..

Radix UI 공식 사이트 링크 Vercel 과 CodeSandbox 등에서 사용하는 UI 컴포넌트 특징 메뉴를 사용 할 때 엔터키,백스페이스키,방향키등으로 제어 가능 키보드 타이핑 문자열 그대로 자동완성 선택 기능 사용 (Typeahead support) 각각의 컴포넌트를 개별로 설치 가능 스타일링 요소가 포함되어 있지 않음 다른 라이브러리와 비교 Slider 공통 속성 min , max 값 설정 RTL LTR 변경 지원 Step (단계별 value 설정) 텍스트필드 (툴팁) 좌우 방향키 지원 Vuexy 컬러 사이즈 조절 Ticks 구간단위로 슬라이더가 이동되도록 지정 가능 Icon Google Material Icons 을 사용해 툴팁에 아이콘 추가 가능 마우스 휠 지원 DevExtreme 사이즈 ..

소개 Storybook 이란? 공식 홈페이지 오픈소스 UI 컴포넌트 개발 도구 문서화가 쉬운것이 특징 애플리케이션 외부 (독립 개발 환경) 에서 실행됨 다양한 부가기능 (addons)을 지원함 정적버전을 빌드하여 http 서버에 배포 가능 React를 시작으로 현재는 React Native, Vue, Angular, Svelte 에서 사용 가능 기본 개념 스토리북(Storybook)은 컴포넌트와 그 컴포넌트에 대한 스토리들로 구성되어 있음 하나의 컴포넌트는 보통 하나 이상의 스토리를 가짐 설치 & 설정 설치하기 설치 // npm 설치 npm install --save -g @storybook/cli // yarn 설치 yarn add global @storybook/cli // or npx storybo..

ReScript 개요 공식 홈 : https://rescript-lang.org/ 한글화 : https://green-labs.github.io/rescript-in-korean/ ReScript 란? Reason + BuckleScript ⇒ Rescript Ocaml 을 기반으로 만든 함수형 프로그래밍언어 Reason 과, 이를 Javascript 로 변환해주는 컴파일러 BuckleScript 를 합쳐 만든 언어 Javascript의 서브셋 언어이며, 확장자로 .res 사용 ReScript 부트캠프 개발 환경 구축 rescript 프로젝트 실행 .res 파일에서 자동 추전하는 플러그인 설치 패키지 받기 : npm install 또는 yarn install yarn 미설치인 경우 npm install ..