ㄱ 부터 ㅎ 까지

HTML 삽입 미리보기할 수 없는 소스 위와 같이 마우스 클릭 또는 터치로 돌렸을때 돌아가는 인터랙션을 만들었습니다. 네이버 모바일 앱 브라우저의 그린닷이 위와 같은데 위와 같은 인터랙션을 구현해야할 일이 있어서 만들게 되었습니다. 방법 생각하기 1. 원형 중심의 좌표 구하기 2. 원형 중심을 기준으로 처음 클릭 지점과 포인트(마우스 움직임, 터치 움직임)의 사이 각도를 계산하기 3. 구한 각도를 바탕으로 원을 돌리고 마우스를 땔때 현재 돌아가 있는 각도 저장 4. 다시 돌릴때 이전에 저장되어 있는 각도를 더한 각도로 돌리기 5. 반대 방향으로 탭 네비게이션들의 각도를 돌리기 drag를 구현하려면? 우선 드래그와 함께 돌아가는 물체를 구현하기 이전에 드래그를 구현하는 방법에 대해서 생각해봅니다. 무언가를..

이번에 업무를 보면서 퍼블리셔분을 도와줄 일이 있었습니다. 문제는 input으로 연 파일 창(file dialog)을 열면 배경이 dimmed 처리 되고 아래 사진과 같이 파일을 선택할 때 말고 취소 버튼을 눌렀을때를 감지해 dimmed처리를 해제해야하는 상황이였습니다. 리액트로 프로젝트를 진행하고 있어서 취소 이벤트를 감지해 상태변화로 dimmed처리를 관리하면 될것 같아 쉬워 보였고, 열기를 통해 파일을 넣었을 때엔 파일 상태를 관리하는 state의 변화를 감지하거나 input의 onChange를 통해서 처리하면 되겠다고 판단했습니다. 파일 열기는 쉬웠지만 취소상태를 감지하기에는 어려움이 있었습니다. 인터넷에 검색을 통해 알게된 것은 window의 포커스를 감지해 취소인지를 판별하는 방법이 보편적이라..

웹 개발을 하면서 주로 로컬 환경에서 테스트를 하게 됩니다. 로컬 환경에서 개발을 할 때 다른 외부 접근을 하도록 하는 일이 필요할 때가 있습니다. 그럴 때 외부에서 접근을 편하게 해주는 도구가 있습니다. Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels. 해석 : Ngrok은 NAT 및 방화벽 뒤에 있는 로컬 서버를 보안 터널을 통해 공용 인터넷에 노출합니다. Ngrok의 공식 문서에는 위와 같이 설명이 작성되어 있습니다. 즉 네트워크 환경 설정을 따로 해줄 필요 없이 로컬에서 실행되고 있는 서버를 외부에서 접근가능하도록 해줍니다. Ngrok 공식 ..