JavaScript23 [JS] 콜백함수 정리 콜백함수 - 정의 : 함수에 파라미터로 들어가는 함수 - 용도 : 순차적으로 실행하고 싶을 때 사용 document.querySelector('.button').addEventListener('click',function(){ "버튼 누르면 이 코드 실행해주세요~" }) 이벤트를 넣고 싶을 때 .addEventListener() 사용. addEventListener() 소괄호가 있으니까 함수임. addEventLstener('click', function() {} ) 파라미터로 함수를 사용함 -> 이것을 콜백함수라고 부름 + 다른데서 만든 함수도 콜백함수로 넣을 수 있음 document.querySelector('.button').addEventListener('click',function 함수명) fu.. 2023. 6. 29. [JS] XMLHttpRequest HTTP 요청 전송 const xhr = new XMLHttpRequest(); //생성자 함수 호철하여 생성 xhr.open(method, url[, async]) // method:Http 요청메서드(GET,POST,PUT,DELETE 등 ) ..... xhr.send(); //HTTP 요청전송 XMLHttpRequest.prototype.open open메서드는 서버에 전송할 HTTP요청을 초기화한다. HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법이다. 주로 5가지 요청 메서드를 사용하여 CRUD를 구현한다. HTTP 요청 메서드 종류 목적 페이로드 GET index / retrieve 모든/특정 리소스 취득 X POST create 리소스 생성 O PUT repla.. 2023. 6. 18. [React] To do list 데이터 배열+1 / map() CRUD 모두 구현됐지만 id 값이 제대로 넘어가지 않아서 추가되는 항목에 id 값이 존재하지 않았다. 그래서 삭제할 때도 id 값이 비어있는 항목들은 모두 삭제 되었다. 곰곰이 생각해보니 기존 데이터값은 App.js 에 저장되어있어서 InputComp.js 나 Todo.js에서 아무리 id 값을 App.js에 넘겨도 추가된 id 값이 없었다. App.js 에서 해당 이벤트 함수에 id값의 상태값을 알려줘야한다. 추가 이벤트 함수 App.js addTodoList=(id,todo)=>{ alert('추가(App)') alert('넘어온 id : ' + (this.state.todolist.length + 1) ) //Todo에서 id 값을 설정할 수 없어서 App의 상태값에 +1 해줘야함 //(strin.. 2023. 6. 5. [Node.JS] 기초 개념 노드란 ? Node.js 는 Chrome V8 Javascript 엔진으로 빌드된 자바스크립트 런타임입니다. 대부분 노드를 서버로 알고 있지만 공식사이트에서는 서버로 소개하고 있지 않다. 노드를 배울때는 전반적으로 서버를 실행하는 방법을 다루지만, 노드가 서버만 실행할 수 있는 것은 아니다. 서버 외의 자바스크립트 프로그램을 실행하는 런타임으로 사용하는 방법도 있다. 서버와 런타임이란? 1. 서버 ① 서버는 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램을 말한다. 클라이언트란 요청을 보내는 주체로 브라우저일 수도 있고, 데스크톱 프로그램일 수도 있고, 모바일 앱일 수도 있고, 다른 서버에 요청을 보내는 서버일 수도 있다. ② 평소에 웹 사이트의 화면(HTML)은 어디서 가져오.. 2023. 6. 4. [React] map 메서드 map메서드를 이용한 컴포넌트 반복생성 map 메서드를 사용하기 전에는 화면에 띄울 데이터를 다 적어야 했음. render(){ return( ) } map() 메서드를 이용하면 하나의 코드로 몇번이고 화면에 자동으로 출력할 수 있음 . render(){ const result = this.state.personList.map( (data) => () ) return( {result} ) } 화면 출력해보면 위와 같은 결과를 볼 수 있음. **personList JSON배열 class App extends Component{ constructor(props){ super(props) this.state={ personList:[ //길이가 3인 JSON배열 {profile:lee, name:'이민호',a.. 2023. 5. 21. 이전 1 2 3 다음 728x90
