728x90 반응형 자바스크립트29 [JavaScript] 비동기 데이터 통신(AJAX, Fetch) - Fetch 요청 옵션, 응답 속성 📌 AJAX(Asynchronous JavaScript and XML)JavaScript로 XMLHttpRequest 객체를 사용해 서버와 비동기 통신을 가능하게 해주는 기술이를 통해 웹 페이지를 새로 고침하지 않고도 필요한 부분만 업데이트할 수 있습니다.AJAX라는 이름에 XML이 포함되어 있지만, 현재는 JSON 등 다양한 데이터 형식 사용AJAX는 서버와 데이터를 비동기적으로 주고받아 사용자 경험을 개선하는 중요한 역할 비동기 HTTP 통신이란, request(요청)와 response(응답)를 비동기 방식으로 처리🔎 HTTP 서버 요청 메서드 종류(CRUD) HTTP 요청 메서드는 클라이언트가 서버에 요청의 종류와 목적을 알리는 방식입니다.AJAX와 Fetch 등의 통신 방식에서 자주 사용하는 .. 2024. 11. 14. [JavaScript] 자바스크립트 리스트 컴프리헨션 - map(), filter(), find(), from(), fill(), reduce() 리스트 컴프리헨션(List Comprehension)배열이나 리스트를 간결하게 생성하는 문법을 의미합니다.리스트 컴프리헨션은 리스트를 짧고 직관적인 방식으로 생성하거나 변형할 수 있는 문법입니다.메서드설명map()배열의 각 요소를 변형하여 새로운 배열 생성(원본배열 유지)filter()조건에 맞는 요소만을 포함하는 새로운 배열 생성(원본배열 유지)find()배열에서 조건을 만족하는 첫 번째 요소의 값을 반환조건에 맞는 요소가 없다면 undefined를 반환(원본배열 유지)from()유사 배열 객체나 반복 가능한 객체를 배열로 변환(원본배열 유지)fill()배열의 모든 요소를 특정 값으로 채우기시작과 끝 인덱스를 지정하여 배열의 일부만 채운다.(원본배열 변경)reduce()배열의 요소를 누적하여 단일 값을.. 2024. 8. 22. [Node.js] Package.json 패키지 관리 package.json 이란?패키지 관리 저장소새로운 프로젝트나 패키지를 만들 때가장 먼저 하는 일은 npm 프로젝트로 초기화 해주는 명령어 npm init을 실행하는 것이다.이 때 package.json 파일이 생성되는데언뜻 봐도 프로젝트에 대한 정보를 담고 있는 중요한 파일처럼 보인다. Node.js 프로젝트에서는 많은 패키지를 사용하게 되고 패키지의 버전도 빈번하게 업데이트 되므로, 프로젝트가 의존하고 있는 패키지를 일괄적으로 관리할 필요가 있다. npm은 package.json 파일을 통해서 프로젝트의 정보와 패키지 의존성(dependency)을 관리한다. package.json 파일에는 이 프로그램을 실행시키기 위해 필요한 모듈들에 대한 정보와, 프로그램을 실행시키는 방법, 프로그램을 테스트하는.. 2024. 8. 9. [JavaScript] 자바스크립트 세미콜론(;) ✍️ 중괄호{} 로 묶인 블록을 제외하고는, 세미콜론 입력 세미콜론(;)은 문의 종료를 나내며, 자바스크립트에서는 자동 삽입 기능을 제공한다. 세미콜론은(;)은 문(컴퓨터에 내리는 명령으로 선언문, 조건문, 반복문, 할당문등) 의종료를 뜻한다.자바스크립트에서 중괄호{}로 묶인 블록을 제외하고는 세미콜론을 입력한다. 이를 통해 자바스크립트가 문의 종료한 위치를 파악하여 하나씩 코드를 실행할 수 있도록 해주는 것이다. 중괄호로 묶인 블록에 사용하지 않아도 되는 이유는코드 블록{}은 자체 종결성을 가지고 있기 때문이다. 하지만 세미콜론을 기입하지 않아도 잘 동작이 되는 것을 볼 수 있다. 왜냐하면 자바스크립트는 문의 종료지점으로 예측되는 지점에 자동으로 세미콜론을 삽입해 주는 기능이 있기 때문이다. 그럼에도.. 2024. 7. 26. [JavaScript] 자바스크립트 요소 추가하기 - .createElement(), .createTextNode(), .appendChild() JavaScript 요소 추가자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. .createElement().createTextNode().appendChild()노드 객체 생성하는 주요 메서드메서드생성하는 노드 객체document.createElement(요소 이름) 요소 노드 객체document.createAttribute(속성 이름) 속성 노드 객체document.createTextNode(텍스트)텍스트 노드 객체document.createComment(텍스트) 주석 노드 객체document.createDocumentFragment()도큐먼트 프래그먼트document.importNode(다른 문서의 노드, deep)다른 문서에 있는 노드를 복사한다. deep을 true로 설정하면.. 2024. 6. 13. [JavaScript] 자바스크립트 다양한 데이터 출력 JavaScript 데이터 출력JavaScript를 사용하면 웹 페이지에 동적으로 내용을 추가하거나 변경할 수 있습니다.다양한 방법으로 사용자에게 정보를 제공하는 방법을 소개합니다. document.write()innerHTMLDOM 조작console.log()alert(), prompt(), confirm()addEventListener()AJAX와 서버와의 통신 ( XMLHttpRequest / fetch )JSON 데이터 처리 ( JSON.parse() / JSON.stringify() )템플릿 리터럴 `${variable}`모듈화 ( import / export )예외처리 ( try / catch )1. document.write() 사용document.write() 메서드는 HTML 페이지가 로.. 2024. 6. 7. [JavaScript] 화면출력 함수 document.write(), with(document){}, alert(), confirm(), prompt(), console.log() JavaScript 데이터 출력JavaScript를 사용하면 웹 페이지에 동적으로 내용을 추가하거나 변경할 수 있습니다. 다양한 방법으로 사용자에게 정보를 제공하는 방법을 소개합니다. document.write()with(document){}alert()confirm()prompt()console.log()👉 document.write()document.write() 메서드는 HTML 페이지가 로드될 때 직접 문서에 문자열을 쓰는 데 사용됩니다.document객체로써 document는 웹 문서를 의미한다. 웹페이지에 존재하는 HTML요소에 접근하고자 할때는 반드시 Document 객체를 사용해야한다. 📝 document.write() 형태document.write("Hello, World!"); 사.. 2024. 6. 7. [JavaScript] 자바스크립트 템플릿 리터럴(Template Literal) - 백틱(`), ${ }을 이용한 문자열 표기법 템플릿 리터럴 (Template literal)템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 이전 버전의 ES2015 명세서에는 "template strings" (템플릿 문자열)라고 불렸다. 익숙해지면 굉장히 편리한 문법이다.📝 템플릿 리터럴 형태이중 따옴표"", 작은 따옴표'' 대신 백틱(backtick)``을 이용한다. 물결(~)과 같은 키 버튼이다.변수나 표현식은 $와 중괄호를 통해 표기한다.${var} ${a + b}여러 줄 표현 (multi-line string)- 기존 따옴표를 사용하여 문자열에서 개행을 표현하려면, \n 과 같은 개행문자를 사용했었다. - 템플릿 리터럴을 사용할 경우, 개행을 코드상에서 수행하면 별도의 개행문자 없이 개행을 표현할 수 있다.// 기존c.. 2024. 6. 4. [JavaScript] 자바스크립트 데이터 타입(Data Type) - 자료형/Array/Object ✍️ Summary자료형설명기본형number (숫자)따옴표 없이 표기한 숫자를 나타냅니다.string (문자열)작은따옴표(')나 큰따옴표(")로 묶어 나타낸 문자의 집합입니다.boolean (논리형)참(true)과 거짓(false)으로 표현할 수 있는 유형입니다.undefined자료형을 지정하지 않았을 때의 유형입니다.변수를 선언하고 값을 정의하지 않으면 undifined가 됩니다.null값이 유효하지 않을 때의 유형입니다.복합형array (배열)하나의 변수에 여러 값을 저장하는 유형입니다.object (객체)함수와 속성이 함께 포함된 유형입니다.기본형Number - 숫자 자료형입니다. - 자바스크립트에서는 정수, 실수를 구분하지 않습니다. (정확히는 정수만을 위한 자료형이 없습니다.) 📝 Numb.. 2024. 6. 4. 이전 1 2 3 4 다음 728x90 반응형
