Dev
-
[CSS] 비율 유지 반응형 구현하기Dev 2023. 2. 15. 11:26
프로젝트를 진행하면서 아래 영상과 같이 배경사진 위에 올린 요소들이 위치가 밀리지 않고 동일한 비율로 줄어드는 기능을 구현해야 할 상황이 생겼다. 구현 예시 어떻게 해야하나 방법을 찾던 차에 명쾌한 블로그 글을 찾았다. 요약하자면 최상위 컨테이너에 높이값을 0으로 주고 padding-top 또는 padding-bottom 값으로 콘텐츠를 최상위 컨테이너 밖으로 밀어내어 내부 요소들이 동일한 비율로 줄어들게 한다는 개념인데 사실 패딩값을 준 게 어떻게 이러한 결과를 이끌어내는지 이해할 수가 없었다. 그래서 완성된 코드에서 하나씩 제거하면서 무엇이 달라지는지 테스트해보았다. 가장 중요한 부분인 아래 코드 두 줄을 제거하자 아래 영상과 같은 결과가 나왔다. position: relative; padding-b..
-
[Babylon.js] 04. Custom models import 해보기Dev 2023. 2. 14. 14:11
Custom Model 적용해보기 HTML 삽입 미리보기할 수 없는 소스
-
-
[Babylon.js] 02. standard material 구현해보기Dev 2022. 12. 28. 09:50
Material 적용해보기 HTML 삽입 미리보기할 수 없는 소스
-
[Babylon.js] 01. 기본 scene 만들어보기Dev 2022. 12. 27. 14:08
Babylon.js VS Three.js 반복되는 비슷한 일에 지쳐가던 찰나에 웹 환경에서 3D를 구현할 수 있는 babylon.js를 공부할 기회가 생겼다. babylon.js를 사용해야 한다고 전달받고는 three.js가 예제도 많고 커뮤니티도 더 큰 걸로 기억하는데 왜 babylon.js인가 싶어서 조금 찾아보았다. Babylon.js Three.js 장점 - microsoft가 개발 - typescript 지원 - 빠른 이슈 처리 - 쉬운 접근성 - 많은 예시 코드 - 큰 커뮤니티 단점 - 적은 예시 - 불편한 공식문서 - 버전에 따른 낮은 api 안정성 간단히 보면 위 표 정도가 되는데, 사실 babylon.js의 장점 2개만 봐도 어떤 것이 실제 프로덕트에 적용하는 것이 좋을지 나오는 것 같긴..
-
[Konva] Konva를 이용한 canvas 에디터 구현하기Dev 2022. 12. 5. 18:12
프로젝트 진행 중 React 환경에서 canvas 에디터를 구현해야 하는 상황이 생겨 konva 라이브러리를 이용해 간단한 에디터를 구현해보았다. konva를 선택한 이유는 React 환경에서 사용할 수 있는 canvas 라이브러리 중 커스텀이 편리하고, 구현해야 할 기능(동영상, 이미지, 텍스트 크기 조절 및 위치 이동) 적용 예시를 찾아볼 수 있는 라이브러리였기 때문이다. 또 공식문서도 여러가지 예시와 잘 정리되어 있고, 현재에도 꾸준히 개발되고 있다는 점과 라이브러리 개발자의 피드백이 빠르다는 점도 있었다. 1. 기본 구조 konva에서 소개하는 기본 구조는 아래와 같다. 이번 프로젝트에서는 그룹 기능까지는 필요하지 않아서 여러개의 shape 데이터를 매핑하여 stage에 여러개의 layer - s..
-
[Next.js] Nice API 본인인증 구현하기Dev 2022. 8. 17. 18:00
1. NICE 표준창 호출 NICE 본인인증 과정은 위 그림과 같다. 위 그림의 "기관 토큰 발급 ➜ 암호화 토큰 발급 ➜ 대칭키 생성 ➜ 요청정보 암호화" 과정은 백엔드 개발자가 api로 만들어 표준창 호출에 필요한 정보들만을 받을 수 있도록 구현해주었다. 이 api를 token api라고 가정한다. token api의 응답 값은 NICE 표준창 호출에 필요한 token_version_id, enc_data, integrity_value 이 세 가지 정보이며, 이 세가지 정보가 유효해야만 NICE 표준 창을 호출할 수 있다. 표준창 호출을 위해서는 팝업 또는 새 창을 열고 해당 창으로 form submit 하여 암호화된 데이터를 전달해주어야 한다. 암호화 데이터 전달을 위한 코드는 아래의 button ..
-
웹사이트 아이콘을 훔쳐보자Dev 2022. 4. 9. 23:20
웹사이트 클론 코딩을 하거나, 이런저런 이유로 웹사이트의 파비콘을 가져오고 싶은데 방법을 몰라서 구글링으로 저장하기도하고, 해당 웹사이트의 element 탭을 열어 열심히 뒤지곤 했었다. 하지만 매우 간단한 방법이 존재했다. 그냥 해당 웹사이트 URI 뒤에 favicon.ico를 붙여주면 페이지가 이동되면서 파비콘 이미지가 나온다. 나는 그냥 그걸 내 다운로드 폴더에 드래그하면 Voilà 이 favicon은 이제 제 겁니다. - 넷플릭스의 favicon을 훔쳐보자 - https://www.netflix.com/favicon.ico Netflix 스마트 TV, 태블릿, 스마트폰, PC, 게임 콘솔 등 다양한 디바이스에서 영화와 시리즈를 마음껏 즐기세요. www.netflix.com