Dev16 appTsConfig.compilerOptions[option] = value; when build error react-scripts 4.0.0 -> 4.0.1 error react-scripts/scripts/utils/verifyTypeScriptSetup.js appTsConfig.compilerOptions[option] = value; solution npm i react-scripts@4.0.1 .eslintcache constantly generated · Issue #10161 · facebook/create-react-app Is there a way of disabling .eslintcache generation? I'm struggling to find the answer in the documentation. github.com 2021. 3. 9. Conventional Commits 컨벤셔널 커밋, 커밋메시지 컨벤션 feat: 새로운 기능 fix: 버그 수정 build: 시스템 또는 외부 종속성에 영향을 미치는 변경사항 (npm, gulp, yarn 레벨) style: 코드 의미에 영향을 주지 않는 변경사항 ( white space, formatting, colons ) ci: ci구성파일 및 스크립트 변경 chore: 패키지 매니저 설정할 경우, 코드 수정 없이 설정을 변경 docs: documentation 변경 perf: 성능 개선 refactor: 버그를 수정하거나 기능을 추가하지 않는 코드 변경, 리팩토링 test: 누락된 테스트 추가 또는 기존 테스트 수정 revert: 작업 되돌리기 2021. 1. 8. How to put google GA tag in nextjs & React script 의 dangerouslySetInnerHTML 을 통해 gtag tracking ID 를 적용한다. `https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}` 2021. 1. 7. PWA Progressive Web App manifest.json setting manifest.json short_name: 사용자의 홈 화면 또는 실행기와 유사하게 아이콘 내에서 사용되는 애플리케이션의 이름 정의 name: 시작 화면 및 프롬프트에서 앱 스토어 또는 브라우저에 표시되는 이름. 경우에 name속성이 생략되어 short_name표시된다. icons: 사용자의 홈 화면, 실행기, 작업 전환기, 스플래시 화면 등에 표시되는 아이콘 집합 (또는 하나의 아이콘) start_url: 사용자가 시작할 때 볼 수있는 애플리케이션 페이지의 URL display:이앱은 주소 표시 줄을 치우고, 새 창에서 실행하고, 전체 화면으로 이동할 수 있다. fullscreen: 브라우저 UI없이 앱을 열 수 있으며 사용자 기기의 전체 화면을 차지할 수 있다. standalone: 사용자가 기본.. 2021. 1. 7. Solve initialization error when importing firebase in react Firebase Resolve Error Firebase App named '[DEFAULT]' already exists (app/duplicate-app) 리액트에서 파이어베이스 모듈 사용하기 & 초기화 import * as firebase from 'firebase' 로 firebase 모듈을 import 한다. fireabase.app 이 로드 되었는지 존재 여부를 체크 한뒤 initializeApp 을 실행하면 정상 적으로 작동된다. 2021. 1. 7. Naming convention, 네이밍 컨벤션 종류와 사용예시 Naming convention 뜻 네이밍 컨벤션이란? 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성이 좋도록 단어를 한눈에 구분하기 위해서 규정한 명명 규칙 카멜케이스, 파스칼케이스, 스네이크 케이스, 케밥케이스, 헝가리안 케이스 등 여러 컨벤션이 있다. 네이밍 컨벤션을 잘 지켜서 읽기 편한 코드를 작성 할 수 있어 각 상황에 맞는 컨벤션을 지키며 코드를 작성하는 습관을 들여보자. 네이밍 컨벤션 종류 camelCase : lower 카멜케이스 - 변수, 함수 이름 (lower camelCase) PascalCase : 파스칼케이스 - 생성자 함수, 클래스 이름 snake_case or underscore case : 스네이크케이스, 언더스코어 케이스 kebab-case : 케밥케이스 type.. 2021. 1. 7. PWA 프로그레시브 웹앱 핵심기술 6가지 서비스워커 (service worker) 웹 브라우저 안에 있지만 웹 페이지와는 분리되어 항상 실행되는 백그라운드 프로그램이다. 브라우저와 서버 사이의 상탯값 변경을 감시 푸시알림으로 사용자에게 특정 메시지와 댓글 알림을 전송 오프라인 상태에서도 작동 웹앱 매니페스트 (manifest) 앱 소개 정보와 기본 설정을 담은 JSON 파일 manifest.json 웹앱의 고유한 제목과 소개글 스플래시 스크린 화면방향 홈화면 아이콘, 브라우저에서 사용할 아이콘 배경색 정보 manifest.json { "name": "HackerWeb", "short_name": "HackerWeb", "start_url": ".", "display": "standalone", "background_color": "#fff", .. 2020. 10. 18. PWA 프로그레시브 웹앱의 장단점 프로그레시브 웹앱 PWA Progressive Web Apps 모바일 웹앱처럼 쉽게 개발하고 네이티브 앱과 같은 사용자 경험을 제공 본질은 웹이지만 앱처럼 사용 가능한 앱 PWA 장단점 개발 장점 익숙한 웹기술 그대로 이용 개발시간 단축 푸시알림, 오프라인캐시, HTTPS 사용 단점 하드웨어 사용은 웹 API를 통하므로 웹표준 지원하는 브라우저 필요 배포 장점 웹 브라우저만 있으면 어디든 배포가능 홈화면 추가 를 통해 응용프로그램으로 설치 가능 실시간 유지보수가능 단점 앱스토어, 플레이스토어 이용불가 사용 장점 빠른 실행속도 네이티브 앱과 유사한 사용자 경험 제공 단점 안드로이드, 윈도우 운영체제는 PWA의 모든 기능을 사용할 수 있으나 IOS는 일부만 사용 가능 PWA 프로그레시브 웹앱 핵심기술 6가지.. 2020. 10. 18. 리액트 네이티브 장점 단점 리액트 네이티브 React Native 페이스북이 만든 오픈소스 모바일 애플리케이션 프레임워크 리액트 네이티브 장점 모바일 크로스플랫폼, 자바스크립트로 IOS와 안드로이드 모바일 앱을 동시에 개발 소스코드 공유와 재사용 자바스크립트 기반으로 러닝커브와 낮은 진입장벽 컴포넌트 최대활용으로 생산성 향상, 크로스 플랫폼 일관성있는 개발방식 유지보수 비용 절감 오픈소스로 개발된 다양한 기능들 리액트 네이티브 단점 리액트에만 존재하는 개념 공부에 대한 러닝커브 하이브리드 앱방식으로 각 OS에 최적화된 네이티브 개발방식에 비해 낮은 성능 오픈소스 활용으로 인한 버그 발생에 대한 스트레스 오픈소스에 없는 기능개발 필요시 개별 개발리소스 비용발생 네이티브 앱 개발언어 IOS : swift, Objective-C And.. 2020. 10. 10. GraphQL 공부1 GraphQL 그래프큐엘 API를 위한 쿼리 언어이다. 주요특징 API를 위한 쿼리 언어이며 이미 존재하는 데이터로 쿼리를 수행하기 위한 런타임 API에 있는 데이터에 대한 완벽하고 이해하기 쉬운 설명을 제공 클라이언트에게 필요한 것을 정확하게 요청할 수 있는 기능을 제공 시간이 지남에 따라 API를 쉽게 진화시키고 강력한 개발자 도구를 지원 type Query { me: User } type User { id: ID name: String } function Query_me(request) { return request.auth.user; } function User_name(user) { return user.getName(); } 쿼리 예제 { me { name } } { "me": { "name".. 2020. 10. 2. Deno 디노 Deno 디노 V8 JavaScript 엔진 및 Rust 프로그래밍 언어를 기반으로하는 JavaScript 및 TypeScript 용 런타임 Node.js의 최초 제작자 인 Ryan Dahl이 만들었으며 생산성에 중점을 둔다. Deno 특징 생산성과 안전한 스크립트 환경 제공이 목표 단일 실행 파일로 배포 브라우저 호환성 유닛 테스트, 린트, 포맷팅 등 개발 경험 향상을 위한 빌트인 툴 제공 HTTP 효율적 제공 Deno 단점 타입스크립트 컴파일러 병목현상 내부적으로 마이크로소프트사에서 제작한 TSC를 타입 체킹에 사용하고 있어 V8엔진과 비교할때 느린편이다. 아직은 부족한 플러그인 인터페이스 Node.js와 비교 Node JS Deno Engine V8 V8 Written in C++, Javascri.. 2020. 10. 1. canvas tutorial 1 Canvas API Javascript, HTML 엘리먼트를 통해 그래픽을 그릴 수 있다. 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다. Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그린다. html JS const canvas = document.getElementById('canvas'); HTML 엘리먼트에 대한 참조를 얻는다. const ctx = canvas.getContext('2d'); 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻는다. 실제 그리기 getContext('2d') 메서드를 이용해 그린다. ctx.fillStyle = 'gre.. 2020. 9. 26. GET & POST 메서드 GET 메서드 HTTP GET 메서드는 특정한 리소스를 가져오도록 요청한다. GET 요청은 데이터를 가져올 때만 사용해야 한다. GET /index.html 성공 시 XML이나 JSON과 함께 200 (Ok) HTTP 응답 코드를 리턴한다. 에러 발생시 : 404 (Not found) 에러 or 400 (Bad request) 에러가 발생한다. 주요 특징 안전함, 멱등성, 캐시 가능 데이터를 읽거나 검색시 사용 (수정시 사용X) 데이터의 변형의 위험없이 사용 가능 같은 요청을 여러 번 하더라도 항상 같은 응답 리턴 GET을 데이터를 변경하는 등의 안전하지 않은 연산에 사용 불가 application/x-www-form-urlencoded 콘텐츠 유형을 사용하는 간단한 형태의 양식 제출 POST / HTT.. 2020. 9. 23. 디자인 시스템과 컴포넌트 Collection of design systems & creating reusable design systems 디자인 시스템 모음 & 재사용 가능한 디자인 시스템 만들기 디자인 시스템 Design System A Design System is a set of interconnected patterns and shared practices coherently organized to aid in digital product design and development of products such as apps or websites. It may contain, but is not limited to, pattern libraries and design language, style guides, coded .. 2020. 9. 23. commit messages Patterns for writing better git commit messages 더 나은 git 커밋 메시지를 작성하기 위한 패턴 Types asdasdasd feat : A new feature 새로운 기능 개발 fix : A bug fix 버그 수정 refactor : refactoring production code 코드 리팩토링 chore : Build process, no production code change 패키지 or 빌드 프로세스 또는 보조 도구 변경 pakage.json, .gitignore docs : Documentation only changes 문서 만 변경 README.md perf : A code change that improves performance 성능을 향상 .. 2020. 9. 21. Npm Yarn CLI 단축 명령어 Npm (Node Package Manager) 노드 패키지 매니저 자바스크립트 프로그래밍을 위한 패키지 관리자 자바스크립트 런타임 환경 node.js의 기본 패키지 관리자 Yarn 의 장점 다운로드한 패키지 캐시 운영 병렬화 리소스 활용 극대화 설치 시간 단축 코드 실행전 설치된 패키지 무결성 확인 이전에 패키지 설치한 경우 오프라인으로 재설치 npm & yarn npm yarn 의미 npm init yarn init 초기화 npm install yarn 또는 yarn install package.json의 패키지 설치 npm install --save [package name] yarn add [package name] 의존성으로 추가 npm install --save-dev [package name.. 2020. 9. 21. 이전 1 다음
