배포 환경 linux(centos), apache 작업 환경 로컬(window) 1. Node 설치 아래 링크로 들어가서 윈도우용 Node.js를 설치해줍니다. nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. React 설치 리액트 프로젝트를 만들 수 있는 create-react-app 도구를 사용하기 위해 설치해줍니다. 이 도구에는 웹팩, 바벨 등이 있습니다. // react app을 생성할 수 있는 명령어 create-react-app을 설치한 후 $ npm install -g create-react-app // 원하는 이름의..

var와 let,const 차이 var는 function-scope이고 let, const는 block-scope입니다. function-scope는 함수(function) 단위, block-scope는 대괄호({})를 단위로 범위를 정합니다. 아래의 예제를 통해 자세히 알아보겠습니다. function fn() { var a = 1; let b = 2; console.log(a); // 1출력 console.log(b); // 2출력 //함수를 벗어나면 a,b둘다 메모리에서 해제됨 } fn(); console.log(a); // ReferenceError발생 console.log(b); // ReferenceError발생 if(true) { var a2 = 1; let b2 = 2; console.log..

문제 : 해당 리스트의 아이템에 대해서 사용자가 클릭할 때 이벤트가 일어나도록 구현하라 보통은 아래와 같이 구현할 것입니다. *DOMContentLoaded : HTML과 script가 로드된 시점에 발생하는 이벤트이다. - onload 이벤트보다 먼저 발생한다. 빠른 실행속도가 필요할 떄 적합하다. - IE8 이하에서는 지원하지 않는다. 문제점 : 리스트의 아이템 각각에 이벤트를 붙여 매우 비효율적입니다. 해결책 : 모든 아이템 리스트에 대해서 한 개의 이벤트 리스너를 생성하여 전체 영역에 등록하는 것이 훨씬 효율적입니다. 이 것을 이벤트 위임 이라고 합니다. 각각의 이벤트 핸들러를 붙이는 방식보다 훨씬 효율적입니다. 아래 코드는 이벤트 위임을 구현한 것입니다.

async & await async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다. async & await 기본 문법 async function 함수명() { await 비동기_처리_메서드_명(); } 먼저 함수의 앞에 async라는 예약어를 붙입니다. 그러고 나서 함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드앞에 await를 붙입니다. 여기서 주의할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작합니다. 일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API..

Promise는 JS 비동기 처리에 사용되는 객체입니다. 여기서 JS 비동기 처리란 '특정 코드의 실행이 완료될 때까지 기다리지않고 다음 코드를 먼저 수행하는 JS의 특징'을 의미합니다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 떄 사용합니다. Promise 예제 코드 function getData(callbackFunc) { $.get('url 주소/products/1', function (response) { callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 }); } getData(function (tableData) { console.log(tableData); // $.get()의 response 값이 ..

실행 : https://codepen.io/ffuqgvsz/pen/RwNyqvE jQuery를 이용한 탭 메뉴 ... codepen.io 공부 : trigger() -> 강제로 이벤트를 실행하는 함수 event.delegateTarget -> 이벤트 핸들러가 처리되고있는 요소의 상위에 부착한다. 예) 상자 클래스의 단추를 클릭하면 상자의 배경색을 빨간색으로 바꿉니다. $( ".box" ).on( "click", "button", function( event ) { $( event.delegateTarget ).css( "background-color", "red" ); }); DOCTYPE html> Document .tab { border: 1px solid #000; } a { text-decorat..