나태쿤의 개발이야기

✅ 뷰포트 내부 높이 구하기, 스크롤바 포함 ! 

window.innerHeight

✅  브라우저 전체 높이 구하기

window.outerHeight

✅ 실제 스크롤까지 펼친 높이, 넘치는 부위까지 다 계산

document.documentElement.scrollHeight

아래그림을 참고하자

화면작업을 하다보면 가끔 요소의 좌표축이 필요할때가 있다

특정 dom을 접근하여 getBoundingClientRect   메서드를 실행하면

다양한 값을 얻을 수 있다

속성 이름 설명 계산 방식 / 특징

주로 이미지 태크에 src 속성에는 크게 3가지 방법으로 나타낼수 있다

1. 서버의 물리경로

2. api의 url

3. base64 방식 (api로 데이터 그자체를 가져온경우)

1번은 html, css로 퍼블리싱할때, 즉 하드 코딩할때

2번은 백엔드로부터 가져올때가되고

3번이 이 게시글의 목적이 되겠다

상황은 다음과 같다

프론트단 주로 js 확장자에서

브라우저에 내장된 fetch api를 이용하거나 (필자는 이방식을 좋아한다)

외부 라이브러리인 axios를 다운로드하여 api를 사용하거나

둘다 blob으로 리턴 받을 수 있는데 같이 사용하면 좋겠다.

api를 통해서 blob 형태로 가져왓다고 치자

이렇게 쓰면 될거다

파일(blob)을 base64 문자열로 인코딩하려면 시간이 소요되는데

그렇기 때문에 이벤트로 동작한다.

따라서 fileReader.readAsDataURL 을 호출하면 

이벤트가 호출되고

그 내부 로직에서 원하고자하는 코드를 작성하면된다

나는 샘플코드로 img 태그를 만들어 특정 id 적었는데

자식요소로 추가할 수 도 있고 다양하게 사용해보자

다음은 ProgressEvent 의 스펙이다

다음은 FileReader 의 스펙이다

두개를 합치면 e.target.result 의 타입이 string 일수도 있다는걸 알 수 있다

urlArr에는 컨트롤러 url

idArr에는 화면에 붙일 select 태그의 id 를 작성합니다

async function init() {
    // step 1. select box
    const param = {};
    param.urlArr =  ["/code/parent/email", "/code/parent/telno"];
    param.idArr = ["emailStatus", "telnoStatus"];
    await fnMakeSelectBox(param);
}

/**
 * * 일반적인 SelectBox 그리는 함수
 * @param param Object
 * @returns {Promise<void>}
 */
async function fnMakeSelectBox(param) {

    console.log(param);

    const urlArr = param.urlArr;

    const idArr = param.idArr;

    for (let i = 0; i < urlArr.length; i++) {
        const statusArr = await (await fetch(urlArr[i])).json();
        const html = [];
        statusArr.forEach((code) => {
            html.push(`<option id="${code['code']}">${code['codeName']}</option>`)
        })
        $(`#${idArr[i]}`).html(html.join(''));
    }
}

function fnGetIntValueById(id) {
    let intValue = document.getElementById(id).value;
    intValue = (intValue === '' ? 0 : parseInt(intValue));
    return intValue;
}

function fnGetStringValueById(id) {
    return document.getElementById(id).value;
}

function fnGetTextById(id) {
    return document.getElementById(id).textContent;
}

function fnGetCheckById(id) {
    return document.getElementById(id).checked;
}

function fnGetSelectValueById(id) {
    const selectHtml = document.getElementById(id);
    const index = selectHtml.options.selectedIndex;
    const value = selectHtml.options[index].value;
    return value;
}

바닐라 자바스크립트 기반으로, 프론트쪽에서 dom의 값을 가져오는일이 빈번한데,

자주사용하는 유틸 함수를 만들어봤다.

메모용으로 뼈대만 간단히 적어보겠다

함수를 호출하면

실행 컨텍스트를 생성하고, 각 컴포넌트를 생성하며,

렉시컬 환경을 첨부 및 this 바인딩 설정을 시작한다

실행 컨텍스트(EC) = {
            렉시컬 환경 컴포넌트(LEC) : { },
            변수 환경 컴포넌트(VEC)   : { }, 
            this 바인딩 컴포넌트(TBC) : { }
}

렉시컬 환경(LE) = {
            환경 레코드(ER) : {
                        선언적 환경 레코드(DER)   : { }, 
                        오브젝트 환경 레코드(OER) : { }
            },
            외부 렉시컬 환경 참조(OLER) : { }
}

글로벌 환경(LE) = {
            환경 레코드(ER) : {
                        오브젝트 환경 레코드(OER) : { }
            },
            외부 렉시컬 환경 참조(OLER) : null
}

TIP.

(1) 글로벌 오브젝트를 위한 렉시컬 환경

(2) 프로그램내에 단 하나만 존재한다, 외부 렉시컬 환경 참조는

더이상 나갈곳이 없으므로 null으로 고정되어있다.

1. 실행 컨텍스트

함수가 호출되면 자바스크립트 엔진은

호출된 함수로 들어가서, 코드를 해석하고 실행을 한다 

좀더 자세히 보자면

(1) 해석한 결과 저장하고 + (2)함수 코드 를 실행할 영역이 필요한데

이를 "실행 컨텍스트" 라고 한다. (저장하고 실행한다 느낌)

즉,

함수를 호출 -> 실행 컨텍스트 생성 -> 실행 컨텍스트 내부로 이동 -> 함수 코드 해석 및 실행

나는 이렇게 이해했다. 

실행 컨텍스트는 ES5 스펙 사양이다.

외부 프로그램에 접근할 수 없다.

2. 렉시컬 환경

음, 이거는 함수마다 독립적으로 환경을 갖는데 이를 렉시컬 환경이라하는 것 같다.

{ name : value } 형태를 갖으며

name으로 value를 접근한다 내용이다 심플하다. 개념적인 내용이다.

더 내부를 파고들면

렉시컬 환경 = {

     환경 레코드 : 값,       <--- 함수안의 함수f(g(x))의 g(x), 변수, 검색 1순위 영역

     외부 렉시컬 참조 : 값 <--- 가장 근접한 스코프, 검색 2순위 영역

}

이 렉시컬 환경은 function, with문, try-catch의 catch문에서 생성됩니다.

만약에 함수를 하나 호출한다면

해당 함수 렉시컬 환경이 생성되고

외부 렉시컬 참조에는 글로벌 렉시컬 환경이 설정됩니다