본문 바로가기
SK네트웍스 Family AI캠프 10기/Daily 회고

72일차. JavaScript & Django

초코수플레 2025. 4. 23. 18:30
더보기

 

72일 차 회고.

 

 어제 늦게 잤더니 아침에 너무 졸려서 점심을 건너뛰고 잠을 잤다. 그리고 하루 종일 집중이 되지 않고 산만한 기분이라 수업에 집중하기 힘들었다.

 

 

 

 

1. JavaScript

 

 

1-1. 프로미스

 

비동기 처리

  • 특정 코드의 연산이 끝날 때까지 기다리지 않고, 다음 코드를 먼저 실행하는 방식

 

async

  • async 키워드를 사용하면 해당 함수는 항상 프로미스를 반환한다.
  • 프로미스가 아닌 값을 반환하더라도 자동으로 이행된 프로미스로 감싸진다.
async function f() {
    return 1;
}

f().then(console.log);				// 1

 

await

  • 프로미스가 처리될 때까지 기다린 후, 결과를 반환된다.
  • async 함수 내에서만 사용할 수 있다.
async function f() {
    let promise = new Promise((resolve, reject) => {
        setTimeout(() => resolve("Success"), 1000)
    });
    let result = await promise;
    
    console.log(result);			// Success
}

f();

 

프로미스

  • JavaScript에서 비동기 작업을 처리하기 위해 사용되는 객체
  • Pending(대기)
    • 비동기 작업이 아직 완료되지 않은 상태
let promise = new Promise(function(resolve, reject) {
    // Processing
});
  • Fulfilled(이행)
    • 작업이 성공적으로 완료된 상태
let promise = new Promise(function(resolve, reject) {
    setTimeout(() => resolve("Success"), 1000);
});
  • Rejected(거부)
    • 작업이 실패한 상태
let promise = new Promise(function(resolve, reject) {
    setTimeout(() => reject(new Error("Error")), 1000);
});

 

then()

  • 프로미스가 이행(Fullfilled)되면 첫 번째 콜백 함수가 실행된다.
  • 프로미스가 거부(Rejected)되면 두 번째 콜백 함수가 실행된다.
let promise = new Promise(function(resolve, reject) {
    setTimeout(() => resolve("Success"), 1000);
});

promise.then(
    result => alert(result),			// Fullfilled
    error => alert(error)			// Rejected
);

 

catch()

  • 에러(Rejected)를 처리하는 전용 메서드
  • then()의 두 번째 인수 대신 사용할 수 있다.
let promise = new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error("Error")), 1000);
});

promise.catch(alert);

 

 

 

2. Django

 

 

2-1. Django

 

Django

  • Python 기반의 오픈 소스 웹 애플리케이션 프레임워크
  • Django를 활용하면 UI/UX, 프론트엔드, 백엔드 개발이 모두 가능하다.

 

MTV 패턴

  •  Model
    • 데이터에 대한 구조 및 비즈니스 로직을 정의한다.
    • 데이터베이스와의 상호작용을 담당한다.
  • Template
    • 사용자에게 보여지는 화면을 정의한다.
    • HTML 파일에 Django 템플릿 언어를 사용하여 데이터를 렌더링한다.
  • View
    • 사용자 요청에 대한 처리 로직을 담당한다.
    • 어떤 데이터를 어떤 템플릿에 전달할지를 결정하고, HTTP 응답을 반환한다.

 

동작 원리

  • Client
    • 브라우저에서 사용자가 요청을 보낸다.
  • Web Server
    • 정적 파일을 전달하거나 WAS로 위임한다.
  • WAS Server(Django)
    • 비즈니스 로직을 처리하고, Database와 통신한다.
  • Database
    • 실제 데이터를 저장한다.

 

 

2-2. Create Django

 

가상환경 생성

  • .venv 폴더 생성
uv venv .venv -p 3.13
.\.venv\Scripts\activate

uv pip install -r .\requirements.txt
# requirements.txt

django

 

Django 프로젝트 생성

  • config 폴더 및 manage.py 생성
django-admin startproject config .

 

Django 앱 생성

  • user 폴더 생성
python manage.py startapp user
# config/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'user'						# 추가
]

 

templates 생성

  • templates 폴더 생성
    • base, user 폴더 생성
mkdir templates
cd .\templates\
mkdir base
mkdir user
# config/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'],				# 추가
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

 

static 설정

cd ..
mkdir static
cd static
mkdir css
mkdir js
# config/settings.py

import os						# 추가

STATIC_URL = 'static/'
STATIC_PATH = os.path.join(BASE_DIR, 'static')		# 추가
STATICFILES_DIRS = (STATIC_PATH,)			# 추가

 

코드 작성

/* static/css/index.css */

p {
    color: lightseagreen;
}
// static/js/index.js

alert("Hello, World!");
<!--templates/user/index.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
</head>
<body>
    <h1>User File</h1>
    <p>Welcome to the user file page!</p>
    <p>Here you can manage your user files.</p>
    {% load static %}
    <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
</body>
</html>
# config/urls.py

from django.contrib import admin
from django.urls import path, include			# 추가

urlpatterns = [
    path('admin/', admin.site.urls),
    path('user/', include('user.urls'))			# 추가
]
# user/urls.py

from django.urls import path
from .views import index

urlpatterns = [
    path('index/', index)
]
# user/views.py

from django.shortcuts import render

def index(request):
    return render(request, 'user/index.html')

 

서버 실행

cd ..
python manage.py runserver

 

파일 구조

1_CREATE_DJANGO/
├── .venv/
├── config/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── static/
│   ├── css/
│   │   └── index.css
│   └── js/
│       └── index.js
├── templates/
│   ├── base/
│   └── user/
│       └── index.html
├── user/
│   ├── migrations/
│   │   └── __init__.py
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── requirements.txt

 

 

'SK네트웍스 Family AI캠프 10기 > Daily 회고' 카테고리의 다른 글

74일차. Django  (0) 2025.04.25
73일차. Django  (0) 2025.04.24
71일차. JavaScript  (0) 2025.04.22
70일차. HTML & CSS  (0) 2025.04.21
69일차. Linux  (0) 2025.04.18

'SK네트웍스 Family AI캠프 10기/Daily 회고' Related Articles

티스토리툴바