리액트 새로고침 시 대응방법
현재 프로젝트에서 음성채팅을 할때 토큰을 발급을 받는데, 통화종료를 누르면 토큰이 반납되는 방식으로 구현이 되어있다. 그런데 사용자가 만약에 새로고침을 해버린다면 토큰이 반납이 되지않아 다시 음성채팅에 참여할 수 없게 되어버렸다. 이러한 문제를 해결하기 위해서 새로고침에 대한 대응을 마련해야했다. 초기에는 다음과 같이 생각했다. 그냥 새로고침 감지되면 무지성으로 요청 보내기. 하지만 이경우에는 문제가 발생했는데, 새로고침이 감지된 순간에 React state 값들이 처음 선언했던 값으로 바뀌어버렸다는 것이다. 따라서 이 방식은 사용할 수 없었다. const alertUser = (e: any) => { console.log('새로고침 테스트'); axios .post('/api/v1/webrtc/voic..
모달 fadeOut 효과주는 방법, 서서히 사라지는 모달
프로젝트가 거의 마무리 단계이다. 디테일을 잡고있다. 구현해야하는 것은 다음과 같은 모달인데 서서히 사라지게끔 하고 싶다. 구글링을 통해 코드샌드박스에 다음과 같은 hideEffec를 만들 수 있었다. https://codesandbox.io/s/heuristic-almeida-bt1ku9?file=/src/App.js heuristic-almeida-bt1ku9 - CodeSandbox heuristic-almeida-bt1ku9 by ehddud1006 using react, react-dom, react-scripts codesandbox.io 우선 만들던 중에 React 에서 바닐라 자바스크립트의 document.getElementById의 기능과 addEventListener를 사용하는 방법을 ..
모달 영역 밖 클릭시 닫기
방법은 간단하다. 다음 처럼 전체 영역을 가진 div 태그를 만들어준다. export const ModalBackgroundOutEvent = styled.div` position: fixed; top: 0; left: 0; bottom: 0; right: 0; `; 모달에는 z-index 속성을 주어 저 배경영역보다 위에 있게한다. 이를 주지 않는경우에 모달을 누를때 모달이 닫아지기 때문에 꼭 넣어주어야한다. 그러면 저 ModalBackgroundOutEvent 에 onClick 으로 모달을 닫게하는 state 를 변경하면 된다. 다음과 같은식으로 말이다. { dispatcher(setUsePointExcept({ value: false })); }}>
post 에러 몇번대 에러인지 체크하는 방법
요청을 보냈을때 다음 처럼 몇번 status 의 에러를 가지는지로 모달의 띄워줘야하는 상황이였다. 409 번 에러라면 포인트를 확인해주세요 라는 모달을 띄워야했는데, 한번보도록 하자. 다음처럼 catch 문에서 error.response.status 를 통해서 해당 값이 몇번대의 에러인지 알 수 있었다. .catch(function (error) { // handle error console.log(error); if (error.response.status === 409) { dispatcher(setCreatePointModalExcept({ value: true })); } 출처자료 https://stackoverflow.com/questions/39153080/how-can-i-get-the-st..
채팅 드로어 구현
글적다 한번 날려먹었다. 다시쓰려니까 넘나리 귀찮지만.. 기록 남기는 것이 중요한 걸 알기에.. 다음처럼 드로어를 구현했다. 뭐 굿 디자인은 아니지만 어물쩡 넘겨버릴 수도 있었다. 하지만 원래 디자인은 다음과 같이 카카오톡 처럼 채팅 input 과 함께 싸악 올라가는 모습이다. 다음처럼 말이다. 나는 그냥 기존에 있던 드로어를 재활용해서 만들었다. 하지만 실무에서 만약 디자인이 나에게 까지 왔다면, 그 디자인은 나보다 윗분들에게 컨펌을 받은 상태에서 내려온 디자인일 것이다. 그것대로 구현하지 못하거나, 귀찮다는 이유로 구현을 하지 않는다면 나는 그 회사에 존재할 이유가 없는 사람이다. 그냥 이런 생각이 갑자기 들었다. 그래서 저런식으로 구현을 하기로 다시 마음을 먹었다. 시간이 좀더 걸리더라도 퀄리티를 ..
모바일 모달 만들기
모바일 모달을 만들었습니다. 쉽지만 만들면서 레이아웃을 잡을 때 든 생각을 기록하기 위해서 글을 씁니다. 먼저 백그라운드를 잡아주어야합니다. 코드는 다음과 같습니다. const ModalBackground = styled.div` position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.8); `; 이제 모달의 위치를 잡아주어야하는데, 흔히 모달을 정중앙에 위치시키기 위해서는 transform 을 많이 사용합니다. 다음과 같이 말입니다. top:50%; left:50%; transform: translate(-50%,-50%); 하지만 이번에는 calc 를 사용해서 중앙을 계산했습니다. --vw 단위는 모바일 기기..
PUT vs PATCH 차이점
https://papababo.tistory.com/entry/HTTP-METHOD-PUT-vs-PATCH-%EC%B0%A8%EC%9D%B4%EC%A0%90 [HTTP METHOD] PUT vs PATCH 차이점 HTTP 메소드 중 PUT 과 PATCH가 있다. 뭔 차이여... 결론 PUT : 자원의 전체 교체, 자원교체 시 모든 필드 필요 (만약 전체가 아닌 일부만 전달할 경우, 전달한 필드외 모두 null or 초기값 처리되니 주 papababo.tistory.com
fixed , sticky 정리 (추가로 React에서 스크롤이벤트)
fixed 위 속성을 적용하게 되면 일반적인 문서 요소 순서에 따라 배치되는 것이 아니라 페이지 화면 내 절대적인 위치에 고정시킬 수 있다. 스크롤과 상관없이 항상 해당 위치에 고정된다. 출처: https://ordinary-code.tistory.com/106 [김평범's OrdinaryCode:티스토리] 대표적인 예로 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당된다. 또한 내가 삽질한 예시를 보면 더 이해가 빠를 듯하다. fixed 는 항상 페이지에서 고정된 위치에 존재하기 때문에 다음과 같이 footer 안에 들어가는 참사가 발생할 수 있다. 내가 원하는 대로 구현을 하려면 sticky나 fixed + js 조합을 사용해야했다. sticky 위 속성을 적용하게 ..
react-datepicker 라이브러리 커스텀 , 인터파크 달력 따라만들기
https://yong-nyong.tistory.com/11 [React] react-datepicker 라이브러리 사용 하기(캘린더, 달력 라이브러리) 📖 들어가며 이번에 팀 프로젝트로 팀 프로젝트를 구하는 웹앱을 클론 코딩하게 되면서 프로젝트 진행 기간을 선택할 수 있게 하는 Input이 필요했습니다. 그래서 캘린더가 표시되고 캘린더에서 yong-nyong.tistory.com 우선 위 자료를 보면서 만들어 보고 있다. 첫번째 난관 봉착 공식문서 보고 하고 있는데 subDays , addDays 가 정의되어있지 않다. 근데 공식문서에 안나와있다. 좀 다른데서 갖다쓰면 알려달라고 ㅋㅋ date-fns 라이브러리에서 가지고 와서 쓰는 것이였다. 두번째 단계 내가 커스텀 하고 싶은 class 명을 찾아가면..
styled-components props
직면한 문제상황은 다음과 같았습니다. aside 라는 Wrapper 가 컴포넌트를 감싸고 있었기 때문에 다음과 같이 padding 20px 이 모두 적용 되어있습니다. 그런데 다음처럼 문제가 생겼습니다. ㅋㅋ 딱봐도 문제가 많아보이네요. 우선 디자인 나온대로 구현을 하려면 저 눈에 가시같은 padding을 없애주어야하는 상황이였습니다. asideWrap은 styled-components 로 구현이 되어 있었죠. 그러면 어떻게 해결을 해야할까? 고민을 했습니다. 현재 저는 chatState 라는 state 를 사용하여 컴포넌트를 렌더링하고 있습니다. 즉, chatState가 'chat' 이 될때 위의 화면이 렌더링이 되는 것이죠. 그렇다면, 이것을 이용해서 styled-component에 state를 pr..