제제링 제제링

여러모로 아쉬운 주 였다. 시간이 모자랐다는건 어느정도 핑계였던 것 같고 주특기 주차에 임하기 전에 잠을 조금만 줄여서 심화 강의 이해에 더 힘썼더라면 어땠을까 하는 생각이 들었다. 맡은 기능은 회원가입(모달창), 할 일 상세보기 부분이였는데 같은 팀원분께서 도와주신 덕분에 마무리 할 수 있었다. 팀원분께서 react query 를 사용해서 기본틀을 짜놓으셨는데 아무래도 누군가 만들어놓은 코드에서 시작해서 내가 코드를 짜는 과정이 생략되는 바람에 이해가 조금 더뎠던게 아니었을까하는 생각도 든다. 대망의 백+프론트 때에는 쿠키가 제대로 저장되지않는 오류가 생겼었는데 백엔드 쪽에서 타입스크립트 코드로 변환했던것을 다시 이전 코드로 변경하시는 방법으로 디버깅 하셨다고 한다. 협업은 어떤 흐름인지 배웠고 그로인..

세션 사용자와 서버 간의 연결이 활성화된 상태 withCredentials: true 라고 하면 클라이언트에서 보낸 세션아이디를 통해 쿠키를 서버쪽에서 저장해준다.

로그인, 회원가입에 관련된 부분을 개발하는 방법 인증: 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차 인가: 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차 http 프로토콜 통신의 특징 두 가지 무상태: 서버는 클라이언트의 상태를 기억하지 않는다. 따라서 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청 상태값은 매 요청마다 클라이언트가 가지고 오기 때문에, 서버는 클라이언트의 상태를 별도로 기억할 필요없이 주문받은 대로 응답한다. 무상태라는 특성 덕분에 동일한 서버를 여러개로 확장시킬 수 있다.(Scale-Out) 비연결성: 서버와 클라이언트는 연결되어있지 않다. 서버 입장에서는 매번 새로운 요청이다. 비연결성으로 인해 최소한의 서버 자원으로 서버를 유지할 수 있게 해..

이벤트핸들러 사용하고 다른 페이지로 가도 throttling & debouncing이 실행되는 데이터 누수를 막기위한 방법을 알아보자. yarn add lodash import _ from "lodash" import { useState } from "react"; import "./App.css"; import _ from "lodash"; import { useCallback } from "react"; function App() { const [searchText, setSearchText] = useState(""); const [inputText, setInputText] = useState(""); const handleSearchText = useCallback( _.debounce((tex..

인스타 좋아요처럼 한꺼번에 대량의 이벤트가 발생할때는 이벤트 핸들러의 과도한 호출을 방지하는기법인 쓰로틀링과 디바운싱을 사용할 수 있다. 자바스크립트뿐 아니라 다른 곳에서도 사용되는 기법이라고 한다. timer web API 중 setTimeout메서드를 사용하여 throttling&debouncing을 각각 구현해보고 원리를 이해하고 적용할줄 알아야한다. throttling 이벤트가 막 일어나도 함수는 분기별로 한번만 호출 세 가지 타입이 있다. Leading Edge: 첫번째 이벤트를 기반으로 호출 Trailling Edge: 마지막 이벤트를 기반으로 호출 Leading&Trailling edge: 처음과 끝 이벤트를 기반으로 호출 주로 사용되는 곳: 무한 스크롤(스크롤 내릴때마다 이벤트가 호출되지 ..

useQuery사용법 import { useQuery } from 'react-query'; import { fetchTodoList } from '../api/fetchTodoList'; function App() { const info = useQuery('쿼리키', 비동기함수); } 여기서 쿼리 키의 용도는 refetching(=invalidate) 캐싱처리(저장된 데이터를 불러오기) 애플리케이션 전체 맥락에서 이 쿼리를 불러오기 ->어느 컴포넌트 곳곳에 뿌려져있어도 같은 key면 같은 쿼리 및 데이터 보장 유의사항 query키는 겹치면 안된다. const query1 = useQuery('qk', api); // unique const query2 = useQuery('qk2', api); // ..

리덕스 툴킷에 내장되어있는 react thunk·saga 와 같은 미들웨어들의 한계와 이를 대체할 수 있는 react query(현재 많이 쓰임)를 통해 서버에서 비동기 통신할 수 있는 방법에 대해 알아보자. 기존 미들웨어를 통해 다른 서버와의 API통신과 비동기 데이터 관리를 할 때(thunk, saga 등), 코드량이 너무 많았고 비동기 데이터 관리를 위한 전문 라이브러리가 아니어서 규격화에 문제가 있었다. 이에 반해 React Query는 쉽고, 직관적인 사용방법으로 인해 오류와 책임에서 자유롭다고 한다. React Query 주요 키워드 query: 문의, 의문 axios의 경우 get 요청 방식에 해당 mutation: 돌연변이, 변화[변형] 데이터(데이터 그룹 그 자체)를 변경 추가, 수정, ..

같은 useState를 이용해서 input창을 관리하는 중복되는 코드가 너무 많다면 관리가 힘들어질 수 있다. 그래서 customhooks를 이용해서 정리해놓는 방법을 알아보자. useInput이라는 customhooks 만들기 src폴더에 hooks라는 폴더만들고 useInput.js파일 만들기 useState를 import해와서 input창의 공통된 동작 로직을 useInput이라는 이름의 함수로 만든다. import { useState } from "react"; const useInput = () => { // state const [value, setValue] = useState(""); // handler const handler = (e) => { setValue(e.target.value..