본문 바로가기

전체 글105

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.
javascript 연산자 Javascript Operator 자바스크립트 연산자 주요 기본식과 좌변식 의미 기본식 자바스크립트 일반식 및 기본 키워드 this 실행 문맥의 특별한 속성 function 함수 정의 class 클래스 정의 function 생성기 generator 함수 식 정의 yield 생성기 함수 일시정지 및 재개 yield* 다른 생성기 함수 또는 순회가능 객체로 위임 async function 비동기 함수 표현식 정의 await 비동기 함수를 일시 중지했다가 다시 시작하고 promise의 resolution/rejection을 ​​기다림 [] 배열 초기자 및 리터럴 구문 {} 객체 초기자 및 리터럴 구문 /ab+c/i 정규식 리터럴 구문 ( ) 그룹 연산자. 좌변식 좌변값은 할당 대상을 의미 Property a.. 2020. 9. 29.
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.
Promise 프로미스 사용하기 Promise 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체, 콜백을 첨부하는 방식의 객체이다. 프로미스 장점 콜백은 자바스크립트 Event Loop이 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출되지 않는다. 비동기 작업이 성공하거나 실패한 뒤에 then() 을 이용하여 추가한 콜백의 경우에도 위와 같다. then() 을 여러번 사용하여 여러개의 콜백을 추가 할 수 있으며 각각의 콜백은 주어진 순서대로 하나 하나 실행되게 된다. chaining Promise.then() then() 메서드는 Promise를 리턴하고 두 개의 콜백 함수를 인수로 받는다. 하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다. const promise1 = new Pr.. 2020. 9. 23.
비동기 Asynchronous 이해하기 Asynchronous 비동기 보통 코드는 한번에 한가지 사건만 발생하면서 순차적으로 진행된다. 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 한다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보면, 전체 프로그램이 모두 멈춘 것처럼 보이게 된다. 기다리는 동안 다른 작업을 수행할 수 있는것, 이것이 비동기 프로그래밍의 기본이다. Blocking code 웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있다. 이러한 현상을 blocking 이라고 부른다. Threads 쓰레드는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스이다. 각 스.. 2020. 9. 23.
JS Module 모듈 import, export export 모듈 내보내기 Named Export 모듈 밖으로 내보내려는 항목 앞에 export 를 붙인다. 각 항목(function, const 등)은 export 할 때 이름으로 참조되었으며, import 할 때에 이 이름을 참조하여 사용한다. export const name = 'square'; export function draw(ctx, length, x, y, color) { ctx.fillStyle = color; ctx.fillRect(x, y, length, length); return { length: length, x: x, y: y, color: color }; } 여러 항목 내보내기 export { name, draw, reportArea, repo.. 2020. 9. 23.
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.
Refactoring javascript 2 Clean coding in JavaScript 2 리팩토링 자바스크립트, 클린 코드 작성하기 2 Refactoring js example code destructuring, spread operator, async-await, template literals, optional chaining example code 디스트럭처링, 스프레드 오퍼레이터, 어싱크 어웨이트, 템플릿리터럴, 옵셔널 체이닝 활용하기 Optional Chaining 옵셔널 체이닝 연산자 ?. 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 und.. 2020. 9. 23.
Refactoring javascript 1 Clean coding in JavaScript 리팩토링 자바스크립트, 클린 코드 작성하기 Using the map function before const myList = list => { const newList = [] for (let i = 0; list.length; i++) { newList[i] = list[i] * 2 } return newList } after const myList = list => list.map(x => x * 2) Avoid callback hell with async/await before const sendToEmail = () => { getIssue().then(issue => { getOwner(issue.ownerId).then(owner => { send.. 2020. 9. 23.
Detect Dark mode in CSS & Javascript Dark Mode How do I detect dark mode using JavaScript & CSS 다크모드 시스템은 모든 화면, 컴포넌트, 메뉴 및 컨트롤에 대해 더 어두운 색상 팔레트를 사용하고 더 선명한 배경을 사용하여 전경 콘텐츠를 돋보이게 만든다. 몇몇 서비스에서는 다크모드를 지원하는 UI를 사용자에게 제공하고 있다. 장점 눈의 피로를 줄이고, 밝기를 현재 조명 조건에 맞게 조정 어두운 환경에서 화면을 쉽게 사용할 수 있도록 지원 배터리 전원을 절약함으로써 시각적 인체 공학을 개선하는 데 도움 접근성 및 대비 다크모드는 흰색 텍스트를 표시 할 수있을만큼 어두워야 한다. 텍스트와 배경 사이에 최소 15.8 : 1의 대비 수준을 사용한다. 이렇게하면 본문 텍스트가 WCAG의 AA 표준 인 4... 2020. 9. 23.

티스토리툴바