Dive IT 🐋🌊🏊🤿

카카오톡으로 공유를 했을 때 단순한 웹 링크 공유가 아닌.. 아래와 같이 전문 청첩장 업체처럼 예쁜 썸네일 형태로 공유되기를 바랬다.처음에는 meta 태그 설정을 해줘야됐나 싶어서 찾아봤지만 아무리 해도 저런 형식으로는 되지 않았었다. 내가 설정한 메타 태그는 아래와 같다. 이 설정을 통해 링크를 복붙하는 경우, 아래와 같이 미리보기가 출력되었다. 1. 메타 태그란?메타 태그는 웹페이지 자체에 대한 정보를 담고 있는 HTML 태그 내부의 정보로, 핵심 정보를 요약해주는 미리보기와 같은 것이다. 이를 검색 엔진이나 SNS에 전달하는 역할을 한다.내가 사용한 OG, Twitter meta는 SNS 공유용이다. 이 태그들을 올바르게 설정해두면 사용자가 링크를 복사해 카카오톡, 페이스북, 트위터 등에 붙여넣..

Naver Maps API를 사용해서 웹뷰에 삽입하고 커스터마이징 하는 방법을 기록해보겠다! 1. Application 등록 및 API Key 발급받기https://console.ncloud.com/dashboard 에 접속해서 로그인 후 Maps로 이동한다.경로: [Services] → [Application Services] → [Maps] 여기서 [Application 등록] 버튼을 클릭하고 Appication 등록을 해주면 되는데, 옵션이 너무많다..https://api.ncloud-docs.com/docs/ko/application-maps-overview그렇지만 공식문서에 너무나도 자세히 잘 설명되어있음 ㅎ 나는 지도 확대/축소 및 드래그가 가능한 Dynamic Map과 좌표값을 바탕으로 주..

회사 일이 너무 바빠서 이제야 올리는 2일차 ... 담주까지 만들어야되는데 큰일남지금까지 진행사항은.. 시간날때마다 전체적인 UI를 퍼블리싱하고, 각 요소를 컴포넌트 단위로 분리해서 개발하는걸 가장 신경썼다.그리고 2일차 기능으로는 디데이를 카운팅해주는 기능을 구현했다. 필요 기능노래 넣기달력디데이사진약도지도 연동방명록참석의사체크 기능 (new!) 디데이 기능 구현WeddingDate는 결혼 날짜를 고정해두고, 현재 시각과의 차이를 계산해 UI에 실시간으로 남은 날짜/시간을 보여주는 방식으로 렌더링했다. 처음에는 그냥 Date 객체를 통해 날짜를 직접 할당했지만 VSC에서 아래와 같은 경고가 떴다.찾아보니 매 렌더링마다 WeddingDate가 새로운 객체로 생성되기 때문에 useEffect 내의 시간차를..

다가오는 친구 결혼식에 모청을 만들어주기로 했다~! 이왕 만드는거 내가 해보고 싶었던거 맘껏 써보려고 기록해둔다. 개발 환경 방명록 기능때문에 백엔드는 어떻게 할지 고민...일단 프론트엔드는 Vite + React + TS + Tailwind CSS로 구현할 예정이다.사실 거의 정적 + 단일 페이지여서 바닐라 JS로 할까 하다가.. 그래도 평소에 TypeScript를 잘 안다뤄봐서 써보면서 익숙해지고 싶다고 생각했기 때문에 사용하기로 결정했다. 필요 기능노래 넣기달력디데이사진약도지도 연동방명록 환경 설정1. vite로 프로젝트 생성깃허브를 둘러보니 내가 학교다녔을 때는 거의 CRA를 통해 프로젝트 생성을 했었는데 요즘은 vite를 주로 사용하는 걸 볼 수 있었다. Vite는 빠르고 가벼워서 개발자 경험을..

데이터베이스에 비밀번호를 저장할 때, 단순히 평문으로 저장하는 방식보다 보안적으로 안전한 방법들이 존재한다.1. 평문평문은 아무런 가공 없이 사람이 바로 읽을 수 있는 상태의 데이터이다.예를 들어 'password12'라는 문자열이 그대로 DB에 저장되어 있는 경우를 말한다. 이 방식은 누군가 DB를 탈취하기만 해도 사용자의 비밀번호가 바로 유출되기 때문에 보안상 가장 위험하다.사실상 거의 사용하지 않는다. 2. 해싱과 암호화대개는 해싱과 암호화를 통용해서 말하지만 보안적 관점에서는 해시는 암호화가 아니라고 분류한다.두 개념의 가장 큰 차이는 방향성에 있다.해싱(Hashing): 단방향. 입력값으로부터 해시값을 계산할 수는 있지만, 해시값만으로 원래 값을 복구할 수는 없다.암호화(Encryption): ..