목록프론트엔드 (27)
이재호
리액트에서 컴포넌트를 작성하는 방법에는 크게 2가지가 있다 클래스와 함수이다 클래스 문법은 자바스크립트와 비슷하다 여전히 클래스는 낯설고 어렵다 import React from 'react' class App extends Componts { render(){ return( 클래스형 컴포넌트 ) } }함수형은 클래스보다 정말 보기 쉽고 간결하다 import React from 'react' const app = () => { return( 함수형 컴포넌트 ) } 데이터의 상태를 관리할때 state(상태)를 사용하는데 클래스와 함수형에 그 차이가 있다 import React from 'react' class App extends Componts { constroc..
function 더하기함수공장(초기값){ function 덧셈(숫자){ return 초기값 + 숫자 } return 덧셈 } let 더하기1 = 더하기함수공장(1) console.log(더하기1(1)) console.log(더하기1(2)) let 더하기2 = 더하기함수공장(2) console.log(더하기2(1)) console.log(더하기2(2))
AJAX 란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. XHR AJAX 요청을 생성하는 JavaScript API 입니다. 자바스크립트에서 요청을 보내는 기존방식은 프로미스를 지원하지 않아 수많은 콜백을 받게 되고 설정방식이 복잡해집니다. XHR은 프로미스를 지원하지 않아 then과 catch 같은 메서드를 사용하지 못하는 단점이 있고 문법이 다소 복잡합니다. XMLHttpRequest 생성방법 const req = new XMLHttpReques..
5점을 먼저 내면 이기는 간단한 스코어 게임을 만들어보겠습니다. 0 to 0 1 2 3 4 5 6 7 8 9 10 player 1 player2 reset app.js const disp1 = document.querySelector('#disp1') const disp2 = document.querySelector('#disp2') const p1btn = document.querySelector('#p1btn') const p2btn = document.querySelector('#p2btn') const resetbtn = document.querySelector('#resetBtn') const selbtn = document.querySelector('#selScor') // 카운터 증가 let..
하루지나면 까먹는 성격에 다시한번 복습겸 블로그에 배운내용을 작성해봅니다 index.html 체크리스트 클릭! 리스트 : app.js const form = document.querySelector('form') const ul = document.querySelector('ul') form.addEventListener('submit', ()=>{ const todoInput = form.elements.todo addList(todoInput.value) todoInput = ''; }) // 리스트 추가 함수 const addList(todo) =>{ const NewList = document.createElement('li') const boldtxt = document.createElement..
학습한 내용을 복습하기 위해 블로그를 작성합니다. addEventListener 를 이용하여 버튼을 클릭했을때 배경색과 글자색이 변하게 만들어보겠습니다. index.html CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK CLICK app.js // 랜덤색깔을 나타낼수 있게 해주는 함수 const makeRandColor = () => { const r = Math.floor(Mat..