본문 바로가기

Frontend

 (278)
[JavaScript] Status code (상태코드) Request 와 마찬가지로, Response 도 head 와 body로 나눌 수 있음. 1. 개발자도구에서 fetch 함수로 GET request 를 전달 다음과 같이 Response가 잘 전달된 것을 확인할 수 있음. 2. Network > users > status code 확인 Status code는 response 의 head 에 들어있는 정보로 상태코드라고 하며, 100 ~ 500 번대까지 다양한 상태코드가 있다. [상태코드 의미] (1) 100번대 서버가 클라이언트에게 정보성 응답(Informational response)을 줄 때 사용되는 상태 코드 100 Continue : 클라이언트가 서버에게 계속 리퀘스트를 보내도 괜찮은지 물어봤을 때, 계속 리퀘스트를 보내도 괜찮다고 알려주는 상태 ..
[JavaScript] PUT/ DELETE request 보내기 참고용 url : https://learn.codeit.kr/api/members https://learn.codeit.kr/api/members learn.codeit.kr 1. PUT request : 기존 직원의 정보를 수정 저번에 추가했던 새 직원 '신짱구' 의 부서를 engineering 에서 marketing 으로 옮기고자 함 const member = { name: '신짱구', email: 'zzangu123@codeitmall.kr', department: 'marketing', }; fetch('https://learn.codeit.kr/api/members/6', { method: 'PUT', body: JSON.stringify(member), }) .then((response) =>..
[JavaScript] GET/ POST request 보내기 참고용 url 주소 : https://learn.codeit.kr/api/members https://learn.codeit.kr/api/members learn.codeit.kr 1. GET request : 직원의 정보를 얻기 fetch 함수는 기본적으로 아무런 설정도 해주지 않으면 GET request 를 보내도록 설정됨 1-1. 3번 직원의 정보 얻기 2. POST request : 새로운 직원의 정보를 추가 GET 이 아닌 다른 메소드 값을 가진 request 를 보내려면 다음과 같은 옵션 객체가 필요함. const newMember = { name: '신짱구', email: 'zzangu123@codeitmall.kr', department: 'engineering', }; fetch('htt..
[JavaScript] Request 의 Head/ Body 하나의 Request 는 Head와 Body 부분으로 나뉘어져 있음. Head : Request에 대한 부가 정보, 메소드 (method) GET, DELETE Body : 실제 데이터를 담는 부분 PUT, POST 1. fetch 함수로 request 보냄 2. Network > user 확인 Request 의 header들을 확인할 수 있음. header 란 head 안에 존재하는 하나하나의 키와 값의 쌍을 의미하며, head 안의 header 들은 request 에 관한 부가 정보를 담고있음.
[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)..

티스토리툴바