개발일지

기능 구체화 완료!문자로 소통하다 보니 기능별 이해도가 달라 간단하게 와이어 프레임을 작성하여 눈으로 보며 어디에 어떤 기능이 들어가는지 좀 더 구체적으로 정하게 됐다덕분에 계속 헷갈렸던 기능들도 모두 정리 완료! 소통에 오류가 좀 있었던 것 같지만 아직까진 완만하게 풀어가는 거 같다디자이너님이 제일 고생하시는 거 같아 맘이 안 좋기도 하고... 진행 속도가 너무 더딘 거 같아 걱정도 되지만 차근차근 하나씩 잘 풀어가면 좋은 결과가 나올 거라 생각하며, 내일 할 일에 집중하기로하자 내일 할 일API 명세 작성역할 분담프로젝트 셋업React-Quill사용자가 블로그처럼 글씨 크기를 조절하거나 이미지 업데이트 등 원하는 양식대로 자유롭게 게시글을 작성할 수 있는 에디터 라이브러리 설치명령어npm yarn n..

데이터베이스 작성 완료테이블이 11개... 개발 시작할 생각 하니까 벌써 무서워...그래도 그만큼 결과물이 궁금하기도 하고 재밌어 보이는 기능들도 많아서 기대도 많이 된다아직 구체적인 기능이 제대로 자리 잡지 않아서 회의가 더 필요하지만 빨리 시작하기보다 꼼꼼하게 기획을 하는 게 더 중요하니까! 내일은 좀 더 구체적으로 기능을 잡고, 역할 분배할 것! Optional Parameters (옵셔널 파라미터)타입스크립트는 매개변수 뒤에 물음표 ? 를 붙여 값을 선택적으로 사용할 수 있다(옵셔널 파라미터)? 는  String | undefined으로 값이 있을 경우 타입을 지정해 주거나 값을 전달하고, 값이 없을 경우 undefined 나온다 export interface ProductType { produ..

드디어 최종 프로젝트!! 능력 있고 개성 넘치는 팀원들을 만나서 좋은 프로젝트가 나올 거 같다시작 단계인 첫날인 만큼 가장 어려운 주제선정부터 막힘 없이 나와서 여러 선택지 중 각자 자기가 하고 싶은 주제에 대해 투표를 진행했다  투표 결과는 예지님의 아이디어인 키노라이츠를 모티브로 한 음악 서비스!하고 싶은 기능들은 엄청 많지만튜터님께 피드백을 받고 우리가 핵심이라 생각했던 메타버스, 챗봇 서비스 등을 빼게 됐다이거 하면 취뽀는 무조건이다!라고 생각했는데 프론트엔드 개발자라는 정체성을 잃지말라셨으니... 프론트엔드에 맞는, 그 안에서 최대한 많은 걸 보여줄 수 있는 결과물을 만들어내고자 과감하게 버리고 남은 기능들을 더 보강하기로했다. 길면서도 짧은? 5주간 다들 화이팅!

많이 어려워했던 react-Query를 결국 해냈다!물론 다른 팀원의 코드를 참고했지만 query에 대해 많이 배울 수 있었다.파일을 나눠 서버 데이터를 요청하는 api파일, 서버 데이터를 받아 가공하는 util파일로 나누어 작업했다 API 파일비동기 함수를 통해 서버로부터 데이터를 요청한다arg는 데이터 정렬을 위한 state와, useSearchParams로 받는 category를 받는다파이어베이스에서 받은 데이터를 return 해주면 완성!export async function getMainProducts() { const response = await getDocs(query(collection(db, 'product'), orderBy('createdAt', 'desc'))); const f..

어제 파이어베이스에서 받아온 데이터를 useEffect에 담아 파싱 해서 state에 담아줬다useQuery를 사용하면 useEffect과 state를 사용할 필요 없이 바로 가공해서 data를 사용하면 됐는데 잘못된 코드를 쓰고 있었던 것 useQuery로 데이터 통신하는 것에 대해 이해도가 많이 떨어지는 거 같다 하나씩 다시 코드를 살펴보자지난 글에서 사용한 React Query 사용 오류에 대한 수정 코드{isLoading, isError, data, refetch } - useQuery에 내장되어 있는 기능들 로딩, 에러 상태 관리 변수, 요청 데이터 저장 변수, 쿼리를 수동으로 불러오는 함수를 사용했다queryKey - data 변경 시 queryKey를 이용하면 된다(등록, 수정, 삭제 등)q..

파이어베이스에 저장된 데이터 불러오는 로직을 React Query를 이용해 Migration 했다 이전에 정리한 todoList Query는 이전 버전으로 문법이 많이 다르니 공식문서를 꼭 참고하도록 하자.queryKey는 배열로 만들어주고 queryFn에 서버 데이터를 가져오는 로직을 작성하면 된다가져온 데이터를  useEffect을 이용해 id를 넣어주고 state에 저장(파이어베이스는 데이터를 가져온 후 문서의 id를 넣어준 후 다시 배열에 담아야 한다 파이어베이스 문법특성 때문이니 꼭 필수일 필요는 없다)정렬 버튼을 클릭할 때마다 데이터를 새로 요청해서 받아와야 하는데 쿼리로 작성하고 나니 정렬기능이 작동하지 않는다는 문제가 발생했다문제해결 방법useEffect 의존성배열에 data , selec..

이번 팀 프로젝트 주제는 마켓컬리와 같은 식품 쇼핑몰로 정해졌다카테고리 버튼을 클릭하여 상품 리스트 페이지에 들어가면 상품 데이터들이 높은 가격 기준으로 정렬된 상태로 가져와야하는데 상품 등록 시 상품 가격 타입을 number로 넣었지만 파이어베이스에서 문자열로 변환되어 등록되어 버린다 문자인 상태에서 orderBy로 정렬하게 되면 유니코드로 정렬이 되기 때문에 원하는 정렬 기준을 맞출 수 없다는 문제가 발생했다 내가 하고자 하는 것상품 가격을 기준으로 오름, 내림 차순을 만들고 싶다문제해결을 위해 시도한 방법파이어베이스로 전체 데이터를 불러온 뒤 sort를 이용해 정렬해 줬다이 방법으로 정렬은 가능하지만 클라이언트가 아닌 서버에서 요청값에 정렬을 요청해서 받아야 한다는 피드백을 받고 다시 수정하기로 했..

인증 / 인가 http 프로토콜 통신 특징쿠키 세션 JWT토큰인증인증(Authentication)은 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차이다 기본인증 (Basic Authentication)과 토큰 기반 인증 (Token-based Authentication), OAuth 등이 있다HTTP 프로토콜에서는 보통 헤더에 인증 정보를 포함하여 요청을 전송한다인가인가(Authorization)는 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차이다주로 인증된 사용자에 대한 접근 제어를 다룹니다. 인가는 사용자의 역할, 그룹, 권한 등을 기반으로 한다 HTTP 프로토콜에서는 주로 요청의 특정 부분에 권한 정보를 포함하여 요청을 전송하거나, 서버에서 요청을 받은 후에 권한을 확인하여 응..

React QueryReact 애플리케이션에서 데이터 관리를 위한 JavaScript 라이브러리비동기 데이터를 관리하고 캐싱하며, 상태 관리와 관련된 작업을 쉽게 처리할 수 있다Redux는 비동기 데이터 관리를 위한 전문 라이브러리가 아니며, Redux-thunk의 보일러 플레이트가 많다는 단점을 보완하기 위해 사용된다비동기 통신을 위해 사용되므로 json-servser(파이어베이스, 수파베이스도 상관없음) 등의 서버를 연결해 사용하며 axios(fetch도 상관없음) 설치도 필요하다(비동기 통신을 해야 하니까)설치 명령어npm yarn npm install react-queryyarn add react-query Query요청을 의미하며 서버로부터 데이터를 요청한다 CRUD 중, R(Read)에 해당한..

json-server를 이용해 Thunk 함수를 통해서 API를 호출하고 서버로부터 가져온 값을 Store에 dispatch 하는 기능 구현하기extraReducers를 사용해 리듀서 로직 구현하기비동기 통신 상태를 관리하는 로직 구현하기extraReducersreducers에서 바로구현되지 않는 기타 Reducer로직을 구현할 때 사용하는 기능. 보통 thunk 함수를 사용할 때 extraReducers를 사용한다. thunk 함수 작성const data는 Promise를 반환한다axios.get() (함수)가 반환하는 Promise의 fullfilled 또는 rejected 된 것을 처리하기 위해 async/await 추가요청 성공  / 실패 결과 확인을 위해 try.. catch 구문 사용 impo..