본문 바로가기

ALL

(119)

React 공부하기(1) - 상태관리편 🍇 벨로퍼트와 함께하는 모던 리액트 아래에 기능들은 모두 React Hooks중 하나 on이벤트이름={실행하고싶은함수} 7. useState를 통해 컴포넌트에서 바뀌는 값 관리하기 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); } export default Counter; (자세히 보기) 이렇게 하면, 렌더링되는 시점에서 함수가 호출되버림..

React 공부하기(1) - 기본편 🌈 벨로퍼트와 함께하는 모던 리액트 01. 리액트는 어쩌다 만들어졌을까? Javascript는 어떤 상태가 바뀌면, 그 상태와 연결된(getElementById) DOM을 변경! React는 어떤 상태가 바뀌면, 아예 전부 다 날려버리고 새로운 DOM을 보여줌! => 어떻게 업데이트 해야되지.. 고민할 필요 없어짐 개발이 쉬어졌다 => 근데 느리지 않아? => virtual DOM을 사용해서 변경이 된 부분과 안 된 부분을 비교해서 변경된 것만 실제 DOM에 적용 => 그래서 결론은 빠르다! 02. 작업환경 준비 Node.js : for Webpack, Babel Yarn : npm(node.js package manager) 상위버전 코드 에디터 : VSC Git bash Webpack : 여러가지 파..

[JavaScript] HTML에 JS 연결하는 방법 비교 / async VS defer 차이점 🔽 HTML 파싱에 대해서는 아래 포스트를 참고해주세요 🔽[HTTP] 브라우저 렌더링 과정🔗 Browser Rendering(브라우저 렌더링)이란? 사용자의 요청을 서버에 전달하고 그 결과를 화면에 나타내는 과정을 의미한다. 🔗 Parsing(파싱)이란? 브라우저가 코드를 이해하고 사용할 수 있는 devjindev.tistory.com 1. head 안에 불러오는 경우 ⭐☆☆☆ 123456789 ... ... cs JS를 불러오는 동안 HTML 파싱을 멈추고, JS 다 불러오면 나머지 파싱을 진행하기 때문에 사용자에게 페이지가 보여지는 시간이 딜레이된다. 2. body 안(맨 끝)에 불러오는 경우 ⭐⭐☆☆ 123456789 ... ... cs 먼저 HTML을 모두 파싱하여 사용자에게 페이지가 보여진 후,..

[JavaScript] 프로토타입(prototype) 이란 클래스(class)는 객체지향언어에서 빠질 수 없는 개념이다. 자바스크립트도 객체지향언어이다. 하지만 자바스크립트에는 클래스가 없다. 대신 프로토타입이라는 것이 존재한다. 이것이 자바스크립트가 '프로토타입 기반 언어'라고 불리는 이유이다. 🔗 프로토타입(prototype) 프로토타입으로 클래스 구현이 가능하다. 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 기존의 코드를 재사용함으로써 불필요한 중복을 제거한다. 생성자를 이용하여 클래스처럼 사용할 수는 있지만 대부분의 경우 같은 호출을 반복한다던가의 불필요한 행동이 반복되어 효율적인 코드가 되지 못한다. 그래서 프로토타입이라는 빈 객체에 미리 값들을 담아두고 새로 생성한 객체는 그 프로토타입의 값을 가져오는 방식을 갖춰서 클래스의 활용처럼 재사용을 ..

[JavaScript] Axios 사용하여 웹서버와 통신하기 🔽 AJAX, HTTP에 대해서는 아래 포스트를 참고해주세요 🔽 [JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await 📌 동기(Synchronous) 프로그래밍 vs 비동기(Asynchronous) 프로그래밍 동기 프로그래밍은 코드가 반드시 작성된 순서대로 실행되는 방식이다. 비동기 프로그래밍은 코드의 처리가 완료될 때까 devjindev.tistory.com [HTTP] API란? REST(RESTful) API란? 🔗 API(Application Programing Interface)란? 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 의미한다. 🔗 REST(RESTful) A..

[JavaScript] AJAX / XMLHttpRequest, axios, fecth 🔗 AJAX란? 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간의 XML 데이터를 주고받는 기술이다. XMLHttpRequest 객체를 이용해서 전체 페이지를 리로드하지 않고 필요한 데이터만 로드할 수 있다는 장점이 있다. [JavaScript / 비동기 처리] AJAX / Callback, Promise, async, await 📌 동기(Synchronous) 프로그래밍 vs 비동기(Asynchronous) 프로그래밍 동기 프로그래밍은 코드가 반드시 작성된 순서대로 실행되는 방식이다. 비동기 프로그래밍은 코드의 처리가 완료될 때까 devjindev.tistory.com 🔗 XMLHttpRequest AJAX는 다양한 라이브러리를 가지고 있는데, 이 라이브러리들은 모두 XMLHttpReques..

[JavaScript] this란? / call, apply, bind 차이점 🔗 this란? this는 함수 호출 방식에 따라 this에 바인딩할 객체가 동적으로 결정된다. (예외적으로, bind 함수는 호출과 무관에게 묶어서 고정시킬 수 있다.) 호출한 객체 === this 🔗 함수 호출 방식 1. 함수(일반함수, 전역함수, 외부함수, 내부함수(일반 내부함수, 메소드의 내부함수, 콜백함수 등)) 호출 this는 전역객체(window)를 가리킨다. 2. 메소드 호출 this는 해당 메소드의 객체를 가리킨다. 3. 생성자 함수 호출 this는 생성자로 인해 생성된 인스턴스를 가리킨다. 4. call, apply, bind 호출 this가 함수 호출식에 따라 객체를 가리킨다면 call, apply, bind는 함수가 직접 실행문맥을 결정한다. call은 함수를 호출해 실행한다. 함수..

[JavaScript] 클로저(Closure)란? 🔗 클로저(Closure)란? 일반적인 함수의 경우 함수 호출에 의해 함수 내부의 실행구문을 모두 실행하게 되면 함수 내부에서 만든 지역 변수가 자동으로 사라지지만, 어떤 경우에는 사라지지 않고 남는 경우가 있는데 이러한 현상을 클로저라고 한다. 클로저는 자바 스크립트에서 중첩 함수와 비동기 방식을 사용하여 가능한데, 호출된 함수 내에서 외부로 이동하는 변수가 있으면 클로저 함수가 동작한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 // 함수 선언 function createCount(){ var count = 0; // 변수 선언 // 3 ★변수가 사라지지 않고 남음 🧟‍♀️★ // 중첩 함수 // 4 다시 살아남 function addCount(){ count++; // 처리 return..

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

티스토리툴바