우리 FISA AI엔지니어링 12주차 과정

Monday(03.24)

 

JavaScript 개념 정리

 

1. 변수와 데이터 타입

(1) 변수 선언 방식

• var: 함수 스코프, 재선언/재할당 가능 
• let: 블록 스코프, 재선언 불가, 재할당 가능
• const: 블록 스코프, 재선언 불가, 재할당 불가 

(2) 데이터 타입

JavaScript의 데이터 타입은 크게 원시 타입과 참조 타입으로 나뉜다. 코틀린이랑 비슷하네

• 원시 타입 (Primitive Type)
  • Number: 정수, 부동소수점 
  • String: 문자열 
  • Boolean: 논리값 
  • null: 값이 없음을 나타냄
  • undefined: 변수가 선언되었지만 값이 할당되지 않음
  • Symbol: 유일한 값 생성 
  • BigInt: 큰 정수를 다룰 때 사용 
• 참조 타입 (Reference Type)
  • Object: 키-값 쌍을 가지는 객체
  • Array: 배열 
  • Function: 함수
  • Map, Set: 키-값 저장 구조

 

2. 타입 변환 (Type Conversion)

(1) 암시적 형 변환 (Type Coercion)

console.log(1 + "2");  // "12" (숫자가 문자열로 변환)
console.log("5" - 3);  // 2   (문자열이 숫자로 변환)
console.log(true + 1); // 2   (true는 1로 변환)
console.log(false + "test"); // "falsetest" (false가 문자열로 변환)

(2) 명시적 형 변환 (Type Casting)

console.log(Number("123")); // 123
console.log(String(123));   // "123"
console.log(Boolean(0));    // false
console.log(Boolean(1));    // true

 

 

3. 연산자 (Operators)

(1) 산술 연산자

let a = 10, b = 3;
console.log(a + b);  // 13
console.log(a - b);  // 7
console.log(a * b);  // 30
console.log(a / b);  // 3.3333...
console.log(a % b);  // 1
console.log(a ** b); // 1000 (거듭제곱)

(2) 비교 연산자

console.log(10 == "10");  // true (값만 비교)
console.log(10 === "10"); // false (값과 타입 비교)
console.log(10 != "10");  // false
console.log(10 !== "10"); // true

(3) 논리 연산자

console.log(true && false); // false (AND)
console.log(true || false); // true (OR)
console.log(!true);         // false (NOT)

 

4. 조건문 

(1) if-else

let age = 20;
if (age >= 18) {
  console.log("성인입니다.");
} else {
  console.log("미성년자입니다.");
}

(2) switch-case

let grade = "A";
switch (grade) {
  case "A":
    console.log("우수");
    break;
  case "B":
    console.log("보통");
    break;
  default:
    console.log("미흡");
}

 

 

5. 반복문 

(1) for 문

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

(2) while 문

let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

(3) do-while 문

let num = 0;
do {
  console.log(num);
  num++;
} while (num < 5);

(4) forEach (배열 순회)

let arr = [1, 2, 3];
arr.forEach((num) => console.log(num));

 

6. 함수 (Functions)

(1) 함수 선언문

function add(a, b) {
  return a + b;
}
console.log(add(3, 5));

(2) 함수 표현식

const subtract = function(a, b) {
  return a - b;
};
console.log(subtract(10, 3));

(3) 화살표 함수

const multiply = (a, b) => a * b;
console.log(multiply(2, 4));

 

 

7. 배열 (Array) 조작

(1) 기본 배열 메서드

let fruits = ["apple", "banana", "cherry"];
console.log(fruits.length); // 3
console.log(fruits[1]);     // "banana"
fruits.push("grape");       // 마지막에 추가
fruits.pop();               // 마지막 요소 제거
fruits.shift();             // 첫 번째 요소 제거
fruits.unshift("orange");   // 첫 번째 요소 추가

(2) 고차 함수 (map, filter, reduce)

let numbers = [1, 2, 3, 4, 5];

// map: 각 요소를 변환
let squared = numbers.map(num => num ** 2);
console.log(squared); // [1, 4, 9, 16, 25]

// filter: 조건에 맞는 요소만 추출
let evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

// reduce: 누적 값 계산
let sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

 

 

8. 객체 (Object)와 JSON

(1) 객체 생성

let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};
console.log(person.name); // "Alice"
person.greet(); // "Hello, Alice"

(2) JSON 변환

let obj = { name: "John", age: 30 };
let jsonString = JSON.stringify(obj);  // 객체 → JSON 문자열
console.log(jsonString); // '{"name":"John","age":30}'

let newObj = JSON.parse(jsonString);  // JSON 문자열 → 객체
console.log(newObj.name); // "John"

 

 

9. 비동기 프로그래밍 (Asynchronous Programming)

(1) 콜백 함수 (Callback)

function fetchData(callback) {
  setTimeout(() => {
    console.log("데이터 가져오기 완료");
    callback();
  }, 2000);
}
fetchData(() => console.log("다음 작업 실행"));

(2) Promise

let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("완료!"), 1000);
});
myPromise.then((result) => console.log(result));

(3) async/await

async function fetchData() {
  return "데이터 로딩 완료";
}
fetchData().then(console.log);

 

수업 끝나고, 요즘 너무 안 쉬고 달려서 번아웃이 달려 오는 것 같아 바로 한강으로 갔다.

 찬 바람 맞으니까 좀 살 것 같네 ...

 

Tuesday(03.25)

 

Ajax vs HTMX vs fetch

항목	Ajax	HTMX	fetch
방식	JS 코드로 직접 fetch나 XMLHttpRequest 사용	HTML 태그에 속성만 붙이면 자동 요청	JS 코드로 fetch 사용 (XHR 비대체)
제어권	개발자가 완전히 JS로 제어	서버가 렌더링 결과를 보내고 HTMX가 반영	개발자가 요청을 보내고 응답을 처리하는 코드 작성
학습 난이도	중 (JS 코드 필요)	쉬움 (HTML로만 비동기 처리 가능)	중 (JavaScript 기반, 비동기 처리)
유연성	최고 (복잡한 UI 가능)	제한적이지만 간단한 UI에 강함	매우 유연 (복잡한 API 통합 및 처리 가능)
DOM 조작	직접 해야 함	HTMX가 자동으로 해줌	직접 해야 함 (응답 받은 데이터를 이용해 DOM 수정)
스타일	JS 중심 개발 방식	HTML 중심 개발 방식	JS 중심 개발 방식
비동기 처리	XMLHttpRequest나 fetch로 비동기 처리	HTML 태그 속성으로 비동기 처리	비동기 방식으로 데이터를 처리, Promise 기반
응답 처리	응답을 받은 후 JS 코드로 처리	서버에서 반환한 HTML을 DOM에 반영	응답을 받은 후 .then()으로 처리, 또는 async/await 사용
브라우저 호환성	오래된 브라우저에서도 작동	최신 브라우저에서만 작동	최신 브라우저에서만 작동

 

Ajax

fetch('/chat', {
  method: 'POST',
  body: JSON.stringify({ prompt: "금리 예측해줘", months: 3 }),
  headers: {
    "Content-Type": "application/json"
  }
}).then(res => res.json())
  .then(data => {
    // DOM 직접 수정
    document.getElementById("chat-box").innerHTML += `<div>${data.response}</div>`
  });

• 직접 API 호출 + 결과 파싱 + DOM 조작까지 다 해야 한다.
• 복잡한 로직, 조건 분기 많은 UI에 좋다.

 

HTMX

<form
  hx-post="/chat"
  hx-target="#chat-box"
  hx-swap="beforeend"
>
  <input type="text" name="prompt">
  <input type="number" name="months">
  <button type="submit">전송</button>
</form>
<div id="chat-box"></div>

• JS 없이 HTML에 속성 붙이면 자동으로 서버에 요청 보내고 응답을 DOM에 꽂아줌
• 간단한 UI 구현, 서버사이드 렌더링에 적합

 

Fetch

fetch('/chat', {
  method: 'POST',
  body: JSON.stringify({ prompt: "금리 예측해줘", months: 3 }),
  headers: {
    "Content-Type": "application/json"
  }
}).then(res => res.json())
  .then(data => {
    // DOM 직접 수정
    document.getElementById("chat-box").innerHTML += `<div>${data.response}</div>`
  });

• 모던한 비동기 처리: fetch는 Promise 기반, 비동기 처리가 간편
• 유연성: 복잡한 API 통합 및 처리 로직
• 응답 처리의 직관성: async/await 구문을 사용하면동기 코드처럼 작성 가능

 

언제 사용할지?

• AJAX: 복잡한 비즈니스 로직을 처리하거나 여러 API를 동시에 호출해야 하는 경우
• HTMX: 서버사이드 렌더링을 선호하거나 페이지의 주요 동작을 간단하게 만들 때
• fetch: 서버에서 응답을 받아 복잡한 데이터 처리가 필요하거나 비동기 요청 시

 

 

Wednesday(03.26)

 

https://koreatstm.tistory.com/274

Flask 웹 애플리케이션의 구조와 동작 원리

 

 

Thursday(03.27)

 

https://koreatstm.tistory.com/275

flask with ORM

 

 

Friday(03.28)

 

https://koreatstm.tistory.com/276

Flask에서 템플릿 사용하기