Web/javascript 14

chrome V8 엔진에 대해

V8은 C++로 작성된 Google의 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 또는 웹 어셈블리(WebAssembly) 엔진이다. 구글 크롬 브라우저와 안드로이드 브라우저에 탑재되어 있고 Node.js 등에서 사용된다. ECMAScript(ECMA - 262) 3rd Edition 규격의 C++로 작성되었으며, 독립적으로 실행이 가능하다. 또한 C++로 작성된 응용 프로그램의 일부로 작동할 수 있다. V8은 컴퓨터가 실제로 이해할 수 있도록 JavaScript 코드를 기계어(CPU가 이해할 수 있는 언어로 숫자로만 구성된 순수 디지털 방식)로 직접 번역한 다음, 번역된 코드, 즉 컴파일된 코드를 실행한다. WebAssembly WebAssembly는 최신 웹 브라우저에서 실행할 수..

Web/javascript 2024.03.14

javascript Prototype

자바스크립트에서 객체를 상속하기 위하여 프로토타입이라는 방식을 사용하고 모든 객체는 자신의 부모(역할) 객체와 연결되어 있는데 이 부모 객체를 프로토타입(객체) 라고 한다. var foo = { name: 'foo', age: 30 } console.log(foo.toString()); //[object Object] foo 객체의 프로토타입에 toString() 메서드가 정의되어 있음. 크롬 브라우저에서는 __proto__프로퍼티 형태로 구현되어 있다. 프로토타입 수정하기 아래와 같이 프로토타입에 메소드를 추가하면 해당 생성자로 생성된 모든 객체에서 사용 가능하다. function Person(first, last, age, gender, interests) { this.first = first; th..

Web/javascript 2024.02.20

객체의 비구조화 할당문

구조화 구조화란 인터페이스나 클래스를 사용해 관련된 정보를 묶어 새로운 타입으로 표현하는 것을 말한다. 비구조화 구조화된 데이터는 데이터의 일부만 사용해야 할 때가 있는데 아래와 같이 구조화된 데이터를 분해하는 것을 비구조화라고 한다. 잔여 연산자/ 전개 연산자 ESNext 자바스크립트와 타입스크립트는 점을 연이어 3개 사용하는 ...연산자를 제공하는데 사용하는 위치에 따라 잔여 연산자 혹은 전개 연사자라고 부른다.

Web/javascript 2022.10.05

mocking과 mock testing

Mock mock(object)이란 실제의 데이터를 흉내낸 모조품 이라고 생각하면 된다. 우리는 이 Mock을 가지고 프로젝트 개발과 테스트를 더욱 더 원활하게 진행할 수 있다. Mock을 사용하는 이유 먼저 가장 이상적인 프로젝트 과정으론 기획 -> 백엔드 개발 -> 프론트 개발 이 순차적으로 완벽하게 수행되는게 가장 이상적이고 이대로 진행만 된다면 mocking을 할 필요도 없을 것이다. 하지만 프로젝트 투입 시 백엔드, 프론트 개발자들이 동시에 투입되고 프론트 개발자들은 레이아웃을 다 그리고 api연동을 하면서 몇몇 api들은 개발되기를 기다리는 적이 있을 것이다. 또한 이미 개발 완료되어 연동한 api 조차도 빈번히 수정이 일어나게 되는데 mock이 없다면 프론트엔드 개발자들은 언제 api가 완료..

Web/javascript 2022.06.23

보자마자 유용하다고 느끼는 javascript 문법

보통 프로젝트를 하면 null,undefined, "", 0 등을 체크할 때 새로운 공통 유틸 함수를 만들어서 체크하는데 아래 문법을 잘 알고 있으면 object의 value값을 빈값 체크 시에도 runtime error 없이 체크할 수 있다. 1. && and함수 console.log(undefined && 'ㅁㅁㅁ') => undefined console.log(null && 'ㅁㅁㅁ') => null console.log(0 && 'ㅁㅁㅁ') => 0 console.log("" && 'ㅁㅁㅁ') => "" console.log(false && 'ㅁㅁㅁ') => false console.log(true && 'ㅁㅁㅁ') console.log('aaa' && 'ㅁㅁㅁ') => 'ㅁㅁㅁ' 2. || or..

Web/javascript 2022.06.14

array.map 안에서의 async/await 사용하기

아래 코드와 같이 한 리스트 안의 데이터를 map으로 loop 돌면서 각 item의 데이터를 가지고 박스번호를 가지고오는 api를 호출하였다. 잘 될것이라고 예상하였으나 async/await을 사용하였음에도 불구하고 기다리지않고 바로 다음 loop를 수행하는 바람에 _inRow라는 데이터에 boxNo가 undefined로 찍히는 현상이 발생하였다. breakpoint를 찍어보면서 디버깅 해보니 await문을 기다리지 않고 map을 빠져나가는 바람에 boxNo에 그렇게 찍힌것으로 확인되어 구글링을 해보았다. body.map(async (item) => { ------생략------- } else if (msg == '박스 분할') { //2개담기 const res = await OrderReleaseSer..

Web/javascript 2022.05.01

함수 선언식과 함수 표현식 그리고 화살표 함수

함수 선언식 - Function Declarations function test() { return 'function declarations' } test(); 함수 표현식 - Function Expressions var test = function () { return 'function expressions'; } test(); 두 방식의 차이점 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. console.log(test()) //@@@@ 정상 출력 console.log(test2()) // undefined 뜨고 TypeError 발생(TypeError: test2 is not a function) function test() { console.log('@@@..

Web/javascript 2021.08.02

querySelector와 querySelectAll

개발 소스 중 qeurySelector와 qeurySelectAll이라는 함수가 있길래 궁금해서 검색해보니 getElementById, getElementsByClassName 과 같이 DOM 을 다루는 함수라는 공통점이 있었다. 하지만 꽤 여러가지의 차이점이 있었는데 아래와 같은 차이점이 있었다. getElementById querySelector id를 가져옴 class / id 모두 적용 가능하며 class를 사용하여 다수의 element를 가져올 시 가장 상단의 element 하나만 return함 속도가 빠름 속도가 느림 공통적으로 HTML element를 return함 getElementsByClassName querySelectorAll HTMLCollection을 리턴 NodeList를 리턴..

Web/javascript 2021.05.10