[Babel] Loader 사용하기 😎 이전 글에서는 webpack을 이용한 기본 설정을 마쳤다.더보기2024.05.02 - [Javascript/Webpack] - Webpack 이해하기 - Concepts이번 글에는 기본 환경을 적용한 webpack에 babel을 적용하여 webpack에대한 전반적인 이해도를 추가로 진행하도록하고자 합니다. 로더는 webpack 에서 중요한 부분을 차지하기 때문에 단순하게 번들링만 할 경우, 효용성이 크게 떨어진다고 합니다.번들링을 사용하지 않고 각각의 정적파일로 관리할 때, 장점들을 모두 사용하기 위해 Loader 라는 것을 이용합니다. Loader는 모듈을 입력받아 원하는 형태로 변환하고 새로운 모듈을 출력하는데Loader는 babel 같은 트랜스 파일러 뿐 아니라 이미지파일, CSS파일 등에 대한 작..

2024. 5. 9.

개발

[Webpack] Webpack 이해하기 - Concepts 아래 문서는 webpack의 가이드 문서를 참고하여 작성됨을 알려드립니다. Webpack ?webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.( Webpack 공식 사이트 )디펜던시 그래프란?더보기하나의 파일이 다른 파일에 의존할 때 마다, webpack은 이것을 의존성으로 취급합니다. 이를 통해 webpack은 이미지 또는 웹 폰트와 같은 코드가 아닌 애셋을 가져와, 애플리케이션에 의존성으로 제공할 수 있습니다. webpack은 애플리케이션에서 필요한 모든 모듈을 포함하는 디펜던시 그래프를 재귀적으로 빌드한 다음, 모..

2024. 5. 2.

개발

[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.

개발