두 번째 코딩 일기(2023-03-16)
함수 공부
오전 시간에는 함수 유형에 대해서 배웠습니다. 지금까지 배워왔던 함수들에 대해서 복습하고
새로운 함수들에 대해서 배우는 시간을 가졌습니다.
선언적 함수/화살표 함수로 전환
{
func = () => {
document.write("실행되었습니다.")
}
func();
}익명 함수/화살표 함수로 전환
{
const func = () => {
document.write("함수가 실행되었습니다.");
}
func();
}매개 변수 함수/화살표 함수로 전환
{
func = (str) => {
document.write(str);
}
func("실행되었습니다.");
}리턴값 함수/화살표 함수로 전환
{
func = () => {
const str= "실행되었습니다.";
return str;
}
document.write(func());
}
위의 기본적인 함수들을 응용하여 사용하는 방법도 배웠습니다.
익명 함수 + 매개변수 + 리턴값/화살표 함수
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}익명 함수 + 매개변수 + 리턴값 + 괄호 생략/화살표 함수
{
const func = str => {
return str;
}
document.write(func("실행되었습니다."));
}익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략/화살표 함수
{
const func = str => str;
document.write(func("실행되었습니다."));
}선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략/화살표 함수
{
func = str => str;
document.write(func("실행되었습니다."));
}
마지막으로 가장 어려웠던 부분입니다.
객체 생성자 함수
{
function func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
this.result = function(){
document.write(this.num + ". " + this.name + "가" + this.word + "되었습니다.");
}
}
//인스턴스 생성
const info1 = new func("1","함수","실행");
const info2 = new func("2","자바스크립트","실행");
const info3 = new func("3","리액트","실행");
info1.result();
info2.result();
info3.result();
}이 부분을 기점으로 어렵게 느껴졌던 것 같습니다.
해설
위 코드는 JavaScript에서 객체 생성자 함수를 정의하고 인스턴스를 생성하여 사용하는 예제입니다. 객체 생성자 함수는 function 키워드를 사용하여 정의되며, 함수 내부에서 객체의 속성과 메서드를 정의할 수 있습니다.
여기서 정의된 객체 생성자 함수는 func 이라는 이름으로 정의되며, num, name, word라는 세 개의 속성을 갖습니다. result라는 메서드도 포함되어 있습니다.
객체 생성자 함수 내부에서 정의된 this 키워드는 생성된 객체를 가리킵니다. 따라서 객체 생성자 함수를 통해 생성된 인스턴스들은 각각 다른 값을 가진 num, name, word 속성을 갖게 됩니다.
인스턴스 생성은 new 키워드를 사용하여 이루어집니다. 위 코드에서는 const 키워드를 사용하여 info1, info2, info3 세 개의 인스턴스를 생성하고 있습니다.
마지막으로, result 메서드를 통해 생성된 인스턴스의 속성값을 조합하여 결과를 출력하고 있습니다. 이 예제에서는 document.write 메서드를 사용하여 브라우저 화면에 출력하고 있습니다.
MySQL
오후에 배운 MySQL 부분입니다. MySQL은 암기를 우선으로 하고 응용을 해야 한다고 느꼈습니다.
youName 중에 "김" 또는 "이" 시작하는 이름 불러오기
SELECT * FROM member WHERE youName LIKE '김%' OR youName LIKE '이%';나이가 25세 이상이면서 김씨 성을 갖고 있는 불러오기
SELECT * FROM member WHERE youName LIKE '김%' AND youName LIKE '이%';나이가 25세 이상이고 아이디가 2 또는 아이디가 9인 멤버 불러오기
SELECT * FROM member WHERE (memberID = 2 OR memberID = 9) AND youAge >= 25;회원 데이터를 5개만 불러오기
SELECT * FROM member LIMIT 5;회원 나이 10개만 불러오기(중복된 나이 X)
SELECT DISTINCT youAge FROM member;이름만 불러오기(내림차순)
SELECT youName FROM member ORDER BY youName DESC이름만 불러오기(올림차순)
SELECT youName FROM member ORDER BY youName ASC
레이아웃
웹디자인기능사 실기 문제로 나오는 레이아웃을 직접 만들어 보았습니다.
HTML
<body>
<div id="wrap">
<div id="aside">
<div class="nav">로고</div>
</div>
<div id="main">
<div class="slider">이미지 슬라이드</div>
<div id="contents">
<div class="cont1">공지사항</div>
<div class="cont2">배너</div>
<div class="cont3">바로가기</div>
</div>
<div id="footer">
<div class="foot1">로고</div>
<div class="foot2">하단 메뉴</div>
<div class="foot3">Copyright</div>
</div>
</div>
</div>
</body>
CSS
<style>
* {
margin: 0;
padding: 0;
color: #fff;
}
#wrap {
width: 1000px;
height: 650px;
display: flex;
}
#aside {
width: 20%;
height: 650px;
background-color: #fa2a2a;
}
.nav {
height: 150px;
background-color: #faa4a4;
}
#main {
width: 80%;
height: 650px;
background-color: #24ffab;
}
.slider {
height: 350px;
background-color: #31ffff;
}
#contents {
display: flex;
}
.cont1 {
width: 33.333%;
height: 200px;
background-color: #8822fc;
}
.cont2 {
width: 33.333%;
height: 200px;
background-color: #f14519;
}
.cont3 {
width: 33.333%;
height: 200px;
background-color: #aeff17;
}
#footer {
height: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.foot1 {
width: 20%;
height: 100px;
background-color: #2230f5;
}
.foot2 {
width: 80%;
height: 50px;
background-color: #fd208e;
}
.foot3 {
width: 80%;
height: 50px;
background-color: #ff0000;
}
</style>
기본적인 요소들만 사용하여 사이트를 만들어 보았습니다.
완성된 이미지