프로젝트 회고/2) project (5) 썸네일형 리스트형 position:fixed 고정 후, 스크롤 페이지의 헤더를 꾸미다 보니, position : fixed 를 쓰게 되었다. 말풍선 안에 글을 넣은 모습을 하고싶었는데, 다른 영역을 침범해야 원하는 위치로 갈 수 있어서 사용했다. 그 후, 메인 UI를 다듬고 스크롤을 하는데, 말풍선이 계속 따라다닌것을 알게 되었다. 💡 따라다니는 말풍선은 fixed인데 어떻게 스크롤 시 화면에서 없앨 수 있을까? → 스크롤 했을 때, 헤더를 없애면 말풍선도 자연스럽게 사라질 것. useEffect(() => { const handleScroll = () => { const scrollThreshold = 50; // 스크롤 50px 을 임계값으로 설정 const currentScrollY = window.scrollY; // 현재 스크롤 // 현재가 50px 이하일.. 프론트의 서버 인증 (쿠키, 토큰, 세션) 2 회원가입 / 로그인을 구현하며, 권한이 있는 유저인지 인증하는 과정에서 많은 일을 겪었습니다. 아마 프로젝트를 백엔드와 함께 구현하면서 많이 일어나는 일이겠죠. 1) CORS 에러와의 싸움 2) 401과 403 코드의 콜라보 3) 응답 헤더에 접근 불가 4) 요청헤더에 토큰 넣기 해결했던 과정들을 공유하고, 다시 되새기는 시간을 갖도록 하겠습니다. 3) 응답 헤더에 접근 불가 서버에서 응답헤더에 토큰을 넣어 보내주었는데, 개발자 도구로 확인했을 때는 있었던 토큰이 무슨 수를 써도 접근이 불가여서 많은 시간을 썼습니다. 💡접근이 불가능한데, 응답 헤더를 어떻게 확인하나요? → 토큰 확인이 안되는데 서버는 보냈다고 할 때, 진짜 보낸 게 맞는 지 확인해야합니다. 브라우저의 개발자 도구에서 Network에 들.. 프론트의 서버 인증 (쿠키, 토큰, 세션) 1 회원가입 / 로그인을 구현하며, 권한이 있는 유저인지 인증하는 과정에서 많은 일을 겪었습니다. 아마 프로젝트를 백엔드와 함께 구현하면서 많이 일어나는 일이겠죠. 1) CORS 에러와의 싸움 2) 401과 403 코드의 콜라보 3) 응답 헤더에 접근 불가 4) 요청헤더에 토큰 넣기 해결했던 과정들을 공유하고, 다시 되새기는 시간을 갖도록 하겠습니다. 1) CORS와의 싸움 💡CORS가 정확히 어떤건가요? → cors는 동일 출처가 아닌 다른 출처의 리소스를 사용중이라는 것을 의미합니다. 기본정책인 sop (같은 출처 리소스 사용)를 위반하 고 있으니, 다른 출처 리소스를 사용하고 싶다면 권한을 부여하라는 것 입니다. 따라서 프론트에게 서버에 접근할 권한이 없다는 것을 뜻합니다. 자세한 CORS 개념은 전에.. Redux-toolkit (Todo-List에서 사용하기) 기존에 만들었던 Todo-List를 수정했습니다. → 캘린더 형태의 Todo-List로, 캘린더에서 선택한 날짜를 Redux-toolkit으로 상태관리하여 Todo-List에서 각 개별 날짜마다 todo를 만들고, 만든 날짜에 색을 부여해 캘린더에서 한 눈에 확인할 수 있도록 했습니다. 💡 모든 자원을 상태관리하는 것이 좋은건가요? → 가장 좋은 것은 관리할 것이 없는 것이다. 그래야 코드부담이 적고, 복잡해지지 않는다. 그래서, 내가 사용하려고 하는 자원이 많은 곳에서 사용이 되는가? 정말 필요한 자원인가? 를 판단하여 상태관리를 하는 것이 좋다. 만약 해당되지 않는다면, 상태관리는 되도록 안쓰는 것이 깨끗한 코드에 도움이 된다. 하지만, 그렇다고 필요한 부분에도 고심하여 사용하지 말라는 것은 아니다... Todo List- TS 간단한 Todo List, 처음 TS를 접하는 사람들에게는 간단하지 않다...! (React, Typescript, JsonSever를 이용했습니다.) 1. TodoForm - Todo의 할 일을 추가하는 헤더부분 1) 헤더 입력창 텍스트 : useState를 통해 입력창이 비어있는 지 확인할 수 있습니다. 비어 있지 않다면 handleSubmit 함수를 통해 onAdd를 호출합니다. preventDefalut()는 꽤 자주 사용하는 함수로, 바로 제출되는 이벤트를 막습니다. 모달창에서 모달안의 영역을 클릭했을 경우에도 모달이 닫히는 걸 방지할 때 유용히 사용됩니다. //TodoFormProps 인터페이스정의 : 입력받을 값은 문자열임을 알려줌 export interface TodoFormProps { .. 이전 1 다음
