post
-
2) project
position:fixed 고정 후, 스크롤
페이지의 헤더를 꾸미다 보니, position : fixed 를 쓰게 되었다. 말풍선 안에 글을 넣은 모습을 하고싶었는데, 다른 영역을 침범해야 원하는 위치로 갈 수 있어서 사용했다. 그 후, 메인 UI를 다듬고 스크롤을 하는데, 말풍선이 계속 따라다닌것을 알게 되었다. 💡 따라다니는 말풍선은 fixed인데 어떻게 스크롤 시 화면에서 없앨 수 있을까? → 스크롤 했을 때, 헤더를 없애면 말풍선도 자연스럽게 사라질 것. useEffect(() => { const handleScroll = () => { const scrollThreshold = 50; // 스크롤 50px 을 임계값으로 설정 const currentScrollY = window.scrollY; // 현재 스크롤 // 현재가 50px 이하일..
-
2) project
프론트의 서버 인증 (쿠키, 토큰, 세션) 2
회원가입 / 로그인을 구현하며, 권한이 있는 유저인지 인증하는 과정에서 많은 일을 겪었습니다. 아마 프로젝트를 백엔드와 함께 구현하면서 많이 일어나는 일이겠죠. 1) CORS 에러와의 싸움 2) 401과 403 코드의 콜라보 3) 응답 헤더에 접근 불가 4) 요청헤더에 토큰 넣기 해결했던 과정들을 공유하고, 다시 되새기는 시간을 갖도록 하겠습니다. 3) 응답 헤더에 접근 불가 서버에서 응답헤더에 토큰을 넣어 보내주었는데, 개발자 도구로 확인했을 때는 있었던 토큰이 무슨 수를 써도 접근이 불가여서 많은 시간을 썼습니다. 💡접근이 불가능한데, 응답 헤더를 어떻게 확인하나요? → 토큰 확인이 안되는데 서버는 보냈다고 할 때, 진짜 보낸 게 맞는 지 확인해야합니다. 브라우저의 개발자 도구에서 Network에 들..
-
2) project
프론트의 서버 인증 (쿠키, 토큰, 세션) 1
회원가입 / 로그인을 구현하며, 권한이 있는 유저인지 인증하는 과정에서 많은 일을 겪었습니다. 아마 프로젝트를 백엔드와 함께 구현하면서 많이 일어나는 일이겠죠. 1) CORS 에러와의 싸움 2) 401과 403 코드의 콜라보 3) 응답 헤더에 접근 불가 4) 요청헤더에 토큰 넣기 해결했던 과정들을 공유하고, 다시 되새기는 시간을 갖도록 하겠습니다. 1) CORS와의 싸움 💡CORS가 정확히 어떤건가요? → cors는 동일 출처가 아닌 다른 출처의 리소스를 사용중이라는 것을 의미합니다. 기본정책인 sop (같은 출처 리소스 사용)를 위반하 고 있으니, 다른 출처 리소스를 사용하고 싶다면 권한을 부여하라는 것 입니다. 따라서 프론트에게 서버에 접근할 권한이 없다는 것을 뜻합니다. 자세한 CORS 개념은 전에..
-
1) study(project)
CI / CD 를 통한 Github Action, Netlify
프론트엔드 페이지를 배포하기 위해 Netlify를 사용해보게 되었습니다. 정말 간단하게 배포가 가능하며, git에 push만 해도 자동으로 build와 배포가 이루어지는 프로그램입니다. 이걸 사용해보니, 이렇게 간단히 CI/CD가 이루어지나? 싶더라구요. 그래서 이 사이트를 소개할 겸, CI/CD와 Github Action에 대해 알아보겠습니다. 💡 CI/CD가 뭔가요? 꼭 해야하는 건가요? → 개발부터 배포까지의 단계를 자동화하여 빠르고 효율적이게 배포할 수 있게 하는 것입니다. 하지 않으면 배포가 불가한 것은 아니지만, 배포 후 업데이트를 하거나 수정을 하는 경우 빌드부터 배포를 다시 하는 것이 아닌 자동으로 진행시키기 때문에 따로 시간을 낼 필요가 없습니다. 따라서 빠르게 수정본의 테스트가 가능하며..
-
TIL
Dynamic Programming
💡 다이나믹 프로그래밍은 어떤 상황에서 사용하나요? → 컴퓨터는 빠르지만, 무한대로 빠른 것은 아닙니다. 컴퓨터에도 연산 속도에 한계가 있습니다. 또한, 메모리 공간도 한정적이죠. 이로인해 개발자들은 연산 속도와 메모리 공간을 최대한 활용할 수 있는 알고리즘을 작성해야합니다. 이를 위한 대표적인 방법이 다이나믹 프로그래밍입니다. 동적 계획법이라고도 불리며, 1) 큰 문제를 작은 문제로 나눌 수 있으며, 나눈 작은 문제를 풀면 큰 문제 를 풀 수 있을 때 2) 그 작은 문제들이 중복 되는 문제일 때. 다이나믹 프로그래밍을 사용합니다. 💡 왜 다이나믹 프로그래밍 인가요? 다른 알고리즘으로는 불가능한가요? → 아니요, 다른 알고리즘으로도 가능합니다. 겹치는 하위 문제들이 있는 경우에도 재귀적으로 호출하는 재귀..
