Frontend/Javascript
-
[Javascript] Named Export와 Default Export에 대해 알아보자Frontend/Javascript 2022. 4. 1. 13:17
변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. 모듈을 가져올 때 named export와 default export 두 가지 방식이 있는데 어떤 차이가 있는지 알아보자. module이란 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성되며 크게 두 종류로 나뉜다. 복수의 함수가 있는 라이브러리 형태의 모듈 개체 하나만 선언되어있는 모듈 모듈에 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능하다. export default export default는 해당 모듈엔 단 하나의 개체만 있다. // user.js export default class Use..
-
[webpack] 웹팩의 개념과 활용Frontend/Javascript 2022. 3. 4. 01:04
웹팩의 개념 웹팩은 자바스크립트 정적 모듈 번들러로 그림과 같이 애플리케이션을 구성하는 여러 개의 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리다. 웹팩을 사용하며 얻는 장점은 다음과 같다. 여러 개의 파일을 하나로 묶어줌으로써 네트워크 접속의 부담을 줄이고 더 빠른 서비스를 제공할 수 있다. 파일 단위의 자바스크립트 모듈로 관리하기 때문에 기존 자바스크립트 변수 유효 범위가 전역 범위를 가지며 발생했던 문제점을 해결할 수 있습니다. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다. 리액트로 프로젝트를 진행하며 웹팩을 따로 설치해 본 적이 없는데 이는 CRA(create-react-app)을 통해 기본 값이 이미 설정되어 있다. 이 기능을..
-
[Javascript] 파일 업로드와 프리뷰 구현하기Frontend/Javascript 2022. 2. 25. 14:41
자바스크립트로 이미지 파일을 업로드하고 프리뷰를 보는 방법에 대해 알아보자. input 태그 사용하여 이미지 파일 업로드 하기 input 이벤트에 파일을 담아온다. const [filePreview, setFilePreview] = useState(""); const onFileChange = (e) => { const { target: { files }, } = e; const imgFile = files[0]; const url = URL.createObjectURL(imgFile); setFilePreview(url); }; 이미지 하나만 올리기 때문에 첫번째 이미지를 선택한다. URL.createObjectURL() 이미지 blob 객체를 url로 바꿔주는 역할을 한다. 이를 setFilePrev..
-
[Javascript] 유사배열을 배열로 바꾸기Frontend/Javascript 2022. 2. 22. 13:58
NodeList는 DOM 요소 또는 보다 구체적으로 노드의 컬렉션을 나타내는 배열과 유사한 개체다. NodeList는 배열과 비슷하지만 개체 에 대해 map(), slice(), filter()와 같은 일반적인 배열 메서드를 사용할 수 없다. Hi Hi Hi ... 각 인자들의 프로토타입은 유사배열인 NodeList, HTMLColletion으로 나온다. 배열로 바꾸는 방법 1. Array.from() const ulChild = document.querySelector("ul").children; const ulChildrenArr = Array.from(ul.children); ES6에서 도입되었으며 유사 배열을 배열로 변환하는 가장 간단하고 쉬운 방법이다. 2. spread 연산자 const ulC..