https://nninyeong.tistory.com/109 [Tailwind] 부모 요소가 hover 상태일 때 자식 요소 스타일 지정하기 (group)지난번 팀프로젝트에서 특정 경로로 이동하는 버튼들을 모두 useNavigate()를 이용해 만들었는데, 시맨틱한 코드를 고려하기 위해서는 Link 태그를 더 활용해보는 것을 추천받았다.경로 이동을 유도nninyeong.tistory.com 지난번 작성한 글에 이어서 조금 더 추가! 정확한 API 명세 확인과 formData 객체 활용하기문제: 로그인 요청 시 헤더에 인증 토큰이 없다는 에러 발생로그인 요청을 보낼 때 서버에서 "Authorization 토큰이 없다"는 에러가 발생했다. 하지만 네트워크로 전송하는 데이터를 출력했을 땐 헤더에 토큰이 잘 들..
옵저버 패턴발행-구독 패턴에 대해 공부하기 전 챌린지반에서 옵저버 패턴을 공부했다. 어떤 변화가 일어났을 때 그 변화를 감지해야할 곳에서 변화 상태를 구독하는 방식으로 구현하는 것을 의미한다.이 패턴을 구현하기 위해 특정 요소의 업데이트가 발생할 때 호출할 함수들 목록(구독자/관찰자 목록이라고 할 수 있다!)을 만들어두고, 구독할 요소들에서 변경된 값을 반영하기위한 함수(변화시 호출될 콜백함수)들을 그 구독자 목록에 push해주면 된다. 옵저버 패턴의 특징- 상태 변화가 발생하는 요소(주체)가 자신의 변화가 미칠 영향을 몰라도 된다.- 주체와 그 관찰자의 결합도가 낮다.- 옵저버로 등록(구독)해야하므로 두 요소는 완전히 모르는 상태가 아니다. 구현 예제// Subject.js -> 주체const crea..
지난번 팀프로젝트에서 특정 경로로 이동하는 버튼들을 모두 useNavigate()를 이용해 만들었는데, 시맨틱한 코드를 고려하기 위해서는 Link 태그를 더 활용해보는 것을 추천받았다.경로 이동을 유도하는 버튼들은 Link로 처리했는데 hover 이벤트를 주려니 문제가 생겼다! 문제상황이렇게 Link 태그의 영역이 아니면서, 부모요소인 div 태그의 영역에 hover되면 동시에 hover 스타일 속성이 적용되지 않는 현상이 있었다. Link 태그의 width, height를 full(100%)로 설정해줘도 되지만, 경우에따라 이와 같은 구조이지만 크기는 부모와 달라야하는 상황이 있을 것 같아 좀 더 알아보았다. 해결tailwind에서 hover, focus 등의 상태를 그룹지어주기위해 group을 사용할..
개념정리인증 (Authentication)서비스를 이용하려는 유저가 등록된 회원인지 확인하는 것 인가 (Authorization)인증을 받은 유저가 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차 HTTP의 관련 특성1) 무상태 (stateless)- HTTP 프로토콜은 무상태 프로토콜- 각 요청이 독립적이며, 서버가 이전 요청에 대한 정보를 기억하지 않음 (이전에 인가된 요청이 왔는가? 모른다)- 따라서 각 요청마다 상세 정보를 알려줘야 함 2) 비연결성 (connectionless)- 서버와 클라이언트는 연결되어있지 않음- 서버 입장에서는 매번 새로운 클라이언트의 요청을 받는 것 쿠키- 브라우저에 저장되는 작은 데이터 조각, key-value 쌍으로 저장- HTTP 무상태성과 비연결성 특성..