sohyeon kim

📝 문제 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 순위 당첨 내용 1 6개 번호가 모두 일치 2 5개 번호가 일치 3 4개 번호가 일치 3 3개 번호가 일치 5 2개 번호가 일치 6(낙첨) 그 외 로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다. 알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다. ..

💡 Custom Hooks 을 사용해 보자. 기존 input 값을 받아오던 방식 import { useState } from "react"; function App() { const [name, setName] = useState(""); const [password, setPassword] = useState(""); const onChangeName = (e) => { // 패스워드 관리 함수와 똑같이 생겼다 setName(e.targe.value); }; const onChangePassword = (e) => { // 네임 관리 함수와 똑같이 생겼다 setPassword(e.targe.value); }; return ( Custom Hooks ); } export default App; 반복되는 ..

2024.02.19 - [React] - [React] Redux Thunk : 미들웨어 [React] Redux Thunk : 미들웨어 💡 미들웨어에 대해 알아보자. 미들웨어가 없을 때 ➡️ 액션 - 리듀서 - 스토어 리덕스에서 dispatch 를 하면 action 이 리듀서로 전달되고, 리듀서는 새로운 state 를 반환한다. 여기서 미들웨어를 aotoyae.tistory.com 💡 thunk 함수를 한번 더 구현해보자! thunk 함수 구현 리듀서 로직 구현 : reducers ➡️ extraReducers 서버 통신 : 100% 성공 ❌ (불확실) 지금까지의 redux state - todos, counter 앞으로의 state - isLoading, is Error, Data 기능 확인 : ne..

💡 미들웨어에 대해 알아보자. 미들웨어가 없을 때 ➡️ 액션 - 리듀서 - 스토어 리덕스에서 dispatch 를 하면 action 이 리듀서로 전달되고, 리듀서는 새로운 state 를 반환한다. 여기서 미들웨어를 사용하면 이 과정 사이에 우리가 하고 싶은 작업들을 넣을 수 있다. 만약 카운터 프로그램에서 버튼을 클릭했을 바로 1 을 더하지 않고, 3초를 기다렸다가 1이 더해지게 구현하려면 미들웨어를 빼놓을 수 없다. dispatch 가 되자마자 바로 action 이 리듀서로 달려가 새로운 state 를 반환하기 때문 즉, 여기서 "3초를 기다리는 작업" 을 미들웨어가 해주는 것이다. 보통 리덕스 미들웨어는 서버와의 통신을 위해 사용한다! 그 중 많이 사용되는 것이 Redux-thunk, saga 💡 Th..

2024.02.19 - [React] - [React] env : npm, vite 환경 변수 사용하기, 변수 숨기기 [React] env : npm, vite 환경 변수 사용하기, 변수 숨기기 💡 API_KEY 등 보안이 필요한 값에 환경 변수로 써보자 ❗️ 환경변수는 깃헙 같이 오픈된 곳에 올리면 안된다! 우선 루트 풀더에 .env 파일을 만든다. // npm REACT_APP_SERVER_URL = http://localhost:4000 //vite V aotoyae.tistory.com 💡 env 를 더 활용해 api instance 를 만들고, URL 을 간략하게 써보자 axios 폴더에 api.js 파일 생성 import axios from "axios"; const instance = axi..

💡 API_KEY 등 보안이 필요한 값에 환경 변수로 써보자 ❗️ 환경변수는 깃헙 같이 오픈된 곳에 올리면 안된다! 우선 루트 풀더에 .env 파일을 만든다. // npm REACT_APP_SERVER_URL = http://localhost:4000 //vite VITE_SERVER_URL = http://localhost:4000 App.jsx // npm const fetchTodos = async () => { const { data } = await axios.get( `${process.env.REACT_APP_SERVER_URL}/todos` ); setTodos(data); }; // vite `${import.meta.env.VITE_SERVER_URL}/todos` 이런 식으로 사용 ~..

💡 두 비동기 통신 라이브러리의 차이점을 알아보자 ✳️ fetch미지원 브라우저 존재개발자에게 불친절한 responseaxios 에 비해 부족한 기능✳️ axios개발자에게 친절한 response(JSON 포맷으로 따로 변경할 필요가 없다!)상세한 에러 처리 가능 1. 데이터를 읽어올 때의 차이점fetchconst url = "https://jsonplaceholder.typicode.com/todos";fetch(url).then((response) => response.json()).then(console.log); 응답을 JSON 포맷으로 바꾸기 위해 response.json() 을 한 번 더 해줘야 한다.따라서 두 개의 .then() 이 필요하다. axiosconst url = "https://..

2024.02.19 - [React] - [React] axios.get : HTTP 통신으로 데이터 가져오기 [React] axios.get : HTTP 통신으로 데이터 가져오기 💡 Axios : Promise 를 기반으로 해 HTTP 통신을 할 수 있는 라이브러리 먼저 npm install axios or yarn add axios ~ npm install json-server or yarn add json-server ~ 혹시나 EACCES 에러가 뜬다면 sudo npm install json-server 루트 aotoyae.tistory.com 💡 Axios : Promise 를 기반으로 해 HTTP 통신을 할 수 있는 라이브러리 💡 POST : input 에 값을 받고 데이터를 생성해 보자! A..

💡 REST : HTTP 를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 💡 REST API : REST 를 기반으로 서비스 API 를 구현한 것 💡 HTTP 요청 메서드 : 클라이언트가 서버에게 요청의 종류와 목적(리소스에 대한 행위)을 알리는 방법 🧑🏻‍💻 REST 의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful " 하다고 표현한다! 가장 중요한 기본적인 두 원칙을 알아보자. 1. URI 는 리소스를 표현하는 데 집중 리소스를 식별할 수 있는 이름은 동사보단 명사를 사용한다. 따라서 이름에 get 같은 행위에 대한 표현이 들어가면 안된다. # good GET /todos/1 # bad GET /getTodos/1 GET /todos/show/1 2. 행위에 대한 ..

💡 Axios : Promise 를 기반으로 해 HTTP 통신을 할 수 있는 라이브러리 먼저 npm install axios or yarn add axios ~ npm install json-server or yarn add json-server ~ 혹시나 EACCES 에러가 뜬다면 sudo npm install json-server 루트 경로에 db.json 파일을 만든다. { "todos": [ { "id": 1, "title": "react" } ] } 그 다음 json-server --watch db.json --port 4000 이제 App.jsx 에서 데이터를 가져와보자. import axios from "axios"; import { useEffect } from "react"; functi..