Keep Going

요구사항 분석 : 소프트웨어 개발의 초기 단계에서 사용자의 필요를 이해하고 이를 기능으로 변환하는 과정 배경기획은 존재하는 상태 (아그리콜라 설명서)우리가 해야 할 것은 [ API 명세 협의하여 작성하기 ]구현하기 이를 위해 노력 한 것은1. Entity 분석 2. 프로토타입 범위 정하기 3. 행동 기반 플로우 작성 notion을 공유함 4. FE UI state 부분까지 고려하여 개발 5. FE에서 API와 연동하여 개발하고자 함 근데 왜 잘 안됐지?1. API 명세를 BE, FE가 서로 협의하지 않음 (소통의 부재, 필요 인지의 부재)백엔드가 프론트엔드를 고려하지 않고 API 명세를 만드는 경우가 일반적이지 않다. 근데 우리는 이랬던 것 같다. : 백엔드 개발자가 API를 설계할 때는 프론트엔드의 요..

react query에 대해 공부를 하려고 하니 .. 어우 방대하여라 ~ 개요 react-query는 - React 어플리케이션에서 사용되며 - 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 다룰 수 있도록 도와주는 라이브러리다. - server state를 다루는 것에 특화되어 있다. | server state란? 기능 캐싱 오래된 데이터 업데이트 데이터가 얼마나 오래 되었는지 알 수 있음 데이터 로드가 지연되는 것 같은 성능을 최적화 동일한 데이터에 대한 중복 요청을 단일 요청으로 통합 사용 환경 설정 QueryClientProvider를 최상단에서 감싸주고, QueryClient 인스턴스를 client props로 넘겨줌을 통해 => react-query를 사용하는 공통의 context를 ..

현재 prompt 시스템은 이렇게 구성 되어 있다. // Prompt.jsx import React from 'react'; import PromptBtn from './PromptBtn'; import { login } from '../api/agricola'; import { useAuthContext } from '../context/AuthContext'; import { useBackgroundContext } from '../context/BackgroundContext'; export default function Prompt() { const { pid, setPid } = useAuthContext(); const { prompt } = useBackgroundContext(); retu..

작업 순서 1. context API를 잘 쓰는 방법에 대해 공부하기 2. 현재 코드에서 각 Context들이 다루고 있는 상태값이 무엇이 있는지 정리하기 3. 현재 코드에서 Context를 쓰고 있는 component와, 어떤 state를 사용하는지 정리하기 4. Context를 맥락에 맞게 사용하기 위해 어떻게 분리하고, 어떻게 씌워야할지 고민하기 Q. Context Provider를 만들고 여러 곳에서 사용하는 것은 문제가 안돼요? 네 ! React의 Context API와 Provider는 데이터를 여러 컴포넌트에 공유하고 전달하는 강력한 상태 관리 도구거든요 :) 다만 주의해야 할 점이 있다면, 1. 필요한 곳에만 사용하기 : context에 있는 값이 바뀌면 그 안에 있는 컴포넌트들이 모두 리..

스터디 이유 1. 기존 Agricola 프로젝트 개발 시기에 학습 기간 issue로 다른 상태 관리 라이브러리를 사용하지 않고, useState와 context API만 적절히 사용해서 개발하려고 했다. 2. 기존 작성 코드를 리뷰하면서 context API를 적절하게 사용한 것인지 의문이 들었다. (왜냐 ? 좋은 방식을 찾아보고, 고민하면서 짠 코드가 아니었기 때문 !) 작업 순서 1. context API를 잘 쓰는 방법에 대해 공부하기 2. 현재 코드에서 각 Context들이 다루고 있는 상태값이 무엇이 있는지 정리하기 3. 현재 코드에서 Context를 쓰고 있는 component와, 어떤 state를 사용하는지 정리하기 4. Context를 맥락에 맞게 사용하기 위해 어떻게 분리하고, 어떻게 씌..

Q. Async, Await 잘 모르겠어요 Await await 키워드는 Promise를 반환하는 비동기 함수 앞에 위치하며, 해당 Promise가 이행될 때까지 실행을 일시 중단합니다. 비동기 함수 내용이 실행되면, await 표현식은 해당 Promise의 결과값을 반환하고, 이후에 오는 코드 실행이 재개된다. 즉 ! await 키워드 이후에 오는 코드는 비동기 작업이 완료된 후 실행된다는 점 ! async가 붙은 함수는 뭔가요 ? async 키워드를 붙여주면 그 함수가 ‘비동기 작업을 하는 함수’임을 나타낸다. async 키워드가 없다면, 일반적인 동기 함수로 간주된다. 따라서 await 키워드를 사용해서 비동기 작업의 완료를 기다리지 않고, 다음 코드가 즉시 실행된다. async 가 붙은 함수는 무..

reason of study 좋은 프론트엔드 개발이란 무엇일까를 고민하며, 프론트엔드 성능에 대한 관심이 생겼다. 모든 코드를 하나의 번들로 묶어서 만들 때 1. 프로젝트가 커지면서 유저에게 전달해야하는 파일이 커지고, 2. 유저의 브라우저가 파싱해야하는 데이터도 많아지기 때문에 => 퍼포먼스(페이지 로딩 속도, 렌더링)에 문제들이 생길 수 있다. ; 유저가 필요한 정보에 우선순위를 두어 순서대로 로딩하기 ; 아직 로딩중이더라도 유저에게 티가 나지 않게 하기 = 좋은 UX ; code splitting으로 SPA 성능 향상을 이루기(light house 평가로 확인 가능) 1. 사용자에게 제공하고 있는 JS가 무엇인지 파악하여 라이브러리의 가벼운 대안을 찾기 : 가벼운 라이브러리 찾기 2. 사용자가 있는..