본문 바로가기

Font-end12

[Webpack4] 무작정 시작하기 (1) - Webpack이란? Webpack이란? javascript 모듈(Module) 번들러(Bundler) Webpack은 JS 파일 뿐만 아니라, CSS, HTML, Image 등을 모듈로 로드해서 사용할 수 있다. 또한, 코드를 압축, 최적화 하는 기능들을 제공하며, 번들링된 파일이 너무 무거워질 경우 다시 여러 개의 파일로 나눌 수 있는 코드 스플리팅(Code Spliting) 기능도 제공한다. 핵심 개념으로는 Mode, Entry, Output, Loader, Plugin가 있으며, 추가로 Optimization이 있다. 모듈(Module)이란? 모듈은 프로그램을 구성하는 요소 중 하나이며 관련된 데이터와 함수들이 묶여서 모듈을 형성하고, 주로 파일 단위로 관리된다. 예를 들어, 팝업은 isOpen이라는 상태 데이터와 o.. 2020. 11. 18.
[React] Layout을 구성해보자 서론 블로그나 쇼핑몰 등 기본적인 웹사이트를 구성할 때 Header, Section, Footer, SideBar와 같은 기본요소를 가지게 된다. 메뉴를 클릭하여 페이지가 변경되면 Header, Footer, SideBar는 항상 같은 내용을 유지하며, Section의 내용만 변경되게 된다. 이번 포스트에서는 React를 이용하여 기본요소를 가지며, Section만 변경되도록 Layout을 구성해볼 계획이다. 1. 프로젝트 구성 1-1. 프로젝트 생성 npx create-react-app react-layout-app 1-2. package 설치 npm install --save react-router-app styled-components 1-3. 폴더 구성 2. App 구현 3. Layout 구현 3.. 2020. 7. 26.
[Context Menu] 나만의 컨텍스트 메뉴 만들기 0. 서론 웹 브라우저에서 마우스 오른쪽 클릭을 하면 아래와 같이 'Context Menu'가 출력된다. 이 메뉴에는 뒤로가기, 새로고침, 다른 이름으로 저장 등 기본적으로 브라우저에서 제공되는 이벤트들이 있다. 평소처럼 아무 생각없이 이 메뉴들을 사용하다가, 문뜩 내 맘대로 꾸며보고 싶어졌다. 그래서, 또 직접 만들어 보았다. 이번 포스트에서는 이 Context Menu를 만드는 방법에 대해서 다루어 볼 계획이다. 가장 간단하게 만들 수 있는 정적 Context Menu를 만들어보고, 좀 더 확장시킨 동적 Context Menu를 만들어볼 계획이다. 1. 정적 Context Menu 작성 1-1. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .. 2020. 5. 29.
[CSS] Javascript 없이 Tab Menu 구현하기 서론 HTML 태그 중에 태그의 for속성은 연결된 태그로 Focus를 이동시키는 기능을 한다. 예를들어, 그 대상이 이면 바로 입력할 수 있도록 커서가 깜빡이며, 나 라면 해당 태그의 checked 상태가 'on/off'된다. 이 예제는 이러한 태그의 for속성을 이용한 방법이다. 1. 예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81.. 2020. 4. 24.

티스토리툴바