오늘은 설명없이 간단한 코드만 명시할 예정이다. Mustache template engine 관련된 간단한 예제 코드이다.Mustache template engine 에 대한 간단한 설명은 아래 글을 통해 확인 가능하다. (https://lkhlkh23.tistory.com/64)첫번째 함수는 일반적인 Mustache template engine 에 대한 예제이다. 별로 설명할 필요가 없을거 같다.두번째 함수는 사용자가 정의한 태그를 이용해서 렌더링하는 코드의 예제이다.굳이, 왜 필요할까? 라고 생각할 수 있을 것이다. 필요하다. 정말 필요하다. 왜냐하면, Mustche template engine 은 서버와 프론트에서 동시에 사용할 수 없다. $(document).ready(function() { re..
오늘은 최근에 개발을 하면서 사용한 Javascript Promise 사용하는 방법에 대해 알아보려고 한다. Promise 에 대한 정의보다는 간단한 사용법을 코드를 통해 간단히 정리를 남기려고 한다 요구사항 firstTask, secondTask, thirdTask 는 setTimout 으로 구현된 비동기 함수이다. firstTask, secondTask, thirdTask. 순서로 함수가 동작해야 한다.다음과 같은 요구사항을 구현을 하려면 아래와 같이 구현할 수 있다. firstTask() --> secondTask() --> thirdTask() 를 순차적으로 호출하는 callback 으로 구현할 수 있다. 지금은 간단한 출력 메소드이고, 숫자도 적지만, 복잡하고 많다면 ... 정말 말그대로 지옥일..
Javascript 객체의 필드(Key)명 변경하기
개발을 하다가 다음과 같은 문제가 발생했다. API 호출로 전달받은 JSON 객체에 대문자로 시작되는 필드명이 존재했다. 특정 필드는 대문자로 시작하고, 특정 필드는 소문자로 시작하고 ...규칙성이 존재하지 않는다. 그리고 대문자로 시작하는 필드명은 옳지 않다고 생각한다! 그래서 필드명의 시작은 모두 소문자로 시작될 수 있게 변경했다. 먼저 객체를 순회하는 방법을 먼저 알아보려고 한다. Object.keys(item) 를 사용하면 객체가 가지고 있는 필드명을 배열의 형태로 반환을 한다.반복문을 통해 순차적으로 접근하면 해당 객체의 필드명을 알 수 있다. 필드명을 알고 있다면 해당 객체의 값도 알 수 있다. - Key Names : Object.keys(item); - Value : item['key na..
페이지 렌더링 순서
흔히, script는 HTML 끝에 선언을 해야, 페이지 로딩 시 지연이 발생하지 않는다고 하는데, 왜 그럴까? 라는 의문으로 시작했다.웹 브라우저에서 HTML, CSS, JS 는 어떻게 화면에 그려질까? 1. LoadingHTTP 모듈 또는 파일시스템으로 전달받은 리소스 스트림을 읽는 과정으로 Loader가 역할을 담당하고 있다. 2. ParsingParsing은 HTML, XML Parser를 이용해서 DOM Tree, CSSOM Tree를 생성하는 과정이다. 3. Rendering TreeRendering Tree = Dom Tree + CSSOM Tree 라고 할 수 있다. Rendering Tree는 화면에 표시하기 위한 위치, 크기 정보, 그리기 순서 등을 저장하기 위한 트리이다. 지금까지 D..