본문 바로가기

전체 글85

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.
How to style custom scrollbars with css css로 스크롤바 커스텀 스타일링 하는 방법 ::-webkit-scrollbar — 전체 스크롤바. ::-webkit-scrollbar-button — 스크롤바의 버튼 (위쪽과 아래쪽을 가리키는 화살표). ::-webkit-scrollbar-thumb — 드래그 가능한 스크롤 핸들. ::-webkit-scrollbar-track — 스크롤바의 트랙 (진행률 표시 줄). ::-webkit-scrollbar-track-piece — 핸들로 덮이지 않은 트랙 (진행률 표시 줄) 부분. ::-webkit-scrollbar-corner — 가로 및 세로 스크롤바가 모두 만나는 스크롤바의 하단 모서리. ::-webkit-resizer — 일부 요소의 하단 모서리에 표시되는 드래그 가능한 크기 조정 핸들 ie, fi.. 2021. 1. 7.
How to set input placeholder color 인풋 placeholder 색상 설정하는 방법 &::placeholder 로 색상값을 지정해주면 된다. 크로스브라우징이 필요할 경우에 webkit, ms 프리픽스를 붙여서 사용하면 된다. 대부분의 브라우저에서 placeholder 텍스트의 모양은 기본적으로 반투명 또는 밝은 회색이 사용된다. placeholder의 텍스트의 색상과 입력 배경 사이의 명암비가 저시력 상태를 경험하는 사람들이 읽을 수있을 만큼 충분히 높은지 확인하고 사이에 충분한 차이가 있는지 확인하는 것이 중요하다. 색상 명암비는 자리 표시 자 텍스트의 광도와 입력 배경색 값을 비교하여 결정된다. 텍스트 콘텐츠에는 4.5 : 1, 제목과 같은 큰 텍스트에는 3 : 1의 비율이 필요하다. 큰 텍스트는 18.66px 및 굵은 폰트 이상 또는 .. 2021. 1. 7.
prevent zooming when the input focus on mobile Prevents zooming when the input area is focused on mobile 모바일 인풋 포커스 클릭시 화면 확대 방지하기 ‌모바일에서 인풋 영역 포커스 또는 클릭시 화면이 자동으로 확대되는 현상이 있다. 모바일 브라우저가 확대되는 이유는 사용자가 읽을 수 있도록 텍스트를 더 크게 만들기 위해서라고 한다. 이 현상을 막기 위해서는 미디어쿼리를 사용해 해당 엘리먼트의 폰트사이즈를 충분히 크게 설정해주면 된다. font-size: 16px; 2021. 1. 7.
javascript return false, breack 차이 Return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다. 함수 내부의 값을 함수 외부로 출력시키거나 함수를 강제로 종료시키는 기능을 한다. 함수 안에서 return 명령문을 만날경우 함수의 실행은 그 지점에서 중단된다. 값을 제공한 경우 함수를 호출한 곳으로 돌아가서 그 값을 반환하여 계속 실행을 한다. break 현재 반복문, switch 문, 또는 label 문을 종료하고, 그 다음 문으로 프로그램 제어를 넘긴다.. 여러번 반복되는 for, switch, while 등의 루프의 경우에 해당 루프에서 아예 빠져나가게 된다. 이때 return과 구분되는 차이는 어디까지 빠져나가는가 중단되는가에 대한 차이이다. return breack 차이점 return의 경우 해당 메서드 .. 2021. 1. 7.
자바스크립트 연산자와 옵셔널 체이닝, optional chaining ** 지수 연산자 예전에 Math.Pow 를 사용해야 했던것을 **로 사용 가능하다. ?. 옵셔널 체이닝 연산자 좌항의 피연산자가 null 이나 undefined 일 경우에 undefined를 반환한다. 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 객체를 가리키기를 기대하는 변수가 널이나 언디파인드인지 확인하여 프로퍼티를 참조할 때 유용한 연산자이다. ?. 사용 이전에는 논리 연산자인 &&를 사용해 확인했었다. ?? null 병합 연산자 연산자 '??' 는 좌항의 피연산자가 null 이나 undefined인 경우에 우항의 피연산자를 반환하고 그렇지 않을 경우에 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용한 연산자이다. 예전에는 논리 연산자인 || 를 사용해 좌항의 피연산자가 false.. 2021. 1. 7.
Template Literals, 템플릿 리터럴이란? 리터럴 literal 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해서 값을 생성하는 표기법 템플릿 리터럴 template literals 백 스페이스 템플릿 내에서 템플릿 내의 자리 표시자 ${} 에 내부 백틱(`)을 사용하여 가독성을 높일 수 있다. $와 중괄호로 표현식을 넣어 사용가능하고 표현식과 사이의 텍스트가 함께 함수로 전달되는 방식이다. 템플릿 문자열 ``은 일반 문자열에 익숙한 작은 따옴표 또는 큰 따옴표 대신 역 따옴표 ( )를 사용한다. 여러 줄 문자열을 단순화하여 코드 량을 줄일 수 있는 장점이 있다. 태그가 지정된 템플릿이라고 불리기도 한다. 줄바꿈이 필요할 경우 \ 백슬래시 문자를 이용해서 이스케이프 처리를 할 수 있다. 2021. 1. 7.
Naming convention, 네이밍 컨벤션 종류와 사용예시 Naming convention 뜻 네이밍 컨벤션이란? 하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성이 좋도록 단어를 한눈에 구분하기 위해서 규정한 명명 규칙 카멜케이스, 파스칼케이스, 스네이크 케이스, 케밥케이스, 헝가리안 케이스 등 여러 컨벤션이 있다. 네이밍 컨벤션을 잘 지켜서 읽기 편한 코드를 작성 할 수 있어 각 상황에 맞는 컨벤션을 지키며 코드를 작성하는 습관을 들여보자. 네이밍 컨벤션 종류 camelCase : lower 카멜케이스 - 변수, 함수 이름 (lower camelCase) PascalCase : 파스칼케이스 - 생성자 함수, 클래스 이름 snake_case or underscore case : 스네이크케이스, 언더스코어 케이스 kebab-case : 케밥케이스 type.. 2021. 1. 7.
자바스크립트 주요 용어와 기본 개념, 호이스팅이란? 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체, 메모리 공간을 식별하기 위해서 붙인 이름 선언 시 var, let, const 키워드를 사용한다. (var는 es6 이전 키워드) var variable, 변할수 있는 값 var 단점 함수 레벨 스코프를 지원한다. 블록 레벨 스코프를 지원하지 않는다. -> 의도치 않게 전역 변수가 선언 되어 사이드 이펙트가 발생하게 된다. 상수 const constant, 한번 정해지면 변하지 않는, 단한번만 할당할 수 있는 변수 값을 재할당 할수 없어서 변수에 저장된 값을 변경할 수 없는 값 할당 변수에 값을 대입 저장 하는 일 참조 변수에 저장된 값을 읽어들이는 일 식별자 어떤 값을 구별해서 식별할 수 있는 고유한 이름 값이 아닌 메모리 주소를 기억하고 있다.. 2021. 1. 7.
javascript ES version up to 2020, ES11 ECMAScript version ES1 ~ ES11 에크마스크립트 버전별 특징 자바스크립트 표준, 초판은 1997년에 출시되었다. ECMAScript는 언어의 공식 이름으로 ES1, ES2, ES3, ES5 및 ES6으로 축약되었다. version Year Feature ES1 ECMAScript 1 (1997) First edition ES2 ECMAScript 2 (1998) Editorial changes ES3 ECMAScript 3 (1999) regular expressions try/catch ES4 ECMAScript 4 Never released ES5 ECMAScript 5 (2009) "strict mode" JSON support String.trim() Array.isArray(.. 2021. 1. 7.
React 17 달라진 점, import react JSX 개선 사항 With React 17, you don’t need the React import for JSX jsx 관련 import가 필요하지 않다. React 17 컴파일러 react/jsx-runtime는 JSX 변환을 처리하는 곳에서 새 디펜던시를 가져온다. import React from 'react' 구문을 제거할 수 있게 되었다. import react 제거 장점 1. Reducing the Bundle Size 컴파일 된 번들 최종 크기가 약간 줄어들게 된다. 2. Sharing Components has Become a Bit Easier 컴포넌트의 번들링 크기를 줄이고 React가 다른 버전으로 여러번 중복으로 설치되는 경우를 방지할 수 있다. 3. Reducing Dynamic.. 2021. 1. 7.
react covid-19 tracker web site Covid 19 Tracker React Project make a COVID-19 tracking application corona out 코로나아웃 코로나19 발생 현황 정보 제공, Home and abroad Covid-19 virus confirmed cure statistics information site corona-out.netlify.app covid-19 graph corona virus world chart cases, recovered, deaths covid19 world wide tracker web Corona Graph 코로나 그래프 covid-19 world real-time graph, covid-19 status by country, 코로나 전세계 실시간 그래프, 나라별.. 2020. 12. 20.
비동기 처리 AJAX , XMLHttpRequest AJAX (Asynchronous Javascript And XML) 페이지 새로고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행 axios, fetch, async/await, promise, XMLHttpRequest, superagent, request fetch Request, Resonse와 같은 HTTP의 파이프라인 구성 요소 조작가능 var myImage = document.querySelector('img'); fetch('flowers.jpg') .then(function(response) { return response.blob(); }) .then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.. 2020. 12. 19.
모바일 시스템 폰트 설정, Mobile System Font 모바일 시스템 폰트 설정 모바일 기본 시스템 폰트로 설정하는 css font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 각 폰트 의미 // Safari for OS X and iOS (San Francisco) -apple-system, // Chrome < 56 for OS X (San Francisco) BlinkMacSystemFont, // Windows "Segoe UI", // Android "Rob.. 2020. 12. 19.
Detect Dark Mode 다크모드 감지하기 Detect Dark Mode 다크모드 감지 JS Detect dark mode in safari prefers-color-scheme 으로 다크모드를 감지한다. safari Dark mode error Since safari doesn't eat addEventListener, branch to try catch safari에서 addEventListener 안먹으므로 try catch 로 분기 const [isDark, setIsDark] = useState(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); useEffect(() => { const detectMode = () => { if (window... 2020. 12. 19.
IE10 dataset nor working IE Explore dataset not working IE10에서는 돔요소에 dataset 속성이 없어서 일반적인 방식으로 접근하면 에러가 발생한다. 해결방법 IE10 에서는 getAttribute 메서드를 사용하기 //데이터 셋을 IE10에서도 사용하기 위한 함수 function getDataset(element, name) { if (element.dataset) { return element.dataset[name] || ''; } if else (element.getAttribute) { return element.getAttribute(`data-${name}`) }} '';; } } 2020. 12. 19.
useSWR 리액트 훅 데이터 라이브러리 useSWR 사용하기 useSWR 은 한번 fetch 한 원격상태의 데이터를 내부적으로 캐시하고 다른 컴포넌트에서 동일한 상태를 사용하고자 할 경우 이전에 캐시했던 상태를 그대로를 리턴한다. const { data } = useSWR( "https://jsonplaceholder.typicode.com/posts", url => fetch(url) .then(_ => _.json()) .then(sleep), { suspense: true } ); ‌ useSWR 특징 Lightweight Backend agnostic Realtime JAMstack oriented Suspense TypeScript ready REST compatible Remote + Local useSWR 장점 서로 다른 컴포넌트.. 2020. 12. 19.
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.
자바스크립트 모듈관리 글로벌 네임스페이스 변수 충돌이 일어나기 쉬운 경우 여러 라이브러리를 한 프로그램에서 로드시 서로 충돌 하는 상황이 생길 수 있다. 네임 스페이스를 통해 최상위 스코프의 확인자가 아니라 속성 형태로 기능이 노출된다. 모듈관리 특정 스코프로부터 의존성 관리자를 이용한 다양한 명시적인 방법으로 확인자를 가져와 사용한다. 우발적인 스코프 충돌 예방을 위해 비공개 스코프에 확인자를 저장한다. var a = 3; (function foo(){ var a = 4; console.log(a); //4 })(); console.log(a); //3 이 함수는 함수 표현식으로 취급된다. 함수 자신의 내부 스코프에 묶여있다. 함수이름 foo를 자기 내부에 숨기면 함수를 둘러싼 스코프를 불필요하게 오염시키지 않는다. 선언문.. 2020. 10. 10.
스코프 Scope 스코프 특정 장소에 변수를 저장하고 나중에 변수를 찾는 데는 잘 정의된 규칙이 필요하다는 규칙 어디서 어떻게 변수를 찾는가를 결정하는 규칙의 집합 중첩 스코프 스코프도 다른 스코프 안에 중첩 될수 있다. 대상 변수를 현재 스코프에서 찾지 못하면 엔진은 다음 바깥의 스코프로 넘어가는 식으로 변수를 찾거나 글로벌 스코프라 부르는 가장 바깥 스코프에 도달할 때까지 반복한다. function foo(a) { console.log(a + b); } let b = 2; foo(2); //4 b에 대한 참조는 함수 foo 안에서 처리할수 없다. 함수를 포함하는 스코프에서 처리한다. (글로벌 스코프) 렉시컬 스코프 프로그래머가 코드를 짤 때 변수와 스코프 블록을 어디서 작성하는가에 기초해서 코드를 처리할 때 확정된다... 2020. 10. 10.
리액트 네이티브 장점 단점 리액트 네이티브 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.
css background 속성 단축 css background 단축 속성 사용하기 body { background: url(sweettexture.jpg) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ } background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: top right; 단축 css background: #000 url(images/.. 2020. 10. 1.
ES6 주요 문법 활용하기 export & import //file: fibonacci.js //since these variables are not exported //they are private to the module. Code //in other modules can't reference them let fib1 = 0; let fib2 = 1; /** * next() returns the next number in the Fibonacci sequence. * @returns {number} */ export function next() { let current = fib1; fib1 = fib2; fib2 = current + fib1; return current; } /** * reset() resets the Fi.. 2020. 10. 1.
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.
CSS 시스템 폰트 System font css OS 별 시스템 폰트 특정 운영 체제의 시스템 폰트를 기본값으로 설정하면 성능을 향상 시킬 수 있다. 맥 기본 시스템 폰트 OS 버전 시스템 폰트 Mac OS X El Capitan San Francisco Mac OS X Yosemite Helvetica Neue Mac OS X Mavericks Lucida Grande 윈도우 기본 시스템 폰트 Windows Vista Segoe UI Windows XP Tahoma Windows 3.1 to ME Microsoft Sans Serif 안드로이드 기본 시스템 폰트 Android Ice Cream Sandwich (4.0)+ Roboto Android Cupcake (1.5) to Honeycomb (3.2.6) Droid Sans 우분투 기본 시스템 .. 2020. 10. 1.
리액트 함수형 컴포넌트 리팩토링하기 state 컴포넌트내 상태관리 클래스형 컴포넌트 this.state = { isVisible: true, users: [], }; 함수형 컴포넌트 useState 훅 사용하기 const [isVisible, setIsVisible] = useState(true); const [users, setUsers] = useState([]); useCallback const toggleVisibility = () => { setIsVisible(!isVisible); } 이 메서드는 요소를 다시 렌더링 할 때마다 다시 생성되는 문제가 있다. useCallback 으로 감싸서 함수를 재사용, 캐싱할 수있다. const toggleVisibility = useCallback( () => setIsVisible(!is.. 2020. 9. 30.
리액트 컴포넌트 절대경로 import 리액트 컴포넌트 import 시 절대경로와 상대경로 사용하기 상대경로 import Button from './components/Tabs'; 상대경로 단점 상대경로 폴더가 깊어질때는 아래처럼 패스가 길어지게 된다. 😭 import Button from '../../../../components/Tabs'; 절대경로로 import 하기 config파일 내 baseUrl 을 추가하면 아래처럼 절대경로로 import할 수 있다. 설정 변경시 IDE를 재실행 시켜줘야 제대로 작동한다. tsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } import Button from 'components/Tabs'; 절대경로 사용시 훨씬 .. 2020. 9. 30.

티스토리툴바