JavaSript 요약

1. 시작
   자바스크립트라는 언어는 내가 프로그래밍을 제대로 배우기 시작한 첫번째 언어라고 할 수 있다. 처음 배운 언어는 학교에서 배운 C언어긴 하지만 단순히 터미널에 출력되는 것만을 확인하는 C언어는 도무지 흥미가 가지 않았고, 적당히 학점 따는 용도로 공부했던 거 같다. 하지만 자바스크립트는 브라우저에 직접 띄워서 결과를 사용할 수 있고, 웹사이트를 만드는데 관심이 있던 터라, 학교에서 가르쳐주지 않았음에도 스스로 찾아보고 공부하게 되었다. 그래서 멀티캠퍼스에서 자바스크립트를 공부할 때는 물 흐르듯이 실습을 해결했던거 같다.

2. 변수 지정
   기본적으로 const, let, var이 있다.
   const는 값이 변하지 않는 변수를, let은 변하는 수 그리고 블록 {} 내에서 유효한 변수를, var은 변하는 변하는 수 블록이 필요하지 않은 변수에 선언한다. 다른 프로그래밍 언어처럼 int, String 등 데이터 타입을 따로 지정하지 않아도 자바스크립트에서 알아서 구분해준다.

3. 셀렉터
   document.querySelector로 HTML에서 지정한 태그나 클래스, 아이디를 자바스크립트에 가져올 수 있다. 이렇게 가져온 대상은 여러 이벤트를 사용하여 웹사이트 상에 동적으로 보여 줄 수 있다. 예를 들어 innerText로 태그 안에 텍스트에 변화를 줄 수 있고, innerHTML로 태그랑 텍스트를 함께 변화를 줄 수 있다. onClick으로 해당 요소를 클릭했을때의 함수를 작성해 그에 해당하는 이벤트를 줄 수 있다.

4. 연산자
   연산자에는 할당 연산자, 산술 연산자, 비교 연산자, 비트 연산자, 논리 연산자가 있다.

할당 연산자
말 그대로 변수에 값을 할당하는 연산자이다. =를 이용하는 연산을 말한다.

산술 연산자
덧셈, 뺄셈, 곱셉, 나눗셈 같이 숫자끼리 산술을 통해 계산을 할 수 있다.

비교 연산자
부등호로 비교를 하는 연산을 말한다.

비트 연산자
이진수를 사용하여 연산을 하는 것을 말한다.

논리 연산자
참 거짓으로 나타낼 수 있는 연산자를 말한다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_operators
나는 간단하게 설명했지만 이 문서를 보면 일일히 쓰기에는 예시가 정말 많으니 찾아보면 되겠다.

5. if 조건문
   조건에 따라 실행하는 코드를 다르게 한다.

if (조건) {
  // 조건이 참일 때 실행되는 코드
} else {
  // 조건이 거짓일 때 실행되는 코드
}

여기서 else if를 덧붙이면 조건을 더 넣을 수 있다.

조건 ? 참일때 결과 : 거짓일 때 결과

조건문은 이런식으로도 표현할 수 있는데 삼항 연산자라고 부른다.

6. switch case문
   경우의 수가 많아지면 if문으로는 힘들 수 있다. 그래서 case문을 통해 다양한 값이 나올 때의 결과를 출력할 수 있다. 다만, 기준값이 하나라서 상황에 따라 적절한 상황일때만 쓰는 게 좋을 듯 하다.

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("It's Monday!");
    break;
  case "Tuesday":
    console.log("It's Tuesday!");
    break;
  default:
    console.log("It's another day of the week.");
}

7. 반복문
   for문을 통해 반복을 수행할 수 있다.

for (초기화; 조건식; 증감식) {
  // 반복 동안 실행될 코드
}

반복 시작 전에 변수를 초기화 시키고
조건 true일때만 실행되게 조건식을 넣는다.
증감식은 반복한 후에 실행되며 반복 변수를 업데이트한다.

8.while
조건이 참인 동안 반복을 실행한다. for문과 차이점은 반복 횟수를 모를때도 사용할 수 있다는 점이다.

while (조건) {
  // 조건이 true일 때 실행되는 코드
}

9.배열
하나의 변수에 여러개의 값을 담을 때는 쓴다. 각자의 값은 인덱스를 통해 접근할 수 있고, 인덱스는 0부터 시작한다. 배열 선언에는 2가지 방법이 있다.

const fruits = ["apple", "banana", "cherry"];
const numbers = new Array(1, 2, 3, 4, 5);

또한, 다양한 메서드가 있는데 length를 통해 배열의 길이를 알 수 있고 push를 통해 기존 배열의 끝에 값을 추가할 수도 있다.

console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
console.log(fruits.length); // 3

fruits[2] = "orange"; // 배열의 세 번째 요소를 변경
fruits.push("grape"); // 배열의 끝에 "grape"를 추가

console.log(fruits); // ["apple", "banana", "orange", "grape"]

10. 객체
    키와 값으로 이루어진 집합을 말한다. 다양한 유형의 데이터를 포함할 수 있으며, 자바스크립트에서 매우 중요한 데이터 유형 중 하나이다. 선언하는 방법은 두 가지이다.

const person = {
  name: "John",
  age: 30,
  job: "developer"
};

const person = new Object();
person.name = "John";
person["age"] = 30;
person.job = "developer";
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }

또한 객체는 함수를 포함할 수 있으며 객체 메서드라고 불린다.
11. 클래스
자바스크립트도 객체 지향을 지원하는 프로그래밍 언어로서 클래스를 가지고 있다. 클래스를 사용하여 객체를 생성하고 관리할 수 있으며, 클래스는 생성자, 메서드, 속성 등을 포함하고 있다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// 클래스 인스턴스 생성
const person1 = new Person("John", 30);
const person2 = new Person("Alice", 25);

// 메서드 호출
person1.sayHello(); // "Hello, my name is John and I'm 30 years old."
person2.sayHello(); // "Hello, my name is Alice and I'm 25 years old."

클래스는 상속방아서 다른 클래스로 확장할 수 있다.

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 부모 클래스의 생성자 호출
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying.`);
  }
}

// 상속된 클래스의 인스턴스 생성
const student = new Student("Bob", 22, "A");

// 부모 클래스의 메서드 호출
student.sayHello(); // "Hello, my name is Bob and I'm 22 years old."

// 새로운 메서드 호출
student.study(); // "Bob is studying."

이로써 코드의 재사용성을 향상시키는 데 도움이 된다.
12. 함수
코드를 그룹화하여 생산성을 높이는 역할을 한다. 함수를 정의하고 호출하는 방법은 4가지 가 있다
매개 변수 있고 리턴값 없을떄

function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 함수 호출
greet("John"); // "Hello, John!"

매개 변수 없고 리턴값 없을때

function greet() {
  console.log(`Hello, John!`);
}

// 함수 호출
greet(); // "Hello, John!"

매개 변수 있고 리턴값 있을때

function greet(name) {
  String hi = `Hello, ${name}!`;
  return hi;
}

// 함수 호출
String hello = greet("John"); // "Hello, John!"
console.log(hello);

매개 변수 없고 리턴값 있을때

function greet() {
  String hi = `Hello, John!`;
  return hi
}

// 함수 호출
String hello = greet(); // "Hello, John!"
console.log(hello);

화살표 함수로 간단하게 선언해줄 수 있다. 또한 변수에도 함수를 넣을 수 있다.

const greet = (name) => `Hello, ${name}!`;

console.log(greet("John"));

13. 이벤트 리스너
    HTML에 있는 클래스, id를 셀렉터로 지정하여 해당 요소의 값을 사용자가 여러 이벤트를 발생시킬 수 있는 함수를 말한다.

  // 버튼 요소 가져오기
  const myButton = document.getElementById("myButton");

  // 이벤트 리스너 등록
  myButton.addEventListener("click", function() {
    alert("Button clicked!");
  });

이벤트리스너의 첫번째에는 해당하는 상황을 넣어주고, 두번째에는 유저가 해당 상황을 발생시켰을 경우의 이벤트를 함수로서 넣어준다.

14. AJAX
    웹페이지에서 서버와 통신하는 기술을 의미한다. AJAX를 사용하면 페이지 전체를 새로고침하지 않더라도 데이터를 서버로부터 가져올 수 있으며 더 동적이고 사용자 친화적으로 만들어준다.

// Fetch API를 사용한 GET 요청
fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

// Fetch API를 사용한 POST 요청
fetch("https://api.example.com/save", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ key: "value" }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

fetch를 통해 https://api.example.com/data에서 데이터를 GET방식으로 받아올 수 있으며 데이터를 가공하여 웹페이지에 띄울 수 있다. POST방식으로는 반대로 웹페이지에서 데이터를 서버로 보내서 백엔드에서 처리할 수 있도록 한다.

15. 마치며
    글이 너무 길다. 쓰다가 지쳐서 몇번을 끊어썼다. 하지만 다 쓰고 나니 보람도 있고, 다시 복습하는 느낌도 나서 도중에 그만두지는 않을것이다. 다음은 자바 편이 될거 같다.