본문 바로가기

ReactApp5

React App 만들기 - 메모 기능 구현하기 2 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 다음으로는, 할 일을 지울 수 있는 기능을 추가해야 한다. 그 전에, 이전에 만들었던 코드 내용을 보면, 텍스트만 표기되기 때문에, 할 일 리스트에 중복된 데이터가 들어가는 경우 어떤 데이터를 지울지 식별하기 어려움이 있으므로, 할 일 데이터를 배열이 아닌 object 형식으로 변경하고, 각 할 일 에는 할 일의 Id값과 할 일의 value (내용) 을 추가하는 코드로 변경해야 한다. impo.. 2023. 6. 21.
React App 만들기 - 메모 기능 구현하기 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 두 번 째 기능 구현을 하기 전, 시계 기능을 하는 코드들을 별도 컴포넌트로 이동시켰다. 기능 별로 분리해서 관리하는 것이, 다른 페이지 구현 때 재사용하기에도 편리하고, 기능 수정 할 때 코드 찾는 것도 수월하기 때문이다. // App.jsx import './App.css'; import { useState } from 'react'; import Todos from './Todos.jsx.. 2023. 6. 20.
React App 만들기 - 시계 기능 구현하기 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 현재 시간을 반환하는 javascript 내장 함수를 통해 간단하게 구현할 수 있다. let nowtime = new Data(); // 현재 시간 반환 이 기능을 이용해 아래와 같이 코드를 구성했다. React 파일 내 자바스크립트 언어 삽입은 { } 안에 넣어주면 된다. import './App.css'; function App() { let clock = new Date(); // 시간 .. 2023. 6. 15.
ReactApp 만들기 - React 설치 구현할 기능 정리하기 앱(페이지)을 구현하기 전, 앱에 들어갈 기능을 먼저 정리하고 들어가자, 이전 구현한 경험이 있는 기능과 새로 구현하고 싶은 기능은 아래와 같다. 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 기능 구현 내용이 정리되었다면, 본격적으로 Ract를 설치하자 npx create-react-app {appname} {appname}에 대문자가 포함된다면, 설치되지 않으므로 소문자로 이름을 정해주자 설치가 완료된 후, 폴더로 이동하여 프로그램이 .. 2023. 6. 15.
React App 만들기 - 준비 시작하기 전 오래 전, 무료 인터넷 강의를 통해 나만의 크롬 앱 만들기를 진행하였다. html과 css, javascript 를 가지고 만들고, github에 등록하여 내가 있는 지역의 날씨, 현재 시간, 할 일 메모의 기능이 포함 되어있다.강의를 보고 프로젝트를 진행하여, 각 기능들이 정상 작동되는 것을 확인하였으나, css 작업이 고통스러워서내 기준으로 완성이 덜 된 상태로 배포하게 되었고, 이후로는 작업하지 않았다.기능을 구현하는 것에 대해서는 많은 흥미를 느끼고 진행했고, 배포까지 완료된 후 인터넷 환경에서는 어디에서도 확인이 가능한 모습을 보고뿌듯함을 느꼈으나, 자주 들어가지 않은 탓에 점점 내 관심에서 멀어지고 있었다.그러던 어느날, 크롬 시작 페이지를 설정할 수 있다는 기능을 알게 된 후, .. 2023. 6. 14.