2023.09.01
오늘의 회고
어느새 중간발표 시간이 다가왔다. 주말동안 프로젝트를 다듬어 보자.
동행 페이지 디테일 Info CSS, 스팟 공유 수정 시 지도 찍어 주기, 텍스트 에디터 커스텀
게시물 삭제 렌더링
해당 게시물의 디테일 페이지에서 삭제를 하면 useNavigate로 게시물 리스트를 보여주는 리스트 페이지로 이동되게 구현했습니다. 문제는 리스트 페이지에 삭제된 게시물이 새로고침 하기 전에는 여전히 남아있는 문제가 있었습니다.
const mutation = useMutation(deleteSpotSharePost, {
onSuccess: async () => {
await queryClient.invalidateQueries(['spotSharePost']);
},
});
const deletePostHandle = (id: string | undefined) => {
mutation.mutate(id);
navigate('/spotshare');
};문제는 동기적으로 실행되는 mutation.mutate(id)와 navigate('/spotshare')였습니다.
게시물이 삭제 되기 전 리스트 페이지로 이동 되어서 생긴 문제였습니다.
navigate('/spotshare')를 useMutation의 onSuccess에서 동기 적으로 실행되게 해결해 주었습니다.
const mutation = useMutation(deleteSpotSharePost, {
onSuccess: async () => {
await queryClient.invalidateQueries(['spotSharePost']);
navigate('/spotshare');
},
});
const deletePostHandle = (id: string | undefined) => {
mutation.mutate(id);
};기술면접
질문 - 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.
동기는 모든 작업이 순차적으로 실행되어 어떤 작업이 수행 중이라면 다음 작업은
대기하게 됩니다.
비동기는 작업이 독립적으로 실행되어 한 작업이 시작되더라도 완료를 기다리지 않고
다음 작업을 시작할 수 있습니다. 여러 작업을 동시에 처리해 시스템의 자원을 절약할 수 있습니다.
CS스터디
- 질문 : 프로세스와 쓰레드의 차이점은 무엇일까요?
- 답변 : 프로세스는 메모리 상에서 실행중인 프로그램을 말하며, 쓰레드는 이 프로세스 안에서 실행되는 흐름 단위를 말합니다. 프로세스는 각각 독립된 메모리 영역(Code, Data, Stack, Heap)을 할당 받습니다. 프로세스와는 달리 쓰레드는 자원 중에 stack만 따로 할당받고 나머지 영역은 쓰레드끼리 서로 공유합니다.
- 꼬리질문 : 멀티 쓰레드의 장점은 무엇이 있을까요?
- 답변 : Code, Data, Heap 영역을 공유하기 때문에 데이터를 주고 받는 것이 간단하고 자원 소모가 적습니다. 또한 쓰레드 사이 작업량이 작아 문맥교환이 빠르며 시스템 처리량이 증가 합니다.
- 꼬리질문 : 그러면 여러 Thread를 계속 늘려가는 것이 좋을까요?
- 답변 : 아닙니다. 하드웨어의 제한적인 사항이 있기 때문에 관리할 필요가 있습니다. 그래서 쓰레드 풀 이라는 개념을 이용합니다. 쓰레드 풀이란 작업 처리에 사용되는 쓰레드를 제한된 개수만큼 정해 놓고 작업 큐(Queue)에 들어오는 작업들을 하나씩 쓰레드가 맡아 처리하는 것을 말합니다.
개발공부!