본문 바로가기

47

ECMA Script 자바스크립트 버전과 표준 과 특징 ECMAScript 1990년대 Netscape는 Javascript를, MS사의 IE에서는 JScript를 사용했고 두 스크립트는 제각각이었다. 표준이 필요해 생긴 것이 ECMA. ECMA(European Computer Manufactures Association)의 약자로 ECMAScript는 자바스크립트 언어의 표준이다. ES1(1997), ES2(1998), ES3(1999) ECMA 초기 버전으로 1년에 한 번씩 업데이트되었으며 ES4의 경우 정치적인 이유로 폐기되어 없음 (ES4를 개발할 때 ES3.1을 작성하는 그룹과 ES4를 작성하는 그룹이 나뉘었고 그 사이에 갈등이 있었다. 결국 ES3.1이 이겨서 추후 ES5가 된다) 대부분 브라우져에서 지원 클로져 ES3에서 tre/catch 문법 .. 2020. 7. 8.
React(리액트)란? 리액트 처음 시작하기 React(리액트)란? 리액트는 사용자 인터페이스(View) 즉 UI를 담당하는 자바스크립트 라이브러리이다. 페이스북 소프트웨어 엔지니어 Jordan Walke가 개발한 것으로 그는 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다고 한다. SPA 리액트는 SPA(Single Page Applications)로 단일페이지로 구성된 웹이다. SPA는 서버사이드에서 HTML을 전달받아 랜더링하지 않고 필요한 데이터만 서버로부터 json형태로 전달받아 동적으로 랜더링한다. UI 컴포넌트 리액트 스스로 상태를 가지고 관리하는 캡슐화된 컴포넌트를 생성한 다음 복잡한 UI를 만들기 위해 구성한다. 컴포넌트는 여러 컴포넌트를 쪼개서 만들고 조립할 수 있다. 하나의 페이지에 header, navigatio.. 2020. 7. 4.
node란? / node.js 설치 / 버전 확인 / node, npm 있는지 확인 / 노드 구조, 시스템 Node.js? 서버사이드 자바스크립트이며 구글에서 만든 자바스크립트 엔진인 V8을 기반으로 구성된 소프트웨어이다. Node.js는 자바스크립트의 런타임 으로 자바스크립트 프로그램을 실행할 수 있다. 기존 자바스크립트 프로그램은 인터넷 브라우져 위에서만 실행할 수 있었으나 구글에서 V8 엔진을 사용해 크롬 브라우져를 출시하면서 이야기가 달라졌다. V8엔진은 다른 자바스크립트 엔진보다 속도가 매우 빨랐다. 속도 이슈가 해결되자 라이언달(Ryan Dahl)은 2009년 V8 엔진 기반의 Node 프로젝트를 시작하게 됐다. 위키백과 Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단.. 2020. 7. 4.
[favicon] 파비콘 만드는 방법 - 파비콘 총정리! 1. 파비콘이란? favicon은 favorites + icon. 의 합성어, 즐겨찾기 아이콘이다. 인터넷 웹브라우저 주소창에 표시되는 웹사이트를 대표하는 탭, 즐겨찾기 아이콘으로 16x16 32x32 48x48 64x64 128x128 등의 사이즈, 8비트, 24비트, 32비트 색상으로 용량과 사이즈가 작은 파일로 제작할 수 있다. 파비콘을 지정하지 않으면 기본으로 지구본 아이콘으로 보여지게 된다. 핸드폰으로 웹사이트를 홈화면으로 추가할 때도 파비콘이 쓰인다. 2. 파비콘 확장자 특이한 점은 jpg, png 와 같이 흔히 보는 확장자와는 다르다. 파일명.ico 로 제공된다. .ico는 MS윈도우의 아이콘에 쓰이는 그림 파일 포맷이다. ⬅︎ 윈도우 아이콘의 확장자는 ico이다. 3. 파비콘 만드는 방법 .. 2020. 7. 2.
multiline truncation with pure CSS :: css만으로 말줄임표를 해보자 via GIPHY 말줄임표를 쓰고 싶은 곳에 아래 스타일을 추가해주세요. .single-line{ display: block; display: -webkit-box; position:relative; overflow: hidden; width: 100%; height: 28px; font-size: 18px; line-height: 26px; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } 바쁘신 분들을 위해 css를 선사합니다. 클래스 추가해주시면 원하는 결과가 나올 겁니다! line-clamp 값에 원하는 숫자를 쓰면 숫자만큼 잘립니다. -webkit-line-cla.. 2020. 6. 16.
[JavaScript] "use strict " "use strict" 엄격모드라고 불리는 use strict는 문자열로 표현합니다. 사용한다면 반드시 스크립트 최상단에 위치시키거나 엄격하게 동작되어야 할 함수 최상단에 위치시킬 수 있습니다. 최상단에 위치해있지 않으면 동작하지 않아요. use strict? use strict 지시자를 쓰게 되면 스크립트 전체가 '모던'한 방식으로 동작합니다. 기존(옛날) JS는 암묵적으로 느슨한 모드(sloppy mode)로 처리했기 때문에 여러 많은 문제가 발생했습니다. 예를 들어보자. amount = 10; console.log(amount); "use strict" 가 없는 스크립트에서 콘솔로그에 찍히는 값은 amount 변수 앞에 var이나 let을 쓰지 않아도 변수와 값이 생성됩니다. "use strict".. 2020. 6. 15.