ITeus

안녕하세요. Teus입니다, 오랜만에 인사드립니다. 이번 포스팅에서 살펴볼 내용은 Pandas이후에 Python에서 Data처리용으로 곽광받고 있는 패키지인 Polars에 대해서 다룹니다.1. PolarsPolars를 Pandas와 비슷하게 2차원 형태의 Sheet형 데이터 처리에 특화된 라이브러리 입니다. 특징으로는Pola-rs. Rust기반으로 작성되어, 빠른 속도로 동작을 보장해 줍니다.SIMD를 지원하여 Vectorized 동작을 통해서 빠른 데이터 처리 보장.Multicore를 전부 활용할 수 있는 BackendLazy Execution을 통한 최적화된 IO실험적인 모드로 GPU Support(beta)등의 특징을 볼 수 있습니다.2. 분산처리 라이브러리와 비교.pola-rs이전에도 Pandas..

안녕하세요. Teus입니다. 이번에는 지금까지 만든 성분들이 한번에 Fade-in 되는것이 아니라 유저가 스크롤 함에 따라서 천천히 Fade-in 되는 효과를 만들어 보도록 하겠습니다. # 1. Intersection Observer APIIntersect Observer API는 유저가 특정 Component에 관찰할 경우 해당 관찰 여부를 알려주는 Web표준 기능 입니다. 그래서 보통은 이 기술을 사용해서 인피니티스크롤(스크롤을 내리면 내리면서 계속 새로운 컨탠츠가 생기는 것) 을 구현할때 주로 사용됩니다. 이 Intersect Observer를 활용할 경우, 아래처럼 보다 미려한 모바일 청첩장을 만들수가 있죠    동영상으로 보니깐 뭔지 바로 이해게 되시죠? 이제 Intersection Observ..

안녕하세요 Teus입니다. 이번에는 결혼식에서 또 빠지면 섭한 마음(?) 전하는 곳을 추가해 보도록 하겠습니다. # 1. 설계하기이번같은 경우 신랑/신부 각각의 정보를 따로따로 볼 수 있으면 좋을것 같습니다. Flip/unFlip 방법도 괜찮지만 Gallery에서 만들었던 modal 기능을 재활용 해보려고 합니다. 대표사진 삭제사진 설명을 입력하세요.이렇게 만들기 위해서 일단 Account.jsx 파일을 만들어 줍니다. Account.jsxconst Account = () => { return ( 마음 전하실 곳 신랑측 계좌번호 신부측 계좌번호 )}export default Accoun..

안녕하세요 Teus입니다. 드디어 모바일 청첩장의 모양세가 완성되어가고 있습니다. 이번에는 결혼식이 어디서 열리는지, 해당 내용을 담을 부분을 완성 하겠습니다. # 1. 설계하기이번 포스팅은 큰 내용은 없습니다. 약도 이미지를 확보하고, 해당하는 위치로 이동하기 위한 이동 방법을 기술하면 됩니다. 저는 아래처럼 설계를 했습니다.그러면 이 접근을 위해서 약도와 한글주소, 접근방법을 확인할 필요가 있을탠데요 대부분 이용하시는 웨딩컨밴션의 홈페이지가 있으실겁니다. 거기서 정보를 획득해 옵니다.  여기서 약도를 mymap.png 로 저장해 주고 나머지 텍스트는 임시로 저장해 줍니다. 그리고 이 내용을 활용해서 이제 Navi.jsx, Transport.jsx를 만들어 줍니다. Navi.jsximport weddi..

안녕하세요. Teus입니다. 지난번 Gallery가 만들어 졌지만 작은 크기의 사진만 볼 수 있고, 이 사진을 크게 볼 방법이 없었죠? 이번에는 사진을 눌렀을 때 사진을 확대해서 보여줄 수 있는 Modal을 구현해 보겠습니다. # 1. ModalModal을 들어본 적이 없더라도, 아래 이미지를 보면 뭔지 바로 알 수 있습니다.Modal이 특별해 보이지만 그저 뒤에있는 화면을 overly라고 해서 음영처리를 하고 내부의 Contents를 보여주는것 뿐 입니다. Modal을 modal-overlay와 modal-content로 나누면 이해가 편합니다. # 2. Modal on Gallery이제 Modal을 Gallery에 적용해 봅시다. 먼저 modal을 사용하기 위해서 modal.jsx를 통해서 modal..

안녕하세요. Teus입니다. 지난번까지 해서 드디어 캘린더를 추가해서 모바일 청첩장이 컴퓨터 한 화면에 안들어올 정도가 되었습니다. 이번에는 모바일 청첩장에서 중요한 사진을 보여줄 수 있는 이미지갤러리를 추가하겠습니다.# 1. 이미지갤러리이미지갤러리는 기본적으로는 6장만 보여주고 사용자가 원한다면 펼치기를 통해서 추가적인 사진을 확인할 수 있게 해줍니다.대표사진 삭제사진 설명을 입력하세요.이제 위 설계도에 맞게 코드를 작성합니다. Gallery.jsximport { useEffect, useState } from "react";//src/assets/images에 있는 모든 이미지를 한번에 불러오기 위한 방법입니다.const imagePaths = import.meta.glob('./assets/imag..