본문 바로가기

front-end/javascript

(28)
Javascript 동기 / 비동기 추가예시 // 통신결과 가져오기 const getComments = () => { // JavaScript에서 fetch 함수를 사용하여 네트워크 요청을 보낼 때, 이 함수는 Promise 객체를 반환 // fetch는 비동기 fetch("https://jsonplaceholder.typicode.com/comments") .then((response) => // response은 여전히 원시 형태, JSON 데이터로 변환하기 위해 response.json()과 같은 메서드를 사용 response.json() ) // 이 response.json() 메서드도 Promise를 반환하기 때문에, 이를 처리하기 위한 추가적인 then을 사용 .then((comments) => console.log(comments));..
Javascript 모듈화 [ 기본 골격 ] // 선언과 동시에 사용 // (function () {})(); const module = (function () { function a() {} function b() {} function c() {} function d() {} return { a: a, b: b, c: c, d: d }; })(); module.a(); module.b(); module.c(); modeul.d(); [모듈화 내 언어로 설명하기] 모듈화는 함수 선언과 (function () {}) 동시에 사용(); 하는 것이다. 그래서 module에 함수의 return 값이 담겨 있다. a:는 키값이고 a는 실제 value이다. 여기서 value는 function a(){}에서 선언한 함수이니 일반 값이 아니라 ..
Javascript 동기 / 비동기 [ 개념 간단 한 줄 정리 ] 프로그램 실행이 안된 상태 프로세스 실행된 프로그램 쓰레드 프로세스 처리 경로 단일 쓰레드 처리 경로가 한 개 멀티 쓰레드 처리 경로가 여러 개 동기(Synchronized) 모든 쓰레드가 하나씩 처리하도록 한다. 비동기(Asynchronized) 모든 쓰레드가 순서가 없는 것 처럼 동작한다. [ Promise 객체의 생성과 사용법 ] // promise 객체를 만드는 법 const promise = new Promise((resolve) => { let result = 1 + 1; resolve(result); }); // 동기 a let data = 0; // ★ 만들어진 promise 객체를 사용하는 법 // 비동기 a promise.then((result) => { ..
Javascript 비구조화 const user = { id: 1, name: "park", }; const numbers = [1, 3, 5, 7]; // 비구조화 할당(구조 분해) // 기존에 있었던 것을 뿌려서 받고 싶다 = spread // ... 자체가 등장한다면 rest문법이다. // 오른쪽 구조에 맞게끔 구조를 써주고 키 값을 작성해줌 const { id, name } = user; const [number1, number2, number3, number4] = numbers; // 그래서 소속을 굳이 쓸 필요가 없다. console.log(id, name); console.log(number1, number2); // 소속을 쓴 경우 : user.id, user.name // numbers[0], numbers[1] ..
Javascript String // 문자열 // 문자가 나열되어 있는 형태 // split("구분점") // 문자열에서 원하는 문자를 구분점으로 생각한다면, // 그 구분점을 전달해서 각 값을 나누어 Array객체로 만들 때 사용한다. // url보다는 uri가 더 정확 let uri = "post/list/1"; console.log(uri.split("/")); console.log(typeof uri.split("/")); //object // 월화수목금토일을 월요일화요일...배열로 바꾸기 const dayOfWeek = "월화수목금토일".split("").map((day) => `${day}요일`); console.log(dayOfWeek); // includes(value) // 전달한 값이 문자열에 포함되었는지 검사할 때 ..
Javascript 배열 연습 // datas라는 Array객체를 한 개 선언한다. // datas에 1~5까지 값을 담은 뒤 // 각 값에 + 5를 해서 출력하기 let datas = new Array(5).fill(0); datas.forEach((_, i, datas) => { datas[i] = i + 1; }); console.log(datas); datas.map((_, i, datas) => { console.log(datas[i] + 5); }); // datas라는 Array 객체를 한 개 선언한다. // datas에 1~10까지 중 짝수만 담는다. // datas의 모든 요소(값)을 ":"으로 연결하여 출력한다. let datas = new Array(); // forEach함수는 이미 만들어져 있는 배열에서 해당 ..
Javascript 배열 // Array : 저장공간의 나열 let datas = [10, 20, 15, 30, 25]; for (let i = 0; i { datas[i] = i + 1; }); console.log(datas); datas.forEach((data) => { console.log(data); }); 1 -1 (5) [10, 20, 15, 30, 25] (5) [1, 2, 3, 4, 5] 1 2 3 4 5 // [ 중요 ] map(callback) : 기존 값을 callback함수의 리턴값으로 변경시킨다. // 작업이 완료된 Array객체를 리턴한다. let datas = [10, 20, 15, 30, 25]; datas.map((a, b, c) => { console.log(a, b, c); console.l..
Javascript 생성자 // 생성자 // 함수로 선언하되, 함수라 부르지 않고 생성자라고 부른다. // 생성자는 [리턴값이 정해져] 있기 때문에 선언 시 리턴을 사용할 수 없다. // 따라서 함수라고 부를 수 없다. // 형식 : [앞글자를 대문자]로 작성한 뒤 [함수를 선언]하면, 이를 생성자로 판단한다. // 할당한 공간의 주소값을 리턴한다. // 초기화를 하고자 하면, 매개변수로 초기값을 받을 수 있다. function Card(name, user, cvc = "000") { //함수 같이 생겼지만 대문자로 시작 : 생성자 // 접근한 객체가 갖고 있는 주소가 this에 자동으로 담긴다. this.name = name; this.cvc = cvc; this.user = user; this.getHistory = () =>..