본문 바로가기

노마드코더15

11. 시간에 따른 Title ※시간에 따라 사용자에게 Title로 인사 하기 componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg module - import React, {useEffect, useState} from 'react' import '../css/List.css' import Input from '../component/Input' import Button from '../component/Button' function Login() { const checkU.. 2024. 2. 4.
10. 체크박스 체크 유무 확인 ※체크박스 체크 유무에 따라 할 일 완료 표시 componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg component - import React from 'react' function Input({className, type, name, value, onChange, maxLength, placeholder, checked}) { return ( ) } export default Input component - import React from '.. 2024. 2. 4.
9. 오늘의 할 일 추가, 삭제 오늘의 할 일을 todoList 형태로 만들어서 추가, 삭제 기능 구현 ※ToDoList 모듈 추가, Checkbox 컴포넌트 추가 ※map 함수를 이용해서 todoList 나타냄 -map(): 반복되는 컴포넌트를 렌더링 ※useRef 훅으로 todoList key 값 설정 -useRef : DOM에 접근하기 위해 사용 ※ filter 함수를 이용해서 일기 삭제 -filter() : 주어진 함수의 조건을 만족하는 배열의 요소들만 모아(true면 유지, false면 버림) 새로운 배열로 반환함. ※ diaryKey이 중복되지 않도록 localStorage에 diaryKey 저장 componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.. 2024. 2. 3.
8. OpenWeatherMap API 가져오기 ※OpenWeatherMap 사이트에서 날씨 API 정보를 가져오기 ※fetch 함수로 API 서버와 연결 -fetch: 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 하는 메서드 클라이언트와 서버를 연결시켜줌 ※?.(옵셔널 체이닝): 객체 내의 key에 접근할 떄 그 참조가 유효한지 아닌지, 프로퍼티가 없는 중첩 객체를 안전하게 접근 객체 내 값이 null, undefined일 경우 값 반환 ※ &units=metric: 섭씨 온도로 변환 componenet -Input.jsx -Button.jsx module -Login.jsx -Clock.jsx -Weather.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5... 2024. 2. 1.

티스토리툴바