분석을 하게 된 배경⬇더보기사내에서 자바스크립트(바닐라,jquery)로 만든 신규 제품을 리액트에 지원이 될 수 있도록 개선하는 과정에서기존의 제품을 script 태그로 외부 페이지에 import 시킬 수 있어야 했다. 하지만 현재 프로젝트의 구조는 모듈화가 전혀 진행되지 않은 상태이고 하나의 JS 파일에 모든 함수가 다 들어있는 구조적으로 안좋은.. 상황이었기 때문에 프로젝트 일정을 고려할 때, 모듈화 보다는 스크립트 태그로 제품을 불러올 수 있도록 하고 리액트 컴포넌트에서 렌더링 할 수 있도록 하는 방식을 채택했어야 했다. 그렇게 프로젝트 개선을 시작하고 보니 현재 HTML 페이지에서 자바스크립트 태그들을 어떻게 불러오는지에 대한 이해도가 필요하다고 생각해 분석을 시작하게 됐다. 이제 HTML페이지에..
얕은 비교 Shallow Compare란? 숫자, 문자열 등 원시 자료형은 값을 비교한다. 배열, 객체 등 참조 자료형 값 혹은 속성을 비교하지 않고, 참조되는 위치를 비교한다. const obj1 = {a : 1, b : 2}; const obj2 = {a : 1, b : 2}; console.log(obj1 === obj2); // fasle obj1과 obj2에 들어있는 값은 같지만, 참조 값을 비교하기 때문에 obj1과 obj2의 참조 값이 달라 false가 반환된다. user = { name : "devbean", surname : "Ohh" } const user = this.state.user; user.name = "hb" console.log(this.state.user === user)..
오랜만에 데스크 탑에서 react 프로젝트를 클론해 수정하려고 했다. clone을 받고 npm start를 실행했는데 아래와 같은 오류가 나타났다.. react를 다시 공부하고 있는 입장에서 에러는 항상 나를 무섭게 한다. 개인 작업용 맥북에서는 잘 되던 녀석이 왜 안될까 .. 하면서 에러 해결을 위해 정보를 찾아보았다. yarn을 사용할 경우에는 yarn start라는 명령어가 없어서 올바른 start를 하지 못해 발생한다고 하는데 나같은 경우에는 npm 을 사용하기 때문에 해당 사항이 없었다. 곰곰히 생각해보니 내가 node와 npm을 다운받고 업데이트 안한지 오래됐다는 생각이 들었고 관련 자료를 찾으니 npm의 버전이 맞지 않을 경우 위와 같은 에러가 발생할 수 있다는 것을 알게 됐다. 역시 업데이..
ES5에서 for문으로만 구성되었던 Array 배열의 분해라면, ES6내에서는 forEach , for ~ of 문을 제공한다. Array - 반복문의 활용 ES5(for loop) var arr = [1,2,3,4]; for( var i = 0 ; i { // 1 console.log(item,index); }); for(let item of arr){ // 2 console.log(item); } 구조 분해 할당 > 배열이나 Json,Object 형태에서 속성을 해제하여서 변수로 할당하는 방식을 의미한다. > 어떤 것을 복사한 이후에 변수로 복사해준다는 의미이다. > 이 과정에서 분해 혹은 파괴되지 않는다는 점이 있다. // 배열 구조 내에서 사용 const arr = [1,2,3]; const [x..
저번 글에는 var let/const 의 차이에 대해서 알아보았다. 이번에는 ES5 ES6의 대표적인 차이 가운데 하나인 화살표 함수에 대해서 알아보려고 한다. 1. 화살 표함수 문법 자바스크립트에선 함수를 아래와 같이 만들어서 사용한다. // 1 function func(){ //blablabla.. } // 2 var func() = function(){ //blablabla.. } func(); 함수는 1 과 2 처럼 만들수 있고 func() ; 이렇게 호출합니다. 하지만 ES6에서 부터는 신 문법을 사용하면 이렇게 만들 수 있습니다. var func = () => { // blablabla.. } function 이라는 길고 복잡한 키워드 대신에 => 이렇게 화살표를 사용해서 함수를 만들어 낼 수..
회사에서 이번년도 신규 프로젝트에 TypeScript 와 ES6 이상의 문법을 무조건적으로 사용하기로 결정했기 때문에 (사실 이전부터 ES6 이상을 사용하고 싶었지만, 제일 큰 고객사인 삼성 전자의 IE 사용 때문에 힘들었다.) 차근차근 ES6에 대해서 알아가 보려고 한다. 처음으로 ES5 와 ES6 의 차이를 생각해보자면 변수 선언의 차이라고 생각이 든다. ES5에서는 모든 변수를 var로 선언했다면 ES6 let 과 const로 나뉘게 된다. ES5를 사용하면서 var 변수만을 사용해 왔는데 var 변수는 단점이 꽤 많이 있다. 대표적으로 나열하자면, 암묵적 결합이 가능 생략 호이스팅 함수 레벨 스코프 위와 같은 단점이 var에 대해서 내가 느낀 단점과, 많은 개발자 분들이 느낀 점이었다. 하나씩 예..