JavaScript

#it #개발 #프로그래밍언어 #웹개발 #프론트엔드 #백엔드 #javascript

기본 정보

이름: JavaScript
약칭: JS
분류: 프로그래밍 언어
최초 공개: 1995년
표준: ECMAScript (ECMA-262)
주요 용도: 웹 인터페이스, 웹 애플리케이션, 서버 개발
관련 주제: #JavaScript #웹개발 #프론트엔드 #백엔드

개요

JavaScript는 웹 브라우저에서 동적인 기능을 구현하기 위해 개발된 프로그래밍 언어이다.

현재는 브라우저뿐만 아니라 Node.js를 통해 서버 개발도 가능하며, 웹 개발에서 HTML, CSS와 함께 필수적으로 사용되는 기술이다.

React, Vue.js, Angular 등 다양한 프레임워크와 라이브러리의 기반 언어이기도 하다.

주요 특징

인터프리터 방식 실행
객체 지향 및 함수형 프로그래밍 지원
이벤트 기반 프로그래밍
비동기 처리 지원
브라우저와 서버(Node.js) 모두 사용 가능
다양한 프레임워크 생태계 보유

기본 문법

console.log("Hello JavaScript");

변수

let name = "구름";

const age = 30;

var oldValue = "legacy";

권장사항

const 우선 사용
변경이 필요한 경우 let 사용
var는 신규 프로젝트에서 사용을 지양하는 것이 일반적이다.

데이터 타입

String
Number
Boolean
Object
Array
Null
Undefined
Symbol
BigInt

조건문

if(age >= 20){

    console.log("성인");

}else{

    console.log("미성년자");

}

반복문

for(let i=0;i<5;i++){

    console.log(i);

}

함수

function add(a,b){

    return a+b;

}

console.log(add(3,5));

화살표 함수

const add = (a,b)=>{

    return a+b;

};

또는

const add = (a,b)=>a+b;

배열

const fruits = [

    "apple",

    "banana",

    "orange"

];

console.log(fruits[0]);

객체

const user={

    name:"구름",

    age:30,

    job:"developer"

};

console.log(user.name);

DOM 조작

const title = document.querySelector("h1");

title.textContent = "Hello World";

JavaScript는 HTML 요소를 선택하고 수정할 수 있다.

이벤트

button.addEventListener("click",()=>{

    alert("클릭");

});

주요 이벤트

click
change
submit
input
keydown
scroll
load

비동기 처리

Promise

fetch("/api/data")

.then(res=>res.json())

.then(data=>{

    console.log(data);

});

async / await

async function load(){

    const res = await fetch("/api/data");

    const data = await res.json();

    console.log(data);

}

현대 JavaScript에서는 async/await 사용이 일반적이다.

JSON

const json = JSON.stringify(user);

const obj = JSON.parse(json);

API 통신에서 가장 많이 사용하는 데이터 형식이다.

Fetch API

fetch("/api/member")

.then(response=>response.json())

.then(result=>{

    console.log(result);

});

Ajax 요청을 위한 표준 API이다.

ES6 주요 기능

let
const
Arrow Function
Template Literal
Destructuring
Spread Operator
Rest Parameter
Promise
Class
Module

Module

export function add(){}

import {add} from "./math.js";

대규모 프로젝트에서 코드 분리에 활용된다.

Node.js

JavaScript는 Node.js 환경에서 서버 개발도 가능하다.

활용 분야

REST API
웹 서버
채팅 서버
CLI 프로그램
자동화 스크립트

JavaScript 프레임워크

JavaScript 라이브러리

jQuery
Axios
Lodash
Chart.js
Three.js

JavaScript와 함께 사용하는 기술

장점

브라우저 기본 지원
배우기 쉬운 문법
방대한 생태계
프론트엔드와 백엔드 모두 개발 가능
다양한 프레임워크 지원

단점

동적 타입으로 인한 런타임 오류 가능
브라우저 호환성 고려 필요
프로젝트 규모가 커질수록 관리가 어려울 수 있음
비동기 로직 이해가 필요

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

const 우선 사용
=== 사용
async/await 활용
fetch 또는 axios 사용
모듈화 개발
ESLint 적용
Prettier 적용
TypeScript 병행 검토
이벤트 위임(Event Delegation) 활용
전역 변수 사용 최소화

출처

MDN Web Docs - JavaScript
ECMAScript 공식 명세 (ECMA-262)
위키백과 「JavaScript」