본문 바로가기

프로젝트13

스톱워치 프로젝트: localStorage에 스톱워치 시간 저장 및 불러오기 프로그램 실행 시 localStorage가 비어있는지 확인하고, 비어있지 않다면(저장된 데이터가 있다면) 데이터를 불러오게 하였다. 데이터를 변경하면서(초기 리셋값은 모두 0) 화면에 보여지는 값도 변경해 주었다. const browserTimeData = localStorage.getItem("stopwatch"); if (browserTimeData !== null) { //localStorage에 데이터가 저장되어 있다면 const parsedData = JSON.parse(browserTimeData);//JSON 형태로 얻어온 데이터를 해석한다. hour = parsedData[0]; min = parsedData[1]; sec = parsedData[2]; tenMillisec = parsed.. 2024. 1. 10.
[React] 포트폴리오 웹 사이트 제작 일지-7. 전체 스타일링 수정, 디자인 변경 스타일링 진행하다 보니 겹치는 스타일이 많아서 겹치는 부분은 한꺼번에 관리하여 전체적인 통일성을 유지하기로 했다. 내가 사용하고 있는 기본 css 스타일링은 import한 스타일 시트 이외에 프로젝트 내 구현된 다른 css 파일도 참조한다. (따라서 동일한 클래스 네임을 가지고 있다면, CSS 클래스가 중첩어 예상과 다른 동작을 하기도 한다. 이러한 문제점을 해결하기 위해 css module, sass 라이브러리 , emotion 라이브러리, styled-components 라이브러리 등을 사용한다.) 따라서 나는 가장 최상위 컴포넌트인 App.css 내부에 공통 스타일링을 작성해 코드 중복을 줄이고 전체 스타일링에 통일성을 주었다. App.css /* 전역 스타일링 */ h1 { margin: 0; f.. 2023. 10. 15.
[React] 포트폴리오 웹 사이트 제작 일지-6. 최상단 이동버튼, Tech Skill 기술스택 추가, Portfollio 내용 추가 최상단 이동버튼 구현 이미 포트폴리오 상단 메뉴바의 'Portfolio'를 누르면 최상단으로 이동이 가능하지만, 오른쪽 하단부에 최상단으로 이동이 가능한 버튼 하나를 추가하기로 했다. 아이콘은 아래 사이트를 이용했다. https://icons8.kr/ 무료 아이콘, 클립아트, 사진 및 음악 icons8.kr 더블 업 icon by Icons8 사이트 내부에 위 링크를 추가해서 출처를 밝히면 무료로 아이콘을 사용할 수 있다. 버튼은 간단하게 구현하고 이전에 만들어 두었던 moveToHomeHandler 함수를 연결해 주었다. App.js ... function App() { ... return ( ... ); } export default App; TopButton.js import "./TopButton.. 2023. 10. 14.
[React] 포트폴리오 웹 사이트 제작 일지-5. 상단 메뉴바 구현 (useref 를 이용한 컴포넌트 간 스크롤 이동) 기존 계획은 사이드 메뉴를 구현하는 것이었는데, 이미 구현해 놓은 화면 위에 사이드 메뉴를 얹으니 이질감이 들어서;; 상단 메뉴바를 구현하기로 했다. MenuBar.js import "./MenuBar.css"; const MenuBar = () => { return ( Portfolio Archiving Tech Skills Project Edu & Cert Contact ); }; export default MenuBar; 을 이용해 id="Home"인 div나 name="Home"인 a 태그로 이동이 가능하도록 하였다. 스타일링은 아래와 같이 진행했다. .menu-bar { position: fixed; top: 0; right: 0; left: 0; background-color: beige; z.. 2023. 10. 13.
[React] 포트폴리오 웹 사이트 제작 일지-4. EmailjS를 이용해 서버 없이 이메일 전송 구현하기 Contact 페이지의 이메일 전송 폼을 모두 구현한 뒤 서버 구현 없이 이메일을 전송할 수 있는 방법 찾아보던 중, emailjs를 이용한 방법과 구글 스프레드 시트를 이용한 방법이 있다는 것을 알게 되었다. 두 방법을 모두 살펴보니 emailjs가 구현하기 쉬워 보여서(공식문서가 잘 되어 있다) emailjs를 이용하기로 했다. emailjs Send email directly from your code | EmailJS No server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com 위 사이트에 접.. 2023. 10. 13.
[React] 포트폴리오 웹 사이트 제작 일지-3. Archiving, Skills, Project, Contact 컴포넌트 생성 및 기본 CSS 작성 + 리액트 버튼에 내부 링크 걸기 🎁 Archiving 컴포넌트 생성 Archiving.js import Card from "../components/Card"; import "./Archiving.css"; const Archiving = () => { return ( Archiving GitHub github.com/Yoonyesol 작업한 소스를 업로드해 둔 저장소입니다. Blog florescene.tistory.com 공부 기록, 프로젝트 진행 과정을 기록해둔 블로그입니다. ); }; export default Archiving; 🔗 버튼에 내부 링크 걸기 (버튼 클릭 시 내부 문서의 특정 위치로 이동) Home.js (window.location.href = "#Archiving")} > ↓ Archiving.js Archiv.. 2023. 10. 13.
[React] 포트폴리오 웹 사이트 제작 일지-2. 리액트 프로젝트 시작, Home 컴포넌트 구현-2초마다 title 글자 변경+Fade in 효과 🔅 리액트 설치 npx create-react-app my-app 💻 구현할 화면 왼쪽의 메뉴바와 중앙의 카드는 모든 페이지에서 사용될 예정이기 때문에 공용 컴포넌트로 만들어 둔다. 🛴 공용 컴포넌트 생성 Card.js import "./Card.css"; const Card = (props) => { return {props.children}; }; export default Card; SideMenu.js import "./SideMenu.css"; const SideMenu = () => { return ( Github. Blog. ); }; export default SideMenu; 🧶 Google Fonts index.html에 링크 포함 ... 사용하고자 하는 곳에서 font-family 지.. 2023. 10. 12.
[React] 꿈 일기 기록 사이트 제작 일지-13. 검색 기준을 제목, 내용으로 확대, 검색 결과를 화면이 아닌 본문에 추가하기 검색 기준을 제목, 내용으로 확대 기존에는 일기 내용만 검색이 가능하도록 구현했는데 제목도 검색 항목에 추가하고 싶었다. const SearchedData = diaryCtx.diary.filter((it) => { if (inputText !== "") { return it.content.toLowerCase().includes(inputText); } }); 현재 검색어를 포함한 일기를 포함한 로직은 위와 같은데, 여기서 조금만 손을 봐서 일기 제목도 검색 가능하도록 수정해 보려고 한다. const SearchedData = diaryCtx.diary.filter((it) => { if (inputText !== "") { if (it.content.toLowerCase().includes(input.. 2023. 9. 28.
[React] 꿈 일기 기록 사이트 제작 일지-11. 일기 검색 기능 추가 일기 검색 코드는 간단하게 로직을 짠 뒤 필요한 부분을 수정해 가며 진행하기로 했다. 🔍 일기 검색 코드 작성 const diaryCtx = useContext(DiaryContext); const [inputText, setInputText] = useState(""); const inputHandler = (e) => { let lowerCase = e.target.value.toLowerCase(); setInputText(lowerCase); }; const SearchedData = diaryCtx.diary.filter((it) => { if (inputText !== "") { return it.content.toLowerCase().includes(inputText); } }); 전체 일기.. 2023. 9. 27.
[React] 꿈 일기 기록 사이트 제작 일지-5. 일기 정렬 기능 및 페이지 이동 버튼 구현 Home.js에서 일기 리스트 렌더링 부분만 빼서 새로운 DiaryList라는 컴포넌트를 만들었다. 이 DiaryList 컴포넌트에서 일기 검색창, 일기 정렬 드롭다운, 일기 작성 버튼, 일기 리스트 렌더링을 수행한다 . 일기 정렬 및 일기 작성 페이지로 이동 import { useState } from "react"; import Button from "../components/Button"; import { useNavigate } from "react-router-dom"; const sortOption = [ { value: "latest", name: "최신순" }, { value: "oldest", name: "오래된 순" }, ]; //최신순, 오래된 순 출력해주고 각 값을 선택하면 그에 맞.. 2023. 9. 25.
[React] 꿈 일기 기록 사이트 제작 일지-4. Home.js 작성한 월에 맞는 일기 리스트 렌더링 데이터가 정상적으로 렌더링되는 것을 확인했으니 이제 상단 헤더의 실제 작동을 시켜본다. 상단 헤더의 월 이동을 도와줄 함수와 중간 텍스트 자리에 들어갈 텍스트를 생성한다. const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; const decreaseMonthHandler = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate()) ); }; const increaseMonthHandler = () => { setCurDate.. 2023. 9. 24.
[React] 꿈 일기 기록 사이트 제작 일지-2. 리액트 프로젝트 시작 및 페이지 만들기, 라우터 설정, 공용 컴포넌트 설정 리액트 설치 npx create-react-app my-app 라우터 라우터 설치 npm install react-router-dom --save 만들어야 할 페이지는 메인 페이지, 일기 작성 페이지, 일기 수정 페이지, 일기 개별 조회 페이지로 총 4개이다. 페이지를 만들고 라우터에 각 페이지와 url을 매핑한다. function App() { return ( ); } 이제 url과 각 페이지가 매핑되었다. 공용 컴포넌트 생성 웹 사이트에 전체적으로 쓰일 버튼과 상단의 헤더, 카드 컴포넌트를 생성한다. 헤더에는 왼쪽 버튼, 중앙의 텍스트, 오른쪽 버튼의 요소가 들어간다. import "./Header.css"; const Header = ({ leftBtn, headText, rightBtn }) =>.. 2023. 9. 22.
반응형

티스토리툴바