Front/JavaScript

javascript 핵심 요약

oodada 2024. 5. 30. 17:48

javascript 핵심 요약

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

자바스크립트 소개

<!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)

  • 자바스크립트의 데이터 타입이란 변수에 저장할 수 있는 값의 종류를 의미한다.
  1. Number : 숫자 타입으로 정수, 실수, NaN, Infinity 등의 값을 저장한다.
  2. String : 문자열 타입으로 문자열을 저장한다.
  3. Boolean : 불리언 타입으로 참(true)과 거짓(false)을 저장한다.
  4. Object : 객체 타입으로 객체를 저장한다.
  5. Array : 배열 타입으로 배열을 저장한다.
  6. 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)를 대상으로 연산을 수행하는 기호이다.
  1. 산술 연산자 : 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)
  2. 대입 연산자 : 할당(=), 더하기 후 할당(+=), 빼기 후 할당(-=), 곱하기 후 할당(*=), 나누기 후 할당(/=), 나머지 후 할당(%=)
  3. 비교 연산자 : 같다(===), 같지 않다(!==), 크다(>), 작다(<), 크거나 같다(>=), 작거나 같다(<=)
  4. 논리 연산자 : 논리곱(&&), 논리합(||), 논리부정(!)
  5. 삼항 연산자 : 조건 ? 참 : 거짓
  6. 타입 연산자 : 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)

  • 조건문은 조건식을 판단하여 해당하는 코드 블록을 실행하는 제어문이다.
  1. if문 : 조건식이 참일 때 코드 블록을 실행한다.
  2. if-else문 : 조건식이 참일 때 코드 블록을 실행하고 거짓일 때 다른 코드 블록을 실행한다.
  3. 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)

  • 반복문은 조건식이 참일 때 코드 블록을 반복 실행하는 제어문이다.
  1. for문 : 조건식이 참일 때 코드 블록을 반복 실행한다.
  2. 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

객체 메소드

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

배열 메소드

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의 줄임말로 자바스크립트의 표준을 의미한다.
  1. let, const : 변수를 선언할 때 사용하는 키워드로 let은 변수를 선언할 때 사용하고 const는 상수를 선언할 때 사용한다.
  2. 화살표 함수 : 함수를 선언할 때 사용하는 키워드로 function 키워드를 생략하여 함수를 선언한다.
  3. 템플릿 리터럴 : 문자열을 표현할 때 사용하는 키워드로 백틱(`)을 사용하여 문자열을 표현한다.
  4. 구조 분해 할당 : 배열이나 객체의 값을 추출하여 변수에 할당하는 기능이다.
  5. 클래스 : 객체를 생성할 때 사용하는 키워드로 class 키워드를 사용하여 객체를 생성한다.
  6. 모듈 : 코드를 모듈화하여 재사용할 수 있는 기능이다.
// 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,
}
티스토리 친구하기