본문 바로가기

JavaScript26

[React] HTTP 통신을 위한 방법 (Fetch, Axios, Promise) 웹에서는 클라이언트와 서버가 http 프로토콜을 통해 요청과 응답을 주고받는다. http 에서 사용하는 방식은 여러가지가 있지만 GET 과 POST 가 가장 많이 사용된다. GET http://example.com?a=1&b=2 와 같이 url? 뒤에 파라미터명=값 형태로 필요한 데이터를 전달하며, 주로 데이터 조회나 검색 등의 기능에 사용된다. POST http body 에 데이터를 넣어서 전달하는 방식으로, url 뒤에 파라미터 값을 표시하지 않고 사용할 수 있다는 장점이 있다. 주로 서버의 상태나 데이터를 변경하는 등의 수행 작업에 사용된다. 🐥 HTTP 통신 방식 Fetch / Axios / Promise 💡 Fetch 란? 자바스크립트 내장 함수인 fetch 를 사용하면 쉽게 비동기 통신을 구현.. 2021. 10. 20.

[React] props 사용하기 #1 💡 Props 란? react 에서 props 는 전역변수로, component 간에 값을 전달하는 수단이다. app.js (부모 컴포넌트)에서 다른 컴포넌트(자식 컴포넌트)로 어떠한 값을 전달할 때 props 객체에 담아서 보내게 되는 것이다. 1. React props 자료형 선언하기 자식 컴포넌트에서 props 에 대한 자료형을 선언해놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교해서 자료형이 일치하지 않으면 경고 메세지를 알려주기 때문에 잘못된 데이터를 확인할 수 있다. 1. App.js 수정하기 import './App.css'; import PropsDatatype from './R018_PropsDatatype'; function App() { return ( Start.. 2021. 10. 13.

[React] React.js 시작하기 [ CONTENTS ] 1. Reac 실행 명령어 2. React 에서 Jquery 사용하기 3. React prop 사용하기 React 란? 리액트는 사용자 인터페이스를 만드는 데 사용하는 자바 스크립트 라이브러리이며, 오직 View 만 신경 쓰는 라이브러리이다. React 특징 리액트의 주요 특징 중 하나는 Virtual DOM 을 사용한다. DOM(Document Object Model) 은 객체로 문서 구조를 표현하는 방법으로 XML 이나 HTML 로 작성한다. 웹 브라우저는 DOM 을 활용해서 객체에 자바스크립트와 CSS 를 적용하고 DOM 은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다. 왜 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸주어야 할.. 2021. 10. 13.

[JavaScript] 자바스크립트 Prototype 자바스크립트는 프로토타입 기반 언어라고 불린다. 클래스가 없는 대신 그 역할을 하는 프로토타입을 주로 사용하기 때문이다. 프로토타입은 무엇일까? 💡 Prototype 프로토타입에서 함수와 함수의 프로퍼티를 생성하고 공유할 수 있다. 프로토타입에 new 키워드로 객체를 생성하여 다른 객체(함수)를 상속 받을 수 있다. 어떤 경우에 사용할까? function f1(){ return{ a: 10, f: function(){} } } let obj1 = f1(); let obj2 = f1(); console.log(obj1.f === obj2.f); //false 위의 프로그램에서 obj1과 obj2 객체가 다르다고 출력된다. obj1과 obj2 는 모두 f1 객체를 사용하는데 두 객체가 다르다고 판단되는 것은.. 2021. 9. 30.

[JavaScript] 디버거 에러 해결 디버거 에러 VsCode로 코드를 작성하고 실행하는데 실행 결과가 제대로 나타나지 않는 점이 문제였다. 이를 해결하기 위해서 Code Runner 라는 확장자를 설치했다. Extension -> Code Runner Install Ctrl + Alt + J 단축키로 실행 2021. 9. 30.

[JavaScript] 자바 스크립트 함수 💡 자바스크립트 함수 알아보기 1. 내부함수 2. 콜백함수 3. 리턴함수 4. 클로즈함수 5. 람다 6. 동기와 비동기 함수 1. 내부 함수 let f1 = function(){ console.log('1'); let f2 = function(){ console.log('2'); } f2(); } f1(); f1 = function(){ console.log('3'); let f2 = function(){ console.log('4'); } f2(); } f1(); // 1 // 2 // 3 // 4 함수 내에서 또 다른 함수를 선언하고 호출하는 형태 2. 콜백함수 // 콜백함수 // fc = let f1 = function(fc){ console.log('1'); fc(); // f1 함수의 인자 fc.. 2021. 9. 30.

[JavaScript] 자바 스크립트 기본 함수 리스트 let ar = [ { n:'호랑이', a: 10, }, { n:'코끼리', a: 20, }, { n:'독수리', a: 30, } ] console.log(1); console.log(ar); console.log(2); for(const v of ar){ console.log(v); } // { n: '호랑이', a: 10 } // { n: '코끼리', a: 20 } // { n: '독수리', a: 30 } console.log(3); console.log(ar); console.log(4); typeof let ar = [80, 20, 10, 15]; console.log(ar, typeof(ar)); let br = ar.toString(); console.log(br, typeof(br)).. 2021. 9. 29.

[JavaScript] 자바 스크립트 기초 변수 // 변수 var a = 10; let b = 20; const c = 30; console.log(a, b, c); 변수 종류에는 var / let / const 가 있다. let, var, const // let 과 var var a = 10; if(true){ var a = 20; console.log(a); // 20 } console.log(a); // 20 let b = 10; if(true){ let b = 20; console.log(b); // 20 } console.log(b); //10 let 변수 재선언 불가능, 재할당 가능 지역성을 가지기 때문에 변수가 선언된 지역 외에서 수행되는 연산은 실제 변수 값에 영향을 미치지 않는다. var 변수 재선언, 재할당 가능 변수가 선언되는.. 2021. 9. 28.

이전 1 2 3 다음

티스토리툴바