본문 바로가기

Frontend

 (290)
[JavaScript] 객체 변환 JSON 데이터 개발자 도구에서 JSON 데이터의 데이터 타입을 확인하면, response.text() 에 따라 string(문자열) 인 것을 확인할 수 있음. 그러나 string 타입의 객체로는 데이터를 다루는데 어려움이 있어서, JSON 객체를 다시 자바스크립트 객체로 변환하는 과정이 필요함. fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { const users = JSON.parse(result) }); JSON 객체에 parse 라는 메소드를 사용하면, string타입의 JSON 객체를 자바스크립트 객체로 변환할 수 있음. fetch('https://jsonplaceh..
[JavaScript] JSON 데이터 JSON (JavaScript Object Notation) 어떤 정보를 교환하기 위해 만들어진 데이터 포맷으로, 자바스크립트를 바탕으로 만들어짐. https://jsonplaceholder.typicode.com/users JSON 의 문법은 자바스크립트와 비슷한데, 중괄호를 사용하고 각각의 프로퍼티네임과 값을 적는 방식이 자바스크립트에서 객체를 다루는 방식과 동일함. 또한 대괄호를 사용하여 배열을 나타냄. [JavaScript 와 JSON의 차이] 1. 값을 표현하는 방식 (1) JSON에서는 각 프로퍼티 네임을 "" (큰 따옴표) 로 감싸줘야 함. const member = { name: 'Michael Kim', height: 180, weight: 70, hobbies: ['Basketball'..
[JavaScript] Request method 기존 데이터를 조회하는 리퀘스트 - GET 새 데이터를 추가하는 리퀘스트 - POST 기존 데이터를 수정하는 리퀘스트 - PUT 기존 데이터를 삭제하는 리퀘스트 - DELETE 메소드 데이터처리 GET READ POST CREATE PUT UPDATE DELETE DELETE
[JavaScript] 구조 분해 Destructuring (함수) function getArray() { return ['컴퓨터', '냉장고', '세탁기']; } const [el1, el2, el3] = getArray(); console.log(el1); // 컴퓨터 console.log(el2); // 냉장고 console.log(el3); // 세탁기 // Array Destructuring const members = ['코딩하는효준', '글쓰는유나', undefined, '편집하는민환', '촬영하는재하']; const [macbook, ipad, airpod = '녹음하는규식', ...coupon] = members; console.log(macbook); // 코딩하는효준 console.log(ipad); // 글쓰는유나 console.log(airpod)..
[JavaScript] 구조 분해 Destructuring (객체) [Desturcturing 문법] const macbook = { title: '맥북 프로 16형', price: 3690000, memory: '16GB', storage: '1TB SSD 저장 장치', display: '16형 Retina 디스플레이', }; const title = macbook.title; const price = macbook.price; console.log(title); // 맥북 프로 16형 console.log(price); // 3690000 보통 객체를 다룰때 점 표기법을 이용하여 이처럼 변수에 값을 할당함. const macbook = { title: '맥북 프로 16형', price: 3690000, memory: '16GB', storage: '1TB SSD 저장..
[JavaScript] 구조 분해 Destructuring (배열) [Destructuring 문법] 배열과 같이 내부에 여러가지 값을 갖고있는 데이터 타입을 다룰 때, 배열의 요소나 객체의 프로퍼티 값을 개별적인 변수에 할당해 다룰 수 있는 문법 const rank = ['철수', '짱구', '훈이', '맹구'] // 배열 const macbook = rank[0]; const ipad = rank[1]; const airpods = rank[2]; const coupon = rank[3]; console.log(macbook); // 철수 console.log(ipad); // 짱구 console.log(airpods); // 훈이 console.log(coupon); // 맹구 상품 이름으로 만든 변수에 배열의 요소를 순서대로 할당하면, 랭크 순위가 변동되어도 자연..
[JavaScript] 모던한 프로퍼티 표기법 객체의 프로퍼티를 표현할때 보통 다음과 같이 표기함. const user = { title: 'Codeit', birth: 2017, job: '프로그래밍 강사' } 이처럼 변수에 할당된 값을 이용해 다음과 같이 프로퍼티를 만들 수도 있는데, const title = 'Codeit'; const birth = 2017; const job = '프로그래밍 강사'; const user = { title: title, birth: birth, job: job, }; 변수의 이름과 프로퍼티 네임이 똑같으면 다음처럼 하나만 표현하는 방식이 가능함. const title = 'Codeit'; const birth = 2017; const job = '프로그래밍 강사' const user = { title, birt..
[JavaScript] 객체 Spread [객체 Spread] const codeit = { name: 'codeit', }; const codeitClone = { ...codeit, // spread 문법! }; console.log(codeit); // {name: "codeit"} console.log(codeitClone); // {name: "codeit"} 중괄호 안에서 객체를 spread 하게되면, 해당 객체의 프로퍼티들이 펼쳐지면서 객체를 복사할 수가 있음. const latte = { esspresso: '30ml', milk: '150ml' }; const cafeMocha = { ...latte, chocolate: '20ml', } console.log(latte); // {esspresso: "30ml", milk: "..

티스토리툴바