FE/JavaScript

동기 vs 비동기동기서버에서 아직 처리를 안 해줬으면 동작이 멈추는 것서버에 요청을 보낸 후 기다렸다가 해당 응답을 받아야 다음 동작을 실행 비동기서버에서 아직 처리를 안 해줬지만 클라이언트에서 동작이 멈추지 않음요청을 보낸 후 응답에 관계 없이 순차적으로 다음 코드를 먼저 실행AJAX, fetch, Promise, axios 1. AJAXJavaScript를 사용하여 서버로부터 비동기적으로 데이터를 가져오는 기술XML뿐만 아니라 JSON, 텍스트 등 다양한 데이터를 가져올 수 있음옛날에 쓰던 기술 장점오래된 브라우저에서 동작하기 때문에 호환성 높음단점코드가 길고 가독성이 떨어짐비동기 처리 코드가 복잡해질 수 있음const xhr = new XMLHttpRequest(); // XMLHttpRequest..

배열 객체 값 넣기let objList = [];objList.push({ value: 12 });objList.push({ value: 23 });objList.push({ value: 6 });objList.push({ value: 1 }); 배열 객체 정렬objList.sort(); a와 b를 가져와서 이 함수로 실행하는 것객체의 value라는 값을 가져와서 실행해라objList.sort((a, b) => a.value - b.value);   배열 객체 삭제// 배열의 맨 뒤의 값 삭제objList.pop(); 특정 값 포함 여부값이 포함되어 있다면 true, 포함되어 있지 않다면 falselet arr = [1, 2, 3, 4, 5];arr.includes(1); // truearr.inclu..

DOM이란?Document Object ModelHTML 문서를 브라우저에서 JavaScript로 접근하고 조작할 수 있도록 트리 구조로 표현한 것DOM을 활용하면 HTML 요소를 선택하고, 내용을 변경하거나 스타일을 변경할 수 있다.DOM 요소찾기getElement-* 함수 사용// 아이디로 찾기let getTagById = document.getElementById("subtitle");// 태그 이름으로 찾기let getTagByTagName = document.getElementsByTagName("h1");// 클래스로 찾기let getTagByClassName = document.getElementsByClassName("title"); querySelector, querySelectorAll..

변수와 상수 (var, let, const)변수 다루는 법// 변수 만드는 법let 변수;// 변수에 무언가를 저장하는 법변수 = 무언가;// 변수 사용하는 법변수 이름 var함수 스코프과거에 사용하던 변수 키워드중복 선언 가능var x;x = 10;var y = 5; let ES6에 새로 생긴 문법블록 스코프중복 선언 불가능, 재할당 가능let x;x = 10;let y = 5;  const블록 스코프선언 후 값을 변경할 수 없음const x = 10;// x = 20; => 에러 발생  데이터 타입 (기본, 참조)변수 타입 확인// typeof 변수이름// type을 알려주는 문자열을 반환한다.let x = 10;console.log(typeof x); // "number" 데이터 타입은 크게 기본 ..

자바스크립트란?자바스크립트는 인터프리터 언어다.JS를 실행하기 위한 인터프리터 = 웹 브라우저nodejs -> 자바스크립트를 실행하기 위한 인터프리터 자바스크립트 코드가 하는 일백엔드에서 데이터를 가져오는 것웹 페이지에서 원하는 태그를 변경하는 것 (렌더링) 자바스크립트 작성 script 태그에 자바스크립트 코드를 넣거나, src로 js 파일을 연결해서 사용한다. 렌더링 때문에 보통 js를 제일 아래에 넣어준다.만약 백엔드에 게시글을 가져와 h1 태그 안에 내용을 DB에 저장되어 있는 제목으로 바꿔주려고 하는데,자바스크립트가 제목 위에 있다면 h1 태그가 아직 안 만들어졌을 수도 있다.그래서 보통 자바스크립트는 body의 제일 밑에 작성한다. html, css, javascript를 한 파일에 다 만들면..