그냥 빈나

터치 구현을 하면서 굉장히 애를 먹었다.마우스로 드래그 드롭은 이미 소스도 많아 정보를 찾기 수월하였고또 순수 js로 구현을 하려다 보니 내가 직접 터치로 드래그 드롭을 구현해야해서 막히는 부분이 많았다https://ui.toast.com/posts/ko_20220106 터치와 클릭, 우리 깐부잖아.터치와 클릭을 사용하지 않는 하루를 상상해보자. 과연 어떨까? 필자는 두 동작 없는 하루를 이제는 상상할 수 없다. 사용자일 때는 무의식적으로 사용해서 이 두 동작의 관계에 대해 깊게 생각ui.toast.com정말 많은 도움을 얻었다. 그래도 이미 마우스로 만들어 놓은 소스가 있기 때문에 터치는 그것을 본따서 이벤트 리스너만 추가하였기 때문에 크게 오래 걸리진 않았다.

정책오랜만에 배포를 다시 하니 정책 설정을 까먹어 개판으로 해, 로그 확인도 못하는 환경이 되어버렸다. 서비스정책 - service roleec2 정책 - ec2 role로 하면 되는 문제를 서로 뒤바꾸고 새로 만들기에 바빴다. service role : ec2 role :  데이터베이스 연결https://velog.io/@bcl0206/Elastic-Beanstalk-%EC%95%B1%EC%97%90-DB%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0-MySql-Workbench-%EC%97%B0%EB%8F%99 Elastic Beanstalk 앱에 DB연결하기 (MySql Workbench 연동)1. 데이터베이스 정보 확인 데이터베이스라는 것은 사실 앞서 앱과 환경을 만드는 과정에서..

보호되어 있는 글입니다.

일반적으로 배포를 하면 http프로토콜로 웹사이트는 작동한다. 그러면 치명적인 보안문제에 직면하게 된다. 대학 수업 중에 wireshark로 http프로토콜을 분석하는 수업을 가졌다. 대부분의 웹사이트들은 https를 사용하여 암호화 되어 분석하기 불가능했다. 그러나 http와 같은 경우는 암호화 되지 않아 안의 패킷 내용들이 다 보였다. 그걸 경험 한 이우, http로 이루어진 내 사이트를 보니 괜히 불안했다. 아직 로그인이나 결제를 하지 않지만 미래의 기능들을 위해 https로 연결을 시도 했다. 우선 새롭게 안 사실은 https를 위해서는 인증서가 필요한데 인증을 받기 위해서는 도메인 이름이 필요했다.🥲 그래서 goddady에서 도메인을 2년에 3만원에 주고 샀다. (이제 안 사실이지만 그냥 aws..

배포를 완료하고 배포된 웹사이트를 즐겁게 탐방을 했습니다. 저의 웹사이트는 단순히 날짜 순서를 정렬하는 아주 간단한 웹사이트죠 근데 날짜가 개발자도구 f12누르면 다 보이는 치명적인 단점을 발견을 해버립니다. js에 대해 아무것도 모르는 저는 당연히 display none하면 완벽히 가려질 줄 알았습니다 그러나.. 그저 명확하게 보이는 날짜는 정렬할 의지를 뚝 떨어뜨렸습니다. 따라서 이걸 해결하기 위해서는 백엔드 쪽에서 data를 한번에 보내지 않고 가지고 있다가 필요한 순간에 던져야 하는 것을 알았습니다. 기존에는 이런 data를 부분부분 보내기가 귀찮아서 한꺼번에 보낸뒤에 display none이라는 안일한 방식을 했지만 치명적인 문제가 있는 한 다시 부분부분 보내기 위해 fastapi에 새로운 함수..

웹을 만들고 나서 배포하는 법을 유튜브에 검색을 하였다. 코딩 애플 선생님의 elasticbeanstalk영상을 보게 되었다. https://www.youtube.com/watch?v=cOUhREAWJNw 그래서 정말 쉽게 아마존 웹사이트에서 하라는대로 서버를 띄웠다. 그리고 그 상태로 만든 코드들 zip압축 한 후 업로드 배포를 하니,,,,, 결과는 그냥 에러투성이로 돌아가지 않았다. 왜냐하면 1.아마존 웹에 띄운 서버에는 내 패키지 리스트가 다운되어 있지 않음 내가 만든 프로젝트에는 fastapi를 활용해 만든 웹이기 때문에 당연히 fastapi가 깔려있는 환경에서 작동이 가능하다. 그러나 나는 그냥 무지성으로 코드 옮겨 넣고 실행을 바랐던 것이다. 따라서 해결책으로 현재 패키지 리스트 확인을 위해 ..

우선 오류 수정을 진행하였다. 전에는 더이상 새로운 동영상이 없을 때와 3번 틀렸을 떄 종료 지점이 충돌하여 무한 로딩되는 오류가 있었다 또한 새로고침해도 서버의 데이터가 초기화 되지 않아 동영상 방문 저장에 꼬임이 있었다. 이둘을 해결하기 위해 우선 틀렸을 때를 먼저 종료하도록 설정하여 충돌을 막아주었다. document.getElementById("replay").onclick = function() { modal.style.display = "none"; location.reload(); } return; //그 이후 코드 실행되지 못하게 그리고 초기화 문제로는 웹사이트 초기화면으로 돌아올떄 기준으로 초기화를 해주었다. @app.get("/") async def main(request: Reques..

중복 데이터를 표시하지 않기 위해 배열에 데이터 출력 유무를 만들었다. 또한 갯수 또한 몇개 사용하였는지 확인하기 위한 변수도 만들어 관리하였다. visit = [] #방문 유무 저장하기 위한 배열 index = 0 #사용한 동영상 갯수 저장용 변수 def get_random_video(selected_date): global videos global videos_after_selected_date,standarddate,visit,index if videos is None: try: result = s3.get_object(Bucket='imgstgforguesstheyear', Key=key) videos = json.load(result["Body"]) except Exception as e: ra..

자바스크립트에서 날짜 입력값을 받으면 뒤 서버에 선택한 날짜를 매개변수로 넘겨줍니다. let year = document.getElementById('year').value.padStart(4, '0'); let month = document.getElementById('month').value.padStart(2, '0'); let day = document.getElementById('day').value.padStart(2, '0'); let selectedDate = `${year}-${month}-${day}`; fetch(`/img?date=${selectedDate}`) 넘겨받은 백엔드에서는 받은 날짜를 날짜형식으로 재가공을 한 뒤 랜덤 비디오 함수에 매개변수로 기준날짜를 넘겨주었다. @ap..

이미지 함수 알고리즘이 비효율적이어서 손을 좀 봤다. 기존에 사잔 한장을 가져오기 위해 json 8000개의 데이터를 매번 새로 다운 받았다. key = "videos.json" videos = None #외부로 빼줘서 저장공간 만들기 def get_random_video(): global videos if videos is None: #저장공간에 데이터가 없을 때에만 다운 받기, 때문에 처음 한번만 다운 받으면 됨 try: result = s3.get_object(Bucket='imgstgforguesstheyear', Key=key) videos = json.load(result["Body"]) except Exception as e: raise Exception("An error occurred w..