본문 바로가기

💻 DEV94

[Javascript] Async 함수와 Await ✨ Async 함수란? Promise 를 조금 더 편리하게 사용할 수 있는 함수이다. 함수 선언 앞에 async 키워드를 붙여서 사용할 수 있으며, 해당 함수는 항상 Promise 를 반환한다. 또한, return 값이 Promise 가 아니더라도 Resolved Promise 로 해당 값을 감싸서 반환한다. async function Callback(){ // some code here } ✨ Await 이란? Async 함수 내부에서만 호출 가능한 키워드이다. Promise 가 처리될 때까지 함수 실행을 기다린 후에 결과를 반환하도록 한다. 프라미스가 처리되길 기다리는 동안에 엔진이 다른 일을 할 수 있도록 한다. async function f() { let promise = new Promise((.. 2021. 5. 27.

[Javascript] Promise (프로미스) ✨ Promise 란? 향후 사용하게 될 비동기 연산의 결과값을 처리하도록 도와주는 JS 객체이다. 비동기 메서드에서 동기 메서드처럼 값을 반환할 수 있다. 예제) const testing = new Promise((resolve, reject) => { if (something) resolve(something) else reject(error message) }) testing .then(() => return something2) .catch(() => return error) .finally(() => return final) ✨ Promise 의 3가지 상태: Fulfilled: 연산이 성공적으로 완료된 상태이다. Rejected: 연산이 실패한 상태이다. Pending: Resolve 나 Re.. 2021. 5. 27.

[Javascript] 비동기, 동기 함수 (Asynchronous, Synchronous) 란? ✨ Synchronous vs Asynchronous 동기식: 코드의 execution 이 요청과 동시에 일어나며, 순차적으로 실행된다. 비동기식: 코드의 execution 이 요청과 동시에 일어나지 않으며, 병렬적으로 실행된다. 예시) 작업 목록: 1. 화면에 영상 목록을 띄워라 2. 첫 번째 영상을 틀어라 3. 하단에 추천 영상 목록을 띄워라 동기식: 1 실행 -> 2 실행 -> 영상 정보 요청 -> 영상 정보 수신 -> 영상 출력 -> 3 실행 비동기식: 1 실행 -> 2 실행 -> 3 실행 |_ 영상 정보 요청 -> 영상 정보 수신 -> 영상 출력 동기식 방법을 따르면 첫 번째 영상의 데이터가 모두 들어오고, 끝까지 재생되기 전까지는 3을 실행할 수 없다. 비동기식 방법을 따를 경우, 2가 실행되.. 2021. 5. 27.

[React] React 의 생명주기(Life Cycle) 란? ✨ Life Cycle 이란? 컴포넌트가 브라우저상에 나타나고(Mount), 업데이트 되고(Update), 사라지는 일련의 과정을 칭한다. 이러한 과정에서 호출되는 메서드를 Life Cycle Method 라고 부르며, 클래스형 컴포넌트에서만 사용할 수 있다. (함수형 컴포넌트는 React 16.8 버전부터 도입되었으며, 현재는 useState 나 useEffect로 더욱 많이 활용된다) 각 단계별로 호출되는 메서드의 순서와 종류가 다르다. ✨ 1. Mount : DOM 에 엘리먼트를 넣는 작업 constructor: 컴포넌트 클래스의 생성자 함수이자, 컴포넌트가 생성될 때 호출되는 함수이다. State와 다른 값들의 초기값을 지정할 때 사용한다. 또한, props 를 매개변수로 받고, super(pro.. 2021. 5. 27.

[Javascript] Class ✨ Class 란? 객체를 생성하기 위한 템플릿이다. ES6부터는 class 키워드로 생성할 수 있다. class Student{ constructor(name, age, major){ // constructor(생성자) 함수, 그리고 instance 의 properties(attributes) //instance 속성 정의 this.name = name; this.age = age; this.major = major; // this = 생성되는 인스턴스 } } Class 의 특징: - 함수형 Class 는 호이스팅이 일어나지만, 선언형 Class 는 호이스팅이 일어나지 않는다. - 클래스 안에는 하나의 constructor 메서드만 존재할 수 있으며, 여러 개의 constructor 메서드가 있을 경우.. 2021. 5. 13.

[Network] 캐싱 (Caching), 캐시 (Cache) ✨ 캐시(Cache)란? 컴퓨터의 성능을 향상시키기 위해 사용되는 메모리이다. ✨ Caching(캐싱)이란? 캐싱: 어떤 것을 나중에 유용하게 사용하기 위해 저장하는 것이다. 브라우저나 웹에서는 프로그램과 웹사이트의 정적인 자산을 저장하는 것이다. (정적 자산: 이미지, HTML, CSS, JAVASCRIPT) 즉, 이전에 이미 가져왔던 리소스들을 복사하여 저장해놓고 요청 시에 재사용하는 것이다. 웹과 앱의 성능을 향상하며, (캐시는 원본 리소스보다 클라이언트 사이드에 가까이 있으므로) 웹의 반응 속도를 높인다. ✨ Cache 의 종류 사설 (Private) 한 명의 사용자만 사용하는 캐시이다. 사설 브라우저 캐시는 사용자에 의해 HTTP로부터 다운로드한 모든 문서들을 가지고 있다. 이는 오프라인 브라우.. 2021. 5. 13.

[CS] 라이브러리 & 프레임워크 ✨ Library 란? 프로그램을 개발하는데 필요한 여러 기능을 활용할 수 있도록 묶어놓은 함수나 기능의 집합이다. 자주 활용하거나 필요한 기능을 편리하게 사용할 수 있도록 해준다. 제어권이 개발자에게 주어진다. 예 : JS 의 React 와 jQuery, Python 의 numpy Library 와 Module 의 차이는? Module 은 함수와 클래스, 변수가 스크립트로 이루어져어 있는 하나의 파일이자 객체. import 하여 사용할 수 있다. Library 는 module 의 집합체로 불리기도 하나, 그 범위가 다양하여 개발에서는 같은 개념으로 사용되곤 한다. ✨ Framework 란? 프로그램을 개발하기 위한 구조를 제공하는 개발 환경이다. (& 그 자체로 Application 이다.) 자주 사용.. 2021. 5. 13.

[React] React 에서 이미지(Image) 첨부하기 ✨ Img tag 란? 이미지를 불러올 수 있는 HTML 태그를 의미하며, DOM을 통해서도 작동 가능하다. React 에서의 img 태그는 기본적으로 HTML 태그와 동일한 attribute 를 가지며, class 만 className (리액트 문법) 으로 변경하여 지정해주면 된다. ✨ React 에서 이미지 불러오기: 웹 url 을 통해 이미지를 불러오고자 한다면 src='###' 안에 url 을 문자열로 작성해주면 된다. 로컬 디렉토리에 저장되어 있는 이미지를 불러오기 위한 방법으로는 두 가지가 있다. 1. React App 의 Public 폴더 내에서 불러오는 방법 2. 상대 경로와 import문을 활용하여 불러오는 방법 ✨ 1. Public 폴더 내에서 불러오기 React App 최초 생성 시 .. 2021. 5. 9.

[React] React 의 상태 (State) 와 이펙트 훅(Effect Hook) ✨ State 란? 컴포넌트 내에서 동적으로 변경되는 값이다. ✨ State 의 특징은? 컴포넌트 내부에서 제어(관리)된다. State 업데이트는 비동기적(Asynchronous)이다. DOM 은 State 가 변경될 때마다 re-rendering 되지 않으며, 여러 차례의 setState 가 있다면 전부 통합하여 한 번에 re-rendering 한다. State 를 props 로 자식 컴포넌트에 전달할 수 있다. (캡슐화 되었기 때문이다.) ✨ State 를 사용하는 방법은? 함수형 컴포넌트에서는 useState 라는 훅(Hook)을 통해 사용할 수 있다. useState 를 활용하여 state 의 초기값을 지정해줄 수 있으며, 초기값은 어떠한 자료형이든 될 수 있다. (문자열, 배열, 객체 등) se.. 2021. 5. 9.

이전 1 ··· 6 7 8 9 10 11 다음

티스토리툴바