감귤밭 호지차 농장

[구현 기능] 기존에 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월", ]; ..

🍀 오늘의 날짜 : 23년 04월 10일 🍀 오늘의 주제 : SECTION 02회고 벌써 Section 02 가 완료되었고 회고의 시간이 돌아왔습니다. 생각해보면 많은 발전을 이룬 부분도 오히려 더 부족한 점들만 발견한 부분들도 있는 것 같습니다. section02에서는 사실 해이해진 부분이 있다고 생각합니다. section 01에서는 스스로 만족할 만큼 정말 최선을 다했다면 section 02에서는 스스로에 대해 100% 만족하지 못하고 한 60% 정도 만족하고 있습니다. section 01 회고 🔖KEEP # 친해진 페어분과의 주 1회 자체 스터디를 진행 + 아우디 스터디 주2회 참석 * 그 주에 배운 내용을 응용하고 적용하여 복습의 기간을 가지고 있음 # 간단한 웹 페이지의 구조를 CSS/HTML/..

* * 작성 중인 글입니다. * * 🍀 오늘의 날짜 : 23년 04월 06 ~ 7 🍀 오늘의 주제 : 서버 찍먹 심화 버전 2 [1] 클라이언트와 서버 그리고 DB 의 연결고리 🔖 클라이언트/서버/DB 3종 세트 클라이언트에서 요청 (request) : POST 클라이언트에서 조회 (request) : GET 클라이언트에서 삭제 요청(request) : DELETE 클라이언트에서 ..?. 서버에서 DB로 요청요청 서버에서 클라이언트로 응답응답 DB에서 응답 응답 들어온 정보 저장 저장 [2] Node.js와 Express의 차이 🔖 작성 예정 [3] json 파일들에서 요청으로 들어온 정보와 일치하는 data 응답하기 🔖 클라이언트로부터 특정 data를 응답해달라는 요청이 들어왔을 때, ( ex. id가..

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

🍀 오늘의 날짜 : 23년 04월 04일 ~ 05일 🍀 오늘의 주제 : Webserver 찍먹 [🔖] CORS # SOP _ Same Origin Policy : 동일 출처 정책 * 출처(Origin) : 프로토콜, 호스트, 포트의 조합 - 이 3 가지가 동일해야 동일한 출처 * 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줍니다. * 다른 사이트와의 리소스 공유를 제한하기 때문에 중요한 정보가 타사이트의 코드에 의해 새어나가는 것을 방지할 수 있다. # CORS 는 SOP 정책으로 방지된 다른 출처의 리소스를 받아올 수 있게 합니다. * Cross-Origin Resource Sharing : 교차 출처 리소스 공유 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 ..

AJAX , AXIOS, FETCH React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다. 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다. State 끌어올리기의 개념을 이해할 수 있다. 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다. Chapter2. State 끌어올리기 (Lifiting State Up) Side effect가 어떤 의미인지 알 수 있다. React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분) Side effect의 예를 들 수 있다. Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내..

# 모달 창의 [ + 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'; ..

프론트 엔드의 단골 면접 질문 중 REST API 란 무엇인가를 묻는 질문이 많이 나온다고 들었습니다. API 에 대해서는 " 서버가 클라이언트가 정확한 요청할 수 있게 미리 만들어서 주는 일종의 메뉴판 " 같은 존재임을 알고 계실 겁니다. 그렇다면 REST이 붙은 REST API란 무엇인지 한번 알아보도록 하겠습니다. ∴ API 란,,,, 간단하게 메뉴판 HTTP 프로토콜을 기반으로 클라이언트와 서버가 서로 요청과 응답을 주고 받을 때, 정확하고 유효성 있는 요청과 응답을 받을 수 있기 위해 알아보기 쉽고 잘 작성된 메뉴판의 역할을 수행합니다. 만약 API가 없었다면, DB나 서버가 가지고 있지 않은 데이터를 클라이언트는 잘 모르기 때문에 무작위로 요청을 할 수 있어 이를 방지하기 위해 서버가 미리 A..