감귤밭 호지차 농장

* * 작성 중인 글입니다. * * 🍀 오늘의 날짜 : 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가..

🍀 오늘의 날짜 : 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 컴포넌트 내..

🍀 오늘의 날짜 : 23년 03월 29일 ~ 30일 🍀 오늘의 주제 : Rest API 🔖 Rest API 란? 서버와 클라이언트가 서로 요청과 응답을 보낼 때, 알아보기 쉽고 잘 작성 된 메뉴판을 만들기 위해 웹에서 사용되는 데이터나 리소스를 HTTP URI 로 표현하고 HTTP 프로토콜을 통해 욫어과 응답을 정의하는 방식 이 부분에 대해서는 CS 전공 지식 폴더 : " [ 감귤's 기초 상식 03 ] REST API 란 ? " 에 정리해두었으니 한번 들어가서 읽어보시는 것을 추천 드립니다. 🔖 API 댕겨와보기 (30일) : 세계 각국의 도시의 날씨들을 알 수 있는 Open API를 활용하여 어느 특정 도시의 날씨를 data로 쉽게 받아 올 수 있습니다. # Open Weather API # Open..

* * 고민 미해결 글입니다. * * 🍀 오늘의 날짜 : 23년 03월 27일 🍀 오늘의 주제 : 사랑해요 Chat GPT 아직 React에 대해 모르는 것이 너무 많은 저는 Chat GPT의 도움을 받았습니다. 무언가를 구현해줘 보다는 이러한 기능은 무엇인지 묻는 질문이나, 사용 방법 등을 묻는 위주로 사용해보았습니다. 사용해보니 확실히 공부할 때 뿐만이 아니라 나중에 실무에서도 막히는 부분에 있어서 도움을 받을 수 있다는 생각이 들었습니다. 좋은 기술의 발전이네요! 🔖 useState 에서 const를 사용하는 이유 = 직접적인 수정을 막기 위해서. # useState 구조에서 state 갱신 함수는 state 저장 변수를 ' 변경 ' 이 아닌, ' 갱신 ' 하는 방식으로 작동합니다. 여기서 ' 갱신..

🍀 오늘의 날짜 : 23년 03월 24일 🍀 오늘의 주제 : React의 props 🔖 props 로 상위 컴포넌트에서 하위 컴포넌트로 인자 전달 하기 기본적인 하위 컴포넌트에 상위 컴포넌트의 인자를 전달 할 때 변수를 사용하면 다음과 같습니다. # 상위 : # 하위 : { props.속성 } function Parents = () => { const itemOne = "React를"; return ( // [1] // [2] React를 ) } function Child = () => { return ( {props.text} {/* [1] {props.text} */} {/* [2] {props.children} */} ) } 변수 두 개를 이어서 출력하고 싶을 때는 다음과 같습니다. # 상위 : {..

🍀 오늘의 날짜 : 23년 03월 23일 🍀 오늘의 주제 : React로 SPA 개발, React Router 🔖 React Router # 주소에 따라 달라지는 화면 페이지 : 다른 주소에 따라 다른 뷰를 보여주는 과정 = " 경로에 따라 변경한다 " :: Routing # React Routing이라는 라이브러리를 이용해서 Routing 을 구현합니다. [rotuer] : 라우터 역할 수행----------------------------------------------------------------------------------------------------------------- * [route matchers] : 경로 매칭 역할 수행-------------------------------..

# React # JSX의 기본 규칙 # 컴포넌트 개념 # 스프린트 과제와 함께 알아봅시다. // 기본 준비 코드 : 가짜 데이터들의 모음인 dummy data 를 App.js에서 사용할 수 있게 import. import React from 'react'; import './App.css'; import './global-style.css'; import { dummyTweets } from './static/dummyData'; // 전체 페이지인 메인 컴포넌트 구현 : App //App 컴포넌트 안에 컴포넌트와 컴포넌트가 들어가서 CSS에서 자유롭게 UI 구조 변경 및 설정 가능 const App = () => { return ( ); }; // Sidebar 에 이모티콘 추가 const Sideb..

🍀 오늘의 날짜 : 23년 03월 21일 🍀 오늘의 주제 : Promise + fetch 🔖 Fetch API HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JS에서 접근하고 조작할 수 있는 인터페이스 제공하고 네트워크의 리소스를 쉽게 비동기적으로 가져올 수 있습니다. 예전에는 XMLHttpRequest를 사용해서 기능을 사용했지만, Fetch 는 더 쉽게 사용할 수 있는 API 입니다. fetch( )가 반환하는 Promise 객체는 404, 500 과 같은 HTTP 오류 상태를 수신해도 거부되지 않습니다. ※ 응답의 상태가 200 - 299를 벗어날 경우는 ok 속성이 false 로 설정 됩니다. → 네트워크 연결이 실패 되는 경우, 아예 요청을 완료하지 못한 경우, fetch( ' url ..

* * 의문이 풀리지 않은 글입니다 * * 🍀 오늘의 날짜 : 23년 03월 20일 🍀 오늘의 주제 : 비동기 : promise + async /await 최대의 강적을 만났습니다. 도저히 이해가 가지 않습니다. 과제를 풀었는데도 왜 풀렸는지 이해가 되지 않습니다.. 🔖 npm 오류 sh: 1: jest: not found npm run test 를 돌려야 하는데 자꾸 jest 가 없다고 하는 겁니다.. 혹시나 싶어서 npm install jest 를 실행했더니, ,, 클리어 # jest 🔖 스프린트 과제 진행 중 궁금점 : [3]이 안되는 이유 [1] map 이용 [2] 직접 객체에 넣어서 return [3] ERROR 원인을 모르겠습니다. [2] 과 비슷하게 접근해서 마지막에만 result 객체에 p..