[리액트 심화] HTTP 통신 / URL 구성

(1) HTTP 통신 - 개념 : 데이터로 이루어진 communication ( 웹서버 - 웹브라우저 : 서버 - 클라이언트) - (약속 = 프로토콜) - HTTP 프로토콜 = 웹에서 서버와 클라이언트의 상호간 약속 (2) Request (요청) Response(응답) (3) URL 구성 (4) 메서드 (client -> server) GET - 조회 POST - 생성 PUT, PATCH - 변경 DELETE - 삭제 [참고] HTTP request methods - HTTP | MDN HTTP defines a set of request methods to indicate the desired action to be performed for a given resource. Although they ca..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms

[리액트 심화] json-server 사용 방법 (+ 특정 포트 지정)

1. json-server란? - 아주 간단한 DB와 API 서버를 생성해주는 패키지 - 임시적으로 사용할 mock data 생성 위함 (테스트용) 2. json-server 사용하기 (1) vs 코드 터미널 : json-server 추가 yarn add json-server (2) src - db.json 파일 생성 [db.json] { "posts": [{ "id": 1, "title": "json-server", "author": "typicode" }], "comments": [{ "id": 1, "body": "some comment", "postId": 1 }], "profile": { "name": "typicode" } } ▶ key 부분이 쌍따옴표여서 json임 (3) JSON serve..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms

[리액트 심화] Redux Toolkit 사용하기 (리덕스와 다른점 비교)

1. 리덕스 툴킷이란? - 리덕스를 개량한 것 => 리덕스의 구조와 패러다임은 동일 (새로운 개념 x) - 차이 : 설정 부분 & 모듈 파일! 2. 리덕스 툴킷 설치 방법 (1) 터미널에 yarn으로 추가하기 yarn add @reduxjs/toolkit 3. 코드 비교 (1) configStore.js 비교 [일반 리덕스] import { createStore } from "redux"; import { combineReducers } from "redux"; import counter from "../modules/counter"; const rootReducer = combineReducers({ counter, }); const store = createStore(rootReducer); expo..

• format_list_bulleted React
• · 2023. 11. 28.
• textsms

팀과제 :: 뉴스피트 프로젝트 KPT 회고

1. Keep - git 활용 빈도가 잦아서 숙달할 수 있는 좋은 기회 - 역할 분담이 잘 되었고, 트러블슈팅에 대한 작업이 잘 이뤄짐 - 최종 직전까지 dev 브랜치 활용 & 최종에서 main 브랜치로 푸시 - 팀원들이 서로 도와 적극적인 문제 해결, 추가 수정 요청 의견도 수용 - 원활한 소통 + 책임감 있는 태도로 목표를 향해 노력하기 - 지금까지 전혀 사용해보지 않은 기술을 사용해보기 2. Problem - 처음 시작할때 데이터 세부사항을 합의 하지 않은 부분 - 예상치 못한 오류를 해결하는 시간을 고려하지 않음 - 어떤 상태를 리덕스로 관리할지에 대한 설계가 미흡 - vercel로 배포한 이후 어플리케이션 테스트를 철저히 못한 부분 - 모달은 toastify & sweetalert2의 등의 도구..

• format_list_bulleted KPT :: Keep Problem Try
• · 2023. 11. 27.
• textsms

React : 리덕스로 todolist만들기

0. export default 와 export 차이점 (1) export default 1) 하나의 모듈에서 단 하나의 default 2) import 할때, {중괄호}없이 직접 지정 가능 3) 주요 또는 가장 중요한 기능이나 컴포넌트 보낼때 사용 * export default Home * import Home from './pages' (2) export 1) 하나의 모듈에서 여러개의 named export 가능 2) import할때 {중괄호}에 명시해야함 3) 여러 기능이나 컴포넌트를 하나의 모듈에서 보낼때 사용 * export const myFunction = ()=>{} * import {myFunction} from './pages' 1. 리덕스 설정 (3가지) (1) [Redux - Conf..

• format_list_bulleted React
• · 2023. 11. 25.
• textsms

#01 React와 Firebase로 구현하는 로그인 및 게시글 작성

#문제 ▶ 이미지를 첨부하고 [등록하기] 버튼을 누르면 fireStorage에 사진을 저장 & FireStore DB에 url 저장 기능 구현을 하고 싶은데 FireStore DB에 image_url이 저장되기 전에, 동기 부분이 완료되서 image_url 저장이 안됨. #해결 ▶ FireStore에 데이터가 저장되기 전에 이미지 파일 업로드가 우선 실행되도록 위치로 조정 ▶ 이미지 저장이 끝나고 FireStore에 데이터 저장되도록 async + await 코드로 수정 [Inputform.jsx] //이미지 파일 업로드 const handleUpload = async () => { const imageRef = ref(storage, `${auth.currentUser.uid}/${selectedFil..

• format_list_bulleted TIL :: Today I Learned
• · 2023. 11. 23.
• textsms