TwentyTwentyOne

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 4편: 캘린더 플러그인 구조 설계 – 날짜 렌더링을 위한 UI 기본 구성이번 편에서는 드디어 본격적으로 캘린더 플러그인의 UI 구조를 설계하고,기본 날짜 렌더링 기능을 구현해보겠습니다.우리는 이미 TypeScript 기반의 개발 환경과 Webpack 설정을 완료했으므로,이번 글부터는 **“화면에 달력을 출력하는 실질적인 기능 구현”**에 집중할 수 있습니다.🎯 목표한 달 달력 구조를 설계하고 렌더링하는 함수 만들기Date, TypeScript, DOM 조작을 활용해 UI 구성캘린더 데이터를 화면에 그릴 수 있는 최소 기능 완성🧠 캘린더 기본 구조 이해하기✅ 필요한 구성 요소요소 설명연/월 헤더현재 표시 중인 날짜요일..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 3편: Webpack 제대로 이해하기 – 번들링 개념과 설정 파일 완전 분석이번 글에서는 Webpack의 핵심 개념인 번들링, 모듈, 의존성 그래프, 로더, 플러그인을 실제 코드와 함께 이해하고,우리가 작성한 TypeScript 코드가 어떻게 브라우저에서 실행 가능한 자바스크립트로 변환되는지Webpack이 어떤 역할을 수행하는지를 체계적으로 설명하겠습니다.🎯 목표Webpack의 역할과 작동 방식 이해webpack.config.js의 주요 속성 분석Webpack에서 ts-loader, dev-server, output 구조 설정 완전 정복🧠 Webpack이란?Webpack은 모듈(Module)을 하나의 번들로 묶어주는..

📌 Webpack과 TypeScript로 만드는 웹앱 캘린더 플러그인 개발 시리즈✅ 1편: 개발 환경 설정과 프로젝트 구조 이해하기웹앱에서 활용할 수 있는 커스터마이징 가능한 캘린더 플러그인을 직접 만들어보는 시리즈의 첫 번째 글입니다.이 시리즈는 Webpack, TypeScript, JavaScript, Node.js 환경을 처음 접하는 사람들을 위해 개념 설명 + 예제 코드 + 실습 중심으로 작성됩니다.이번 글에서는 프로젝트의 기초 환경을 설정하고, 플러그인의 구조를 설계하는 데 초점을 맞춥니다.🎯 목표Node.js 기반 TypeScript 프로젝트 초기 설정Webpack을 위한 기본 설정 파일 구성향후 캘린더 플러그인 개발을 위한 폴더 구조 설계🛠️ 1. 개발 도구 사전 설치✅ Node.js ..

npm init Webpack Install npm i -D webpack webpack-cli webpack-dev-server @webpack-cli/generators html-webpack-plugin init npx webpack init Typescript Install npm i -D typescript ts-loader init npx tsc --init Babel Install npm i -D @babel/core @babel/preset-env babel-loader

Github page로 포트폴리오 웹페이지 만들기현재 프로젝트로 진행하는 React로 github page만들기에서 about과 work 페이지로 이동할수 있는 route설정과 header를 만들어 layout을 통해 페이지에 모두 반영하는 부분까지 해보았습니다.header로 다른 페이지로의 이동은 잘 되지만, 직접 url 을 입력하거나, 새로고침 시에는 404 에러가 나오는 문제가 있습니다.해당 url 로 직접 접속할 경우 도메인이 연결된 github repository의 branch에는 라우트에 해당하는 디렉토리와 index.html 페이지가 없기때문에 404에러를 발생시킵니다.이문제를 해결하기위해 404.html 을 만들어 중간에 소스코드를 redirect 시켜주는 방법이 있지만, 이것 보다 각각 ..

Github page로 포트폴리오 웹페이지 만들기페이지를 만들다 보면 같은 양식이 반복될 경우가 있습니다.이러한 양식을 Layout component로 만들어 사용하면, 편리하게 적용시킬수 있습니다.이전에 만든 header가 들어가 있는 Layout을 만들어 봅시다. 1. Layout 디렉토리 만들기먼저 src→components 디렉토리 안에 layout 디렉토리를 만들어 줍니다.이전과 마찬가지로 해당 디렉토리 안에 index.js 파일을 만들어 주고 Layout이라는 함수를 만들어 export 시켜 줍니다. // src/components/layout/index.js // modules import React from "react"; const Layout=()=>{ return } export de..

Github page로 포트폴리오 웹페이지 만들기Main 페이지를 제외한 About 과 Work 페이지에는 헤더를 넣어 nav를 통해 다른 페이지로 이동할수 있게끔 해줍니다.이때 사용하는 소스들은 Main에 사용된 svg들을 Nav 컴포넌트로 이동 → 변경 한뒤 스타일 및 코드를 통해 다른 스타일로 만들어 주려고 합니다. 시작!!! components 만들기먼저 src 디렉토리에 components 디렉토리를 생성하고 그안에 nav 와 header 디렉토리를 각각 생성해 줍니다. 이제 nav → index.js 에 main→index.js에 있는 소스코드를 옮겨 줍니다.스르륵 추가적으로 변경된 사항은 window.location.pathname을 통해 ‘/’가 아닐경우 HIIO420 텍스트를 다른 텍스트..

Github page로 포트폴리오 웹페이지 만들기이제 about과 work 페이지를 만들어 route 설정을 통해서 접속 할수 있게끔 해주어야 합니다.그전에 현재까지 진행된 사항 중 몇가지 설정을 변경 시켜 주겠습니다. 1. webpack resolve aliasnpm 으로 설치된 모듈이외에 css나 svg 또는 component 파일들을 import 시킬때 상대 경로를 이용해 불러오고 있습니다. // example import GITHUB from "./resources/images/common/GITHUB.svg"; 파일의 위치를 옮겨 줄때 만다. 경로를 변경 해줘야하는 번거로움이 생기므로 webpack의 resolve 설정에 alias를 추가 해 줍니다. // webpack.config.js .....

Github page로 포트폴리오 웹페이지 만들기이전 글에서까지 Main 페이지에 넣을 텍스트들을 svg로 만들어 styled-components를이용해 배치하였습니다.이번에는 반응형 페이지 작업을 위해서 svg에 viewBox를 추가하고, styled-components에 media query를 추가해 보겠습니다. 1. viewBox!반응형으로 만들어 주기위한 첫번째 작업으로 svg에 %를 먹이기 위해 viewBox 속성을 추가해 주어야 합니다.viewBox는 (x,y,w,h)로 되어 있습니다.여기서 x,y는 0으로 고정하고, w와 h는 svg의 width 와 height속성을 입력해 줍니다.useEffect를 사용해 마운트 시 viewBox를 속성을 처음에만 추가 해주도록 합니다.// Main.js ..

Github page로 포트폴리오 웹페이지 만들기기본적인 설정 및 세팅을 이전까지 해보았습니다.앞으로 진행하면서 변경되거나, 추가되는 세팅은 차차 하기로하고 먼저 접속했을때 보여지는 첫 페이지를 만들어 봅니다.첫 페이지를 Main 페이지라고 하고, 어떻게 만들지 고민을 해봤습니다.“Simple is the Best” 그리고“Less is More”라고 했던가요. 디자인적인 요소는 프로젝트가 채워 질때마다 변화할 수도 있을듯 합니다. 사실 아직 무작정 만들어보기 단계이므로 우선은 만들어 봅니다. 0. 어떻게 만들까?제가 가장 처음 웹사이트를 보고 한번 따라 해보고 싶다고 생각한 곳은 OMA 라는 회사의 사이트 입니다.https://www.oma.com/OMA 는 건축사무사이고, 이 건축사무에서 한 프로젝트..