swr 인자 넘기는 방법
https://velog.io/@denmark-banana/useSWR-arguments useSWR - Get 요청 시 fetcher 함수에 인자 넣어주기 useSWR을 사용하던 중 fetcher에 인자로 데이터를 보내야해서 공식문서를 참고하였다.2번째 인자로 fetcher로 넣을때 위 3개의 expression은 같은 의미를 갖는다.useSWR은 기본으로 첫번째 인자인 key를 fetch velog.io
꿀벌 투두리스트
————공부해야할 것———— typescript 디폴트 파라미터 왜 나가기시 즉시 반영이되는지 ———— 해야할 것들——— 뒤로가기하고 바로 채팅방 들어갈경우 socket disconnect 가 되지않아서 두번 입장하였습니다. 세변 입장하였습니다. 되는 경우 채팅방 만기시 알림 채팅방 들어갈때 처리 채팅방 제목 해쉬태그 전송버튼 누를시 공백도 전송이 되는 오류 고치기 드로어 나 정보 수정하기 참가자수 고쳐야하고 방만들면 채팅방 바로 들어가기 내 채팅방 채팅방 무한스크롤 ————정현님과 이야기 나눠야할 것들——— 채널 ttl 만기시 자동으로 제거되지않음 채팅방 입장시 기존에 입장해있던 유저도 다시 ‘입장하였습니다’뜨는 경우 처리 -> 정현님께 채팅방안에 있는 인원의 이름을 먼저 get 해야한다고 말씀드리기...
해쉬 태그 기능 만들기
아래는 flex 1 을 주어 남은 공간을 모두 차지하게 하였다. https://devjhs.tistory.com/184 [javascript] removeChild - 객체 제거 1. 개념 removeChild - 자식 요소 제거 removeChild는 부모에서 포함된 자식 노드가 존재할 경우 일치하는 아이디나 클래스 등과 같은 속성을 통해 자식 노드를 제거 2. 태그 removeChild javascript 코드 1 2 3 4. devjhs.tistory.com tag의 부모는 tag-container 이므로 해당 태그를 지우기 위한 하나의 기법으로 생각하면 될 것 같다. slice slice는 파이썬의 [:] 와 비슷하게 생각하면 될 것 같다. 하지만 배열을 복사할 경우 얕은 복사가 되므로 주의해야한..
스크롤바 다시 커스텀..
아.. 이 무슨 .. 기존에 사용하던 스크롤바 라이브러리이다. 윈도우에서는 내 입맛에 맛게 커스텀 되었지만, 최근에 맥북으로 바꾸게 된 프로젝트 환경에서는 그렇지 않았다. 즉, 내가 원하는 모양이 아니였다. 그래서 새로운 라이브러리를 찾아야했다. (기존의 라이브러리로 할 수 없을까? 고민을 많이했지만 그럴 수 없을 것 같다는 생각이 들었다.) 그래서 아래 라이브러리로 바꿀 생각이다. 현재는 개발자 도구에서 class에 직접 css 먹이는 방법을 사용하고 있다. 그래서 !important를 사용중이다. 그런데 위 처럼 css 만 바꾸다 보니 스크롤이 딱 걸려서 내려가질 않는다. 따라서 css 만 바꾸는게 아닌 라이브러리의 props를 바꾸어주어야 했다. 깃허브 레퍼런스를 참고하면 아래와 같이 PROPS 라..
뭔가 번쩍이는
justify-content: space-between div를 relative 로 주고 검은색 circle은 absolute로 둔다. .drawerWrapper .line { width: 100%; height: 0; margin: 11px 3px 13px 0px; border: solid 1px #ddd; }
JWT (4)
참고한 좋은자료 https://velog.io/@minju1009/reactmap-%ED%95%A8%EC%88%98-%EC%A0%81%EC%9A%A9%EC%8B%9C-key-props%EB%A5%BC-%EB%B6%80%EC%97%AC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0 [react]map 함수 적용시 key props를 부여하는 이유 key props는 왜? 어디에? 어떻게 적용해야 하는지에 대해 velog.io map 함수 적용시 key props를 부여하는 이유 Key란 React의 항목변경을 돕는 식별자이다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지..
JWT 3
https://velog.io/@junghyeonsu/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%9D%84-%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 🤔 JWT, 정확하게 무엇이고 왜 쓰이는 걸까? Json Web Token에 대해서 정확히 알고 넘어가자. velog.io JWT 이란? JSON WEB TOKEN 의 약자이다. JWT를 사용하는 이유 HTTP 의 stateless 상태를 유지 하지 않는다 라는 특성때문에 서버와 클라이언트는 첫번째 통신을 하고나서 두번째 통신을 할때는 이전의 통신에 대한 정보를 가지고 있지 않기 때문에 새롭게 갱신을 해주어..
JWT 공부 2
Context API 위와 같이 전역적으로 state 관리가 가능해진다. React Router dom v6 와일드 카드 https://devalice.tistory.com/112 [React-Router] v6로 적용하기 리액트의 단짝친구 리액트 라우터가 v6 버전이 나왔다..! 새로운 프로젝트에 들어가면서 리액트 라우터 v6 버전을 쓰게 되었는데 사용하면서 간단하게 달라진 점들을 정리해보고자 한다! v5에서 v devalice.tistory.com https://devalice.tistory.com/112 명시적으로 해당 url에만 접근가능하도록 위해 exact는 필수였다. 하지만 v6에서는 아예 기본 전제가 바뀌어서 exact가 기본으로 되어있어 exact 속성이 사라지게 되었다. 그렇다면 exac..
JWT 공부
withCredential 정규표현식 C:\Users\ehddu\Documents\react_register_form-main\react_register_form-main\src\Register.js useRef Focus 해당 엘리먼트로 포커스가 맞춰진다. 정규표현식 테스트 Axios axios.get(url[, config]) axios.post(url[, data[, config]]) 삼항 연산자 사용하여 class 구분 onFocus onBlur onFocus input 이 포커스를 받으면 함수 실행 onBlur input이 포커스를 잃으면 함수 실행 axios BaseUrl 설정 C:\Users\ehddu\Documents\react_register_form-main\react_register_..