[12, 13주차] HTTP의 이해, HTML, Js, Promise, Module, Vue

이맑음·2024년 2월 19일

Java 수업 필기

목록 보기
13/15
post-thumbnail

3티어
was
백엔드 API 개발 = 프론트엔드와 주고 받을 데이터를 처리하기 위한 서버 프로그램을 개발
API 프로그램을 서버에서 실행하면 = API 서버
아이디 클래스 태그 전체 순으로
media

@media(max-width:1280px) {
    body {
        background-color: pink;
    }
}

padding
font-size
text-align
border-bottom
flex는 부모에만 적용(부모 자식 간)
justify-content: space-between/flex-right/flex-left…

html, body {
    height: 100%;
}
body {
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

가상선택자

css 중앙정렬 공식

<style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                margin: 0 auto;
                width: 960px;
            }
        </style>

one true ->html4, 구식?이지만 호환성이 좋다(Ex 익스플로러)
flex ->html5, 간편하지만 호환성의 문제가 있다

반응형 웹 패턴

  1. 너비가 넓은 화면(데스크톱)-> 메뉴 왼쪽, 너비가 좁은 화면(모바일)-> 메뉴 위쪽
  2. 데스트톱-> 메뉴 오른쪽, 모바일-> 메뉴 위쪽
  3. 데스크톱-> 메뉴 왼쪽, 모바일-> 메뉴 아래쪽
  4. 데스크톱-> 메뉴 오른쪽, 모바일-> 메뉴 아래쪽

반응형 웹 페이지 제작

  • 모바일 장치 기준으로 제작한다(모바일 퍼스트)
  • float 태그의 left, right를 활용해서 적당한 위치에 배치한다
    글꼴 단위

rem : 글꼴의 크기를 지정하는 단위(상대적 단위- 해상도에 따라 유동적 변경가능
px : 페이지의 크기를 줄이든 키우든 같은 크기를 갖는다. (절대적 단위)

  • overflow 속성
    내용 요소가 크기를 벗어날 때 어떻게 처리할 지를 정하는 속성

  • background-image: url("") 이미지 주소를 지정하면 해당 이미지를 불러온다.

  • borader-radius : 요소의 테두리를 둥글게 만든다.

  • max-width : 최대 너비를 지정

  • text-align : 텍스트 정렬 (left, right, center, justify)

css bem
부정가상클래스

JS

화살표함수

// 함수의 기본 사용법
const f = function () {return "100"};
console.log(f());
// 익명함수 : 매개변수가 1개일 때는 () 생략 가능
const af = a => {return 200 + a};
console.log(af(20));
// 익명함수 : 매개변수가 2개 이상일 때는 () 생략 불가능
const af = (a, b) => {return a + b};
console.log(af(3, 4));

this

const calc = {
                firstNumber: 100,
                secondNumber: 20,
                print: function () {
                    console.log(this);
					//여기서 this 는 calc 객체를 가르킨다
                    function add() {
                        console.log(this);
                        return this.firstNumber + this.secondNumber;
                    }
                    console.log(this.firstNumber + " + " +this.secondNumber + add());
                }
            }

            calc.print();
//
const calc = {
                firstNumber: 100,
                secondNumber: 20,
                print: function () {
                    let self = this;
                    function add() {
                        console.log(self);

                        return self.firstNumber + self.secondNumber;
                    }
                    console.log(add());
                }
            }

            calc.print();

Promise

  • 비동기 처리를 추상화한 객체이다
  • 비동기 처리를 조작하는 방법을 제공한다
  • 아래 3가지 상태 중 하나의 상태로 존재한다
  • 상태 정보
  1. Fulfilled : 작업이 성공했을 때
  2. Rejected : 작업이 실패한 경우, 에러를 반환
  3. Pending : 작업이 아직 진행 중인 경우
//promist 기본 형태
var promise = new Promise(function(resolve, reject) {...});
<script>
            function welcome() {
                return new Promise(function (resolve, rejuct) {
                    setTimeout(function () {
                        console.log("Welcome");
                        resolve();//프로미스 객체를 이행상태로 만든다
                    }, 1000);
                });
            }

            function to() {
                return new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        console.log("to");
                        resolve();
                    }, 1000);
                });
            }

            function world() {
                return new Promise(function (resolve, reject) {
                    setTimeout(function () {
                        console.log("World");
                        resolve("!");
                    }, 1000);
                });
            }

            function end(response) {
                console.log(response);
            }

            welcome()
                .then(function (response) {
                    return to();
                })
                .then(function (response) {
                    return world();
                })
                .then(function (response) {
                    end(response);
                });

            console.log("Executed!!");
</script>
/* 실행결과: 
Welcome
to
World
!
*/

Module

  • 코드의 일부를 재사용해야 할 때 사용하는 개념
  • 파일로 작성된 자바스크립트
  • 모듈의 구성요소 내보내기 : export 키워드 사용
  1. Named Exports
  2. Default Exports
//member1.js
let name = "홍길동";
let age = "10";
let company = "교동초등학교";

let member = {
    getName: function () {
        return name;
    },
    setName: function (newName) {
        name = newName
    },
  ...
}

export default member;
--------------------------------------------------------------------
//member2.js
import member from "./member1.js"

console.log(`${member.getName()}은 ${member.getAge()}살이고 ${member.getCompany()}에 다닙니다.`);

member.setCompany("역삼중학교");
console.log(`${member.getCompany()}에 다닙니다.`);
--------------------------------------------------------------------
//member.html
<!DOCTYPE html>
<html>
    <body>
        <script src="./member2.js" type="module"></script>
    </body>
</html>
  • 실행결과

array

  • 연관배열 = 해시

비교함수

  • function(a,b){return a-b} : 정렬 순서를 정의한다
  • 음수, 0, 양수에 따라 값을 정렬한다
  • a-b, b-a, 0 일때 결과가 음수이면 a가 b보다 먼저 정렬, 양수이면 b가 a보다 먼저 정렬, 0이면 변경 X
var numbers = [2, 6, 3, 4, 8];
            console.log(numbers.sort(function (a, b) {
                return a - b
            }));
            console.log(numbers.sort(function (a, b) {
                return b - a
            }));

var persons = [
                {
                    name: "Alex",
                    age: "29"
                }, {
                    name: "Jaejun",
                    age: "39"
                }, {
                    name: "Taehwan",
                    age: "20"
                }
            ];
            persons.sort(function (a, b) {
                return b.age - a.age;
            });
            console.log(persons);
            persons.sort(function (a, b) {
                var x = a.name.toLowerCase;
                var y = b.name.toLowerCase;
                if (x < y) {
                    return -1;
                }
                if (x > y) {
                    return 1;
                }
                return 0;
            });
            console.log(persons);

forEach()

  • 콜백함수
    var text = "";
    var numbers = [4,2,8,6,5,9];
    numbers.forEach(myFunc);
    function myFunc(v){
        text = text + v + "<br>";
    }

Array.map()

  • 각 배열 요소에 대해 함수를 수행하여 새로운 배열을 만든다
var numbers1 = [1,2,3,4,5];
    var numbers2 = numbers1.map(myFunc1);

    function myFunc1(value, index, array){
        return value*2;
    }

Array.filter()

  • 테스트를 통과한 배열 요소를 새로운 배열로 만든다
var numbers3 = numbers1.filter(myFunc2);

    function myFunc2(value, index, array){
        return value > 3;
    }

Array.reduce()

  • 각 배열 요소에서 함수를 실행하여 단일 값을 생성(축소)한다. 배열의 왼쪽에서 오른쪽으로 작동한다
var numbers4 = [1,2,3,4,5];
    var total = numbers4.reduce(myFunc4, 100);

    function myFunc4(total, value){
        return total + value;
    }

Array.reduceRight()

  • array.reducre()와 동일하다 배열의 오른쪽에서 왼쪽으로 작동한다
var total2 = numbers4.reduceRight(myFunc5);

    function myFunc5(total, value, index, array){
        return total + value;
    }

Array.indexOf()

  • 배열의 요소에서 요소값을 검색, 해당 위치를 반환한다
var fruits = ["apple","orange","melon"];
    var fruit = fruits.indexOf("apple");
    console.log(fruit);

Array.find()

var findNum = numbers4.find(myFunc6);
    function myFunc6(value){
        return value>3;
    }

Vue

디렉티브

  • html 표준속성 이외의 독자적으로 정의한 속성을 추가해서 이 속성값 표현식의 변화에 따라 DOM을 조작한다.
  • vue에서 독자적으로 정의한 속성을 디렉티브라 한다
  • 템플릿에 데이터 바인딩을 적용하는 방법을 정의한다
  • 주요 역할은 DOM 요소에 액세스하고 조작하는 것이다
  • 'v-' 접두어로 시작하며 Vue 인스턴스에 전달되는 특별한 속성으로 브라우저에게 이것이 Vue 디렉티브임을 알려준다

디렉티브 이름

  • v-if : 지정한 뷰 데이터의 값의 참, 거짓 여부에 따라 html 태그를 화면에 표시할 지 여부를 지정한다
  • v-for : 지정한 뷰 데이터의 개수만큼 해당 html 태그를 반복 출력한다
  • v-show : 데이터의 진위 여부에 따라 해당 html 태그를 화면에 표시할 지 여부를 지정한다
  • v-bind : html 태그의 기본속성과 vue 데이터 속성을 연결
  • v-on : 화면 요소의 이벤트를 감지하여 처리할 때 사용한다
  • v-model : form에 입력한 값을 vue 인스턴스에 데이터와 즉시 동기화 시킬 때 사용한다
    -> input, select, textarea 태그에서만 사용한다

컴포넌트 명명규칙

  • 케밥 케이스, 파스칼 케이스 두 가지
  • 케밥 케이스 : 전체 소문자+하이픈으로 연결 'board-register-form':{...}
  • 파스칼 케이스 : 맨앞 대문자+나머지 소문자 'BoardRegisterForm':{...}

컴포넌트

  • 로컬 컴포넌트 : 컴포넌트를 등록함과 동시에 뷰 인스턴스 자체가 상위 컴포넌트로 프로모션 된다
new Vue({
        components: {},
});
  • 글로벌 컴포넌트
 <script>
      Vue.component("컴포넌트명", {...});
});

컴포넌트 간 통신 방법

  • props

rich client

  • 모든 필요한 데이터를 클라이언트에 미리 로드하고, 클라이언트에서 이 데이터를 효율적으로 처리하여 서버와의 통신을 최소화하며, 사용자 경험을 향상시키는 것이다
  • 리치 클라이언트 애플리케이션은 브라우저에서 실행되며, 데이터를 서버로부터 미리 받아와 사용자 상호작용에 대비한다
  • 서버에 부하를 줄일 수 있다

추가 설치
npm install -g @vue/cli

profile
이맑음
이전 포스트

[9주차] 이상현상, 정규화, IOStream, JDBC

다음 포스트

[14주차] Vue Router, Web, Servlet, ConnectionPool, Cookie, MVC 작성 순서

0개의 댓글