크로스 도메인간 로그인 연동 (SSO)

2022-04-25 월요일

Intro 기존에 A사이트를 운영 중 색다른 기능의 B사이트 프로젝트 개발을 시작했다. 프로젝트의 요구 사항으로 A사이트와 로그인 연동이 필요했다. 이 말은, 아래와 같다. A에서 로그인된 상태로 B 이동 시 로그인 되어있을 것. B에서 로그인된 상태로 A 이동 시 로그인 되어있을 것. Research 처음엔 A에서 session을 사용중이니까 이 ses…


React isValidElement Implementation (구현체)

2021-07-21 수요일

React를 사용할 때 특정 변수가 ReactElement인지 검증할 때 함수를 사용한다. TypeScript에선 Type Guard 처럼 쓰면 된다. 에선 이렇게 타입이 선언되어있고 를 보면 (minify 되어있음) 소스가 압축된 캔처럼 되어있다. 이 중에 를 검색해보면 이런 내용을 볼 수 있다. 이제 function L을 찾아보면 이런 내용이고 n…


React에서 동적으로 Library 추가하기

2021-05-27 목요일

Dom에 접근할 수 있을 때 (Mounted) script Element를 만들어서 추가해주면 된다. 코드는 아래와 같다. TypeScript에서 사용하려면 에서 선언을 잘 해줘서 쓰면 될 것 같다.


Window스크롤의 Bottom이 해당 Element의 bottom에 닿았는지 확인하는 방법

2021-05-21 금요일

이 작업을 할 당시에는 이렇게 처리했지만 Web API의 를 사용하는게 제일 좋은 방법이다. https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver


React에서 UUID를 key로 쓸 때 주의할 점

2021-05-12 수요일

리액트에서 배열로 JSX를 Render할 경우 key가 필요한데 나는 UUID를 리턴해주는 라는 유틸 함수를 만들어 사용하고 있다. 그렇게 쓰던 도중 원인 모를 이미지 깜빡거림에 두 시간 정도 삽질을 했는데 원인은 에 사용한 에 있었다. 원인 내가 를 로 사용했던 방식은 아래와 같은 방식이었다. 그리고 해당 Component를 사용하는 Parent Com…


HTML에서 배경 이미지 컨트롤하기

2021-03-16 화요일

Publishing 작업 중 배경 이미지를 넣어야 할 경우 반응형으로 맞춰야하기 때문에 곤란한 경우가 있다. 어느 해상도에서나 특정 모양을 맞춰줘야 하는데 일단 은 빼는게 맞고 화면에 다 보여줘야 하니까 는 을 해준다. 그렇게 되면 여백이 생긴다는 문제가 있다. 그래서 한가지 노하우를 공유하고자 한다. 예를 들어 이런 모양일 경우 가운데 방패 모양이 항상…


VueJS Tailwindcss + Vuetify

2020-10-16 금요일

한 개의 Vue 프로젝트 안에서 User 페이지, Admin 페이지를 같이 운영하려고 했다. 즉, 두 개의 페이지를 사용하려고 했다. 에서 이런식으로 분리를 해주고 User 페이지에서는 tailwindcss를 사용하고 Admin 페이지 쪽에서는 vuetify를 사용하였다. dev-server로 구동 중일 때는 잘 되었는데 build를 하니까 문제가 발생했…

© ZungTa Devlog, Built with Gatsby