실무 첫걸음, 생성형 AI로 배우는 UX/UI & 프론트엔드

자바스크립트는 왜 기본이 동기 방식일까? 그리고 왜 비동기가 섞일까?자바스크립트를 처음 접하면 혼란스러운 점 중 하나가 **"기본은 동기인데 비동기가 섞여 있다"**는 점입니다. 이번 글에서는 이 흐름을 정확히 정리해드리겠습니다.자바스크립트는 기본적으로 동기 방식입니다**동기(synchronous)**란, 코드가 위에서 아래로 순차적으로 실행되며,앞선 작업이 완료되어야만 다음 작업이 실행되는 방식을 말합니다.자바스크립트는 싱글 스레드 언어로, 하나의 실행 흐름(Call Stack)을 따라 동작합니다.console.log('A');console.log('B');// 실행 순서: A → B하지만, 특정 작업은 비동기 처리됩니다**비동기(asynchronous)**란, 실행을 지연시키는 작업을 별도로 실행하고..

화살표 함수 (Arrow Function)1. 개념화살표 함수는 function 키워드 대신 => (화살표)를 사용하여 함수를 정의하는 ES6 문법입니다. 보다 간결한 문법을 제공하며, this의 동작 방식이 기존의 함수와 다릅니다.2. 기본 문법const 함수이름 = (매개변수) => { // 함수 실행 코드 return 결과값;};매개변수가 하나만 있을 경우 괄호를 생략할 수 있으며, 함수의 본문이 한 줄이고 return이 포함된 경우 중괄호와 return 키워드를 생략할 수 있습니다.const add = (a, b) => a + b;console.log(add(3, 5)); // 83. 예제 코드(1) 매개변수가 없는 경우const sayHello = () => console.log("Hello..

함수와 콜백 함수함수 개념 정리1. 함수란? (레시피 + 실행 코드)함수는 특정 작업을 수행하는 코드 묶음입니다. 마치 "라면 끓이기 레시피"처럼 재사용할 수 있습니다.예시: 라면 끓이기 함수function cookRamen() { console.log("1. 물을 끓인다."); console.log("2. 라면과 스프를 넣는다."); console.log("3. 3분 후 불을 끈다.");}cookRamen();이 함수는 라면을 끓이는 과정을 하나의 명령어로 정리한 것입니다.2. 함수 선언 & 매개변수 (레시피에 재료 추가하기)매개변수를 사용하면 함수를 더 다양하게 활용할 수 있습니다.예시: 다양한 라면 만들기function cookRamen(type) { console.log(ty..

1. 함수란?함수(Function)는 특정 작업을 수행하도록 정의된 코드의 집합으로, 재사용이 가능하고 코드의 가독성을 높여줍니다.2. 함수 구문 형식자바스크립트에서 함수를 정의하는 기본적인 형식은 다음과 같습니다:function 함수이름(매개변수) { // 실행할 코드 return 반환값; // 선택 사항}3. 함수 선언과 함수 호출(1) 함수 선언function greet() { console.log("안녕하세요!");}(2) 함수 호출정의된 함수를 사용하려면 함수 이름을 호출하면 됩니다.greet(); // "안녕하세요!" 출력4. 매개변수 (Parameters)함수는 매개변수를 사용하여 데이터를 받을 수 있습니다.function add(a, b) { return a + b;}..

JSON(JavaScript Object Notation)은 데이터를 저장하고 교환하는 데 사용되는 가벼운 데이터 형식입니다. 주로 웹에서 서버와 클라이언트 간 데이터 전송에 활용됩니다.1. JSON의 특징가볍고 단순함: 사람이 읽고 쓰기 쉽고, 기계가 해석하고 생성하기 쉬운 구조입니다.텍스트 기반: 데이터를 문자열 형식으로 표현합니다.언어 독립적: JavaScript뿐만 아니라 Python, Java, PHP 등 다양한 언어에서 지원됩니다.키-값 쌍 구조: 데이터를 **객체(Object)**와 배열(Array) 형태로 저장할 수 있습니다.2. JSON 문법1) 객체(Object){}(중괄호)로 감싸고, "키": 값 형태로 데이터를 저장합니다.키는 항상 문자열이어야 하며, 값은 문자열, 숫자, 불리언, ..