post
-
2) project
프론트의 서버 인증 (쿠키, 토큰, 세션) 2
회원가입 / 로그인을 구현하며, 권한이 있는 유저인지 인증하는 과정에서 많은 일을 겪었습니다. 아마 프로젝트를 백엔드와 함께 구현하면서 많이 일어나는 일이겠죠. 1) CORS 에러와의 싸움 2) 401과 403 코드의 콜라보 3) 응답 헤더에 접근 불가 4) 요청헤더에 토큰 넣기 해결했던 과정들을 공유하고, 다시 되새기는 시간을 갖도록 하겠습니다. 3) 응답 헤더에 접근 불가 서버에서 응답헤더에 토큰을 넣어 보내주었는데, 개발자 도구로 확인했을 때는 있었던 토큰이 무슨 수를 써도 접근이 불가여서 많은 시간을 썼습니다. 💡접근이 불가능한데, 응답 헤더를 어떻게 확인하나요? → 토큰 확인이 안되는데 서버는 보냈다고 할 때, 진짜 보낸 게 맞는 지 확인해야합니다. 브라우저의 개발자 도구에서 Network에 들..
-
JavaScript
객체 지향 프로그래밍 (클래스와 인스턴스) in JS
- 객체 지향 프로그래밍 : 하나의 모델이 되는 청사진을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴 하나의 모델이 되는 청사진을 우리는 "class" 그것을 바탕으로한 객체는 "instance object (instance)" 라고 부른다. [클래스] 클래스는 ES5 이후 , ES6 부터 사용되는 문법으로 생성자 함수로 만들었었지만, 이젠 class 키워드로 만드는 문법이다. //ES5 문법 function Menu(category, name, price){ // 인스턴스가 만들어질 때 실행되는 코드 this.category = category; this.name = name; this.price = price; } //ES6문법 class Menu{ constructor(categ..
-
2) project
position:fixed 고정 후, 스크롤
페이지의 헤더를 꾸미다 보니, position : fixed 를 쓰게 되었다. 말풍선 안에 글을 넣은 모습을 하고싶었는데, 다른 영역을 침범해야 원하는 위치로 갈 수 있어서 사용했다. 그 후, 메인 UI를 다듬고 스크롤을 하는데, 말풍선이 계속 따라다닌것을 알게 되었다. 💡 따라다니는 말풍선은 fixed인데 어떻게 스크롤 시 화면에서 없앨 수 있을까? → 스크롤 했을 때, 헤더를 없애면 말풍선도 자연스럽게 사라질 것. useEffect(() => { const handleScroll = () => { const scrollThreshold = 50; // 스크롤 50px 을 임계값으로 설정 const currentScrollY = window.scrollY; // 현재 스크롤 // 현재가 50px 이하일..
