WEB개발/JS (10) 썸네일형 리스트형 [React] React 환경구축, vscode extension 시작전 vscode extinsion live server : Live Server는 정적 웹 페이지를 빠르게 개발 및 테스트할 수 있는 확장 프로그램입니다. Live Server를 사용하면 코드를 변경하거나 저장할 때 실시간으로 브라우저를 새로 고침할 수 있습니다. 이를 통해 웹 페이지의 변경 사항을 빠르게 확인할 수 있습니다. Reactjs code snippets, dsznajder.es7-react-js-snippets : Visual Studio Code의 확장 프로그램 중 하나로, React 개발을 보다 효율적으로 진행할 수 있도록 React 코드 조각을 제공해주는 도구입니다. 이 확장 프로그램을 설치하면 React 구성 요소, 라이프사이클 메서드, 스타일링 관련 코드 등을 빠르게 삽입할 수 .. [JS] 자바스크립트 템플릿 리터럴 백틱(``), 달러(${ }) 템플릿 리터럴(Template Literal) ES6부터 새로 도입된 문자열 표기법이다. 문자열 생성시 따옴표 대신, 백틱(`)을 사용한다. var temp = `test test2` 'test\n\n\n test2' 템플릿 리터럴의 기능 1. 줄바꿈(개행: Multi-line strings) 백틱(`)으로 템플릿 리터럴을 사용하면, 줄바꿈 등을 쉽게 표현할 수 있다. \n은 개행(Line Feed), \t는 탭(수평)을 의미하는 이스케이프 시퀀스 2. 표현식 삽입(Expression interpolation) ${ } 사이에 변수나 연산 등을 삽입할 수 있게 되었다. var v1 = "안녕"; v2= "하세요"; var v3 = `${v1 + v2}`; '안녕하세요' [JS] 모듈(module, import, export) : 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다. 모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다(모듈 내보내기). export let mlet = "mlet"; export function mfnc1() { console.l.. [JS] Deferred $.deferred Promise와 Deferred는 비슷한 목적을 가지고 있으며 비동기 작업을 처리하는 데 사용되는 기술이지만, 사용 방식과 개념적인 차이가 있습니다. Deferred는 jQuery 라이브러리에서 사용되는 개념이고, Promise는 기본 JavaScript의 표준 내장 객체입니다. Deferred는 Promise의 이전 버전과 비슷한 역할을 합니다. Promise: Promise는 ES6(ECMAScript 2015)에서 표준 내장 객체로 추가되었습니다. JavaScript 비동기 처리를 위해 사용되는 객체로, 비동기 작업이 완료되거나 실패했을 때 결과를 처리하는 방법을 제공합니다. Promise 객체는 세 가지 상태를 가질 수 있습니다: "대기 중(pending)", "이행됨(fulf.. [JS] Async, Await, Fetch, PromiseAll async와 await async와 await라는 특별한 문법을 사용하면 프라미스를 좀 더 편하게 사용할 수 있습니다. async 함수 async 키워드부터 알아봅시다. async는 function 앞에 위치합니다. async function fetchData(url) { try { const response = await fetch(url); // API 요청 보내기 const data = await response.json(); // JSON 데이터 파싱하기 return data; // 데이터 반환 } catch (error) { console.log('Error:', error); } } // fetchData 함수 호출하기 fetchData('https://jsonplaceholder.typico.. [JS, JAVA] 정규식 : 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용되는 언어입니다. ^문자열의 시작$문자열의 끝.임의의 한 문자*문자가 0번 이상 발생+문자가 1번 이상 발생?문자가 0번 혹은 1번 발생[ ] 문자의 집합 범위를 나타냄[0-9] : 숫자 (0부터 9)[a-z] : 알파벳 (a부터 z)앞에 ^가 나타나면 not을 의미{ } 횟수 또는 범위를 의미( ) 소괄호 안의 문자를 하나의 문자로 인식| or 조건\확장 문자의 시작 \b단어의 경계\B단어가 아닌 것의 경계\A입력의 시작부분\G이전 매치의 끝\Z입력의 끝이지만 종결자가 있는 경우\z입력의 끝\s공백문자\S공백문자가 아닌 나머지 문자\w알파벳이나 숫자\W알파벳이나 숫자를 제외한 문자\d[0-9]와 동일\D숫자를 제외한 모든 문자(?:)캡처(Captu.. [JS] JS의 비동기 작업 ( = promise) 비동기란 특정 코드의 연산이 끝날 때까지 코드의 실행이 끝나지 않은 상태에서, 순차적으로 다음 코드를 먼저 실행하는 JS의 특성이다. 요청에 대한 결과를 기다리지 않고 다음 코드를 실행한다는 것이다. 대기(pending): 이행하거나 거부되지 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. var promiseCount = 0; function testPromise() { var thisPromiseCount = ++promiseCount; var log = document.getElementById('log'); log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 시작 (동기적 코드 시작.. [JS] Engine, Event Loop 1. JS Engine 자바스크립트 엔진은 Memory Heap과Call Stack으로 구성되어 있다 ex) 구글의 V8 Engine(C++로 구성), WebKit Engine(Safari)이다. 자바스크립트는 단일 스레드 (sigle thread) 프로그래밍 언어인데, 이 의미는 Call Stack이 하나라는 이야기이다. Memory Heap : 메모리 할당이 일어나는 곳 (ex, 우리가 프로그램에 선언한 변수, 함수 등이 담겨 있음) Call Stack : 코드가 실행될 때 쌓이는 곳. stack 형태로 쌓임. Stack(스택) : 자료구조 중 하나, 선입 후출(LIFO, Last In First Out)의 룰을 따른다 2. Meomory Heap Memory Heap은 객체를 저장하는 곳이다. 예제.. 이전 1 2 다음
