일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 |
- 내배캠 프로젝트
- 리액트
- 프로그래머스
- 파이썬 enumerate
- 파이썬 for in
- 내일배움캠프
- 타입스크립트 props
- typeScript
- 리액트 팀 프로젝트
- 타입스크립트
- 파이썬 반복문
- Next 팀 프로젝트
- 파이썬 list
- React Hooks
- 파이썬 replace
- 파이썬 for
- 파이썬 slice
- 내일배움캠프 프로젝트
- 자바스크립트
- 타입스크립트 리액트
- 내일배움캠프 최종 프로젝트
- 리액트 프로젝트
- useState
- JavaScript
- REACT
- 한글 공부 사이트
- js
- tanstack query
- 리액트 훅
- 코딩테스트
- Today
- Total
목록2024/02 (38)
aotoyae
💡 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 미지원 브라우저 존재 개발자에게 불친절한 response axios 에 비해 부족한 기능 ✳️ axios 개발자에게 친절한 response(JSON 포맷으로 따로 변경할 필요가 없다!) 상세한 에러 처리 가능 1. 데이터를 읽어올 때의 차이점 fetch const url = "https://jsonplaceholder.typicode.com/todos"; fetch(url) .then((response) => response.json()) .then(console.log); 응답을 JSON 포맷으로 바꾸기 위해 response.json() 을 한 번 더 해줘야 한다. 따라서 두 개의 .then() 이 필요하다. axios const url..
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..
💡 input 에 한글이나 숫자를 입력할 때 maxlength 가 부자연스러운 동작을 하는데, 원하는 글자수로 딱 제한할 수 있도록 해결해보자! setNickName(e.target.value)} placeholder="최대 20자" maxLength={20} /> maxLength 로 제한을 두니 한글을 입력했을 때나, 숫자 + 한글을 입력했을 때 21 자가 입력이 되버린다. ⬇️ const handleOnInput = (e, maxlength) => { const { target: { value }, } = e; if (value.length > maxlength) e.target.value = value.substr(0, maxlength); }; // ... handleOnInput(e, 20)}..
💡 깃헙에 파일명 대소문자 바꿔 올리기! 파일 이름의 첫 글자를 대문자 or 소문자로 바꾸고 깃에 올리려 하면 로컬에서는 바뀌었어도 깃엔 올라가지 않는다. 😭 운영체제 파일시스템이 대소문자가 달라도 같은 파일로 인식하기 때문이라고𓈒𓈒𓈒 찾아보니 .. 터미널에서 명령어를 입력해 직접 바뀐 파일이라는 걸 알려줘야 된다고 한다! 파일이 들어있는 경로로 가서 ** Member.js ➡️ member.js 로 바꾸는 경우 git mv Member.js member.js 위처럼 변경하면 잘 바뀌고 업데이트 된게 적용이 된다!! 🔗 https://velog.io/@j2yn34/3u4eze2s github 파일명/폴더명 변경 (대소문자 변경) + 터미널 오류 github에 올라간 파일명/폴더명 대소문자 변경 git 명..
💡 HTTP 상태 코드를 정리해 두자! 1XX - Informational 정보 제공(진행 중) 클라이언트의 요청을 받았으며 작업을 계속 진행하고 있다. HTTP/1.1 클라이언트에게만 보낼 수 있으며 응답은 바디없이 상태 라인, 헤어(생략 가능), 빈 줄로 종료된다. 100 : continue 계속 계속 진행하라. 101 : switching protocols 프로토콜 전환 프로토콜을 전환하라. 102 : processing 처리 중 (WebDAV) 처리 중이다. 서버가 처리하는데 오랜 시간이 예상되어 클라이언트에서 타임 아웃이 발생하지 않도록 이 응답 코드를 보낸다. 2XX - Success 성공 클라이언트가 요청한 동작을 수신하여 이해하였고 승낙하였으며 성공적으로 처리하였다. 200 : OK 성공 ..