2024/09 15

비동기 및 json-server

비동기 프로그래밍: 자바스크립트는 비동기 작업을 통해 긴 작업이 완료될 때까지 다른 코드가 멈추지 않고 실행되도록 한다.    동기(Synchronous)특징: 작업이 순차적으로 진행되며, 하나의 작업이 끝나야 다음 작업을 수행할 수 있다.문제점: 네트워크 요청이나 파일 읽기 같은 작업이 오래 걸리면, 그 작업이 끝날 때까지 나머지 코드가 실행되지 않는다. 비동기(Asynchronous)특징: 오래 걸리는 작업이 끝나길 기다리지 않고, 다른 작업을 먼저 진행할 수 있다.장점: UI가 멈추지 않고 사용자에게 빠르게 반응할 수 있는 애플리케이션을 만들 수 있다.     비동기 작업을 동기적으로 처리하기!async / await 문법: 자바스크립트에서 비동기 작업을 처리하기 위한 최신 문법이다! 기본적인 작동..

강의 2024.09.10

리액트 심화 주차 필수 개념 정리(2)

[1-2] 비동기1 - 비동기, promise[1-5] json-server[1-6 ~ 1-7] axios의 GET, POST, DELETE, PATCH, fetch와의 비교[1-10] tanstack query 기본 사용법 (매우중요)[1-15] zustand 기본 사용법[1-20] 인증인가 개념 실습[1-21] tailwind   [1-6 ~ 1-7] axio의 GET, POST, DELETE, PATCH, fetch와 비교 axios란?node.js 브라우저를 위한 Promise 기반 http 클라이언트라고 소개하고 있다. 즉, http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다.    설치yarn add axios json-server 설정{ "todos": [ { "id..

강의 2024.09.06

리액트 심화 주차 필수 개념 정리(1)

필수 개념은 다음과 같다.[1-2] 비동기1 - 비동기, promise[1-5] json-server[1-6 ~ 1-7] axios의 GET, POST, DELETE, PATCH, fetch와의 비교[1-10] tanstack query 기본 사용법 (매우중요)[1-15] zustand 기본 사용법[1-20] 인증인가 개념 실습[1-21] tailwind  [1-2] 비동기, promise동기: 순차적으로 진행, 요청을 보내고 응답을 기다린다.(ex 주문 후, 커피가 나올 때까지 기다려주세요!  다음사람들은 아직 주문 못한 상태로 기다리는중...) 비동기: 비순차적으로 진행, 요청을 보내고 응답을 기다리지 않고 바로 다음 작업을 진행한다.(ex 주문 후, 진동벨이 울리면 커피를 가지러 오세요! 모든 사람..

강의 2024.09.06

맛집 뉴스피드 프로젝트 마무리 및 KPT회고

오늘은 뉴스피드 팀프로젝트의 발표날이다!따라서 어제는 트러블 슈팅을 진행하였다. 3가지 오류를 발견하였는데 그 부분에 대해서 블로그에 담아보겠다! 1. 배포 시, SVG 이미지 파일이 깨지는 문제2. 수정 완료 후 마이페이지 네비게이션 문제3. 로그인 페이지에서 뒤로가기 버튼의 위치 문제  ...  1. 배포 시, SVG 이미지 파일이 깨지는 문제 문제 설명: React 프로젝트를 Vercel로 배포할 때, SVG 이미지 파일이 제대로 렌더링되지 않고 깨지는 현상이 발생했다. 이는 주로 상대경로로 설정해서 문제이거나 스타일드 컴포넌트 사용시 동적 이미지 스타일링을 해서 문제점이 발생할 수 있다. 해결 방법: Lucide 아이콘 라이브러리 사용  이 문제를 해결하기 위해 Lucide 아이콘 라이브러리를 사..

팀프로젝트 2024.09.04

맛집 뉴스피드 프로젝트 중간점검

작성 폼 페이지 기능 구현을 거의 다 완성하였지만 문제점이 생겼다.... 오늘은 그것에 대해서 어떻게 해결했는지 블로그에 담아보겠다!!     React에서 게시글 수정 시 이미지 파일 처리 문제와 해결 방안  1. 문제 상황게시글 작성과 수정시 모든 필드(이미지 포함)에 대한 빈칸 유효성 검사를 구현했다.수정 시 기존 이미지 파일을 Supabase에서 불러오는데 어려움이 있었다.이로 인해 사용자가 이미지를 변경하지 않더라도 새 이미지를 업로드 해야만 유효성 검사를 통과할 수 있는 문제가 발생했다. 2. 원인 분석Supabase에서 이미지 파일 자체를 불러오는 것이 기술적으로 복잡했다.파일 시스템이나 스토리지 서비스에서 직접 파일을 가져오는 것은 보안 및 성능 이슈를 이야기 할 수 있다. 3. 임시 해결..

팀프로젝트 2024.09.02