본문 바로가기

javascript

(20)

javascript/얕은 복사와 깊은 복사 일단 자바스크립트에서 자료형을 크게 두가지로 나눌 수 있다. 원시 자료형Number, String, Boolean, null, undefined 등... 객체도 아니고 method도 가지지 않는 타입변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장되며, 할당한 변수를 조작하면 실제 데이터 값이 조작된다. 참조 자료형배열, 객체, 함수 등...변수에 참조 자료형을 저장하면 변수에 값이 아닌 주소(객체 참조, 위치 값)를 독립적인 메모리 공간(heap)에 저장하고,그 공간을 참조하기 위해 주소값을 변수에 할당하는 것이다.즉 참조 자료형을 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작함=> 객체가 변경되면 해당 객체를 참조하는 모든 속성이 변경..

javascript/chart.js로 그래프 만들기 chart.js📊: 8개의 차트 유형을 지원하는 데이터 시각화를 위한 오픈소스 JavaScript 라이브러리 https://www.chartjs.org/docs/latest/getting-started/ Getting Started | Chart.jsGetting Started Let's get started with Chart.js! Alternatively, see the example below or check samples. Create a Chart In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snippet to your page: You shouldw..

250313 to-do 리스트 만들기 (2) https://hydeveloper.tistory.com/170 에서 아직 하지 못한 심화 과제 (3) : 드래그 앤 드롭으로 요소의 위치 바꾸기 (정렬하기) 를 구현하고자 한다. 이에 앞서 draggable 속성과 drag 이벤트를 알아둬야 한다. draggable 속성 draggable = "true"를 부여하면 어떤 요소든 드래그될 수 있는 객체로 변환할 수 있다. drag 이벤트 (mdn : https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/drag_event) drag드래그가 가능한 대상에서 발생dragstart드래그를 시작할 때 발생dragend드래그가 종료될 때 발생dragover드래그하면서 마우스가 대상 객체 위에 있을 때 발생dr..

250313 to-do 리스트 만들기 (1) 챌린지에서 심화과제 (로컬 스토리지, 체크박스)를 추가한 글이다. 필수 조건index.html에 있는 input 요소에 입력된 값(value)과 button 요소를 변수에 할당합니다.새로운 li 요소를 만들고 input 요소에 입력된 값을 textContent로 갖도록 합니다.li 요소는 클릭하면 해당 li 요소가 지워지는 delete 버튼을 가지고 있어야 합니다. 입력창은 초기화되어야 합니다.만약 입력창에 아무것도 입력하지 않은 경우 alert로 유저에게 입력을 요청해야 합니다.3.의 삭제버튼 만들기 🔽const deleteBtn = document.createElement('button'); deleteBtn.onclick = function () { this.parentElement.remov..

javascript/var를 더이상 사용하지 않는 이유 참고모던자바스크립트 Deep Divehttps://velog.io/@wksh229/JavaScript-var-%EC%93%B0%EC%A7%80%EB%A7%88-%EC%A0%9C%EB%B0%9Chttps://batcave.tistory.com/39https://valueengine.tistory.com/15 var의 특징 var는 variable(변수)의 준말로, Javascript ES5에서는 var 키워드만이 변수를 선언하는 유일한 방법이었다. 그러나 ES6부터는 let, const 키워드를 지원하면서 var의 사용을 지양하고있다.var에는 다음과 같은 특징이 있다.function scope(함수 내부에 있다면 선언 위치에 관계없이 사용이 됨)var 키워드 생략 허용중복 선언 허용변수 호이스팅 하..

250307 프로그래머스 이번 과제는 블로그에 글을 작성하는 과제는 아니지만, 코딩 테스트 연습 과제라 여기에 정리해둔다. 1. 두 수의 차 : https://school.programmers.co.kr/learn/courses/30/lessons/120803?language=javascriptfunction solution(num1, num2) { var answer = num1 - num2; return answer;} 2. 나이 출력 : https://school.programmers.co.kr/learn/courses/30/lessons/120820?language=javascriptfunction solution(age) { var answer = 2023 - age; return answer;..

DAY 3 #2.0 ~ #2.3 #2.0 SocketIO vs WebSockets https://socket.io/ SocketIO : 실시간, 양방향, event 기반의 통신을 가능케 하는 framework https://socket.io/docs/v4/ WebSocket과의 차이점은, webSocket이 socketIO가 위의 통신을 가능하게 하도록 만드는 방법 중 하나에 불과하며, 만약 WebSocket이 사용못하게 되더라도 socketIO는 http long-polling 등을 대체해 사용할 수 있다고 문서에 나와있다. 당장 webSocket은 protocol, socketIO는 framework이라는 점에서 다르다.. https://www.npmjs.com/package/socket.io #2.1 Installing Socke..

DAY 2 #1.3 ~ 1.9 #1.3 WebSocket Events https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket app.js // 이 socket을 이용해서 frontend에서 backend로 메세지 전송 가능 // 여기 socket은 서버로의 연결로, window.location.host는 pc뿐만 아닌 모바일에서도 접속이 가능하게끔 해줌 // (http://localhost:3000이 아닌, 아예 기기의 host의 location으로 접속) const socket = new WebSocket(`ws://${window.location.host}`); webSocket 사용 - server : node.js 환경에서 ws와 같은 모듈을 이용해 webSo..

이전 1 2 3 다음

티스토리툴바