JavaScript/JavaScript
-
Redux | Redux 개요 및 주요 개념JavaScript/JavaScript 2020. 5. 14. 17:11
Redux 리덕스는 자바스크립트를 위한 상태 관리 프레임워크 리덕스 사용 이점 컴포넌트 코드로부터 상태 관리 코드 분리 가능 서버 렌더링 시 데이터 전달 간편 로컬 스토리지에 데이터를 저장하고 불러오는 코드를 쉽게 작성 가능 같은 상탯값을 다수의 컴포넌트에서 필요로 할 때 좋음 부모 컴포넌트에서 깊은 곳에 있는 자식 컴포넌트에 상탯값을 전달할 때 좋음 알림창과 같은 전역 컴포넌트의 상탯값을 관리할 때 좋음 페이지가 전환되어도 데이터는 살아 있어야 할 때 좋음 리덕스 3 원칙 리덕스 공식 문서에서 제시하는 리덕스 사용 세 가지 원칙 전체 상탯값을 하나의 객체에 저장 상탯값은 불변 객체 상탯값은 순수 함수에 의해서만 변경되어야 함 ① 전체 상탯값을 하나의 객체에 저장 전체 상탯값이 하나의 객체로 관리되므로 ..
-
JavaScript | Webpack 기초 정리JavaScript/JavaScript 2020. 4. 23. 14:46
Webpack 웹팩은 모듈 번들러로, 각각의 리소스 파일을 합쳐서 사용자에게 전달하기 좋은 형태로 만들어주는 역할을 함 모듈(module): 각 리소스 파일 번들(bundle): 웹팩 실행 후 나오는 결과 파일 웹팩이 필요한 이유 SPA(단일 페이지 애플리케이션) 등장 이후 하나의 HTML이 수많은 자바스크립트 파일을 포함하기 때문에 기존의 방식으로 자바스크립트 리소스를 관리하기가 어려워짐 HTML에서 모든 자바스크립트 리소스를 관리하면 계속 늘어나는 파일을 관리하기도 어렵고, 실행 순서도 신셩써야 하며, 기존에 생성된 전역 변수를 덮어쓸 수도 있는 위험이 발생 script 태그로 외부 모듈을 불러오는 경우 주소에 오타가 있거나, 해당 사이트에 문제가 있는 경우 모듈 요청 실패 외부 모듈이 필요없어지면 ..
-
JavaScript | Babel Plugin 제작하기JavaScript/JavaScript 2020. 4. 22. 12:35
Babel Plugin 제작하기 바벨은 프리셋과 플러그인을 누구나 제작할 수 있는 API를 제공 바벨 플러그인을 제작해 보면서 바벨의 내부 동작 구조를 이해하는 것이 목표 AST 구조 확인 바벨은 문자열로 입력되는 코드를 AST(abstract syntax tree)라를 구조체로 만들어서 처리하며 플러그인에서는 AST를 기반으로 코드를 변경함 AST의 구조는 https://astexplorer.net/ 사이트에서 확인 가능 astexplorer 이용하기 astextplorer 사이트에서 const v1 = a + b; 코드의 AST 확인 바벨은 babylon이라는 파서를 이용해서 AST를 만들기 때문에 파서 목록에서 babylon을 선택 { "type": "File", "start": 0, "end": ..
-
JavaScript | Babel 기초 정리JavaScript/JavaScript 2020. 4. 22. 10:49
Babel 웹 애플리케이션 기반 기술 중 하나로 입/출력이 모두 자바스크립트 코드인 컴파일러 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 컴파일러였으나, 현재는 바벨을 이용해서 리액트 JSX 문법, 타입스크립트, 코드 압축, 제안(proposal) 단계에 있는 문법 등을 사용할 수 있음 여러가지 Babel 실행 방법 @babel/cli 프로젝트 생성 $ mkdir test-babel $ cd test-babel $ npm init -y 패키지 설치 $ npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react ..
-
JavaScript | Event Handling 이벤트 처리JavaScript/JavaScript 2020. 4. 9. 12:38
Evnent Handler 이벤트 처리기 등록 방법 이벤트 주도형 프로그램(event driven program)에서는 이벤트가 발생했을 때 실행할 함수를 등록해 두는데 이때 실행되는 함수를 이벤트 처리기 또는 이벤트 리스너라고 함 HTML 요소의 이벤트 처리기 속성에 설정 HTML 문서를 읽어들일 때 이벤트 처리기도 함께 설정하기 때문에 설정하기 쉬움 DOM 요소 객체의 이벤트 처리기 프로퍼티에 설정 HTML과 자바스크립트를 분리해서 작성 가능 → 겸손한 자바스크립트 구현 → 프로그램 유지 보수성 향상 const btn = document.getElementById('button'); btn.onclick = changeColor(); addEventListener 메서드 사용 const btn = d..
-
JavaScript | With문JavaScript/JavaScript 2020. 2. 18. 17:33
with 명령문의 스코프 체인을 확장해주는 구문 특정 객체를 여러 번 사용하는 경우 객체명을 생략할 수 있도록 도와줌 형식 with(Expression){ statement; } ※ Expression 객체의 이름은 생략하고 메소드나 변수명만 사용이 가능해짐 예제 let a, b, c; let d = 5; with(Math){ a = d * random(); b = d * PI; c = sqrt(d); } console.log(a); // 2.5252127106198294 console.log(b); // 15.707963267948966 console.log(c); // 2.23606797749979 명령문의 스코프 체인을 확장시켜서 객체명을 반복적으로 작성하지 않도록 도와주는 with문에 대해 알아보..
-
JavaScript 익명함수(Anonymous function)JavaScript/JavaScript 2019. 12. 26. 21:44
191226 수업 내용 정리 익명함수(Anonymous function) ▶ 이름을 지정하지 않은 함수 함수 이름이 없어도 호출 가능 → 변수명으로 함수 호출 일반적인 함수와 달리 익명함수는 선언 이후에만 호출 가능 (호이스팅X) 호출) 변수명() or 변수명(매개변수~) ※ 호이스팅(hoisting) : 함수 선언 앞에서도 함수를 호출할 수 있게 해주는 기능 형식 var 참조변수명 = function() { 자바스크립트 코드 }; 참조변수명(); 예제 var test = function() { document.write("이름이 없는 함수를 호출합니다."); } test(); 익명함수는 호이스팅이 되지 않는다는 점을 꼭 기억해 주시기 바랍니다.
-
JavaScript DOM (Document Object Model) 개요, Method, 활용JavaScript/JavaScript 2019. 12. 25. 01:55
191224 수업 내용 정리 DOM (Document Object Model) ▶ html 문서나 xml문서를 읽어들여 그 문서의 구조(tree)대로 메모리(Ram)에 태그정보를 만들어서 관리해주는 API ※ 동적인 화면디자인에 사용 DOM Method 메서드 설명 getElementById("id명") 해당 id값의 요소를 가져옴 getElementsByTagName("태그명") 해당 태그명에 해당하는 모든 요소를 가져옴 createElement("태그명") 해당 태그명의 요소를 생성 createTextNode("출력할 문자열") 요소 내부에 포함될 문자열 생성 innerHTML속성과 동일 태그명.setAttribute("속성명", "속성값") 이미 생성된 태그에 속성을 부여 부모태그.appendChi..