Frontend/자바스크립트 Java Script (20) 썸네일형 리스트형 [번역] babel-preset-env는 무엇이고 왜 필요한가? https://blog.jakoblind.no/babel-preset-env/ What is @babel/preset-env and why do I need it? If you have followed any recent tutorial on how to set up a modern JavaScript project, you have installed Babel and then added @babel/preset-env to your… blog.jakoblind.no 모던 javascript 프로젝트를 시작할 때, babel을 설치하고 babel-preset-env plugin 설정을 .babelrc에서 하였을 것이다. { presets: ['@babel/preset-env] } 이렇게 하면 나름 동작을.. Browser Size Window : 열려있는 브라우저 전체 창 Document: html에서 작성한 요소들이 표기되는 실제 페이지 부분 Navigator: 사용자 눈에는 보이지 않지만 중요한 정보들이 담겨있는 오브젝트 html을 브라우저에서 열면 window라는 전체적인(글로벌) 최고 오브젝트가 있고 그 아래 DOM, BOM, JavaScript - Window DOM(Document Object Model): document … BOM(Browser Object Model): navigator, location, fetch, storage … JavaScript: Array, Map, Date … window.screen.width, height: 모니터 사이즈 window.outerWidth, outerHeight: 탭.. Web APIs Web APIs 브라우저에서 자체적으로 제공하는 APIs. 대표적인 APIs Dom APIs - Document Object Model. 웹페이지의 요소들을 생성, 삭제, 스타일 변경등 조작하는 기능 Network APIs Graphics APIs Audio/video APIs Device APIs -사용자가 온라인인지, 오프라인인지 등 Fils APIs -파일조작 Storage APIs 다 외울필요는 없고 다양한 APIs가 존재한다는 것을 알고 프로젝트할 때 필요하면 찾아서 사용하면 된다. 자주 사용하는 APIs HTML Drag and Drop API History API Image Capture API IndexedDB(브라우저 디비 이용 가능) Intersectio Observer API Stor.. [ES6] ES6란? ES 는 ECMAScript 의 약자로 숫자 6은 여섯번째 ES를 의미. ECMAScript는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어입니다. 자바스크립트를 표준화하기 위해서 만들어졌으며 꼭 자바스크립트가 아니더라도 어도비 플래시를 사용하는 소프트웨어에서 사용하는 액션스크립트, MS 사의 인터넷 익스플로러에 쓰이는 J스크립트 등 다른 구현체들 역시 포함하고 있습니다. https://ssungkang.tistory.com/entry/ES6-ES%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-%EC%99%9C-ES6%EC%9D%B8%EA%B0%80 [JavaScript] 커링함수 Currying in Functional JavaScript Currying은 무엇인가 Currying 은 1967년 Christopher Strachey 가 Haskell Brooks Curry의 이름에서 착안한 것이다. Currying은 여러 개의 인자를 가진 함수를 호출 할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법을 말한다. 즉 커링은 함수 하나가 n개의 인자를 받는 과정을 n개의 함수로 각각의 인자를 받도록 하는 것이다. 부분적으로 적용된 함수를 체인으로 계속 생성해 결과적으로 값을 처리하도록 하는 것이 그 본질이다. 출처:sujinlee.me/currying-in-functional-javascript/ [번역] 초보자를 위한 함수형 자바스크립트 Currying 가이드 원문 : A Beginner’s.. [ES6] 객체 확장 표현식과 구조 분해 할당 var obj = {}; // 객체 선언 var ram = 'other'; obj.a = 1; // a라는 키값에 1이라는 값을 선언 obj['a' + ram] = 1; // 키 값을 연산을 통해 사용하기 위해 [ ]를 사용해 문자값을 연산. 오브젝트에 연산된 키값에 1을 선언 obj[`a${ram}`] =1; // `백틱을 사용한 위와 동일한 표현 console.log(obj); -> {a: 1, aother: 1} 오브젝트 변수 선언하는 다른 방식 var obj = { a: 1, }; 방식으로 선언할 때는 바로 키를 조합해 사용하는 방식이 불가능 했음. var ram = 'other'; obj[`a${ram}`] = 1; 이렇게 꼭 따로 선언해서 조합해야 했음. 그런데 확장표현식에서는 오브젝트 안에서.. [ES6] 화살표함수 => 모양 사용. 기존 함수 표현 법 function 함수이름 (인자) { 연산식 } ex) function add(first, second) { // typeof add === 'function' return first + second; } 자바스크립트는 함수형 언어로 익명함수라고 하는 함수의 이름을 포함하지 않는 함수 선언식 표현이 존재. var add = funcntion(first, second) { // typeof add = 'function' return first + second; } 선언식 자체가 함수를 반환하게 되고, add라는 변수가 이 함수를 할당. 위 두 식은 이름을 함수 안에 포함하느냐, 반환이 된 값을 할당하느냐의 차이. 화살표 함수는 익명함수 방식을 따라 표현됨. functi.. [ES6] ES6 클래스 Class 가 존재하기 전 prototype 특수변수 사용 기존 자바스크립트 문법은 클래스가 없고 prototype이라는 특수변수를 통해 상속 기능을 사용했음. 함수를 사용해 클래스를 선언해 사용했음. 즉, 함수가 클래스의 생성자 같은 역할을 함. function Shape (x, y) { this.name = 'Shape'; this.move(x, y); } 프로토타입이라고 하는 특수변수를 사용해 각각의 메소드 이름에 함수를 정의하는 방식으로 사용했음. Shape.prototype.move = function(x, y) { this.x = x; this.y = y; }; Shape.prototype.area = fuction() { return 0; }; // new라는 생성자를 통해 선언 const s = new Shape(0, 0); console.log(.. [ES6] 배열 불변 내장 함수 const를 사용해도 배열 내장함수로 수정이 가능하다. 변경 가능한 함수들 push(...items), splice(s, c, ...items), pop(), shift() 대신 무결성 내장 함수를 사용하자. 기존 배열을 건드리지 않고 복사한 배열값을 준다. concat(...items), slice(0, s), .concat(...items. slice(s+c)), slice(0, len -1), slice(1) concat 추가해서 새 배열로 반환 const arr = []; const arr2 = arr.concat(1, 2, 3); const arr3 = arr2.concat(4) console.log(arr, arr2, arr3); -> [] [1, 2, 3] [1, 2, 3, 4] slice .. [JavaScript] { JSON } -서버 통신의 시작 HTTP (Hypertext Transfer Protocal): 브라우저위에서 동작하고있는 웹사이트나 웹어플리케이션 같은 Client들이 Server와 통신하는 방법을 정의한 것. 하이퍼텍스트를 어떻게 서로 주고 받을 수 있는지를 규약한 프로토콜 중 하나. Client가 Server로 데이터를 Requst(요청)하면 서버는 그에 맞는 Response(응답)을 클라이언트로 보내주는 방식으로 진행됨. Hypertext는 하이퍼링크, 전반적으로 쓰이는 리소스들(문서, 이미지파일 등등)을 전부 포함. Http를 이용해서 서버에 데이터를 요청해 받아오는 방법으로 AJAX(Asynchronous JavaScript And XML)를 사용. AJAX는 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술... 이전 1 2 다음 목록 더보기
