프론트엔드 (54) 썸네일형 리스트형 JavaScript Sec04_1 Why React.js? 1. 리액트를 사용하는 첫번째 이유 문제점 : Shotgun Surgery problem , 여러 파일에서 같은 코드를 (ex. ~, ~ 등) 반복해서 사용하는 경우, 만약 해당 코드를 수정해야 할 일이 있을 때 파일마다 똑같은 부분을 수정해야 한다. 해결 방법 : 중복 코드를 컴포넌트로 만들어 하나의 파일에 모아둔다. 이렇게 컴포넌트화 방식을 사용하면 공통으로 사용되는 요소의 유지보수가 수월해진다. 하지만 기존에 사용해왔던 방식만으로는 요소들을 컴포넌트로 제작하고 불러다 쓰기가 힘들다. 따라서 React를 사용해야만 한다. ⇒ React는 컴포넌트 기반의 UI 라이브러리이기 때문에 모든 html 요소들을 전부 컴포넌트로 만들어서 재사용 할 수 있다. cf) 하나의 파일에 컴포넌트 하나만 사용해야 하는 .. JavaScript Sec03_3 Node.js 패키지 만들기 NPM (Node Package Manager) Node.js의 패키지 관리 도구 다른 사람이 만든 모듈들을 우리가 내려받아서 사용할 수 있게 도와줌 Package 누군가 따로 만들어 놓은 Node.js 모듈을 의미하는 단어 터미널에 npm init 작성 ⇒ 패키지 초기화 ⇒ package.json 파일 생성됨 package.json 파일 : 우리가 만들 패키지의 정보를 입력하는 환경설정 파일 main : 패키지에는 여러 파일들이 기능별로 분산되어 있을텐데, 이 패키지를 실행하기 위해서는 어떤 파일을 실행해야 하는지 명시해준다. scripts : 패키지를 개발하면서 자주 실행해야 하는 명령어를 사전에 정의한다. npm start를 터미널에 작성하면 패키지에 있는 index.js 파일이 node.js에서 .. JavaScript Sec03_2 Common JS Common JS 계산 기능을 하는 모듈 파일을 만들고 module.exports 함수를 이용해 내보낸다. 경로명과 require함수를 이용해 모듈 파일을 불러온다. 터미널을 이용해 Node js에서 js를 실행시킨다. (node 명령어 이용) ⇒ Node.js가 제공하는 기본적인 Common JS라는 모듈 시스템 JavaScript Sec03_1 Node.js란? Node.js란 java script의 실행환경 자바스크립트를 브라우저 안에서만 쓰지 않고 단독으로 쓰기 위해, 크롬 브라우저의 v8 엔진을 브라우저에서 떼어내어 자바스크립트를 어디에서든 사용할 수 있도록 개발한 프로그램이 Node.js이다. Node.js는 자바스크립트의 실행환경이며 자바스크립트를 브라우저 밖 어디서든 실행할 수 있도록 만들어준다. (Java Script’s runtime) Node.js를 통해 Java Script로 카카오톡, 파워포인트 등 브라우저 밖의 애플리케이션을 개발할 수 있고 심지어 java Script로 웹 서버까지 개발 가능하게 되었다. JavaScript Sec 02_10 API 호출하기 API 서버에게 데이터를 요청하고 요청한 데이터를 전달 받는 것을 API 호출 이라고 한다. 즉, 다른 프로그램한테 데이터를 받기 위해 말을 거는 것. client컴퓨터와 server컴퓨터는 보통 다른 컴퓨터이고, 따라서 인터넷 연결 속도, 서버의 부하 상태 등에 의해 요청된 데이터를 언제 전달받을지 모른다. ⇒ 동기적으로 처리할 수 없다! ⇒ 따라서 API 호출은 promise 객체를 이용하여 비동기 호출을 한다. let response = fetch('') 가져오고자 하는 데이터들을 (호출하고자 하는 API) 갖고 있는 주소를 내장함수 **‘fetch’**를 이용하여 변수 response에 저장한다. let response = fetch('') .then((res)=>{ console.log(res).. JavaScript Sec 02_9 async & await - 직관적인 비 동기 처리 코드 작성하기 async 함수 앞에 붙여 그 함수가 promise를 반환하도록 만들어준다. async를 함수 앞에 붙여주게 되면 그 함수는 자동적으로 promise를 리턴하는 비동기 처리 함수가 된다. async를 붙여준 함수의 리턴값은 비동기 작업 객체인 promise의 resolve의 파라미터가 된다. function delay(ms){ return new Promise((resolve)=>{ setTimeout(()=>{ resolve(); }, ms); }); } ⇒ function delay(ms){ return new Promise((resolve)=>{ setTimeout(resolve, ms); }); } setTimeout의 첫 번째 매개변수인 콜백함수 안에 resolve 하나밖에 없으면 2번째 코드처.. JavaScript Sec 02_8 Promise - 콜백 지옥에서 탈출하기 Promise 콜백지옥 : 연속적으로 콜백함수의 결과값을 또다른 콜백함수의 값으로 사용할 때, 계속해서 콜백이 깊어지는 현상 콜백지옥을 해결할 수 있는 자바스크립트의 Promise 객체 비동기 작업이 가질 수 있는 3가지 상태 Pending (대기 상태) : 현재 비동기 작업이 진행 중이거나 작업이 시작할 수 없는 문제가 발생했음을 의미 Fulfilled (성공) : 비동기 작업이 우리가 의도한 대로 정상적으로 완료되었음을 의미 Rejected (실패) : 서버가 응답하지 않는다거나 시간이 너무 오래 걸려서 자동으로 취소되는 등 모종의 이유로 비동기 작업이 실패했음을 의미 promise 객체를 사용하지 않고 비동기 작업을 처리할 때 promise 객체를 사용하여 비동기 작업을 처리할 때 isPositiv.. JavaScript Sec02_7 동기&비동기 동기 동기 방식은 스레드를 이용하여 코드가 작성된 순서대로 작업을 처리한다. ⇒ 문제점 : 하나의 작업이 오래 걸리면, 모든 작업이 끝나는 데 걸리는 전반적인 시간이 늘어난다. ex) 웹사이트에서 버튼 하나하나마다 30초 씩 걸린다고 생각해보자 멀티스레드 자바스크립트에서는 멀티스레드 기능이 없고 싱글스레드로만 동작한다. 비동기 비동기 방식은 작업이 끝나든말든 여러 개의 작업을 동시에 실행시키는 것이다. ⇒ 동시에 다 실행시키면 각 작업들이 정상적으로 끝났는지 어떻게 아는가? : 각각의 작업들에게 콜백함수를 붙인다. 콜백함수 동기적 방식으로 바꾸면 setTimeout함수의 매개변수는 콜백함수와 delaytime 2000ms 뒤에 첫번째 인자인 콜백함수를 실행시킨다. 비동기적으로 실행되어 “코드 끝”이 먼저.. 이전 1 2 3 4 5 6 7 다음
