오늘코딩일기(오늘한거 정리하기)

오전에 자바스크립트 를 배웠습니다. 객체생성자 함수,프로토타입 함수, 객체리터럴 함수, 즉시 실행 함수, 파라미터 함수, 아규먼트 함수, 재귀함수, 콜백 함수가 있습니다. 

객체생성자 함수 예시입니다.

{
    function Func(num, name, com){
        this.num = num;
        this.name = name;
        this.com = com;

        this.result = () =>{
            document.write(`${this.num}.${this.name}가 ${this.com}되었습니다.`);
        }
    }
    //인스턴스 생성
    const info1 = new Func("100", "함수", "실행");
    const info2 = new Func("200", "자바스크립트", "실행");

    //실행문
    info1.result();
    info2.result();
}

객체 생성자 함수는 자바스크립트에서 객체 생성자 함수는 새로운 객체를 생성할 때 사용되는 함수입니다. 객체 생성자 함수는 일반적으로 대문자로 시작하며, new 연산자를 사용하여 호출됩니다.

프로토타입 함수 예시입니다.

{
    function Func(num, name, word){
        this.num = num;
        this.name = name;
        this.word = word;
    }

    Func.prototype.result = function(){
            document.write(this.num + "." +this.name + "가 " + this.word + "되었습니다1.");
    }

    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, com){
        this.num = num;
        this.name = name;
        this.com = com;
    }
    Func.prototype = {
        result1 : function(){
            document.write(`${this.num}.${this.name}가 ${this.com}되었습니다.`);
        },
        result2 : function(){
            document.write(`${this.num}.${this.name}가 ${this.com}되었습니다.`);
        },
        result3 : function(){
            document.write(`${this.num}.${this.name}가 ${this.com}되었습니다.`);
        },
    }

    const info1 = new Func("100", "함수", "실행");
    const info2 = new Func("200", "자바스크립트", "실행");
    const info3 = new Func("300", "리엑트", "실행");

    info1.result1();
    info2.result2();
    info3.result3();
}

JavaScript에서 객체리터럴 함수는 객체를 생성하는 방법 중 하나는 객체 리터럴을 사용하는 것입니다. 객체 리터럴은 중괄호 {} 안에 속성(key)-값(value) 쌍을 나열하여 객체를 생성합니다.

즉시 실행 함수 예시입니다.

{
    (function(){
        document.write("501.함수가 실행되었습니다.");
    })();

    (()=> {
        document.write("502.함수가 실행되었습니다.");
    })();
}

JavaScript에서 즉시 실행 함수는 함수를 정의하고 즉시 호출하는 패턴을 말합니다. 즉시 실행 함수는 전역 스코프를 오염시키지 않고 지역 스코프를 생성하여 변수 등의 이름 충돌을 방지하고, 모듈화를 구현하는 등의 용도로 사용됩니다.

파라미터 함수 예시입니다.

{
    function func(str = "600. 함수가 실행되었습니다."){
        document.write(str);
    }
    func();
}

JavaScript 함수에서 파라미터는 함수 호출 시 전달하는 인자값을 함수 내부에서 사용할 수 있도록 하는 변수입니다. 함수 선언부에 파라미터를 정의하여 함수 내부에서 해당 파라미터 변수를 사용할 수 있습니다.

아규먼트 함수 예시입니다.

{
    function func(str1, str2){
        document.write(arguments[0]);
        document.write(arguments[1]);
    }
    func("함수실행1","함수실행2");
}

JavaScript 함수에서 arguments 객체는 함수 호출 시 전달된 인자값들을 배열 형태로 담고 있는 객체입니다. 이 객체를 사용하면 함수 호출 시 전달된 인자값들을 동적으로 처리할 수 있습니다.arguments 객체는 함수 내부에서 지역 변수처럼 사용할 수 있으며, 배열 형태로 인덱스를 사용하여 인자값에 접근할 수 있습니다. arguments 객체의 length 속성은 함수 호출 시 전달된 인자값의 개수를 나타내며, 배열의 메서드와 유사한 push, pop, shift, unshift 등의 메서드를 사용하여 배열에 대한 처리도 가능합니다.

재귀함수 예시입니다.

{
    function func(num){
        if(num <=1){
            document.write("함수가 실행되었습니다.");
        } else {
            document.write("함수가 실행되었습니다.");
            func(num-1);
        }
    }
    func(10);

    function animation(){
        document.write("애니메이션이 실행되었습니다.");
        
        // requestAnimationFrame(animation)
    }
    animation();
}

재귀 함수(recursive function)는 함수가 자기 자신을 호출하여 문제를 해결하는 기법입니다. 재귀 함수는 반복문을 사용하는 것보다 코드가 간결해지는 경우가 많습니다. 재귀 함수를 구현하려면, 함수 내부에서 자신을 호출하는 코드가 필요합니다. 또한 재귀 함수를 사용할 때는 종료 조건을 반드시 설정해야 합니다. 종료 조건이 없으면 무한히 자신을 호출하게 되어 스택 오버플로우 에러 등의 문제가 발생할 수 있습니다.

콜백함수 예시입니다.

{
    function func(){
        document.write("2함수 실행");
    }
    function callback(str){
        document.write("1.함수 실행");
        str();
    }
    callback(func);
}

자바스크립트에서 콜백 함수는 함수를 다른 함수의 인자(argument)로 전달하여, 그 함수 내에서 필요한 시점에 실행되도록 하는 것을 말합니다. 이를 통해 비동기(asynchronous)적인 처리를 할 수 있습니다.

 

오후에는 웹디자인 기능사 레이아웃을 만들었습니다. 

예시입니다.

HTML CSS 코드 입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>레이아웃 타입04 (c-1)</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            color: #fff;
        }
        h1,h2,h3,h4,h5,h6{
            font-size: 16px;
            font-weight: normal;
        }
        #wrap {
            width: 1000px;
            display: flex;
        }
        #header {
            width: 20%;
        }
        .inner {
            width: 80%;
        }
        #header .header_logo {
            height: 20%;
            background-color: #5ce0e0;
        }
        #header .memu {
            height: 80%;
            background-color: #32ecec;
        }
        #slider {
            height: 350px;
            background-color: aqua;
        }
        #contents {
            height: 200px;
            background-color: #367474;
            display: flex;
        }
        #contents .cont1 {
            width: 33.333%;
            background-color: rgb(43, 99, 99);
        }
        #contents .cont2 {
            width: 33.333%;
            background-color: rgb(95, 221, 221);
        }
        #contents .cont3 {
            width: 33.333%;
            background-color: rgb(90, 173, 173);
        }
        #footer {
            height: 100px;
            background-color: #999;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
        }
        #footer .logo {
            width: 20%;
            height: 100px;
            background-color: #499797;
        }
        #footer .under_memu {
            width: 80%;
            height: 50px;
            background-color: #1f5050;
        }   
        #footer .coptright {
            width: 80%;
            height: 50px;
            background-color: #144141;
        }   
    </style>
</head>
<body>
    <div id="wrap">
        <header id="header">
            <h1 class="header_logo">로고</h1>
            <nav class="memu">메뉴</nav>
        </header>
        <div class="inner">
            <section id="slider">이미지 슬라이드</section>
            <div id="contents">
                <article class="cont1">공지사항</article>
                <article class="cont2">배너</article>
                <article class="cont3">바로가기</article>
            </div>
            <footer id="footer">
                <div class="logo">로고</div>
                <div class="under_memu">하단 메뉴</div>
                <div class="coptright">copyright</div>
            </footer>
        </div>
    </div>
</body>
</html>

나만의 해설

저는 전체를 wrap 으로 감싸고 그안에 header 그리고 inner 로 감쌌습니다.

display:flex 를 쓰기위해서 2개의 큰 박스로 묶었습니다.

그후 로고 부분에는 h1태그를 써서 만들었고 memu 부분은 nav 태그를 사용해서 높이값을 지정해 주었습니다.

그후 inner 안에 있는 이미지 슬라이드 부분의 높이 값을 350px을 넣어주었고, contents안에 cont1,cont2.cont3를 넣어서 공자사항,배너,바로가기를 넣어주었습니다.

상위 폴더 contenes 에 display:flex 를 넣어 가로정렬을 했습니다.

다음 footer 영역을 넣어서 display : flex를 넣어서 자리를 맞추고 flex-wrap : wrap 과 flex-direction : column을 넣어서 맞추었습니다. 

그리고 그안에 logo, under_memu, copyright를 넣어서 높이 넓이를 넣어주면 완성 입니다.