[TIL] 0817 개발일지

예짱·2020년 8월 18일

[풀스텍/웹개발] Lego, Hangang

목록 보기

6/11

6주차 스파르타코딩 수업

✅ AWS 서버 구매하기

AWS 클라우드 서비스에서 EC2 서버를 구매했다. 구매하는 과정에서 key pair를 다운받았는데 그 이후 설정이나 서버 관련해서 중요한 파일이니 잘 저장해 둘 것.
리눅스의 ubuntu를 사용한다. (터미널 이용) 다음과 같이 이렇게 터미널을 통해서 내 EC2 서버에 접속할 수 있다.

ssh -i /path/{내 키페어 주소} ubuntu@13.125.102.200

🌐 아래는 자주 사용하게 될 리눅스의 명령어들이다! 🌐

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 강제로 지우기. 이 명령어로 지우면 복구가 안되니 조심하세요!

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

Filezilla를 이용해서 서버에 내 파일을 업로드 하는 방법도 배웠다.
리눅스 패키지 설치
flask 서버 실행

✅ 개인 프로젝트 피드백

1) 현 위치를 불러올 때 undefined가 뜨는 문제

구조를 잘못 파악함!
mongodb에는 내가 처리해서 저장한 만큼의 여러 object들이 저장되어 있다. 그 중에서 어느 값을 가지고 와서 비교해야 하는지를 알지 못하기 때문에 오류가 남.
굳이 db에 저장할 필요가 없다!

onclick="find_loc()"

function find_loc(){
        findMapTest()
    }

원하는 한강공원을 선택하고 길 찾기 버튼을 클릭했을 때 findMapTest라는 함수가 실행되도록 한다.
함수 안에 (원래 밖에 있던 ajax를 넣어주어) app.py에서 origin={sx, sy}로 저장한 값들을 가져와 바로 사용해준다.

$.ajax({
                    type: 'POST',
                    url: '/get_location',
                    data: {
                        user_latitude: user_latitude, user_longitude: user_longitude
                    },
                    success: function (response) {
                        sx=response['result']['SX']
                        sy=response['result']['SY']
                    }
       })

ex) 여의도 한강공원 선택 -> 길찾기 버튼 click -> 내 위치 조회 + 여의도 위치의 경도/ 위도 가져오기 -> 계산
"GET /favicon.ico HTTP/1.1" 404 이 에러는 코드가 잘못 되어서가 아니라 주소 옆에 나타나는 아이콘이 설정되지 않아서 그런 것이니 지금은 지나가도 괜찮음!

2) 공원을 선택했는데 해당 공원의 값이 나오지 않음

사용자의 경도/위도를 제대로 불러오기까지는 성공을 했는데, 오히려 쉽다고 생각했던 목적지의 값 불러오기가 제대로 되지 않았다.
loc = $("#inputGroupSelect").val()
첫 번째 문제는 내가 destination = $("#userListSB option:selected").val(); 이라고 썼던 코드가 함수 밖에 있었기 때문에 함수는 알아차릴 수 없었다는 점이었다. 두 번째는 #userListSB가 어디에도 없었다는 것.. 그 말인즉슨 내가 구글링을 하면서 찾아 그냥 붙여넣었기 때문에 그냥 저 userListSB가 하나의 문법같은... 것이라 생각했다.

<select class="custom-select" id="inputGroupSelect" aria-label="Example select with button addon">
        <option selected>가고자 하는 한강공원을 선택하세요</option>
        <option value="1">여의도한강공원</option>
        <option value="2">난지한강공원</option>
        <option value="3">뚝섬한강공원</option>
    </select>

여기에서의 id값을 사용해야 했던 것!
또한 option별로 value를 설정해놨기 때문에 if (loc == 1) 이런 식으로 작성하게 되면 loc이 '여의도한강공원'이라면 - 이라는 의미가 된다.
searchPubTransPathAJAX(sx, sy, ex, ey) 여기 안에 변수를 저렇게 넣어 주어야 실행하는 함수에서 저 값을 알고 사용할 수 있다.
따라서 튜터님의 도움을 받으며 완성한 함수는 다음과 같다.

<script>

    function find_loc(){
        findMapTest()
    }

	var mapOptions = {
		center: new naver.maps.LatLng(37.3595704, 127.105399),
		zoom: 10
	};

	var map = new naver.maps.Map('map', mapOptions);

    let sx = 0;
    let sy = 0;
    let ex = 0;
	let ey = 0;


    function findMapTest() {
        if (navigator.geolocation) { // GPS를 지원하면
            navigator.geolocation.getCurrentPosition(function (position) {
                user_latitude = position.coords.latitude;
                user_longitude = position.coords.longitude;

                $.ajax({
                    type: 'POST',
                    url: '/get_location',
                    data: {
                        user_latitude: user_latitude, user_longitude: user_longitude
                    },
                    success: function (response) {
                        sx=response['result']['SX']
                        sy=response['result']['SY']
                        loc = $("#inputGroupSelect").val()
                        if (loc == 1) {
                            ey = 37.528538;
                            ex = 126.934312;
                        }
                        searchPubTransPathAJAX(sx, sy, ex, ey);

                    }

                })
            }, function (error) {
                console.error(error);
            }, {
                enableHighAccuracy: false,
                maximumAge: 0,
                timeout: Infinity
            });
        }
    }
    
 </script>