전체 글

프로젝트의 성능을 좌우하는 webpack, 수정하고 수정하다보면 내가 도대체 지금 뭘 하고 있나 싶을 때도 있다그 계기로 webpack에 대해 자세히 정리하고 싶었다!  webpack이란??웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Image 등)을 모두 각각의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구를 의미한다. 모듈 번들러는 웹 애플리케이션을 구성하는 자원(컴포넌트, 이미지, CSS파일 등등)을 모듈 단위로 나누어 필요할때마다 조합하여 하나의 결과물로 산출시키는 역할을 한다. 프론트엔드 업계에서 많이 사용되는 프레임워크인 리액트, 뷰는 프로젝트 파일의 크기가 꽤나 크다..

해시테이블 종류 -  Object, Map, Set해시테이블은 속도가 빠르기에 자주 사용되며, 대부분의 프로그래밍 언어에서는 아래와 같은 해시 자료구조를 가지고 있다Javascript: Map, Object(객체에서는 key로 문자열만 사용 가능), Set본래 자바스크립트에서 해시테이블 자료구조는 Object가 대표적이었으나, ES6에서 Map과 Set이 추가되었다.  🏷️Object 이용하기Object.keys(객체) &&Object.values(객체) JSON.stringify(객체) : 객체 문자열로 변환 in을 이용해 key와 value값 출력시키기  of && Object.entries()를 이용해 key와 value값 출력시키기 (보통 of는 배열을 순회할 때 많이 사용된다) ✔️Object..

DOM (문서 객체 모델)이란?문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다. 해당 문서 트리 구조로 표현JavaScript와 DOM, 다른 개념인 이유는?DOM은 자바스크립트 없이 DOM 인터페이스 구현만으로도 DOM을 조작할 수 있기 때문입니다. DOM은 앞서 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스라고 설명했습니다. 조금 더 부연 설명을 하자면 ..

📌Recoil이란? 비교적 간단한 프로젝트엔 무겁게 느껴질 수 있는Redux, 그리고 Redux 는 근본적으로 React를 위해 출시된 것이 아니다. Recoil은 React 자체에 내장된 상태 관리 기능인 ContextAPI를 한계를 보완하고자 facebook에서 개발한 라이브러리이다. 📌Recoil은 무엇이 다를까? 우선 첫번째, Recoil은 배우기 쉽다. API가 단순하고 이미 hook을 사용하고 있는 사람들에게 익숙할 것이다. Recoil을 시작하기 위해서는 어플리케이션을 RecoilRoot로 감싸고, 데이터를 atom이라는 단위로 선언하여 useState를 Recoil의 useRecoilState로 대체해야 한다. 두번째, 컴포넌트가 사용하는 데이터 조각만 사용할 수 있고, 계산된 select..

TailwindCSS란? HTML을 벗어나지 않고도 최신 웹사이트를 빠르게 구축할 수 있습니다 Tailwind CSS는 사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크이다. 유틸리티 클래스를 사용하여 레이아웃, 색상, 간격, 타이포그래피, 그림자 등 을 제어하여 HTML을 벗어나거나 사용자 정의 CSS를 한 줄도 작성하지 않고 완전한 사용자 정의 구성요소 디자인을 만들 수 있다. Tailwindcss 설치하기 설치하는 방법은 프레임워크 별로 달라서 공식 문서를 참고하는게 가장 좋다. 1. 패티지 설치 npm install -D tailwindcss 2.tailwind.config.js 파일 생성 npx tailwindcss init 3. tailwind.confi..

📌redux를 이용해 만든 계산기 기능 import React from "react"; import { createStore } from "redux"; import { Provider, useDispatch, useSelector } from "react-redux"; // Actions const ADD_NUMBER = "ADD_NUMBER"; const ADD_OPERATOR = "ADD_OPERATOR"; const CALCULATE_RESULT = "CALCULATE_RESULT"; const CLEAR_DISPLAY = "CLEAR_DISPLAY"; const addNumber = (number) => ({ type: ADD_NUMBER, payload: { number } }); const ..

✅문제설명 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 크기가..

Array.from() 사용하기 Array.from() 메서드는 유사 배열 객체(arrat-like object)나 반복 가능한 객체(literable object)를 얕게 복사해 새로운 Array 객체를 만든다. array.from(object, mapFunction, thisValue) object - 배열로 변환할 객체 mapFunction - 배열의 모든 요소에 실행할 함수 thisValue - 함수 내부에서 사용될 this에 대한 값 1. 2. 2번의 예시는 첫번째 인자로 배열을 두번째 인자로 각각의 배열에 적용할 함수를 건내주고 있다. Array.from({length: 20}, () => Array(10).fill(0) ); 위와 같이 사용하면 20*10의 2차원 배열을 리턴한다. ※ 왜 {..