개발자 90%가 잊고 사는 자바스크립트 동작원리

"내가 짠 자바스크립트는 크롬(v8엔진)이 실행해주니깐..." 자바스크립트 동작원리 중간에 undefined가 왜 출력되는지 알면 동작원리를 공부할 필요가 없다. 이미 그들은 일반인이 아니기 때문이다. 1. console.log(1+1)가 먼저 실행되어 결과인 2가 콘솔에 출력된다. 2. 다음으로 setTimeout(()=> console.log(2+2), 1000)가 실행된다. setTimeout은 비동기 함수로, 자체로 호출은 되지만, 콜백 함수는 대기 시간이 지난 후에 실행된다. 고로 setTimeout 함수 자체는 아무런 값을 반환하지 않기 때문에 실행 결과로 undefined가 반환된다. 3. console.log(3+3)이 실행되고 결과인 6이 콘솔에 출력된다. conso..

• format_list_bulleted Javascript
• · 2025. 4. 23.
• textsms

AJAX가 뭔지 설명하는 글

AJAX는 "Asynchronous JavaScript and XML"의 약자이다. 웹 페이지가 서버로부터 데이터를 비동기적으로 가져오고, 이를 갱신하는 데 사용하는 기술이다. AJAX의 핵심 아이디어는 웹 페이지 전체를 새로 고침하지 않고도 데이터를 비동기적으로 서버에 요청하고, 그 결과를 받아와서 페이지의 일부를 갱신할 수 있다는 점이다. 이는 웹 애플리케이션의 성능과 사용자 경험을 크게 향상시킨다.  AJAX를 이해하기 위해선 "서버"가 무엇인지 알아야 한다.  왜냐하면 서버랑 비동기적 통신하기 때문이다. 서버는 데이터를 관리하고, 요청에 따라 데이터를 제공하는 컴퓨터 프로그램 또는 시스템이다. 클라이언트는 서버에 요청을 보내고, 서버는 그 요청에 맞는 데이터를 찾아서 응답한다.  왜 AJAX가 중..

• format_list_bulleted Javascript
• · 2024. 7. 3.
• textsms

FormData 객체란?

FormData 객체는 웹 양식의 데이터를 쉽게 구성하여 서버로 전송할 수 있도록 돕는 JS의 Web API임. 특히 파일이나 이미지와 같은 이진 데이터를 포함해, 폼 데이터를 비동기적으로 서버에 전송할 때 유용하지. 좀 더 이해와 사용법을 이해하기 위해서 예를 들어 이해해 보자. 상상해 보자. 네가 유명한 셰프가 되어서 최고의 햄버거를 만들기로 결심했어. 이제 재료들을 모으기 시작하는 거야. 여기서, 너의 햄버거는 바로 FormData야. 그리고 햄버거를 완성하기 위해 넣는 모든 재료들, 예를 들어 패티, 치즈, 토마토, 상추는 폼 데이터에 추가하는 각각의 값들이지. * 첫 번째 단계 : 햄버거 만들기 시작하기. const myAwesomeBurger = new FormData(); 여기서 new Fo..

• format_list_bulleted Javascript
• · 2024. 4. 4.
• textsms

DOM 조작할 때 사용되는 몇 가지 사이즈 속성들

JavaScript에서 DOM을 조작할 때 사용되는 몇 가지 사이즈 속성들을 정리해보자. 1. offsetWidth와 offsetHeight : `element.offsetWidth` : 요소의 너비(가로 크기) 반환. `element.offsetHeight` : 요소의 높이(세로 크기) 반환. 이 속성은 테두리, 안쪽 여백, 스크롤바 등을 포함한 전체 크기를 반환한다. var width = element.offsetWidth; var height = element.offsetHeight; 활용 예시 : 요소가 차지하는 전체 공간을 알고 싶을 때, 특히 테두리와 여백을 고려해야 하는 경우. var width = document.getElementById("home").offsetWidth; var hei..

• format_list_bulleted Javascript
• · 2024. 2. 26.
• textsms

화살표 함수와 객체 반환에 대해서

화살표 함수와 객체 반환에 대한 지식 부족으로 JS와 React에서 약간 애를 먹었기에 이에 기록한다. 1) setPerson((prev) => ({ ...prev, mentors: prev.mentors.map((mentor) => mentor.name === prevName ? { ...mentor, name: current } : mentor ), })); 2) setPerson((prev) => { ...prev, mentors: prev.mentors.map((mentor) => mentor.name === prevName ? { ...mentor, name: current } : mentor ), }); 1)번과 2)번 간의 차이를 설명할 수가 없었으며, 이로 인해 error를 경험했다. 1)..

• format_list_bulleted Javascript
• · 2023. 12. 15.
• textsms

클로저(Closure)

클로저(Closure)라는 용어로써 '닫힌', '폐쇄된'이라는 뜻을 갖고 있어. 그리고 이 용어가 생긴 이유는 클로저가 자신이 생성될 때의 환경(스코프)을 기억하고 있다는 특성 때문이야. 함수가 다른 함수 안에서 정의되고, 그 안에서 사용되는 변수를 기억하는데, 이는 마치 그 변수가 "닫힌(closed)"공간에 있는 것처럼 보인다고 해서 "클로저"라는 용어가 사용된 거야. 클로저는 자바스크립트에서 강력하면서도 특이한 기능 중 하나라서, 그 동작 방식에 따라 함수가 외부 변수를 '폐쇄'하고 있다고 이해할 수 있어. 즉, 해당 함수 안에서만 접근이 가능하고 외부에서는 그 값을 직접 변경할 수 없다는 의미에서 표현된 것 같아. 클로저는 함수가 마치 자기 주머니에 정보를 넣어 놓고 다닌다고 생각할 수 있어. f..

• format_list_bulleted Javascript
• · 2023. 11. 30.
• textsms