taetaeo / daechwita Goto Github PK

https://velog.io/@taetae-5/React-18-%EC%97%90%EC%84%9C-useLocalStorage-%EA%B5%AC%ED%98%84

페이지에 들어갈 시, POST를 통해 이루어지고
임시 저장 버튼의 기능 구현은 PUT을 통해서 이루어지도록 하고 있다.

여기서 문제가.. 이미지에 대해서 초기에는 POST를 통해 보내고 firebase의 storage의 url을 저장하도록 하는데, 이미지가 바뀔 시에 다시 이미지를 POST를 하고 url을 바꿔주게 된다.

그러면 처음에 POST한 이미지에 대해 불필요한 데이터가 쌓이는 문제가 발생...

해결

• get 요청이 올 때, cookie 파싱을 통해 보안키를 사용하여 응답 cookie 객체에 저장

app.use(cookieParser(process.env.COOKIE_SECRET)); // 

구현 결과

반응

POST - 자기소개서 작성

PUT - 자기소개서 수정

DELTE - 자기소개서 삭제

GET - 입사 지원현황 조회

POST - 입사지원현황 작성

PUT - 입사지원현황 수정

DELETE - 입사지원현황 삭제

GET - 전체 차트 조회

GET - 개인 차트 조회

로그인

입사지원현

드드래그앤드랍

임시글

임시글

검색

자기소개 페이지

반응형

이미지 업로드

React-dnd

핵심은 Drug & Drop

1. useDrag

const [Collected Props, DragSource Ref,  DragPreview Ref] = useDrag(spec, deps)

1. spec : 사양 개체 또는 사양 개체를 생성하는 함수

2. deps : 메모이제이션에 사용되는 종속성 배열이며 내장된 useMemo의 React 후크처럼 동작합니다. 기본값은 함수 사양의 경우 빈 배열이고 개체 사양의 경우 사양을 포함하는 배열입니다.

3. Collected Props : 수집 기능에서 수집된 속성을 포함하는 개체로서 함수가 정의 되지 않은 경우 collect빈 객체가 반환됩니다.

4. DragSource Ref : 드래그 소스에 대한 커넥터 기능으로 DOM의 드래그 가능한 부분에 연결되어야 합니다.

5. DragPreview Ref: 드래그 프리뷰용 커넥터 기능으로 DOM의 미리보기 부분에 첨부될 수 있습니다.

2. useDrop

const [collectedProps, DropTarget Ref] = useDrop(specArg, deps?)

1. spec : 사양 개체 또는 사양 개체를 생성하는 함수

2. deps : 메모이제이션에 사용되는 종속성 배열이며 내장된 useMemo의 React 후크처럼 동작합니다. 기본값은 함수 사양의 경우 빈 배열이고 개체 사양의 경우 사양을 포함하는 배열입니다.

3. Collected Props : 수집 기능에서 수집된 속성을 포함하는 개체로서 함수가 정의 되지 않은 경우 collect빈 객체가 반환됩니다.

4. DropTarget Ref : 놓기 대상에 대한 커넥터 기능입니다. DOM의 놓기 대상 부분에 연결되어야 합니다.

보통 사용

const [collectedProps, drop] = useDrop(() => ({accept}))

1. accept: 지정한 유형에 대해서 드래그 소스를 반응하도록 함.
2. drop(item, monitor)? : 호환되는 항목이 대상에 떨어질 때 호출
3. collect : 구성 요소에 삽입하기 위해 반환할 props의 일반 개체를 반환해야 합니다.

참고

React Dnd 공식문서 : https://react-dnd.github.io/react-dnd/docs/api/use-drag