감귤밭 호지차 농장

[구현 기능] 기존에 axios를 이용하여 불러왔던 weather open api를 fetch로 부르기 Weather.jsx 파일 생성 weather api를 불러올 때 편하게 사용 할 수 있도록 개인 key 와 주소를 전역 변수로 미리 선언해주었습니다. const api = { key : ' /* 개인 암호 키 */ ', base : 'https://api.openweathermap.org/data/2.5/', } Weather 함수 컴포넌트 안에 오늘 날짜를 불러올 함수를 작성해줍니다. const dateBuilder = (d) =>{ let months = [ "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월", ]; ..

[구현 기능] 모달 창에 contents 입력 시, 새 todolist에 추가되어 화면에 출력 # # # //App.js sendData라는 이름으로 {data} 파일을 보내는 거라서 에서는 바로 {sendData}를 받고 sendData 를 변수마냥 이용해서 넘어온 데이터들을 이용할 수 있다.!

# 모달 창의 [ + New Task ] 버튼 클릭 시, 로 입력 값 넘어가서 화면에 뜨기 [1]_ [ + New Task ] 버튼 클릭 시 모달 창 pop up const [showPopup, setShowpopup] = useState(falsE); const [newListcontent, setNewListcontent] = useState(''); const [lists, setLists] = useState([{ id:1, content: '첫번 째 할 일', date: '2022-03-31', }]; const togglePopup = () => { setShowpopup(!showPopup); } const onTextChange = (e) => { setNewListcontent(e.tar..

[1] total { count 예정 } Day Journey [ 구현 기능 ] : ( + ) / ( - ) 버튼을 누르면 숫자가 증가되거나 감소함. [ 추가 기능 ] : 카운트가 1 이하로 떨어지지 않게 고정하기 [ 추가 기능 ] 구현을 위해 useState 를 이용해서 함수를 만들 때, 조건을 걸어야 한다고 생각을 했습니다. 1. useState 이용해서 " btnIncrease " 와 " btnDecrease " 함수를 구현 2. 1 이하로 떨어지지 않게 하기 위해 btnDecrease에 조건을 지정 import {useState] from 'react'; /////////////////////////////// const [ up, btnup ] = useState(1); const btnIncr..

# React로 To Do List 만들기 # React로 weather Open API 불러오기 ERROR_ 01 : Logo 부분에 img 태그 사용으로 인해 발생 import React from 'react'; import './Navbar.css'; const Navbar = () => { return( To Do List // 이부분 ) } export default Navbar; . . img is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. . . > 해결 방안 : 태그로 수정 import React from 'react'; import './Navbar.css'; ..

코드스테이츠 부트캠프 수강하면서 겸사 겸사 과제 제출 겸 나를 소개하는 페이지를 배운 CSS를 활용해서 만들어 보래서 잉차 잉차 만들어서 완성했는데 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 와 다른 분들 제출한거 보니까 제꺼는 고냥고냥 유치원 작업물 수준... 현타 오지게 맞고 잉차 잉차 수정해야겠습니다. 😂 보이시나요 제 1차 작업물 흐릿하게 보기만 해도 느껴지는 .... 할말하안의 디자인 다른 분들의 디자인을 보니 숨이 턱 막힐 정도의 멋지고 깔쌈한 디자인 뿐이었습니다.... 디자인 창작의 감각이 없는 저같은 사람들은 대책안을 찾아야죵.. 바로 다른 분들의 멋지고 깔쌈한 디자인들을 미친듯이 서칭하고 여기서 디자인의 포인트들을 뽑아낸다음 이를 바탕으로 디자인 하는 수밖에....

HELP HELP ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이거 어떻게 해야 하는지 모르겠네요. Figma 들어가서 디자인 뭐 수정하려다가 잘 못 눌렀는지 저렇게 일종의 Drawing? tool? 같이 남아 버림....!!!!!!!!!!!!! 갓 댐; 긴급하게 네이버 지식인에 올려야 겠음...😂

🔖 미해결 건 #221027 로그인 페이지 연습하기 그런데 등록 페이지로 넘어가지 않는다. See the Pen Untitled by Emma-Hyejin (@Emma-Hyejin) on CodePen. ▶ 해결 방법 : https://stackoverflow.com/questions/52384228/javascript-animate-toggle-for-3-forms Javascript Animate Toggle for 3 forms At the moment I have 2 forms. Login form and Registration form. I use Javascript Toggle to switch between them. But now I want to add a 3th form. How can..

# STR 디자인 초안 1 1. main page 2. 설정 - 시간 설정 page 3. 로그인 page 4. 고객 센터 문의 page 5. 설정 - 태그 page, 설정 - 공부 기록 page

가제 : STR [ Study Time Record ] ◈ 제작 기간 - total " 31일 " 목표 - 디자인 : 3일 ( 25일, 28일, 29일) (12/2, 12/3, 12/4) - 프론트 작업 (HTML.CSS) : 8일(11/30 ~ 12/6) (12/5 ~ 12/12) - 프론트작업 (JavaScript) : 8일(12/7 ~ 12/13) (12/13 ~ 12/20) - 백엔드 및 추가 작업 도전 : 11일 (12/14 ~ 12/26) (12/21 ~ 12/31) ◈ 기능 구상 1. 공부하는 시간을 기록할 수 있는 웹 페이지 : 타이머 성능 2. 타이머 기록이 종료 되면 하루동안 어느 공부를 얼마나 했는지 표시해주는 그래프 기록 (열품타 or 여름방학 계획표 ) 3. 주변 스터디 카페 추천..