기본적인 웹 어플리케이션 개발

 

 

기본적으로 웹 어플리케이션 개발은 프론트엔드와 백엔드 두 가지로 나뉜다.

 

프론트엔드는 HTML, CSS, Javascript 언어로, 웹의 요소와 에셋(asset)들을 배치하고 디자인한다.

HTML과 CSS는 정적 기능을, JavaScript는 동적으로 페이지를 사용할 수 있도록 만드는 작업을 수행한다.

 

요소와 에셋은 이미지(img) 또는 그래픽(svg), 텍스트(text), 영상(media), 영역(div) 등이 있으며,

HTML 언어로 이러한 요소들을 배치하고 구조를 형성한다.

CSS는 배치된 요소들을 디자인하고 색을 입혀 꾸미는 데 사용되는 언어이다.

JavaScript는 웹 브라우저(Chrome, Firefox 등) 자체의 내장 컴파일 기능을 이용하여 페이지를 동적으로 변형하고 이벤트를 발생시키는 스크립트 언어이다.

 

백엔드는 프론트엔드 페이지와 소통하고 내부적으로 데이터를 저장 및 관리, 분산, 처리하는 작업이 수행된다.

데이터베이스, 프레임워크, 분산 처리 서버 등을 적절히 배치하여 

서버 간의 효율적인 소통 방식을 설계하고 구현하는 작업들이므로 여러 요구조건들을 필요로 한다.

 

보통 프레임워크 구성으로는 Node.js나 Spring, .NET, Laravel 등을 사용하고,
데이터베이스는 MySQL, MariaDB, MongoDB, LevelDB, Redis 등 다양하게 목적에 따라 사용한다.
분산처리나 데이터 관리 등은 ELK stack이나 Kafka, S3, Hadoop 등을 사용하는 것이 요즘 추세이다. (2021년)

 

 

https://youtu.be/44LuDg9eOtI?si=MCNnYXtEl7wS3Z3t

결합 순서, 방법이 중요!

 

require_once: 데이터 베이스에 접속하기 위한 코드 (공통적으로 쓰기 위해 바깥쪽으로 뺌)

nav: navigation, topic 테이블에서 모든 행을 하나씩 가져와서 (mysqli_fetch_assoc)

 

write.php

form: 입력 양식

 

<input id='title' type='text' name='title'>

<textarea id='description'> 여러 줄 작성할 때 사용

<input type='submit' value='전송'>

 

process.php

topic 테이블에 insert하는 것이 목표

author를 입력받지만 실제 테이블 구조에는 id (int)형으로 들어가야 함

1. user table에 있는지 확인

2. 있다면, 해당 유저의 id 값을 insert

3. 없다면, 새로운 유저 추가 & 새로운 id 값을 insert

 

 

<input type='button' onclick=자바스크립트 코드>

자바스크립트 코드 예시

' document.getElementById('body').className='black' '

 

css

body.black{

    background-color: black;

    color:white;

}