[Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔? 분석을 하게 된 배경⬇더보기사내에서 자바스크립트(바닐라,jquery)로 만든 신규 제품을 리액트에 지원이 될 수 있도록 개선하는 과정에서기존의 제품을 script 태그 한줄로 외부 페이지에 import 시킬 수 있어야 했다. 하지만 현재 프로젝트의 구조는 모듈화가 전혀 진행되지 않은 상태이고 하나의 JS 파일에 모든 함수가 다 들어있는 구조적으로 안좋은.. 상황이었기 때문에 프로젝트 일정을 고려할 때, 모듈화 보다는 스크립트 태그로 제품을 불러올 수 있도록 하고 리액트 컴포넌트에서 렌더링 할 수 있도록 하는 방식을 채택했어야 했다. 그렇게 프로젝트 개선을 시작하고 보니 현재 HTML 페이지에서 자바스크립트 태그들을 어떻게 불러오는지에 대한 이해도가 필요하다고 생각해 분석을 시작하게 됐다. 이제 HTML페..

2024. 4. 25.

개발

렌더링 이해하기 - 얕은 비교 (Shallow Equal) , 깊은 비교 (Deep Equal) 얕은 비교 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);사용자 이름..

2024. 1. 17.

개발

[Error] 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 오랜만에 데스크 탑에서 react 프로젝트를 클론해 수정하려고 했다.clone을 받고 npm start를 실행했는데 아래와 같은 오류가 나타났다.. react를 다시 공부하고 있는 입장에서 에러는 항상 나를 무섭게 한다. 개인 작업용 맥북에서는 잘 되던 녀석이 왜 안될까 .. 하면서 에러 해결을 위해 정보를 찾아보았다. yarn을 사용할 경우에는 yarn start라는 명령어가 없어서 올바른 start를 하지 못해 발생한다고 하는데나같은 경우에는 npm 을 사용하기 때문에 해당 사항이 없었다. 곰곰히 생각해보니 내가 node와 npm을 다운받고 업데이트 안한지 오래됐다는 생각이 들었고 관련 자료를 찾으니npm의 버전이 맞지 않을 경우 위와 같은 에러가 발생할 수 있다는 것을 알게 됐다. 역시 업데이트는 ..

2024. 1. 3.

개발

[CSS] border Trick, Customized Dashed Border 이번년도부터 자사에서 업로더를 개발 및 유지보수를 하게 됐는데Dropzone 기능을 개발하면서 border를 커스터마이징 하고 싶어 알아보다 알게된 페이지이다. 내가 원하는 모습으로 dashed border를 설정할 수 있어서 좋은것 같다.아래와 같이 border style이 나오고내가 원하는 dashed border로 조정할 수 있게 도와주고 있다.필요로 하는 dashed border가 완성되면  background-image 형태로 제공된다.필요하는 사람은 아래 링크를 들어가서 사용하고 싶은 dashed border 를 만들면 될 것 같다 !CSS Trick – Customized Dashed or Dotted Border (kovart.github.io) Dashed Border Generator ..

2024. 1. 3.

개발

[ES6] Array,Object 활용 ES5에서 for문으로만 구성되었던 Array 배열의 분해라면, ES6내에서는 forEach , for ~ of 문을 제공한다. Array - 반복문의 활용 ES5(for loop)var arr = [1,2,3,4];for( var i = 0 ; iES6(forEach loop)const arr = [1,2,3,4];arr.forEach((item,index) => { // 1 console.log(item,index);});for(let item of arr){ // 2 console.log(item);}구조 분해 할당> 배열이나 Json,Object 형태에서 속성을 해제하여서 변수로 할당하는 방식을 의미한다.> 어떤 것을 복사한 이후에 변수로 복사해준다는 의미이다.> 이 과정에서 분해 혹은 파괴되지 ..

2023. 1. 9.

개발

[ES6] 화살표 함수(Arrow function) 저번 글에는 var let/const 의 차이에 대해서 알아보았다. 이번에는 ES5 ES6의 대표적인 차이 가운데 하나인화살표 함수에 대해서 알아보려고 한다. 1. 화살 표함수 문법자바스크립트에선 함수를 아래와 같이 만들어서 사용한다.// 1function func(){ //blablabla..}// 2var func() = function(){ //blablabla..}func();함수는 1 과 2 처럼 만들수 있고 func() ; 이렇게 호출합니다.하지만 ES6에서 부터는 신 문법을 사용하면 이렇게 만들 수 있습니다. var func = () => { // blablabla..}function 이라는 길고 복잡한 키워드 대신에 => 이렇게 화살표를 사용해서 함수를 만들어 낼 수 있습니다.그렇다면 ..

2023. 1. 9.

개발