보고 와야 할 이전글: promise 정리 [JS] Promise에 대해 알아보자 Promise 개념 Promise란? 자바스크립트에서 제공하는 비동기를 간편하게 표현할수있는 object 비동기적인것을 수행할 때 콜백함수 대신에 유용하게 쓸 수 있는 object입니다. Promise는 정해진 장시간의 rebornbb.tistory.com async와 await async와 await라는 특별한 문법을 사용하면 promise를 좀 더 편하게 사용할 수 있습니다. async 함수 async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 promise를 반환합니다. async function f() { return 1; } f().then(alert..

콜백함수란? 정의 : 함수에 파라미터로 들어가는 함수 용도 : 순차적으로 실행하고 싶을때 쓴다. 참고 1. 다른 곳에서 만든 함수도 콜백함수로 넣을 수 있다. 참고 2. 콜백함수에 함수명 작성할 수 있다. 참고 3. 콜백함수가 필요한 함수들에만 콜백함수 사용가능 콜백함수 사용 이유 이렇게 콜백함수를 사용하면, 순차적으로 흘러갈수있다. first함수를 실행하면 1 다음에 2 가 콘솔창에 출력된다. 근데 굳이 콜백함수를 사용해야 할까? 의문이 들 것이다.. fist(); second(); 이런식으로 사용하면 되지 않을까 생각 할 수 있는데, 팀워크를 할때, 예를 들어 한명이 first() 라는 함수를 만들었다고 치면, 팀원1 : fist() 후에 console.log(2)를 바로 하고 싶어 팀원2 : fis..

라이브러리를 이용한 방사형 차트를 만들기 전, 육각형과 오각형을 그려보는 연습을 했다. 자바스크립트 코드로 육각형과 오각형을 그리려면 canvas api에 대해 알아야하고, 라디안과 삼각함수에 대한 개념이 필요하다. 해당 포스팅은 canvas api에 대한 기초설명, 라디안과 삼각함수 개념, 육각형과 오각형을 그리는 코드 전부를 정리하였다. 라디안 일반적으로 익숙하게 사용하는 각도법 ( =한 바퀴를 360도로 나누어 표현하는 것) 이 아니라 삼각함수는 항상 이 '라디안' (=호도법) 이라는 것을 이용해 계산을 합니다. 각도법 - 원의 중심에서 원이 작도되는 과정을 보면서 내 고개가 얼마나 올라갔나를 수치화 시킨 것 호도법 - 원을 작도하는 연필의 입장에서 (반지름 대비) 연필이 긁고간 길이가 얼마인가 를..

XMLHttpRequest return처리 undefined 현상 function requestData() { let request = {"text": "안녕하세요"}; var xhr = new XMLHttpRequest(); xhr.open('POST', '/data.json'); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status == 200) { //응답결과 var data = xhr.responseText; //반환 return data; } else { console.error(xhr.status); } } }; xhr.send(JSON.stringify(request))..

웹소켓 HTTP 통신을 이용하면 클라이언트에서 서버에 요청을 보내야만 서버에서 응답을 할 수 있습니다. 즉, 서버에서는 요청을 받지 않으면 클라이언트에 통신할 수 없는 것입니다. 이러한 문제점을 해결하기 위해서는 양방향으로 통신할 수 있는 웹 소켓 통신을 이용해야합니다. 웹 소켓 통신 연결은 아래 코드와 같은 방법으로 시작합니다. let socket = new WebSocket("ws://chanstory.dev"); 'http', 'https' 프로토콜과 다르게 'ws', 'wss' 프로토콜을 사용합니다. 'ws', 'wss'의 차이는 'http', 'https'와 같은 관계로 보안과 신뢰성에서 차이가 있습니다. wss와 ws 차이점 "wss"와 "ws"는 모두 WebSocket 프로토콜을 사용하는 네..

scrollTop 글의 맨 처음 부터 얼마나 내려왔는지 현재 스크롤 위치 scrollHeight 화면 바깥으로 삐져나간 부분까지 포함해서 전체 글의 길이 자바스크립트를 사용한 스크롤 바 맨 아래로 내리는 코드: document.documentElement.scrollTop = document.documentElement.scrollHeight; jQuery를 사용한 스크롤 바 맨 아래로 내리는 코드: $(document).ready(function() { $('html, body').scrollTop($(document).height()); });

펌글 - 출처: https://ko.javascript.info/xmlhttprequest#ref-570 XMLHttpRequest ko.javascript.info XMLHttpRequest란? XMLHttpRequestJavaScript에서 HTTP 요청을 만들 수 있는 내장 브라우저 개체입니다. 현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest 객체를 내장하고 있습니다. XMLHttpRequest 객체는 서버로부터 XML 데이터를 전송받아 처리하는 데 사용됩니다. 이 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다. 즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 됩니다..

URL 생성자 URL(Uniform Resource Locator) 생성자는 웹 페이지나 파일 등을 나타내는 고유한 주소를 생성하는 데 사용됩니다. URL 생성자는 일반적으로 프로그래밍 언어에서 지원되며, URL 문자열을 동적으로 생성하거나 파라미터를 추가하거나 수정하여 원하는 URL을 만들 수 있습니다. 대부분의 URL 생성자는 다음과 같은 구성 요소를 가지고 있습니다. - 프로토콜: URL이 사용하는 프로토콜 (http, https, ftp 등)을 지정합니다. - 호스트: 웹 사이트의 도메인 이름이나 IP 주소를 지정합니다. - 포트: 서버의 포트 번호를 지정합니다. - 경로: 웹 페이지나 파일의 경로를 지정합니다. - 쿼리 문자열: URL의 쿼리 문자열을 지정합니다. 이 문자열은 일반적으로 웹 페이..