본문 바로가기
반응형

Web Front 개발공부/HTML과 JAVASCRIPT16

스프레드 연산자 "...변수명" (배열, 문자열, 객체) 스프레드 연산자 "...변수명(반복 가능한 객체)" 리액트를 공부하다가 "..." 이란 기호가 보여 몹시 당황했다. 전문 프런트 개발자가 아니기도 하고, 프로젝트마다 이것저것 프로그래밍 언어를 바꿔가며 일을 하다 보니 그럴 수 있다는 생각에 틈이나 정리해 본다. 반복이 가능한 객체에서 값을 개별 요소로 분리하는 스프레드-연산자. 스프레드 연산자는 "..." 기호로 표기한다. 전개 연산자. 스프레드 연산자를 사용하면 배열, 문자열, 객체 등과 같이 반복이 가능한 객체의 값을 개별 요소로 편리하게 분리할 수 있다. 스프레드 연산자와 배열, 객체 사용방법 예제 배열의 경우 예) let arrA = [1, 2, 3]; let arrb = [...arrA, 4, 5, 6]; console.log(arrb); 결과.. 2024. 2. 18.
프로미스(Promise) 객체를 이용해 비동기 처리하기 프로미스(Promise) 객체를 이용해 비동기 처리하기 개요 프로미스는 비동기 처리를 목적으로 제공되는 자바스크립트 내장 객체다. 프로미스는 Date 객체와 비슷하게 특수 목적을 위해 다양한 기능을 추가한 객체다. Promise 객체를 이용하면 CallBack 함수를 이용한 비동기 처리를 편하고 쉽게 수행할 수 있다. 프로미스의 비동기 작업은 진행 단계가 3가지 상태로 나누어서 관리/실행 된다. 대기 Pending : 작업을 완료하지 않은 상태 성공 Fullfilled : 작업을 성공 실패 Rejected : 작업이 어떤 이유로 실패 대기 상태에서 작업을 성공하게 되면 resolve 라고 한다. 작업을 해결하면 성공 상태가 된다. 만약 실패가 발생되면 reject 상태 된다. 실습 및 예제코드 프로미스 .. 2024. 2. 18.
자바스크립트 실행 순서 자바스크립트 실행 순서 이미지 웹브라우저로 위의 소스를 실행하면, img-1 속성을 읽을 수 없으므로 console.log(img1) 의 결과는 null로 콘솔 로그가 찍히게 된다. 이번 포스팅에 자세히 설명하지 않겠으나 모든 프로그램 언어는 '생명주기'란 것이 존재하며 프로그램의 실행 순서를 반드시 이해할 필요가 있다. 이번에는 아래와 같이 소스를 변경하고 실행해 본다. 자바스크립트 실행 순서 이미지 실행결과는 script 코딩을 2023. 11. 4.
자바스크립트 Arrow Function 자바스크립트 Arrow Function Arrow Function은 함수를 정의하는 새로운 방법이다. 이런 게 언제 생겼는지 모르겠다. 사실 전문 웹프론트 개발자가 아닌 "나" 이기에... 새로운 문법이나 몰랐던 방법을 보게 되면 바로바로 기억해서 써먹어보고자 노력하는 편이다. 오늘은 화살표 함수에 대해 알아본다. 화살표 함수를 사용해 함수를 정의하면 기존 함수 선언식이나 함수 표현식에 비교해 구문이 짧아진다는 장점이 있다. 화살표 함수 내의 this는 언제나 상위 스코프 this를 가리킨다. 예제 // 함수 선언식 function hello(str){ return "Hello, " + str } // 함수 표현식 const hello2 = function (str){ return "Hello, " + .. 2023. 7. 16.
자바스크립트 for-in 과 for-of 문 이런저런 프로그래밍 언어를 사용하니 가끔씩 자바에 자바스크립트 문법 쓰고 PLSQL 조건문을 다른 언어에 사용하며 많지 않은 시간을 훌쩍 보내기도 한다. 다양한 언어를 사용해 보고 경험해 보는 것도 나쁘지는 않으나 시간이 그리 많지 않은 SI에 들어가서 반나절을 어이없는 문법 실수로 보내기도 한다. 그럴 때를 대비한 나만의 포스팅 //오브젝트 형태 let person = {fname:"김", lname:"봉두" , age: 25}; //for in 문법 for(const key in person){ console.log(person[key]); } //오브젝트를 배열로 만들수도 있지 않을까? let persons = [ {fname:"김", lname:"봉두" , age: 25}, {fname:"김1",.. 2023. 7. 16.
자바스크립트 서버 통신 Ajax, fetch, axios, XMLHttpRequest 자바스크립트 서버통신 Ajax, fetch, axios,XMLHttpRequest 객체 XMLHttpRequest 객체 대부분의 웹브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있다. XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는데 사용된다. XMLHttpRequest 오브젝트의 개념은 원래 마이크로소프트 익스체인지 서버 2000용 아웃룩 웹 액세스의 개발자들이 만들었다. XMLHTTPRequest라는 인터페이스가 개발되어 이 개념을 사용하는 2번째 버전의 MSXML에 구현되었다. 2번째 버전의 MSXML 라이브러리는 1999년 3월 인터넷 익스플로러 5.0에 포함되었으며 MSXML 라이브러리의 XMLHTTP 래퍼를 사용하여 액티브 X.. 2023. 7. 9.
반응형

티스토리툴바