10월 31일부터 11월 6일까지.
국비지원 부트캠프 첫주차를 보냈다.
2주 전에 전역하고, 드디어 내 일상에 중심이 잡혔다.
개발과는 좀 거리가 먼 삶을 살다가 다시 웹을 공부하니까, 매우 오랜만에 만난 친구를 보는 느낌이었다.
이 친구랑 친했던거 같은데... 하면서 이야기 나누니 반갑고 편안하고 재밌는?
아무튼 그런 1주를 보냈다. 내년 3월 4학년 복학때까지, 정말 많은 것을 배워갈 수 있겠다는 생각이 들었다.
========================
[ 웹개발 종합반 ]
1주차에는
웹 페이지를 구성하는 기본적인 요소에 대해 학습했다.
웹 페이지의 뼈대를 잡아주는 HTML
HTML 요소들을 꾸며주는 CSS
HTML + CSS 조합의 정적인 페이지에 HTML 조작을 통해, 움직임을 만들어주는 JavaScript
딱 이런 삼대장 친구들을 주로 다루었다.
HTML을 다루는 것은 생략하고.
CSS를 다루는 방법에 대해 간단히 요약해보겠다.
CSS를 통해 HTML 요소를 꾸며주려면,
내가 꾸며줄 HTML 요소를 지칭을 할 수 있어야 한다.
<button class="myBtn"> 이걸 꾸며줘 </button>
이렇게 class 태그를 통해서, 내가 꾸며주고 싶은 버튼에 이름을 부여할 수 있다.
이 버튼을 꾸며주기 위해서, HTML <head> </head> 태그 안에 있는
<style> </style> 태그 안에서, 이렇게 myBtn의 속성값들을 내가 설정해줄 수 있다.
.myBtn{
color : red;
}
=============================
JavaScript를 통해 HTML 요소들을 다루는 것을 이야기 해보겠다.
JavaScript로 HTML 요소를 제어하는 방법은 2가지 종류가 있다.
1) HTML 요소에 id 속성을 부여하여, JavaScript를 통해 해당 요소를 제어하는 것
<ul id="names-q3">이렇게 해놓으면,
<script> </script>. 내에서 JavaScript를 통해,
"names-q3" 이라는 id를 가진 HTML 요소를 찾을 수 있고, 조작할 수 있다.
<div class="mypost" id="post-box">이렇게 CSS 를 통해 조작할 수 있는 "class" 속성과,
JavaScript를 통해 조작할 수 있는 "id" 속성를 동시에 줄 수 도 있다.
2) HTML 요소에 onclick 등등의 속성을 부여하여, 조건부로 JavaScript의 함수를 통해 요소를 제어하는 것
<button onclick="close_box()" type="button" class="btn btn-outline-secondary">닫기</button>onclick 이라는 속성을 통해,
JavaScript에서 close_box 라는 함수를 정의해서, 버튼이 클릭될 때 작동하는 함수를 만들 수 있다.
function close_box() {
$('#post-box').hide();
}$ 은 아래 서술할 jQuery 를 이용한 구문이다.
특히, CSS나 JavaScript를 그냥 내 스스로 조작할 수 있는 능력도 중요하지만
"바퀴를 재발명하지 마라" 라는 격언이 있듯이,
이미 세상에는 라이브러리라는 형태로, 다양한 기능을 편리하게 사용할 수 있도록 개발 결과물들이 있다.
BootStrap / jQuery 등이 있다.
======================
bootstrap 을 CDN 형식으로 페이지에 가져와서, 예쁘게 디자인 된 CSS를 직접 배운 CSS 지식을 통해서 활용해보았다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><이것이 bootstrap을 CDN 형식으로 내 웹 페이지에 가져오는 코드이다>
부트스트랩을 통해 이미 예쁘게 디자인 된 CSS 코드를 사용할 때도, 기본적인 CSS 지식은 필요하다.
이미 어떤 템플릿이 있더라도, 내 프로젝트에 커스터마이징 하는 작업이 필요하기 때문이다.
역시 남들이 만들어놓은 것을 가져와서 쓸 때도, 기본적인 나의 지식이 필요하단걸 느꼈다.
===============
jQuery 를 통해,
기존 JavaScript가 HTML을 다루던 방식을
1) 좀 더 편리하고, 직관적이며
# 기존 Javascript
document.getElementById("element").style.display = "none";
# jQuery
$('#element').hide();
2) 브라우저 간에 호환성 있게
- jQuery 가 있기 전에 브라우저 마다, JavaScript 사용하는 방식이 상이해서
MS Edge 용으로 개발한 웹사이트가, Google Chrome에서는 동작되지 않는 등
호환성 문제가 있었다.
진행할 수 있다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
이렇게 jQuery를 CDN 형식으로 웹 페이지에서 사용할 수 있다.
jQuery 를 통해 Ajax 를 사용할 수 있는데,
이에 대해서는 좀 더 정리가 필요해, 다음에 정리해서 올려보려 한다.
======================
[ 총평 ]
일단, 내일배움캠프를 시작한 나 자신을 칭찬한다.
내년 3월 복학까지, 비효율적으로 시간을 사용할 뻔 했는데
말년휴가 나올 때부터 조금씩 정보를 찾아보고 모아서
국비지원 부트캠프에 막차로 들어온 나 자신.. 칭찬한다.
나보다 훨씬 더 잘하고, 경험이 풍부한 팀원들이나 캠프 대원들도 많이 있지만
사람은 뭐든 한만큼 성장하는 것이고, 구속감&조급함을 줘봤자 더 느리게 성장한다는 것을 알고 있다.
그저 즐기고, 한만큼 & 시행착오 하는만큼 성장하는 것을 받아들이고 앞으로 나아가야겠다 :)