전체 글(95)
-
POMOTODO : ubuntu 포트포워딩,도메인연결(AWS)
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? hosting.kr에서 도메인을 구입했고 DNS는 AWS의 ROUTE53을 사용하기로 정했다 1. 우선 고정 ip를 할당받기 위해 AWS의 elastic ip를 사용한다 - AWS EC2 이동 - 네트워크 및 보안 탭에서 탄력적 ip - 탄력적 ip 주소 할당 버튼 눌러서 생성 - 생성한 ip를 인스턴스에 할당 - 생성해놓은 인스턴스 선택 후 연결 2. DNS 변경 ROUTE53에 도메인 주소 연결 - AWS ROUTE53 이동 - 호스팅 영역 - 호스팅 영역 생성 - 도메인 이름 작성 후 생성 ROUTE53의 정보를 도메인 관리 사이트(나의 도메인 관리 사이트 : hostin..
2022.01.09 -
POMOTODO : issue (db조회 및 출력시 병목현상)
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? 1. 문제 인식 서버는 ajax요청을 받으면 db에서 데이터를 찾아와서 출력하는데, 짧은 시간 내에 5개 이상 쌓이면 뻗어버리는 이슈 발생 2. 문제 원인 분석 서버에서 처리도 하기 전에 너무 빠르고 잦은 요청 때문이라고 판단했음 3. 문제 해결 서버에서 ajax요청을 받으면 처리한 후 클라이언트로 응답 값을 보내줘야 되는데 응답값을 보내지 않아서 발생한 문제였음 // 예시 : 리스트 입력 ajax요청 // 가장 아래에 있는 res.status(200).send();를 통해 응답값을 전송하도록 하고 // 자바스크립트에서는 응답값을 토대로 출력 해줌 app.post('/inser..
2022.01.09 -
POMOTODO : 이슈 (setInterval inactive issue)
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? 1. 문제 인식 실제로 공부할 때 POMOTODO를 이용했는데 타이머를 25분 설정했지만 25분이 넘어가도 완료되지 않고 절반 정도만 진행되어 있는 문제 발생 2. 문제 원인 분석 타이머가 진행될 때마다 console.log를 출력하도록 하고 개발자 도구를 열어서 잘 작동하는지 검사 브라우저 외의 프로그램을 활성화하거나 브라우저의 다른 탭을 사용하면 작동이 점점 느려지는 문제를 발견했음 stackoverflow 검색 결과 브라우저가 비활성화 상태면 setTimeout이나 setInterval의 성능을 제한을 하기 때문에 Background Thread에서 스크립트를 실행하기 위..
2022.01.08 -
POMOTODO : 이슈해결(jquery touch punch 무반응)
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? 1. 문제 인식 jquery sortable이 컴퓨터에선 잘 작동하는데 모바일에서 작동이 안 됨 2. 문제 원인 분석 모바일에서 jquery-ui를 터치로도 사용 가능하게 도와주는 touch punch라이브러리를 cdn으로 첨부했지만 작동이 안 됐음 처음에는 touch punch 홈페이지를 가보니 서버가 막혔길래 지원 종료인가 보다 했는데 다른 분들 블로그를 모바일 환경에서 실행해보니 잘 작동해서 다시 원인 분석해본 결과, 두 번째 원인으로 jquery 및 jquery ui 버전 문제라고 생각했음 3. 문제 해결 다음과 같이 변경했고 모바일에서도 잘 작동되는 걸 확인했다
2022.01.08 -
POMOTODO : 이슈 (jQuery sortable 범위인식문제)
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? 1. 문제인식 리스트에 있는 드래그기능을 사용하는데 범위가 이상하다 * 설명을 위해 코드를 손봐서 리스트 크기가 조금 다르다 2. 원인 분명 컴퓨터에서는 잘 작동하는데 모바일에서 이슈가 발생했다 모바일과 컴퓨터에서 달라지는 코드를 먼저 꼼꼼히 찾아봤고, 반응형디자인을 적용할 때 모바일환경에서 요소들의 크기를 좀 키우고자 사용한 zoom 속성이 문제인 것 같았다 3. 해결 모든 zoom 속성을 제거했고 모바일 환경에서 요소의 크기를 개별적으로 키우도록 코드를 작성했다
2022.01.08 -
POMOTODO : jQuery (ajax, sortable)
POMOTODO를 만들면서 작성한 코드를 복습하기 위해 작성하는 글입니다. POMOTODO.kr What is POMOTODO? POMOTODO에서 사용한 jQuery - ajax - sortable - ajax (asynchronous javascript and xml) AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술이다. 꼭 xml뿐 아니라 json도 사용할 수 있다 이 기술을 통해 서버 뿐 아니라 사용자도 시간,돈,자원을 절약할 수 있고, 싱글 웹페이지를 구성할 수 있다 1. ejs파일에 jquery를 첨부한다(cdn형식) 2. 자바스크립트에 작성할 요청코드 //기본형태 //$.ajax({ // method : '서버로 전송하는 데이터의 ..
2022.01.06