감귤밭 호지차 농장

🍀 오늘의 날짜 : 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..

JS TDD - .deep.equal / .eaul 차이 argument와 파라미터의 차이 파라미터 promise와 async/await HTML/CSS 레이아웃 뿌셔뿌셔 230317 React (230327) React propst stae 2부 (230322) JSX의 기본 규칙과 컴포넌트 개념 Daily 회고 (230314) : 고차함수 (230322) : JSX의 기본 규칙 기술면접 준비 이것저것 조각보 DDD : 도메인 주도 설계

* * 고민 미해결 글입니다. * * 🍀 오늘의 날짜 : 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 ..

JavaScript 기본적으로 동기적 언어이지만, V8 엔진과 같은 JS 엔진의 도움?으로 브라우저에서 자동으로 비동기적 수행을 할 수 있습니다. Promise 는 우리가 비동기 흐름을 제어하기 위한 방법이라고 이해하면 될 것 같습니다. ] → 자바스크립트 동기 비동기 → Asynchronous JavaScript_MDN → 벨로퍼트와 비동기 처리 다루기 Promise # callback 함수와 promise 의 차이점 이전에는 callback 함수를 사용해서 비동기 처리를 해왔지만 코드를 잘 작성하지 않으면 어디서 어떤 흐름으로 코드가 작성되는지 파악하기 어렵고, Callback Hell 처럼 쓸데없이 코드가 길어지는 이슈가 발생했습니다. 코드 실행의 성공과 실패에 대해서 규격화된 포멧을 따르는 것이 ..

* * 의문이 풀리지 않은 글입니다 * * 🍀 오늘의 날짜 : 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..

🍀 오늘의 날짜 : 23년 03월 20일 🍀 오늘의 주제 : 문자열 뒤집기 🔖 문자열 뒤집기 # .split( '', -1 ) 이렇게 하면, 공백도 문자열 분해 시 요소로 담을 수 있다. 참고 블로그 # str.split().reverse().join() 으로 간단하게 문자열 뒤집을 수 있다. 참고 블로그 * 메서드 사용 금지의 경우 for 문으로 뒤에서부터 접근하면서 넣어주면 된다. 참고 블로그 * join( )은 기본 적으로, [ , ] 이 쉼표로 문자열을 합친다. * 배열 합치는 방법들 중 빠른 순은 [ push( ) > ...spread > concat( ) ] 순이라고 한다. 참고 블로그 이번 문법을 배우면서 예전에 우테코 프리코스가 꽤 기본적인 과제였다는 것을 느끼게 되었습니다. 지금이라면 1..