javascript 핵심 요약

odada·2024년 11월 27일

JavaScript js

javascript

목록 보기

1/18

javascript 핵심 요약

자바스크립트는 웹페이지를 동적으로 만들어주는 언어로 웹페이지를 꾸미거나 사용자와 상호작용을 할 수 있게 해준다.
TIOBE 프로그래밍 언어 순위에서 2024년 기준 6위에 위치하고 있다.

자바스크립트 소개

자바스크립트 소개
자바스크립트는 HTML 콘텐츠를 변경할 수 있습니다.

<!doctype html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <p id="demo">JavaScript can change HTML content.</p>

        <button
            type="button"
            onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'
        >
            Click Me!
        </button>
    </body>
</html>

자바스크립트는 HTML 속성을 변경할 수 있습니다.

<!doctype html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
        <img
            id="myImage"
            src="pic_bulboff.gif"
            style="width:100px"
        />
        <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
    </body>
</html>

자바스크립트는 HTML 스타일을 변경할 수 있습니다.

<!doctype html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <p
            id="demo"
            style="color: red;"
        >
            Hello JavaScript!
        </p>

        <button
            type="button"
            onclick="document.getElementById('demo').style.color = 'blue'"
        >
            Click Me!
        </button>
    </body>
</html>

자바스크립트는 HTML 요소를 숨길 수 있습니다.

<!doctype html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <p id="demo">Hello JavaScript!</p>

        <button
            type="button"
            onclick="document.getElementById('demo').style.display = 'none'"
        >
            Click Me!
        </button>
    </body>
</html>

자바스크립트는 HTML 요소를 보여줄 수 있습니다.

<!doctype html>
<html>
    <body>
        <h2>What Can JavaScript Do?</h2>

        <p
            id="demo"
            style="display: none;"
        >
            Hello JavaScript!
        </p>

        <button
            type="button"
            onclick="document.getElementById('demo').style.display = 'block'"
        >
            Click Me!
        </button>
    </body>
</html>

자바스크립트의 사용

자바스크립트 사용하기
<script> 태그를 사용하여 자바스크립트 코드를 작성할 수 있다.
<script> 태그는 HTML 문서의 <head> 또는 <body> 태그 안에 작성할 수 있다.

<!doctype html>
<html>
    <body>
        <h2>JavaScript in Body</h2>

        <p id="demo">A Paragraph.</p>

        <button
            type="button"
            onclick="myFunction()"
        >
            Try it
        </button>

        <script>
            function myFunction() {
                document.getElementById('demo').innerHTML = 'Paragraph changed.';
            }
        </script>
    </body>
</html>

<script> 태그를 사용하여 외부 자바스크립트 파일을 불러올 수 있다.
<script> 태그의 src 속성에 외부 자바스크립트 파일의 경로를 지정하면 된다.

<!doctype html>
<html>
    <body>
        <h2>JavaScript in Body</h2>

        <p id="demo">A Paragraph.</p>

        <button
            type="button"
            onclick="myFunction()"
        >
            Try it
        </button>

        <script src="myScript.js"></script>
    </body>
</html>

자바스크립트의 기본 문법

1. 변수(Variable)

변수는 어떠한 값(Value)을 저장하는 공간(Stronge Location)으로써 값을 저장하고 사용하기 위해 사용한다. 변수를 선언할 때는 let, const, var 키워드를 사용한다.

변수 이름 규칙

변수 이름은 문자, 숫자, 밑줄(_), 달러 기호($)로 구성할 수 있으며, 대소문자를 구분한다.
변수 이름은 숫자로 시작할 수 없다.
예약어(if, while, for 등)는 변수 이름으로 사용할 수 없다.

변수의 의미

변수란 데이터를 저장하는 메모리 공간을 의미한다. 변수에 값을 저장하면 변수에 저장된 값은 메모리에 저장된다.

변수란 변할 수 있는 것으로 어떠한 값을 담는 상자라고 생각하면 된다.
- 예를 들어, let a = 1이라고 선언하면 a라는 변수에 1이라는 값을 담는다라는 의미이다.
- 그리고 이것을 변수에 값을 할당한다라고 표현한다.
- 그동안 사용했던 같다라는 의미의 =(등호)는 프로그래밍에서는 할당한다라는 의미로 사용된다.
변수를 사용하는 이유는 값을 재사용하기 위해서이다.
- 예를 들어, let a = 1이라고 선언하면 a라는 변수에 1이라는 값을 담는다.
- 그리고 이 값을 재사용할 때 a라는 변수를 사용하면 된다.
- 이렇게 되면 1이라는 값을 여러 번 사용할 때 1이라는 값을 여러 번 쓰지 않아도 되기 때문에 편리하다.
변수에 줄 수 있는 값은 숫자, 문자, 불리언, 객체, 배열 등 다양한 데이터 타입이 있다.

// a라는 변수에 1이라는 값을 할당한다.
let a = 1;
// b라는 변수에 2이라는 값을 할당한다.
const b = 2;
// c라는 변수에 3이라는 값을 할당한다.
var c = 3;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

변수 선언

변수를 선언할 때는 let, const, var 키워드를 사용한다.

1. `let`

let은 변수를 선언할 때 사용하는 키워드로 변수를 선언하면 변수를 재할당할 수 있다.

let a = 1;
a = 2;

console.log(a); // 2

2. `const`

const는 상수를 선언할 때 사용하는 키워드로 변수를 선언하면 변수를 재할당할 수 없다.

const b = 1;

b = 2; // TypeError: Assignment to constant variable.

3. `var`

var는 변수를 선언할 때 사용하는 키워드로 변수를 선언하면 변수를 재할당할 수 있다.
var 재할당 오류가 발생하지 않기 때문에 let, const를 사용하는 것이 좋다.

var c = 1;
c = 2;

console.log(c); // 2

2. 데이터 타입(Data Type)

자바스크립트의 데이터 타입이란 변수에 저장할 수 있는 값의 종류를 의미한다.

Number : 숫자 타입으로 정수, 실수, NaN, Infinity 등의 값을 저장한다.
String : 문자열 타입으로 문자열을 저장한다.
Boolean : 불리언 타입으로 참(true)과 거짓(false)을 저장한다.
Object : 객체 타입으로 객체를 저장한다.
Array : 배열 타입으로 배열을 저장한다.
Function : 함수 타입으로 함수를 저장한다.

- Number

숫자 타입으로 정수, 실수, NaN, Infinity 등의 값을 저장한다.

let a = 1;
let b = 2;

console.log(a); // 1
console.log(b); // 2

- String

문자열 타입으로 문자열을 저장한다.

let a = 'Hello';
let b = 'World';

console.log(a); // Hello
console.log(b); // World

- Boolean

불리언 타입으로 참(true)과 거짓(false)을 저장한다.

let a = true;
let b = false;

console.log(a); // true
console.log(b); // false

- Object

객체 타입으로 객체를 저장한다.

let a = { name: 'John', age: 20 };
let b = { name: 'Jane', age: 25 };

console.log(a); // { name: 'John', age: 20 }
console.log(b); // { name: 'Jane', age: 25 }

- Array

배열 타입으로 배열을 저장한다.

let a = [1, 2, 3];
let b = [4, 5, 6];

console.log(a); // [1, 2, 3]
console.log(b); // [4, 5, 6]

- Function

함수 타입으로 함수를 저장한다.

let a = function () {
    console.log('Hello');
};

let b = function () {
    console.log('World');
};

a(); // Hello
b(); // World

3. 연산자(Operator)

연산자는 피연산자(Operand)를 대상으로 연산을 수행하는 기호이다.

산술 연산자 : 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)
대입 연산자 : 할당(=), 더하기 후 할당(+=), 빼기 후 할당(-=), 곱하기 후 할당(*=), 나누기 후 할당(/=), 나머지 후 할당(%=)
비교 연산자 : 같다(===), 같지 않다(!==), 크다(>), 작다(<), 크거나 같다(>=), 작거나 같다(<=)
논리 연산자 : 논리곱(&&), 논리합(||), 논리부정(!)
삼항 연산자 : 조건 ? 참 : 거짓
타입 연산자 : typeof

- 산술 연산자

산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%) 연산을 수행한다.

let a = 1;
let b = 2;

console.log(a + b); // 3
console.log(a - b); // -1
console.log(a * b); // 2
console.log(a / b); // 0.5
console.log(a % b); // 1

- 대입 연산자

대입 연산자는 변수에 값을 할당하는 연산을 수행한다.

let a = 1;

a += 2;
console.log(a); // 3

a -= 2;
console.log(a); // 1

a *= 2;
console.log(a); // 2

a /= 2;
console.log(a); // 1

a %= 2;
console.log(a); // 1

- 비교 연산자

비교 연산자는 두 값을 비교하는 연산을 수행한다.

let a = 1;
let b = 2;

console.log(a === b); // false
console.log(a !== b); // true
console.log(a > b); // false
console.log(a < b); // true
console.log(a >= b); // false
console.log(a <= b); // true

- 논리 연산자

논리 연산자는 논리곱(&&), 논리합(||), 논리부정(!) 연산을 수행한다.
논리곱(&&) : 두 값이 모두 참일 때 참을 반환한다.
논리합(||) : 두 값 중 하나라도 참일 때 참을 반환한다.
논리부정(!) : 값이 참이면 거짓을 반환하고 거짓이면 참을 반환한다.

let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
console.log(!b); // true

- 삼항 연산자

삼항 연산자는 조건을 판단하여 참일 때와 거짓일 때의 값을 반환한다.

let a = 1;
let b = 2;

let result = a > b ? 'a가 크다' : 'b가 크다';

console.log(result); // b가 크다

4. 조건문(Conditional Statement)

조건문은 조건식을 판단하여 해당하는 코드 블록을 실행하는 제어문이다.

if문 : 조건식이 참일 때 코드 블록을 실행한다.
if-else문 : 조건식이 참일 때 코드 블록을 실행하고 거짓일 때 다른 코드 블록을 실행한다.
if-else if-else문 : 여러 조건식을 판단하여 해당하는 코드 블록을 실행한다.

- if문

if문은 조건식이 참일 때 코드 블록을 실행한다.

let a = 1;

if (a === 1) {
    console.log('a는 1이다.');
}

- if-else문

if-else문은 조건식이 참일 때 코드 블록을 실행하고 거짓일 때 다른 코드 블록을 실행한다.

let a = 1;

if (a === 1) {
    console.log('a는 1이다.');
} else {
    console.log('a는 1이 아니다.');
}

- if-else if-else문

if-else if-else문은 여러 조건식을 판단하여 해당하는 코드 블록을 실행한다.

let a = 1;

if (a === 1) {
    console.log('a는 1이다.');
} else if (a === 2) {
    console.log('a는 2이다.');
} else {
    console.log('a는 1도 2도 아니다.');
}

5. 반복문(Loop Statement)

반복문은 조건식이 참일 때 코드 블록을 반복 실행하는 제어문이다.

for문 : 조건식이 참일 때 코드 블록을 반복 실행한다.
while문 : 조건식이 참일 때 코드 블록을 반복 실행한다.

- for문

for문은 조건식이 참일 때 코드 블록을 반복 실행한다.

for (let i = 0; i < 5; i++) {
    console.log(i);
}

- while문

while문은 조건식이 참일 때 코드 블록을 반복 실행한다.

let i = 0;

while (i < 5) {
    console.log(i);
    i++;
}

6. 함수(Function)

함수는 코드 블록을 하나로 묶어서 재사용할 수 있는 기능이다.

함수 선언

함수를 선언할 때는 function 키워드를 사용한다.

function hello() {
    console.log('Hello');
}

hello(); // Hello

함수 표현식

함수를 변수에 할당할 때는 함수 표현식을 사용한다.

let hello = function () {
    console.log('Hello');
};

hello(); // Hello

화살표 함수

화살표 함수는 function 키워드를 생략하여 함수를 선언한다.

let hello = () => {
    console.log('Hello');
};

hello(); // Hello

7. 객체(Object)

객체는 여러 개의 프로퍼티(Property)와 메소드(Method)를 하나로 묶은 복합 데이터 타입이다.

객체 생성

객체를 생성할 때는 중괄호({})를 사용한다.

let person = {
    name: 'John',
    age: 20,
    hello: function () {
        console.log('Hello');
    },
};

console.log(person.name); // John
console.log(person.age); // 20
person.hello(); // Hello

객체 프로퍼티

객체의 프로퍼티는 객체의 속성을 의미한다.

let person = {
    name: 'John',
    age: 20,
};

console.log(person); // { name: 'John', age: 20 }
console.log(person.name); // John
console.log(person.age); // 20

객체 메소드

객체의 메소드는 객체의 동작을 의미한다.
w3c Object Methods

let person = {
    name: 'John',
    age: 20,
    hello: function () {
        console.log('Hello');
    },
};

person.hello(); // Hello

8. 배열(Array)

배열은 여러 개의 요소(Element)를 하나로 묶은 복합 데이터 타입이다.

배열 생성 & 요소

배열을 생성할 때는 대괄호([])를 사용한다.
배열의 요소는 배열의 값이다.

let arr = [1, 2, 3];

console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3

배열 메소드

배열의 메소드는 배열의 동작을 의미한다.
w3c Array Methods

let arr = [1, 2, 3];

arr.push(4);
console.log(arr); // [1, 2, 3, 4]

arr.pop();
console.log(arr); // [1, 2, 3]

9. 콜백 함수(Callback Function)

콜백 함수는 함수의 인자로 전달되어 특정 시점에 호출되는 함수이다.

function hello(callback) {
    console.log('Hello');
    callback();
}

hello(function () {
    console.log('World');
});

10. 이벤트(Event)

이벤트는 사용자의 동작에 의해 발생하는 사건을 의미한다.
w3c Event

let button = document.querySelector('button');

button.addEventListener('click', function () {
    console.log('Click');
});

11. DOM(Document Object Model)

DOM은 웹 페이지의 요소를 객체로 표현한 모델을 의미한다.
w3c DOM

let button = document.querySelector('button');

button.addEventListener('click', function () {
    console.log('Click');
});

12. AJAX(Asynchronous JavaScript And XML)

AJAX는 비동기적으로 서버와 통신하는 기술을 의미한다.
w3c AJAX

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.send();

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};

13. ES6(ECMAScript 6)

ES6는 ECMAScript 6의 줄임말로 자바스크립트의 표준을 의미한다.

let, const : 변수를 선언할 때 사용하는 키워드로 let은 변수를 선언할 때 사용하고 const는 상수를 선언할 때 사용한다.
화살표 함수 : 함수를 선언할 때 사용하는 키워드로 function 키워드를 생략하여 함수를 선언한다.
템플릿 리터럴 : 문자열을 표현할 때 사용하는 키워드로 백틱(`)을 사용하여 문자열을 표현한다.
구조 분해 할당 : 배열이나 객체의 값을 추출하여 변수에 할당하는 기능이다.
클래스 : 객체를 생성할 때 사용하는 키워드로 class 키워드를 사용하여 객체를 생성한다.
모듈 : 코드를 모듈화하여 재사용할 수 있는 기능이다.

// math.js
export function sum(a, b) {
    return a + b;
}

// index.js
import { sum } from './math.js';

console.log(sum(1, 2)); // 3

14. Babel

Babel은 자바스크립트 코드를 ES5로 변환하는 도구이다.

// ES6
let a = 1;

// Babel
('use strict');

var a = 1;

15. Webpack

Webpack은 모듈 번들러로 여러 개의 파일을 하나로 묶어주는 기능을 제공한다.

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

16. NPM(Node Package Manager)

NPM은 자바스크립트 패키지 매니저로 자바스크립트 라이브러리를 설치하고 관리하는 기능을 제공한다.

// package.json
{
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    }
}

17. Node.js

Node.js는 자바스크립트 런타임 환경으로 자바스크립트를 실행할 수 있는 환경을 제공한다.

// app.js
console.log('Hello Node.js');

18. Express

Express는 Node.js 웹 프레임워크로 웹 서버를 구축할 수 있는 기능을 제공한다.

// app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello Express');
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

19. React

React는 페이스북에서 개발한 자바스크립트 라이브러리로 사용자 인터페이스를 만들 수 있는 기능을 제공한다.

// App.js
import React from 'react';

function App() {
    return <h1>Hello React</h1>;
}

export default App;

20. Vue

Vue는 에반 유(Evan You)가 개발한 자바스크립트 프레임워크로 사용자 인터페이스를 만들 수 있는 기능을 제공한다.

// App.vue
<template>
    <h1>Hello Vue</h1>
</template>

<script>
export default {
    name: 'App',
}
</script>

21. Angular

Angular는 구글에서 개발한 자바스크립트 프레임워크로 사용자 인터페이스를 만들 수 있는 기능을 제공한다.

// app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    title = 'Hello Angular';
}

22. TypeScript

TypeScript는 마이크로소프트에서 개발한 자바스크립트의 상위 집합으로 정적 타입을 지원하는 기능을 제공한다.

// app.ts
function hello(name: string): string {
    return `Hello ${name}`
}

console.log(hello('TypeScript')) // Hello TypeScript

23. Next.js

Next.js는 Vercel에서 개발한 리액트 프레임워크로 서버 사이드 렌더링을 지원하는 기능을 제공한다.

// pages/index.js
export default function Home() {
    return <h1>Hello Next.js</h1>;
}

24. Nuxt.js

Nuxt.js는 Nuxt 커뮤니티에서 개발한 뷰 프레임워크로 서버 사이드 렌더링을 지원하는 기능을 제공한다.

// pages/index.vue
<template>
    <h1>Hello Nuxt.js</h1>
</template>

25. NestJS

NestJS는 Kamil Myśliwiec이 개발한 Node.js 프레임워크로 서버 사이드 렌더링을 지원하는 기능을 제공한다.

// app.controller.ts
import { Controller, Get } from '@nestjs/common'

@Controller()
export class AppController {
    @Get()
    getHello(): string {
        return 'Hello NestJS'
    }
}

26. GraphQL

GraphQL은 페이스북에서 개발한 쿼리 언어로 데이터를 요청할 때 사용하는 기능을 제공한다.

// schema.graphql
type Query {
    hello: String
}

// resolvers.js
const resolvers = {
    Query: {
        hello: () => 'Hello GraphQL',
    },
}

// index.js
const { ApolloServer, gql } = require('apollo-server')

const typeDefs = gql`
    type Query {
        hello: String
    }
`

const resolvers = {
    Query: {
        hello: () => 'Hello GraphQL',
    },
}

const server = new ApolloServer({ typeDefs, resolvers })

server.listen().then(({ url }) => {
    console.log(`Server ready at ${url}`)
})

27. MongoDB

MongoDB는 NoSQL 데이터베이스로 데이터를 저장하고 관리하는 기능을 제공한다.

// app.js
const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/test', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});

const Cat = mongoose.model('Cat', { name: String });

const kitty = new Cat({ name: 'Zildjian' });
kitty.save().then(() => console.log('meow'));

28. MySQL

MySQL은 오픈 소스 관계형 데이터베이스로 데이터를 저장하고 관리하는 기능을 제공한다.

// app.js
const mysql = require('mysql');

const connection = mysql.createConnection({
    host: 'localhost',
    user: '',
    password: '',
    database: '',
});

29. airbnb

airbnb는 에어비앤비에서 만든 자바스크립트 스타일 가이드로 코드의 품질을 향상시키는 기능을 제공한다.

// .eslintrc.js
module.exports = {
    extends: ['airbnb-base'],
    rules: {
        'no-console': 'off',
    },
};

30. Prettier

Prettier는 코드 포맷터로 코드의 일관성을 유지하는 기능을 제공한다.

// .prettierrc.js
module.exports = {
    singleQuote: true,
    semi: false,
};

odada

웹

다음 포스트

javascript 핵심 요약

javascript

javascript 핵심 요약

자바스크립트 소개

자바스크립트의 사용

자바스크립트의 기본 문법

1. 변수(Variable)

변수 이름 규칙

변수의 의미

변수 선언

1. let

2. const

3. var

2. 데이터 타입(Data Type)

- Number

- String

- Boolean

- Object

- Array

- Function

3. 연산자(Operator)

- 산술 연산자

- 대입 연산자

- 비교 연산자

- 논리 연산자

- 삼항 연산자

4. 조건문(Conditional Statement)

- if문

- if-else문

- if-else if-else문

5. 반복문(Loop Statement)

- for문

- while문

6. 함수(Function)

함수 선언

함수 표현식

화살표 함수

7. 객체(Object)

객체 생성

객체 프로퍼티

객체 메소드

8. 배열(Array)

배열 생성 & 요소

배열 메소드

9. 콜백 함수(Callback Function)

10. 이벤트(Event)

11. DOM(Document Object Model)

12. AJAX(Asynchronous JavaScript And XML)

13. ES6(ECMAScript 6)

14. Babel

15. Webpack

16. NPM(Node Package Manager)

17. Node.js

18. Express

19. React

20. Vue

21. Angular

22. TypeScript

23. Next.js

24. Nuxt.js

25. NestJS

26. GraphQL

27. MongoDB

28. MySQL

29. airbnb

30. Prettier

Javascript 입문

0개의 댓글

1. `let`

2. `const`

3. `var`