ITeus

안녕하세요. Teus입니다.지난번까지 BGM을 깔아놨죠? 이제 BGM과 함께 처음 청첩장을 보시는분들이 맞이할 내용을 작성합니다. # 1. 신부/신랑 이름 어디서 언제 결혼이거는 어려울게 별로 없습니다. 일단 기본적으로 틀을 설계하고 들어갑니다.이러한 형태로 만들려고 합니다. 그러기 위해서 일단 신신(신랑님 신부님)은 위아래 마진을 두고 표시하고 나머지는 단순하게 tag를 사용해서 마무리 해 줍니다. App.jsximport reactLogo from './assets/react.svg'import viteLogo from '/vite.svg'import './App.css'import { useEffect, useRef, useState } from 'react';import Audiocomp fro..

안녕하세요. Teus입니다. 지난번까지, 어떻게 모바일 청첩장 페이지를 구성할지 다뤘습니다. 이제 이 페이지 레이아웃의 Components를 하나씩 채워보겠습니다. 이번에는 가장 최 상단에 위치하는 오디오 입니다. ​# 1. 오디오영역 Components모바일 청첩장에 BGM이 빠질 수 없죠? 다들 결혼식 하면 생각날 아주 따스한 음악으로 깔아 주지용. 이제 이 BGM을 모바일 청첩장 프로젝트에 추가해 보도록 하겠습니다. 오디오영역 Components 같은 경우는 오디오 버튼이 존재하고 해당 버튼을 누르면 Audio가 나오고, 버튼을 다시 누르면 Audio가 종료되는 형태로 동작합니다. 아래와 같이 간단하게 설계할 수 있겠네요. 일단 Audio 버튼을 만들기 위한 Audio icon을 구글에 검색하면 다..

안녕하세요. Teus입니다. 지난번까지, github에 내가 만든 웹페이지를 올리는 방법에 대해서 다뤗죠? 이제 어떻게 내가 모바일 청첩장을 만들지 구상하는 단계 입니다.1. Page LayOut일반적인 모바일 청첩장을 보면 기본적으로 모바일로 보기 때문에, 세로로 길쭉한 형태의 페이지 입니다. 이 모바일 청첩장은 모바일로도 보지만, 컴퓨터로도 볼 수도 있겠죠? 그래서 이런점을 대비하기 귀해서 아예 페이지 설계를 아래처럼 넓은 화면에 좌우 여백을 만드는 방식으로 준비해줍니다.이렇게 해 준다음, 청첩장이 표시될 영역을 설계해 줍니다. 그리고 나서, 청첩장이 어떻게 보일지를 정해야 겠죠? 저같은 경우는 친구가 보내준 모바일 청첩장을 베이스로 아래처럼 설계를 했습니다.그래서 이렇게 만들기 위해서 이전에 만든 ..

안녕하세요. Teus입니다. 이번 포스팅은 github pages를 이용해서 기본적인 react template를 올리는 방법을 알아봅니다.1. github page?(https://docs.github.com/ko/pages/quickstart)[https://docs.github.com/ko/pages/quickstart]GitHub Pages는 github에서 제공해주는 정적인 WebSite hosting서비스 입니다. 일반적으로는 개발자들의 블로그 등을 작성하는 페이지로 이용되는데 저는 여기에 제 모바일 청첩장을 올리기로 했습니다. 일단 github에 새로운 repository를 만들어 줍니다.그리고나서 새롭게 만들어질 repository의 이름을 my_github_id.github.io 로 만들..

안녕하세요. Teus입니다. 저는 코딩 관련된 유사한 직업을 하고 있었습니다. 그러던 와중에 든 생각이모바일 청첩장. 직접 만들면 되지 않을까🤔?하는 생각이 들었고 모바일 청첩장 가격이 얼마하는지 스윽 봤습니다....생각보다 얼마 안하더라구요... 그래도!😏 내가 직접 내 결혼식의 청첩장을 만들면, 특별한 선물이 되지 않을까? 하는 생각에 직접 모바일 청첩장을 만들게 되었습니다.1. 어떻게 외부에 공개할 것인가?일단 청첩장을 만들고, 이 청첩장을 외부에 사람들이 확인 할 수 있어야겠죠? 그렇다면 결국 클라우드던 뭐던 배포를 해야합니다. 전통적인 cloud : Amazon EC2, Azure Static WebApp등 무료 WebApp 배포 : Vercel이나 Netlify와 같이 정적인 FrontEn..