자바스크립트 - fetch 이용해서 Ajax 비동기 통신 하기

fetch fetch API를 이용하면 서버와 브라우저를 비동기적으로 통신할 수 있습니다. fetch API 이전에는 XMLHttpRequest를 이용해서 통신을 하였습니다만, 너무 어렵고 복작해서 주로 jQuery 라이브러리를 많이 사용하였습니다. 현재는 fetch로 브라우저 window 객체에 내장 되어 있어서 다른 라이브러리 없이 비동기 통신을 할 수 있습니다. fetch 사용법 fetch(URL, Options); Get 방식 호출 기본적으로 Options 값이 없으면 GET 방식으로 호출됩니다. response는 json()으로 변경하면 요청한 데이터를 가지고 올 수 있습니다. fetch("https://jsonplaceholder.typicode.com/posts").then(function(..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 21.
• textsms

Request with GET/HEAD method cannot have body 오류 해결 방법

오류 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. fetch("https://jsonplaceholder.typicode.com/posts", { body: JSON.stringify({id: 1}) }).then(function(response) { return response.json(); }) 자바스크립트에서 fetch 호출 시 위와 같은 에러가 발생하였습니다. 원인 GET 방식의 호출인데, body에 값을 넣어서 발생하였습니다. GET 방식은 읽기 전용이기 때문에 body 값을 가질 수가 없습니다. 해결방법 1. 읽기 전용이 아닌 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 21.
• textsms

자바스크립트 - function vs Arrow 함수 무엇을 사용하는 것이 좋을까?

자바스크립트에 함수를 만들 수 있는 방법이 일반적으로 function 함수가 있고 ES6 문법 이후로 Arrow 함수가 생겼습니다. function 함수 함수를 만드는 일반적인 방법입니다. function add(a, b) { return a + b; } 생성자, arguments, prototype 기능이 사용 가능합니다. 함수 선언시에 호이스팅 됩니다. 함수에 이름 있어 직관적으로 사용이 가능하고 디버깅등에 편리합니다. Arrow 함수 const add = (num1, num2) => { return num + 1 } 화살표 키워드를 이용해서 간편하게 함수를 표현할 수 있습니다. 더 간단히 return 키워드와 중괄호까지 생략할 수 있습니다. const add = (num1, num2) => num1..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 20.
• textsms

React DOM이란? React 원리

React란? 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리입니다. 리액트는 컴포넌트를 이용하여 사용자 인터페이스를 효과적으로 구축할 수 있습니다. Props를 이용해서 데이터를 전달하고 State를 이용하여 상태 변화를 감지할 수 있습니다. 상태 변화를 감지하게 되면 컴포넌트를 업데이트 합니다. 하지만, React는 웹화면에 직접 렌더링 하지 않습니다. React는 단지 컴포넌트화를 하고, 데이터를 전달하고 상태를 관리하는 라이브러리일뿐입니다. 사용자가 보는 웹 화면은 React DOM을 이용해서 업데이트를 진행합니다. React DOM 이란? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App';..

• format_list_bulleted Develop/React
• · 2023. 9. 19.
• textsms

React - 조건부 렌더링 하기 삼항연산자/논리연산자/변수 할당

React에서 조건에 따라서 렌더링 할 수 있는 방법이 3가지 있습니다. 삼항연산자 사용하기 isLogin 값이 true, false 값에 따라서 다른 화면을 렌더링 할 수 있습니다. export default function Dev() { const [isLogin, setIsLogin] = useState(true); return ( {isLogin ? 로그인 되었습니다. : 로그인이 필요합니다.} ); } 논리 연산자 사용하기 && 연산자를 사용합니다. isLogin 값이 true일 경우에만 렌더링 합니다. export default function Dev() { const [isLogin, setIsLogin] = useState(true); return ( {isLogin && 로그인 되었습니다..

• format_list_bulleted Develop/React
• · 2023. 9. 16.
• textsms

신당역 황학동에 있는 쯔양이 방문한 양갈비 맛집

신당역 2번 출구 도보 10분에 있는 뉴타운 생양고기집을 방문하였습니다. 유튜브에서 쯔양 방송을 본 지인이 추천해서 방문하였습니다. 혹시나 쯔양 방문 이후 사람들이 많이 찾아서 자리가 없을까 봐 걱정했지만, 여유 있게 먹을 수 있었습니다. 2층에 위치하고 있습니다. 쯔양님께서 방문하신 사진들이 걸려있습니다. 쯔양님께서는 양갈비 8개를 드셨다고 하는데, 어마어마하십니다. 무한리필세트와 양갈비가 있습니다. 청도맥주랑, 하얼빈 맥주, 테라 맥주 3가지 종류로 한번 마셔보았습니다. 양갈비 150g * 4입니다. 먼저 양갈비를 숯불에 먼저 먹었습니다. 직접 양갈비를 구워주셔서 편하고 맛있게 먹을 수 있었습니다 양갈비 정말 레전드 맛입니다!!😊 양갈비 이후에는 이제 무한리필 세트입니다. 양고기구이와 소시지, 떡, ..

• format_list_bulleted 일상/맛집
• · 2023. 9. 15.
• textsms

React - 데이터 배열 렌더링 하는 방법 key를 입력해야 하는 이유

리액트에서 배열을 렌더링 할 수 있는 방법이 있습니다. Javascript 문법 중 map 함수를 이용해서 데이터 렌더링을 할 수 있습니다. Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org 리액트 배열 렌더링하기 아래와 Array 함수 map을 실행시켜서 배열을 렌더링 할 수 있습니다. map 함수의 첫번째 인자는 배열의 내부의 객체이고 두 번째 인자는 index 순서입니다. 단 key 값을 입력하지 않으면 오류가 발생합니다. const userInfo = [ { id: 1, name: "Superman", }, { id: 2..

• format_list_bulleted Develop/React
• · 2023. 9. 15.
• textsms

React - 부모➡️자식 / 자식➡️부모 데이터 전달하기🚀

React에서 부모에서 자식으로 자식에서 부모로 데이터 전달할수 있습니다. 부모에서 자식은 Props를 이용해서 데이터를 전달할 수 있고, 자식에서 부모 데이터 전달은 부모 컴포넌트에서 데이터를 변경하는 함수를 Props로 전달하고 자식컴포넌트에서 전달받은 함수를 호출해서 데이터를 변경할 수 있습니다. 아래 예시를 보면서 알아보도록 하겠습니다. 부모➡️자식 데이터 전달하기 부모 컴포넌트 부모 컴포넌트에 name Props를 이용해서 Child 컴포넌트에 전달합니다. import { useState } from "react"; import Child from "../../components/Child"; export default function Dev() { const [name, setName] = u..

• format_list_bulleted Develop/React
• · 2023. 9. 15.
• textsms

Axios란? 설치하기, 사용법, fetch와 차이점

Axios란? Axios는 자바스크립트에서 HTTP 통신을 쉽게 처리할 수 있도록 만든 라이브러리입니다. Node.js 와 브라우저에서도 사용할 수 있습니다. Axios에는 많은 기능들이 있어서, 쉽고 편리하게 데이터를 가져올 수 있어서 개발자들이 많아 사용하는 방법입니다. Axios 설치하기 npm install axios npm을 이용해서 설치 후 사용 가능합니다. Axios 사용법 node.js 환경에서는 선언해야 합니다. const axios = require('axios'); get 호출 axios.get('https://jsonplaceholder.typicode.com/todos/1') .then((response) => { // 요청 성공 시 처리 console.log(response.da..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 12.
• textsms

Next.js 특징 React와 차이점 뭐가 더 좋을까?

Next.js 이란? Next.js Vercel 라는 회사가 만든 오픈 소스 프레임워크 입니다. React는 기본적으로 자바스크립트 라이브러리 입니다. Next.js는 React를 이용한 풀스택 프레임워크입니다. Vercel 이라는 회사가 조금 더 쉽게 React 프로젝트를 쉽게 관리하고 배포하기 편하게 만든 프레임워크 입니다. Next.js 장점 1. 서버 사이드 렌더링 (SSR) React.js는 기본적으로 클라이언트 사이드 렌더링(CSR)입니다. 그래서 페이지를 처음 조회하면 아래와 같이 div 하나만 렌더링이 되고, 그 이후에 브라우저에서 React JavaScript 코드를 실행화면 화면을 렌더링을 하게 됩니다. 물론, React에서도 서버사이드 렌더링을 할 수 있는 기능이 내장되어있습니다. 하..

• format_list_bulleted Develop/Next.js
• · 2023. 9. 8.
• textsms