본문 바로가기

전체 글

 (274)
FrontEnd공부를 시작하는 사람들을 위한 사이트 모음 https://www.w3schools.com/ W3Schools Online Web Tutorials HTML Example: This is a paragraph. www.w3schools.com https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info https://developer.mozilla.org/ko/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문 developer.mozilla.org https://ko.reactjs.org/ R..
[Vanilla.js] Class https://ko.javascript.info/class 클래스와 기본 문법 ko.javascript.info https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/class class - JavaScript | MDN class 선언은 프로토타입 기반 상속을 사용하여, 주어진 이름의 새로운 클래스를 만듭니다. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples proje developer.mozilla.org
[Vanilla.js] fetch()와 axios fetch는 js 내장 함수 axios는 별도로 설치해야함 둘다 비동기 통신 지원 http://teamaqua.github.io/JSONTest/ JSON Test by teamaqua JSON Test.com JSON Test.com is a testing platform for programs utilizing JavaScript Object Notation (JSON). To use, just make a request to servicename.jsontest.com. For example, calling http://ip.jsontest.com will return your IP address in JSON-formatted f teamaqua.github.io async() => { const..
비동기와 동기 비동기: 작업의 완료여부와 상관없이 다음 작업을 수행함 동기: 작업이 완료될 때까지 기다렸다가 완료되면 다음 작업을 수행함 순서대로 진행됨 axios.get으로 api 데이터 가져올 때 promise async await 활용하여 데이터 받은 후 작업처리하는데 이 작업은 다른 작업들과 상관없이 이 api데이터를 다루는 코드만 비동기로 동작하는 것이다
[React.js] reactstrap & bootstrap & sweetalert2 npm i reactstrap -s https://reactstrap.github.io/components/alerts/ reactstrap - Alerts Alerts This is a primary alert — check it out! This is a secondary alert — check it out! This is a success alert — check it out! This is a danger alert — check it out! This is a warning alert — check it out! This is a info alert — check it out! reactstrap.github.io npm i bootstrap i -s https://getbootstrap.co..
[React.js] 리액트에서 jquery npm i jquery --s 패키지 모듈을 설치한다. 아래는 입력값을 화면에 표시해주는 jquery를 활용한 간단한 예제이다 import React, { Component } from 'react'; import $ from 'jquery' export default class jquery extends Component { inputHandler = (e) => { const input_val = $('#input').val() $('#result').text(input_val) } render() { return ( this.inputHandler(e)}>입력값 알아오기 ); }
[Vanilla.js] Array.prototype.forEach() & Array.prototype.map(), for...in, for...of developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach Array.prototype.forEach() - JavaScript | MDN Array.prototype.forEach() forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) callback 각 요소에 대해 실행할 함수. 다음 세 가지 매 developer.mozilla.org developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/m..
[Vanilla.js] 콜백함수와 this 자바스크립트에서 this는 선언되었을 때 객체를 말하는게 아니라 실행했을 당시에 결정되므로 따라서 호출한 주체를 가르킴 콜백 함수 내부에서 this는 window 객체를 가리킨다. 따라서 this를 이용하려면 bind()함수를 이용하거나 콜백함수 밖에서 this를 변수에 백업 또는 화살표함수를 이용하는 방법이 있다.

티스토리툴바