1. 좋았던 점(Liked)
css 끝, javascript 시작!
가장 어렵고 답답(?)하게 느껴졌던 css 학습 일정이 끝나고 드디어 javascript로 넘어갔다. 물론 javascript가 쉽다는 이야기는 아니지만, css보다는 javascript가 좀 더 편하고 익숙하기 때문에 너무 신나고 앞으로 배울 내용들이 너무 기대됐다. 확실히 내 맘대로 잘 변경되지 않는 css보다는 몇 번 배워보고 사용해봤던 javascript가 훨씬 익숙했고 재밌었다. jQuery는 처음 배워봤지만 기존 javascript의 DOM 구조를 더 편하게 사용할 수 있도록 만들어진 라이브러리이기 때문에 배우고 사용하는데 훨씬 편리했다. (그런데 요즘에는 거의 사용하지 않는 추세라는데 왜 그럴까... 한번 알아봐야겠다...) 그리고 마지막 날인 금요일에 React.js 기초를 살짝 맛봤다. 처음 배우는 내용이기도 했고, 기존 javascript에서 한 단계 업그레이드된 내용들이어서 살짝 어렵고 복잡한 느낌이 있었다. 하지만 이는 처음이니까 어쩔 수 없는 것이고, 앞으로 수업에 더 집중하고 복습도 더 열심히 해야겠다!
eclispe 끝(이 아니고 잠시 중단), vscode 시작!
금요일부터 React.js 수업이 진행되었기 때문에 통합 개발 환경(IDE)을 기존에 사용하던 eclipse에서 visual studio code로 변경하였다. 이전에 eclipse에서 git을 연동하여 사용해본 적이 없고 뭔가 익숙지 않아서 그동안 배운 내용들(HTML, CSS, Javascript, jQuery)을 아직 GitHub 원격 레포지토리에 올리지 못했다. 조만간 구글링 해서 연결해서 올려야지.. 생각만 하다가 결국 vs code로 넘어오게 되었다.
eclipse에 비해 vs code는 너무나도 익숙하고 편리하여 git 연동이 무척 쉬웠다. React를 배우는 동안에는 git commit/push 뿐만 아니라 환경설정 같은 부분도 매우 쉽고 편하게 사용할 수 있을 것 같다. 하지만 조만간 Java를 학습하게 되는데 그때는 다시 eclipse를 사용한다고 하니 eclipse를 통한 git 사용법도 빨리 익히고 적응할 필요가 있다.
2. 배운 것들(Learned)
반응형 웹
'반응형 웹'은 웹 사이트의 내용을 그대로 유지하면서, 다양한 화면(디바이스) 크기에 맞게 웹 사이트를 표시하는 방법이다. css에서는 이를 위한 몇 가지 스타일 속성들을 지원하고 있다.
1) viewport
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale="1">
<style>
h1 {
font-size : 5vw;
text-align : center;
}
</style>
</head>- meta 태그의 name 속성에 "viewport" 값을 작성한다.
- css style 속성을 줄 때 단위를 vw로 사용하면 '전체 화면 크기 대비 몇 퍼센트(%)의 크기로 해당 값을 지정'할 것인지 표현할 수 있다.
- user-scalable=yes : 사용자가 모바일에서 화면을 조작(확대/축소)할 수 있도록 설정한다.
- initial-sclae=1 : 맨 처음에 등장하는 화면의 크기(배수)를 설정한다.
2) 미디어 쿼리
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width:500px) {
h1 {
font-size : 10px;
text-align : center;
}
}
</style>
</head>- 미디어쿼리(@media)를 사용하기 위해서는 meta 태그의 name 속성에 "viewport" 값을 작성해야 한다.
- style 태그 내부에서 @media라는 키워드와 중괄호({})를 사용하여 속성을 적용할 특정 화면 조건을 설정한다.
- screen : 브라우저 화면에 나타낼 때
- print : 프린트 미리보기 화면에 나타낼 때
- tv : TV 화면에서 보일 때
- aural : 음성 장치에서 나타날 때
- max-width : 화면 최대 가로크기 지정(=해당 크기보다 작은 화면에서만 설정이 적용되도록 지정, 그 이상 커지면 속성 적용이 안 됨!) -> 반응형 화면을 만들기 위해서 if - else if문처럼 밑으로 다중 조건을 적용하여 사용.
jQuery
jQuery는 javascript 언어에서 특정 기능을 추가한 라이브러리로, javascript의 event 처리와 DOM 구조 표현을 좀 더 간단하게 사용할 수 있다는 장점이 있다. 사용법은 해당 링크 (http://jquery.com/download/)에서 다운로드 받은 js 파일을 프로젝트 폴더 내로 옮긴 뒤, HTML head 부분에서 script 태그를 선언하면서 src 속성으로 링크를 걸어주면 된다.
<head>
<script src="jquery-3.6.1.min.js">
</script>
</head>
간단한 jQuery 문법의 구조와 기본적인 템플릿은 아래와 같다.
// 기본적인 jqeury 문법
$("css_선택자_문법").jquery함수();<head>
<script src="jquery-3.6.1.min.js"></script>
<script>
// window.onload = function(){} 과 동일한 역할!
$(document).ready(function() {
// 해당 블록 내부에서 jquery 문법 사용!
});
</script>
</head>
jQuery 문법에서는 내부적으로 리스트(배열) 요소들을 반복할 때 each() 함수를 사용한다. (javascript에서는 forEach문 사용) 그리고 jQuery의 여러 함수들(= css(), html(), text() 등등)은 인자의 개수에 따라 getter 함수, setter 함수로 적절히 바꾸어 사용할 수 있다. (Method Overloading)
$(document).ready(function() {
// getter (인자가 1개인 경우)
alert($("h1").css("color"));
// setter (인자가 2개인 경우)
$("h1:first").css("color", "red");
$("h1:last").css("color", "blue");
$("h1:eq(1)").css("color", "green");
var cols = ['red', 'orange', 'yellow', 'green', 'blue', 'navy', 'purple'];
// css도 함수를 받아서 동적으로 서로 다른 색상을 지정할 수 있다
$("h1").css("color", function(i) {
// 7개 반복 시마다 색상값 리턴
return cols[i];
});
// each 함수 사용하여 내부 요소 반복 실행
// this는 javascript 키워드이므로 jqueyr의 css()함수를 사용할 수 없음!
// 따라서 this를 jquery 객체로 변경하기 위해 $(this)를 사용함!
$("h1").each(function(){ alert( $(this).css("color") ); });
});
다양한 jQuery 예제
$(document).ready(function() {
// id가 second인 태그 선택하여 빨간색 글씨로 변경
$("#second").css("color", "red");
// class가 red인 태그 선택하여 빨간색 글씨로 변경
$(".red").css("color", "red");
// h1태그를 모두 선택하여 빨간색 글씨로 변경
$("h1").css("color", "red");
// h1태그에 포함된 a태그 선택하여 빨간색 글씨로 변경
$("h1 a").css("color", "red"); // 직접 포함이 아니더라도 모든 포함관계
$("h1 > a").css("color", "red"); // 바로 밑에 포함 (직접포함)
// h1태그와 td 태그들 모두 선택 (복수선택)
$("h1, td").css("color", "red");
// h1태그 중에 id가 'second'인 것
$("h1#second").css("color", "red")
// h1태그 중에 class가 'red인 것
$("h1.red").css("color", "red");
// [인풋태그]
// input 태그 중에 type 속성이 "text"인 것 선택 (type 속성 지정 : [])
$("input[type=text]").css("color", "red");
$("input:text").css("color", "red"); // type은 input 태그의 필수 속성임! (동일)
// input 태그 중에 type 속성이 "button"인 것 선택
$("input[type=button]").css("color", "red");
$("input:button").css("color", "red");
$("input:button, button").css("color", "red"); // 둘 다 선택
// input type에 'e'를 포함(*) 태그 선택 -> 3개
$("input[type*=e]").css("color", "red");
//input type에 'e'로 시작(^) 태그 선택 -> 3개
$("input[type^=e]").css("color", "red");
//input type에 'el'로 종료($) 태그 선택 -> 3개
$("input[type$=el]").css("color", "red");
// input type이 'checkbox'의 옆 글자 색상 변경 -> label 태그 사용 필요
$("input:checked").parent().css("color", "red");
// [테이블 태그]
$("th").css("color", "red");
$("th:first").css("color", "yellow"); // 여러개의 th중 첫번째(first) th에만 적용!
$("th:last").css("color", "orange");
$("th:first-child").css("color", "yellow"); // 테이블마다 첫번째 것 (테이블 단위가 됨)
$("th:last-child").css("color", "orange"); // 테이블마다 두번째 것 (테이블 단위가 됨)
//$("table > th").css("color", "red"); // 선택안됨 (table > tbody > tr > th)
$("table th").css("color", "red"); // 선택됨
// 세 번째 행(tr)만 색 변경
$("tr:eq(3) td").css("color", "red");
// 세 번째 행(tr)보다 큰 행
$("tr:gt(3) td").css("color", "green");
// 세 번째 행(tr)보다 작은 행
$("tr:lt(3) td").css("color", "blue");
// 3의 배수 행
$("tr:nth-child(3n)").css("color", "red");
// [select-option 태그]
// 현재 선택된 option 데이터의 글씨('2') 색깔을 빨간색으로 변경
$("select option[selected=selected]").css("color", "red"); // selected=selected 인 경우에만 가능(selected로만 되어있기 때문에 값을 찾지 못함!)
$("select option:selected").css("color", "red"); // selected, selected=selected 둘 다 가능!
});
3. 아쉬웠던 점(Lacked)
이번 주 과제 중 가장 어려웠던 부분은 '현재 창(idinput.html)에서 새로운 창(idcheck.html)을 띄워 서로 다른 두 창에서 값을 주고받는 것'이었다. 구글링도 해보고 동료들에게 조언도 구한 뒤 얻은 결론은 바로 window.opener 객체를 사용하는 것이었다.
처음에 혼자서 opener 사용법을 구글링하여 적용해봤는데, 새 창에서 입력한 URL이 제대로 나타나지 않고 blank로 나타나는 문제가 발생했다. 무엇이 잘못된 건지 좀 더 찾아보고 고민해보다가 잘 안 되어서 결국 동료의 코드를 참고하여 다시 작성하였고 결국에는 문제를 해결했다.
opener는 굉장히 유용하고 중요한 기능이다. 이는 'ID 중복 검사창' , '도로명주소 입력창' 등 다양한 기능들을 구현할 때 사용할 수 있을 것 같다. 아직 왜 그때 URL 값이 blank로 나왔는지 명확히 파악하지 못했으므로 이와 관련해서 정리하여 포스팅을 해보면 좋을 것 같다.
4. 앞으로 바라는 점(Longed for)
핑계일 수도 있지만... 생각보다 공부해야 할 것이 많고 들어야할 인강이 많아서 필수적인 학습일지 외에 추가적인 포스팅을 하기 어려웠다. 그래도 꼭 시간을 내어 중요한 개념, 잘 몰랐던 개념만이라도 블로그에 정리하여 올릴 수 있도록 더 노력해야겠다. 지금은 아직 익숙지도 않고 귀찮아서 추가 포스팅까지는 잘 못하지만... 한두 번 시간내어 하다 보면 적응되고 흥미도 생겨 꾸준히 할 수 있을 것이라고 생각한다. 그때가 올 때까지 조금만 더 노력하자!
* 유데미 바로가기 : https://bit.ly/3V220ri
* STARTERS 취업 부트캠프 공식 블로그 보러가기 : https://blog.naver.com/udemy-wjtb
본 후기는 유데미-웅진씽크빅 취업 부트캠프 3기 백엔드 과정 학습 일지 리뷰로 작성되었습니다.
'유데미 스타터스 3기 > 학습일지' 카테고리의 다른 글
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 6주차 학습 일지 (0) | 2023.01.01 |
|---|---|
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 5주차 학습 일지 (2) | 2022.12.25 |
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 4주차 학습 일지 (0) | 2022.12.18 |
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 3주차 학습 일지 (0) | 2022.12.11 |
| 유데미 스타터스 취업 부트캠프 3기 - 백엔드 1주차 학습 일지 (1) | 2022.11.27 |