개발자 노트

dangerouslySetInnerHTML은 React에서 innerHTML을 사용하기 위한 React의 대체 방법이다. React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야한다. 하지만 나는 멘션같은 특정 조건에 따라 특정 문자열의 색상을 바꾸거나 bold 처리를 하는 등의 방식을 사용하기 위해서 사용했다. dangerouslySetInnerHTML 사용 방법은 어렵지 않다. 방식으로 사용할 수 있다. 기존에 사용하는 React의 div, box 등에 dangerouslySetInnerHTML를 입력하고 HTML형태의 문자열을 삽입함으로써, , 등의 HTML 문법을 사용할 수 있고, s..

React 2023. 6. 8. 14:35

이번에 기회가 되서 텔레그램을 이용한 알림 전송 기능을 제작하게 되었다. 나중에 잊기전에 미리 정리할려고 한다 1. 텔레그램 봇을 사용하기 위해서는 봇을 먼저 생성해야한다. 1.1 텔레그램 데스크탑에 접속하여 BotFather을 채팅방에서 검색한 후 찾는다. 1.2 /start를 하면 bot의 이름을 입력하라고 나오고 봇의 이름은 ***_bot 또는 ***Bot 으로 끝나야한다. 1.3 Bot이 생성되면 이러한 형태로 메세지를 받을 수 있다. 1번 위치의 주소는 봇의 개인 채팅방 주소이고, 2번 위치의 주소는 봇의 http api 주소이다. 2. 봇을 생성 후 자신이 메세지를 보낼 채팅방의 id를 확인해야한다. 2.1 id를 확인하는 방법은 api.telegram.org/bot[봇api]/getUpdat..

API 2023. 6. 8. 14:34

JavaScript에는 주기적으로 인자를 실행시키는 Interval이라는 함수가 존재한다. 하지만 React에서 이 함수를 실행 할 경우 동작이 되지 않기때문에 따로 Custom useInterval 을 제작하여 사용해야된다. useInterval 함수를 생성한다, function useInterval(callback: any, delay: any) { const savedCallback = useRef(); useEffect(() => { savedCallback.current = callback; }, [callback]); useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { const id = set..

React 2023. 6. 8. 14:34

프로젝트 중 Keycloak 사용에 많은 시간을 보냈다... Keycloak에 대한 자료도 부족하고, 사용하는 API별로 정리돼있는 것 중 한국어로 돼있는 건 더 적었다 저처럼 뻘짓하지 말라고 올리는 건데, 보는 사람이 있을지는 모르겠네... 현재 작성된 API는 Keycloak을 구성한 후 CRUD 작업들을 정리했다. - keycloak 토큰 생성 - Post : { keycloak 주소 }/realms/master/protocol/openid-connect/token - param 'client_id' : 'admin-cil', 'client_secret': keyclock 페이지의 시크릿 키 'grant_type': 'client_credentials' 'client_secret'를 제외하고는 다 ..

API 2023. 6. 8. 14:33