🎨 HTML/CSS/JS

🎨 HTML

HTML 문서 구조 (하나의 .html = 하나의 페이지)

HTML은 웹 페이지의 구조를 정의합니다. 웹 페이지의 기본 구조는 다음과 같습니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>프론트엔드 예제</title>
</head>
<body>
    <!-- 페이지 내용 -->
</body>
</html>

HTML 기본 요소들

  1. 헤더:
    • <h1></h1>, <h2><h2>, ... : 제목 태그
    • <p> : 문단
  2. 링크:
    • <a href="URL">링크 텍스트</a>
  3. 이미지:
    • <img src="이미지 경로" alt="이미지 설명">
  4. 리스트:
    • 순서 없는 리스트: <ul>, <li>
    • 순서 있는 리스트: <ol>, <li>
  5. 폼:
    • <form>, <input>, <button>
    • form, input, submit → 서버에 전송할 POST 양식

HTML 태그

  • 페이지 특성을 정의할 때는 <head></head> 안에 넣습니다.
  • 페이지 내용은 <body> 내용 작성 부분 </body> 안에 넣어줍니다.
  • CSS 파일은 <head> 태그 안에 <link> 태그를 이용해서 연결해 줍니다.
  • JavaScript 파일은 <body> 닫기 태그(</body>) 바로 위에 <script> 태그로 연결해 줍니다.
  • 자주 사용되는 태그
    • h1 ~ h6 : 글 제목 태그
    • p : 문단 태그
    • div : 레이아웃 별 태그 구분 및 그룹화 태그
    • a : 링크를 연결해 주는 태그
    • br : 한 줄 띄어주는 태그
    • form : 서버에 전송할 데이터를 묶어주고 전송 포맷을 맞춰주는 태그
    • input : 서버에 전송할 데이터를 입력받는 태그
    • button : 화면 버튼을 만들어주는 태그

🎨 CSS

CSS 문법

CSS는 HTML 요소의 스타일을 정의하는 데 사용됩니다. 기본 문법은 다음과 같습니다 :

선택자 {
    속성: 값;
}

 

예시 :

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

 

CSS 선택자

  • 태그 선택자: body, h1, p 등
  • 클래스 선택자: .class-name
  • 아이디 선택자: #id-name
  • 선택자 + 스타일 지정 방식으로 동작

 

태그 지정: 태그명 { 속성 이름1: 속성 값1; 속성 이름2: 속성 값2; }

# CSS
# 태그 설정 예시
footer {
    position: static; /* 위치 설정 : 기본값, 문서 흐름 유지 */
    bottom: 0; /* 아래쪽에 고정 */
    width: 100%; /* 너비 100% */
    margin-top: 15px; /* 위쪽 여백 */
    margin-bottom: 10px; /* 아래쪽 여백 */
    padding: 1rem 0; /* 위아래 여백 */
    text-align: center; /* 글자 가운데 정렬 */
    color: #6c757d; /* 글자색 (흐린 회색) */
}

 

아이디 지정(#): #아이디명 { 속성 이름1: 속성 값1; 속성 이름2: 속성 값2; }

# HTML
# 아이디 지정 예시
# id_username {
        width: 100%;
    }

 

클래스 지정(.): .클래스명 { 속성 이름1: 속성 값1; 속성 이름2: 속성 값2; }

# CSS
# 클래스 지정 예시
.alert-danger {
    padding-top: 0.5rem;   /* 위쪽 패딩 줄이기 */
    padding-bottom: 0.5rem;  /* 아래쪽 패딩 줄이기 */
    line-height: 1.2; /* 줄 간격 줄이기 */

 

CSS 적용 위치

  • 인라인 스타일
    • HTML 요소 내에서 직접 스타일을 정의하는 방법
    • style 속성을 이용해 요소에 직접 CSS 스타일 적용
<p style="color: blue;">파란색</p>

 

  • 내부 스타일 시트
    • HTML 문서의 <head> 섹션 내에 <style> 태그를 이용해 정의된 스타일
<style>
	/* 주석 */
		p {
	    color: blue;
	  }
</style>

 

  • 외부 스타일 시트
    • 별도의 CSS 파일을 생성하여 웹 페이지에 링크하는 방법
    • 여러 HTML 문서에서 동일한 스타일을 적용할 때 사용
<link rel="stylesheet" href="style.css">

🎨 JavaScript(JS)

JavaScript 문법

JavaScript는 웹 페이지에서 동적인 기능을 추가하는 데 사용됩니다. 기본 문법은 다음과 같습니다:

  • 변수 선언 :
    • let, const, var (추천: let, const)
    예시:
let message = "안녕하세요!";
const PI = 3.14;

 

  • 함수 정의 :
function greet() {
    console.log("안녕하세요!");
}

 

  • 조건문 :
if (x > 10) {
    console.log("x는 10보다 큽니다.");
} else {
    console.log("x는 10보다 작거나 같습니다.");
}

 

  • 이벤트 처리 :
document.getElementById("button").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

 

JavaScript 적용 위치

  • <script> 태그
    • JavaScript 코드를 HTML 문서에 포함시키기 위해 <script> 태그를 사용
    • <script> 태그는 HTML 문서의 <head> 태그 내부나 <body> 태그 내부에 배치 가능 (주로 body 닫기 태그 바로 위에 위치)
    • 외부 JavaScript 파일을 링크하는 것도 가능
  • 내부 스크립트
<script>
	console.log("Hello, world!");
</script>

 

  • 외부 스크립트
<script src="script.js"></script>

 

JavaScript 사용

  • 두 가지 기능 위주로 사용
    • 화면의 동적 움직임 담당(예: 위 코드의 h2 태그 클릭 시, 이탤릭체 ↔ 일반 서체 변환 코드 부분)
    • 서버와 통신 담당(예: 위 코드의 fetch 부분)

🎨 JavaScript 통신

fetch를 사용하는 방법

JavaScript (fetch)

  • fetch API 개요:
// 버튼 클릭 시 서버에 요청을 보내는 함수
document.getElementById('getMessageButton').addEventListener('click', function() {
    fetch('http://localhost:8000/api/user', {
	    method: 'POST',
	    headers: {
	        'Content-Type': 'application/json',
	        'Authorization': 'Bearer token123'
	    },
	    body: JSON.stringify({ name: '김가나', age: 20 })
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

 

  • 역할: fetch API는 네트워크 요청을 보내고, 그 결과를 처리하는 최신 자바스크립트 내장 함수.
             이 API는 Promise를 반환하여 비동기 처리의 편리함을 제공.
  • 특징:
    • 비동기적 처리: fetch는 요청을 보내고 기다리지 않고 바로 다음 코드를 실행
    • 간단한 문법: fetch는 기존의 XMLHttpRequest보다 훨씬 간결하게 요청을 처리
    • Promise 기반: Promise를 반환하기 때문에 .then(), .catch()로 응답을 처리
    • fetch() 함수 반환:
      • Response 객체:
        • fetch() 함수가 반환하는 첫 번째 결과로 Response 객체를 나타냄
        • 서버로부터 받은 전체 HTTP 응답
        • HTTP 상태 코드, 헤더, 본문(body) 등을 포함
          • response.ok: 응답이 성공(상태 코드 200~209)이면 true를 반환
          • response.status: HTTP 상태 코드를 반환 (예: 200, 204)
          • response.header: 응답의 HTTP 헤더를 반환
          • response.body: 서버 응답의 본문을 나타내지만 아직 처리되지 않은 상태. 데이터를 읽으려면 body를 변환해야 함
      • Data 객체:
        • response.json()은 서버 응답의 본문을 JSON 형태로 파싱 한 데이터를 반환
        • 응답의 본문(body)만 추출한 값으로 서버에서 실제로 전달하려는 데이터
        • response.json()은 비동기적으로 동작하며, JSON 형식의 데이터를 자바스크립트 객체로 변환

axios를 사용하는 방법

axios는 fetch보다 더 직관적이고 사용하기 쉬운 HTTP 클라이언트 라이브러리입니다.

사용하려면 먼저 axios를 설치해야 합니다. 브라우저에서 사용하려면 CDN을 통해 포함할 수 있습니다.

 

JavaScript (axios)

  • axios API 개요:

CDN을 통한 axios 추가

<!-- CDN을 통해 axios를 추가 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 

JavaScript (axios)

// 버튼 클릭 시 서버에 요청을 보내는 함수
document.getElementById('getMessageButton').addEventListener('click', function() {
    axios.post('http://localhost:8000/api/users', {
        name: '김가나',
        age: 20
    }, {
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer token123'
        }
    })
    .then(response => {
        console.log('Success:', response.data);  // 서버로부터 받은 데이터 출력
    })
    .catch(error => {
        console.error('Error:', error);  // 오류 처리
    });
});

 

  • 특징:
    • 비동기 처리: axios는 Promise를 반환하므로, 비동기적으로 요청을 보내고 .then(), .catch() 메서드를 통해 결과를 처리할 수 있습니다.
    • 간단한 문법: axios는 HTTP 요청을 보내고 응답을 처리하는 데 필요한 코드가 간결하고 직관적입니다.
    • HTTP 요청 처리:
      • axios.post()는 POST 요청을 보낼 때 사용됩니다. 두 번째 인자로 데이터를, 세 번째 인자로 요청 헤더 등을 설정합니다.
      • axios는 HTTP 응답을 response 객체로 반환합니다.
    • 응답 객체 (response):
      • response.data: 서버로부터 받은 실제 응답 데이터 (서버가 전달한 JSON 데이터)
      • response.status: HTTP 상태 코드 (예: 200, 404, 500)
      • response.headers: 응답의 HTTP 헤더
      • response.config: 요청에 사용된 설정 정보

 

▼ Django 서버 API 통신 테스트 시 고려해야 할 사항

더보기
1. CORS (Cross-Origin Resouce Sharing) 설정 :
Django 서버가 다른 도메인의 요청을 허용하려면 CORS 설정이 필요.
django-cors-headers 패키지 설치하여 설정 Shell복사

 

pip install django-cors-headers

 

설정 (settings.py):

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ALLOW_ALL_ORIGINS = True  # 모든 도메인에서 요청 허용

 

인증 및 권한:

Django REST Framework에서 인증이 필요한 경우, Fetch API의 headers에 인증 토큰을 포함해야 함.

예를 들어, JWT 토큰을 사용하는 경우 Authorization: Bearer <token> 헤더를 추가

 

2. 비동기 처리:
Fetch API는 비동기적으로 동작하므로, async / await를 사용하여 코드를 직관적으로 사용 가능
// Async/Await을 사용한 GET 요청
async function fetchUsers() {
    try {
        const response = await fetch('http://localhost:8000/api/users/');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log('Fetched users:', data);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchUsers();

🎨 화면 구현하기

V0을 이용한 프런트엔드 화면 구현하기

회원 가입 및 로그인 후 프롬프팅을 통해서 프런트엔드 화면 구현 가능
🔗 https://v0.dev/

🎨 Front end - Back end 통신

1. VScode의 LiveServer Extension 사용하기 → 로컬 테스트용

조건

  • VS code
  • Live Server(extension)

구조

역할 도메인 포트 설명
프론트엔드 http://localhost 5500 프론트엔드 서버
백엔드 http://localhost 8000 Django API 서비스

 

2. NGINX 정적 파일 및 프록시 사용하기 → 서버 배포용

조건

  • 두 개의 도메인
    • 프런트엔드 → domain.com
    • 백엔드 → api.domain.com
  • Django는 Gunicorn으로 실행하거나 NGINX로 프록시 연결

구조

역할 도메인 포트 설명
프론트엔드 http://domain.com 80 정적 파일(index.html 등)
백엔드 http://api.domain.com 8000 (또는 리버스 프록시로 80) Django API 서비스

 

폴더 구조(예시)

/backend
 └── django_project
/frontend
 ├── index.html
 ├── style.css
 └── script.js

 

구성도

사용자 → Nginx (80/443포트)
            ├── / (정적 파일 서비스) → index.html, main.js
            └── /api → Django 서버 프록시 (Gunicorn or 직접 연결)
[ 브라우저 ]
     │
     ├── 요청 (fetch)
     │   URL: http://api.localhost/api/data/
     │   메서드: GET, POST 등
     │   헤더: 인증 토큰 등
     │
     ▼
[ Nginx (리버스 프록시) ]
     │
     ▼
[ Gunicorn + Django ] (localhost:8000)
     │
     ▼
[ 응답 반환 ]
     │
[ 브라우저가 응답 처리 및 렌더링 ]

 

설정 순서

1. Django CORS 설정

# bash
pip install django-cors-headers
# python
CORS_ALLOWED_ORIGINS = [
    "http://localhost", # 프론트엔드 도메인
]

# 개발 편하게 전체 허용할 땐
# CORS_ALLOW_ALL_ORIGINS = True

 

2. Gunicorn으로 Django 백엔드 실행

# bash
gunicorn --bind 127.0.0.1:8000 프로젝트이름.wsgi:application

 

3. Nginx 리버스 프록시 설정

# bash
sudo vi /etc/nginx/sites-available/backend
# YAML
# backend
server {
    listen 80;
    server_name api.domain.com;  # 또는 localhost로 테스트 가능

    location / {
        proxy_pass http://domain:8000;  # Gunicorn이 돌아가는 곳
        
        # 필수 헤더 (클라이언트 정보 전달)
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

 

4. 심볼릭 링크 생성 후 NGINX 재시작

# bash
sudo ln -s /etc/nginx/sites-available/backend /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

'🔥 공부 > 🎨 Front-end' 카테고리의 다른 글

[🎨Front-end] DRF와 JS 연동 방법  (1) 2025.03.24
[🎨Front-end] HTML, CSS 기초  (0) 2025.02.20

🐾Recent posts

티스토리툴바