목록전체 글 (91)

열정 실천

[JavaScript] 데이터 처리 방식 (동기와 비동기)

동기와 비동기 📌 개념 🟢 동기식(Synchronous) 프로그램 ◽ 데이터의 요청 후 결과가 나올 때까지 기다리는 방식 (blocking : 답변을 기다리는 상태) ◽ 순차적으로 일을 수행한다. ◽ 현재 작업이 수행 중이면 뒤의 작업은 대기한다. 🟢 비동기식(Asynchronous) 프로그램 ◽ 데이터 요청 후 결과를 기다리지 않고 다른 일을 시작한다. (non-blocking : 답변을 기다리지 않음) ◽ 병렬적으로 일을 수행한다. ◽ 현재 작업과 무관하게 뒤의 작업이 실행된다. 비동기 방식은 결과를 기다리지 않기 때문에 잘 수행됐는지 결과를 확인할 수가 없다. 📌 장단점 동기 방식의 장단점 😄 설계가 간단하고 직관적이다. 🤔 결과가 주어질 때까지 다른 일을 못하고 기다려야한다. (작업 중단) 비동기..
개발 공부/JS 2023. 5. 15. 23:20
[JavaScript] 자바스크립트 - 시간 다루기 (setInterval(), padStart() )

현재 시간을 15:34:26 (시/분/초) 이렇게 디지털 형식으로 표시하기 위해서 다음과 같은 Date 객체의 메소드를 사용하면 된다. ⏰ getHours() // 시간(Hour) ⏰ getMinutes() // 분(Minute) ⏰ getSeconds() // 초(Second) ⏰ getMilliseconds() // 밀리초(Milliseconds) 더보기 Date 객체를 먼저 선언한 후 이 메소드를 실행하기만 시간을 가져올 수 있다. 이렇게 가져온 시간을 화면에 출력하게 되면 Date 객체를 선언했을 때의 시간이 출력이 되고 바뀌지 않는다. 진짜 디지털 시계처럼 매초마다 시간을 변경해주기 위해서 정해진 시간마다 실행되는 setInterval() 함수를 이용하자! 🎈 setInterval( ) 함수 사..
개발 공부/JS 2023. 5. 15. 19:01
[JavaScript] 이벤트 객체

이벤트의 함수는 매개변수를 통해 이벤트 정보를 가져올 수 있다. button.addEventListenter('click', (event) => { console.log(event); }); ✔ 이벤트 객체는 이벤트가 발생한 요소와 참조 정보, 입력된 키 등의 정보를 포함한다. ✔ 발생한 요소는 target 속성을 이용해 확인할 수 있다. ✔ 보통 이벤트객체매개변수는 [event] 혹은 [e]라고 많이 쓴다. --수정중---
개발 공부/JS 2023. 5. 12. 01:10
[JavaScript] 이벤트!!!! - 이벤트 리스너 등록, 이벤트 리스너 삭제

이벤트 웹 내에서 일어나는 사건을 뜻한다. (클릭, 키보드 등) 각각의 이벤트들은 이벤트가 실행되면 실행될 코드 블록인 이벤트 핸들러를 가진다. event handler register : 이벤트가 발생하면 어떤 함수를 호출할지 등록해놓는 것 📌 이벤트 핸들러 등록에는 두 가지 방법이 있다. 1. 타겟.on이벤트명 = 이벤트핸들러함수 2. 타겟.addEventListner = ('이벤트명', 이벤트핸들러함수); 예시) 1. button.onclick = handleClick 2. button.addEventListner = ("click", handleClick); 보통 2번 방법을 많이 사용하기 때문에 2번으로 공부해보자! 일반적인 사용 방법은 다음과 같다. const button = document...
개발 공부/JS 2023. 5. 11. 22:38
[JavaScript] DOM이 뭔가요? ----- getElementById(), getElementByClassName(), getElementByTagName(), querySelector(), querySelectorAll()

DOM : Document Object Model 브라우저에서 자바스크립트가 html 요소를 제어할 수 있도록 제공하는 API이다. (API에 관한 설명은 아래에_) JavaScript는 html 요소를 추가하거나 변경과 같은 조작을 위해 만들어진 언어이다. 이러한 html파일을 javascript로 어떻게 제어할 수 있을까? 모든 브라우저에는 웹문서를 해석(parding)하는 웹 렌더링 엔진이 있다. 이 렌더링 엔진은 html 코드를 해석하여 모든 요소를 객체화하여 자바스크립트가 접근할 수 있게끔한다. 이렇게 문서를 객체화하였다하여 Document Object Model(문서 객체 모델)이라고 부른다. 이 DOM은 트리 형태로 되어있고 각각의 요소를 노드라고 부른다. 우리는 원하는 노드에 접근하여 변경..
개발 공부/JS 2023. 5. 11. 15:00
[JavaScript] JS 완전 기초 문법 한 방에 끝내기!!

📢 변수 선언 상수 const a = 1; 변수 let b = 2; 📢 데이터 타입 자바에서는 숫자면 int, double, long 다 타입을 지정해줘야하는데 여기서 변수는 다 let으로 지정 1. 숫자 2. string 3. boolean 4. null 5. undefined null은 개발자가 없다고 고의적으로 설정하는 값, undefined는 개발자가 설정하지 않았기 때문에 없는 값 var num = 10; var st = "Hello"; var bool = true; var n = null; var unde; 📢 배열 const arr = [1,2,3,"hi",false, null]; console.log(arr); console.log(arr[3]) //4번째 요소만 출력 arr.push("n..
개발 공부/JS 2023. 5. 9. 14:45
이전 Prev 1 2 3 4 5 6 7 ··· 16 Next 다음