지난 14주 동안 파이썬부터 시작해 여러 라이브러리를 거쳐 최종 LLM 모델 구성에 도달하기까지 많은 길을 걸어왔다.
이제 모델링에서 빠져나와 시야를 확장시켜 볼 단계이다.
프론트엔드 기초를 배우고, Django를 통해 웹 애플리케이션을 구성해 볼 것이며 AWS를 이용해 서버를 열고 앱을 실행시켜 볼 것이다.
이번주는 프론트엔드에 관한 이야기이다.
개요
웹 페이지를 구성하는 기초 언어는 html로 이루어져있다. 이는 마크업 기반 언어로 여러 태그와 추가적인 속성을 통해 문서를 작성하는 언어이다.
그렇지만 위 html 만으로는 상세한 웹 페이지 디자인을 하기가 번거로웠고 그렇게 나온 것이 CSS, 단조로운 웹 페이지에 동적 활동을 가능케해준 것이 JavaScript 이다.
HTML (Hyper Text Markup Language)
내가 생각하는 html 의 가장 큰 특징은 문서의 구조가 태그에 의해 짜여진다는 것이다.
전체를 담는 <html> 태그부터 페이지를 나누는 <head>, <body> 태그, 세부 주제를 담는 <hX>, <p> 등 여러 다양한 태그를 통해 작성될 문자열의 짜임새를 결정할 수 있다. 짜임새뿐만 아니라 <table>, <ul>, <ol>, <img> 등을 통해 담고자하는 데이터를 여러 형식으로 표현할 수도 있다.
여기까지가 이제 기본 내용이고.... html을 공부하면서 어렵다! 생각한 부분은 태그의 다양성과 더불어 그 속성의 다양성이었다.
html 언어는 여러 태그와 그에 맞는 속성을 배워나가는 과정이다.
예를 들어보자.
이전 머신러닝 과정에서 크롤링을 할 때 <a> 태그와 <img> 태그에 대해 본 적이 있었다.
<a> 태그의 경우 "anchor" 라는 뜻으로 주소를 담는 역할을 해주며 그 href, hypertext reference 속성을 통해 주소를 담아줄 수 있다.
<img> 태그의 경우 뜻 그대로 이미지를 담는 역할을 하며 src, source 속성을 통해 이미지의 주소를 담고 alt, alternative text 를 통해 이미지 로딩 실패 시 대체 텍스트 등을 설정할 수 있다.
Form 태그
이번에 처음 본 태그 중 가장 복잡하다고 느낀 것이 form 태그이다.
이 태그는 웹 페이지에서 사용자의 입력을 받기 위한 태그로 name=value 꼴의 말하자면 딕셔너리 꼴을 가지고 있다. form 태그는 내부에 여러 입력 태그를 가질 수 있으므로 여기서 말하는 name 이란 각 입력 태그의 속성으로 정해진 값을 말한다.
<form action="sending url" method="get/post">
~
</form>고유 속성으로는 그래서 사용자 입력을 어디로 보낼건데? 어떻게 보낼건데? 의 속성값들이 존재한다고 보면 될 것 같다.
내부에는 여러 입력 태그가 들어갈 수 있다.
<form action="sending url" method="get/post">
이름 : <input type="text" name="name" id="name" placeholder="이름을 입력하세요"></input><br>
나이 : <select type="text" name="age" id="age">
<option value="10" selected>10</option>
<option value="20">20</option>
<option value="30">30</option>
</select><br>
<input type="submit" value="제출"></input>
<input type="reset" value="초기화"></input>
</form>
그치만 너무 단조롭지 않은가...? 디자인을 추가해보자.
CSS (Cascading Style Sheets)
html 언어에는 class 라는 속성이 존재한다. 이는 모든 태그에 공용으로 존재하는 속성으로 서로 다른 태그 객체들을 내 마음대로 주무를 수 있는 기준을 만들어주는 속성이라고 볼 수 있겠다.
더 하위 개념으로 id 라는 속성이 존재하는데 이 역시 모든 태그에 공용으로 존재하지만 여러 태그가 공유할 수 없고 오직 하나의 id 당 하나의 태그만이 존재할 수 있다.
이러한 속성값들을 이용해 나만의 디자인을 만드는 것이 CSS 이다.
div { /* 태그 지정 */
color:blue;
}
.class_name { /* 클래스 지정 */
margin:100px;
}
#id_name { /* id 지정 */
padding:10px;
}이렇게 별도의 .css 확장자로 저장된 파일은 html 문서의 head 부분에서 <link href="css_url", rel="stylesheets"> 태그를 이용하여 문서에 적용시킬 수 있다.
html의 head 부분에 <style> 태그로서 들어가거나 태그마다 들어가는 것이 가장 기본적인 방법이지만 코드가 길어져 가독성이 떨어지고 보수가 힘들어지기에 외부 CSS 파일을 불러오는 방식을 사용해보자.
그 중 가장 유명했던 것은 부트스트랩 으로 "반응형 브레이크포인트" 를 구현한 외부 프레임워크이다. 이는 전체 화면을 12개로 분할하여 그에 맞춰 창의 위치를 조정할 수 있도록 설계되었으며 container 클래스, row, col 등의 클래스를 제공해준다.
<div class="container mt-5"> <!--margin_top:5px;-->
<div class="row pt-3"></div> <!--padding_top:3px;-->
<div class="col border">1</div> <!--border_line-->
<div class="col border">2</div>
<div class="col border">3</div>
</div>부트스트랩을 이용하면 위와 같이 사전 정의된 여러 클래스명을 이용하여 간편하게 디자인을 사용할 수 있다. 다만! 부트스트랩이 좋았던 이유는 반응형 브레이크포인트 덕분이라는 것.
JaveScript
페이지의 동적인 파트를 맡아주기위해 채택된 Javascript 이다. 현재는 Node.js 등의 보급으로 범용성이 좋아졌지만 본래 프론트를 위한 언어로 개발되었다.
html 태그 내에 Event 를 캐치하는 onclick 등의 속성을 통해 Event 발생 시 작동시킬 코드를 html 의 body 부분에 <script> 태그로서 작성해놓는 것이 기본 구조이다. 어차피 얘도 길어서 외부 문서 받아
DOM (Document Object Model)
DOM 이란 문서내의 요소들을 이야기하며 최상위 window 부터 하위 document, 그 아래 태그들까지를 모두 포함한다. 이들의 구성이나 내용 등을 바꾸는 것이 JavaScript의 주 역할인 것이다.
python으로 프로그래밍에 입문한 나는 ipynb에서 cell 단위 실행에 너무 익숙해져있었다. 여기서는 로그 기록을 찍고 싶으면 console.log, 알림창을 띄우고자하면 alert("~"), 문서에 내용을 적고싶다면 document.write("~") 등 기록을 확인하는 기본 방법이 너무나 달랐다.
이 부분을 공부하면서 최상위 요소인 window 가 생략되어 window.alert 구나.. 라는 등의 내용을 배웠다.
예시 코드
자바스크립트의 내용은 초면인 나에게 너무나 깊기에.... 회원가입 아이디, 비밀번호를 입력받아 입력값의 유형을 검사하고 제출하는 정도의 예시만 만들어보자.
<body>
<div class="container mt-5">
<!-- 회원 가입창 -->
<form name="form1" action="/add" onsubmit="return checkSub()">
<input type="text" class="border" placeholder="id" name="id" id="id"><br>
<input type="text" class="border" placeholder="password" name="pwd" id="pwd"><br>
<input type="num" class="border" placeholder="phone number" name="phone" id="phone"><br>
<input type="submit" value="회원가입" class="btn btn-primary">
</form>
</div>
<script>
function checkSub() {
// DOM으로 접근_by name
let id = document.form1.id.value;
// CSS로 접근_by tag
let pwd = document.querySelector("div>form>input:nth-child(3)");
if (pwd.value.length < 4) {
alert("비밀번호는 4자리 이상입니다.");
pwd.focus();
return false;
}
// id로 접근_by id
let phone = document.getElementById("phone");
if (phone.value !== 11) {
alert("휴대폰 번호는 11자리입니다.");
phone.focus();
return false;
}
alert("회원가입 성공");
return true;
}
</script>
</body>name 속성은 DOM 객체로 접근하기 위함이고, tag 나 id 등을 이용하여 값들에 접근할 수도 있다. 예시를 보고 참고해서 써도 너무 어렵다.... 너무 다르게 생겼어 ㅜ
나중에 조금 더 본격적으로 자바스크립트를 활용할 날이 오면 그때 다시 차근히 공부해봐야겠다.
