본문 바로가기

전체 글82

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.
7. 위도, 경도 불러오기 ※ 현재 위치의 위도와 경도를 가져옴, Weather 모듈 추가 -navigator.geolocation.getCurrentPosition 함수로 사용자의 현재 위치를 요청 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.jpg module - : 사용자의 현재 위치를 요청 import React, {useEffect} from 'react' function Weather() { const getLocation = position => { const lat = position.coords.lati.. 2024. 2. 1.
5. 카테고리, 작성 날짜 카테고리 별로 일기 표시, 작성한 날짜와 시간을 표시 ※select, option 태그로 카테고리를 분류 (미분류, 일상, 공부, 여행, 게임) ※일기 작성 시 입력 칸 비어있고, 카테고리가 지정되어있지(미분류) 않을 시 경고문 출력 ※각 일기마다 name(value)를 지정해서 카테고리를 분류 ※일기를 작성한 날짜를 표시 ※각 카테고리 버튼을 클릭 시 각 카테고리에 속한 일기만 보여줌 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX -Category.JSX -CategoryButton.JSX module -Diary.JSX css -Diary.css -Category.css component - : select.. 2024. 1. 31.
4. EditDiary 일기장을 수정 ※true, false에 따라 수정 textarea, 수정/적용 버튼 나타내기 ※ map 함수를 이용해 지정한 id에 content만 변경 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX module -Diary.JSX css -Diary.css component - : 수정 textarea 나타내기 import React, {useState} from 'react' import '../css/Diary.css' import Button from './Button' import Textarea from './Textarea' function DiaryBlock({title, content, id, .. 2024. 1. 29.
3. DeleteDiary, diaryKey 값 유지 일기장 삭제, 새로고침 diaryKey 값 초기화 되지 않고 저장 ※ filter 함수를 이용해서 일기 삭제 -filter() : 주어진 함수의 조건을 만족하는 배열의 요소들만 모아(true면 유지, false면 버림) 새로운 배열로 반환함. ※ diaryKey이 중복되지 않도록 localStorage에 diaryKey 저장 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX module -Diary.JSX css -Diary.css component - : 클릭하면 일기 삭제 import React from 'react' import '../css/Diary.css' import Button from './Butt.. 2024. 1. 29.
2. AddDiary 일기장을 리스트에 새로 추가 ※addDiary 함수 추가 ※map 함수를 이용해서 생성되는 일기 블록 나타냄 -map(): 반복되는 컴포넌트를 렌더링 ※useRef 훅으로 일기 key 값 설정 -useRef : DOM에 접근하기 위해 사용 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX module -Diary.JSX css -Diary.css coponent - : addDiary 프롭을 추가해서 Diary.JSX로 입력값 전달 import React, {useState} from 'react' import '../css/Diary.css' import Input from './Input' import Text.. 2024. 1. 29.

티스토리툴바