[플레이데이터 SK네트웍스 Family AI 캠프 10기] 16주차 회고

16주 차 학습

 

 

1. Web

 

Web Standards

• HTML
  • 웹 페이지 구조 정의
• CSS
  • 웹 페이지 스타일 및 레이아웃 지정
• Script
  • 웹 페이지 동작 및 상호작용 구현

 

 

2. HTML

 

HTML Elements

• Element
  • HTML 문서의 기본 구성단위
  • 콘텐츠를 감싸는 태그로 구성
• Tag
  • 요소의 시작과 끝을 나타내는 기호
• Content
  • 태그 내부에 포함되는 실제 내용

 

Website Structure

• <header>
  
  • 문서나 섹션의 머리말 영역
• <nav>
  • 사이트 내 다른 페이지나 섹션으로 연결되는 내비게이션 메뉴
• <main>
  • 문서의 주요 콘텐츠가 위치하는 영역
• <aside>
  • 보조 정보나 사이드 콘텐츠를 위한 영역
• <footer>
  • 문서나 섹션의 하단 영역

 

 

3. CSS

 

 

CSS

• HTML 문서에 디자인과 레이아웃을 적용하는 스타일 시트 언어
• 웹 페이지의 시각적인 표현 제어

 

CSS Framework

• Bootstrap
  • 미리 정의된 클래스를 활용해 빠르게 UI 구성 가능
• Tailwind CSS
  • 유틸리티 클래스 기반
  • 자유도 높은 커스터마이징 가능

 

 

4. JavaScript

 

JavaScript

• 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
• 동적인 웹 기능 구현에 사용

 

변수

• let
  • 중복 선언 불가
  • 재할당 가능
• const(상수)
  • 중복 선언 불가
  • 재할당 불가

 

자료형

• String
  • 큰따옴표(") 또는 작은따옴표(')로 감싼 문자 데이터
• Number
  • 정수 및 실수
• Boolean
  • true / false
• Undefined
  • 값이 할당되지 않은 상태
• Null
  • 명시적으로 "없음"을 나타내는 값
• NaN(Not a Number)
  • 숫자가 아닌 값을 숫자로 연산할 때 발생

 

배열(Array)

• 배열 선언

// 배열 선언
let arr = [1, 2, 3, 4, 5, 6, 7];

• 배열 길이 확인

arr.length;					// 7

• 데이터 접근

arr[0];						// 1
arr.slice(2, 5);				// [3, 4, 5]

• 데이터 추가

arr.push(8);					// [1, 2, 3, 4, 5, 6, 7, 8]
arr.unshift(0);					// [0, 1, 2, 3, 4, 5, 6, 7, 8]

• 데이터 삭제

arr.pop();					// [0, 1, 2, 3, 4, 5, 6, 7]
arr.shift();					// [1, 2, 3, 4, 5, 6, 7]

• 데이터 검색

arr.indexOf(3);					// 2
arr.find(item => item === 3);			// 3
arr.filter(item => item < 3);			// [1, 2]

 

반복문

• while

let i = 0;
while (i < 3) {
    console.log(i);
    i++;
}
// 0 1 2

• for

for (let i = 0; i < 3; i++) {
    console.log(i);
}
// 0 1 2

• break

let sum = 0;
while (true) {
    let value = + prompt("Enter a number.", "");
    if (!value) break;
    sum += value;
}
console.log("Sum: " + sum);

• continue

for (let i = 0; i < 10; i++) {
    if (i % 2 == 0) continue;
    console.log(i);
}
// 1 3 5 7 9

 

함수(Function)

• 함수 선언

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

• 함수 표현식

let showMessage = function(name) {
    console.log(`Hello, ${name}`);
};

• 화살표 함수

let showMessage = (name) => {
    console.log(`Hello, ${name}`);
};

• 매개변수

function sumAll(...args) {
    return args.reduce((sum, current) => sum + current, 0);
}
console.log(sumAll(1));				// 1
console.log(sumAll(1, 2, 3));			// 6

• 스프레드 문법

let arr = [1, 3, 5];
console.log(Math.max(...arr));			// 5

• 콜백 함수

function ask(question, yes, no) {
    if (confirm(question)) yes()
    else no();
}

function showOk() {
    alert("Agree");
}

function showCancel() {
    alert("Disagree");
}

ask("Do you agree?", showOk, showCancel);

• 클로저 함수

function makeCounter() {
    let count = 0;
    
    return function() {
        return count++;
    };
}

let counter = makeCounter();

console.log(counter());				// 0
console.log(counter());				// 1
console.log(counter());				// 2

• 호출 스케줄링

// setTimeout()
function showDelayedMessage() {
    console.log("Hello World");
}
setTimeout(showDelayedMessage, 1000);

// setInterval()
let timerId = setInterval(() => console.log("Tick-Tok"), 2000);
setTimeout(() => {
    clearInterval(timerId);
    console.log("Stop");
}, 5000);

 

클래스(Class)

• 클래스 생성

class User{
    constructor(name) {
        this.name = name;
    }
    showMessage() {
        console.log(this.name);
    }
}

let ine = new User("INe");
ine.showMessage();				// INe

• 클래스 상속

class Animal {
    constructor(name) {
        this.name = name;
        this.speed = 0;
    }
    run(speed) {
        this.speed = speed;
        console.log(`${this.name}'s speed: ${this.speed}`);
    }
    stop() {
        this.speed = 0;
        console.log(`${this.name}: Stop`);
    }
}

class Cat extends Animal {
    hide() {
        console.log(`${this.name}: Hide`);
    }
}

let cat = new Cat("Black cat");

cat.run(5);					// Black cat's speed: 5
cat.stop();					// Black cat: Stop
cat.hide();					// Black cat: Hide

• 오버라이딩

class Cat2 extends Animal {
    hide() {
        console.log(`${this.name}: Hide`);
    }
    
    stop() {
        super.stop();
        this.hide();
    }
}

let cat2 = new Cat2("Black cat");

cat2.run(5);  
cat2.stop();
/*
Black cat's speed: 5
Black cat: Stop
Black cat: Hide
*/

 

에러 핸들링(Error Handling)

try {
    console.log("Try");
} catch (e) {
    console.log("Catch");
} finally {
    console.log("Finally");
}
/*
Try
Finally
*/

try {
    console.log("Try");
    if (confirm("Make Error")) strange_code();
} catch (e) {
    console.log("Catch");
} finally {
    console.log("Finally");
}
/*
Try
Catch
Finally
*/

 

Window 객체

• Window
  • 브라우저의 최상위 객체
  • 브라우저 창과 관련된 다양한 기능 제공
• DOM(Document Object Model)
  • HTML 문서를 객체로 표현하여 페이지 요소 제어
• BOM(Browser Object Model)
  • 문서 외 브라우저 자체 정보 접근

 

프로미스(Promise)

• 비동기 작업을 처리하기 위한 JavaScript 객체
• 상태
  • Pending
    • 비동기 작업이 아직 완료되지 않은 상태
  • Fulfilled
    • 작업이 성공적으로 완료된 상태
  • Rejected
    • 작업이 실패한 상태

 

 

5. Django

 

MTV 패턴

• Model
  • 데이터에 구조 및 비즈니스 로직 정의
  • DB와 상호작용
• Template
  • 사용자에게 보여지는 화면 정의
  • HTML + 템플릿 언어
• View
  • 요청 처리 및 데이터 전달
  • HTTP 응답 반환

 

동작 원리

• Client
  • 브라우저에서 요청 전송
• Web Server
  • 정적 파일 제공 또는 WAS로 위임
• WAS Server(Django)
  • 비즈니스 로직 처리
  • DB와 통신
• Database
  • 실제 데이터 저장

 

Create Django

• 가상환경 생성

uv venv .venv -p 3.13
.\.venv\Scripts\activate

• Django 설치

uv pip install django

• Django 프로젝트 생성

django-admin startproject config .

• 앱(App) 생성

python manage.py startapp user

• templates 생성

mkdir templates
mkdir templates/user

• static 설정

mkdir static
mkdir static/css
mkdir static/js

• 서버 실행

python manage.py makemigrations
python manage.py migrate
python manage.py runserver

 

---

16주 차 회고

 

 

Keep

 

• 빅데이터분석기사 필기 결과가 공식적으로 공개되어 합격했다. 이제 2개월 후에 있을 실기 시험 준비를 시작해야 한다.
• 매일 운동을 조금씩 하다 보니 체력이 붙는 것이 느껴진다.

 

Problem

 

• 여러 회사에 지원서를 제출하다 보니 내가 무엇이 부족한지 많이 느껴진다. 이를 보완해야 할 필요성을 느끼고 있다.
• 해야 할 일이 많지만, 어디서부터 시작해야 할지 몰라 막막하다.

 

 

Try

 

• 가장 중요한 것은 수업을 꾸준히 따라가는 것이다. 남은 기간 동안 수업에 충실해야 한다.
• 그 후에는 내가 관심 있는 데이터 분석 쪽에 관련된 공부를 더 해야 한다.
• 캐글이나 데이콘 대회에 참가하거나 추가로 공부할 부분을 찾아보는 것이 필요하다.