팀 프로젝트 02 : 인스타 클론 코딩 - 4일차

팀 프로젝트 - 인스타그램 클론 코딩 4일차

 

 

- 4일차 진행 결과

 

 

 

- 수행 작업

 

1. 기존 작업해놓았던 마이페이지 모달 창 기능이 github를 통해 팀원분들의 코드와 병합하고 실행하니 모달창이 열리지 않는 에러가 발생했다. 여러 방식들을 시도해봤는데 결론은 변수 선언 방식이 문제였던 것 같다. javascript 파일에 모달 창을 띄우기 위해서 let 으로 변수 선언을 했었는데 구글링하여 찾아본 결과 let은 재할당이 가능하지만 중복 선언이 안된다는 것이었다. 그래서 변수 선언 방식에 대해 찾아보고 정리했다.

 

 

변수 선언 방식 : let, var, const 

let : 중복 선언시에는 에러, 재할당은 가능 / 블럭레벨 스코프

const : 중복 선언과 재할당 모두 에러 / 반드시 초기값을 할당 해야한다. / 블럭레벨 스코프

var : 중복 선언,재할당 모두 가능 / 변수 선언전에 변수를 사용해도 에러나지 않음 / 함수레벨 스코프

 

 

더해서 기본적으로 변수의 스코프는 최대한 좁게 만드는 것을 권장한다고한다. 또한 var의 경우 버그발생과 메모리 누수의 위험있다고 하니 사용할 때는 var 키워드 보다는 let과 const 키워드를 사용하며, 변경하지 않는 값(상수)이라면 let 보다는 const 키워드를 사용하는 것이 안전하다고 한다.

 

 

 

2. 마이페이지에서 현재 로그인유저의 정보 업로드하기 테스트

 

 2-1 Notion 을 이용하여 API 로직 작성

처음 작성해보는거라 많이 허접하지만 여러번 작성해보며 늘려야겠다..

 

 

2-2 마이페이지 .css 파일 작성

<script>
    $(document).ready(function () {     //마이페이지 로딩하면 show_mypage 함수 실행
        show_mypage()
    });
    function show_mypage() {
        $.ajax({
            type: "GET",        // GET 타입
            url: "/mypage",     // 창구 주소
            data: {},           // 서버에 줄 데이터 없음. 
            success: function (response) {      // 요청에 의해 서버에서 내려오는 response
                alert('mypage get')
                console.log(response)   //테스트 
                // let rows = response['user_info']
                // for ( let i = 0; i < rows.length; i++) {
                //     console.log(rows[i])
                // }
            }
        });
    }
</script>

 

2-3 마이페이지 app.py

# 마이페이지 유저정보 로딩 테스트
@app.route('/mypage', methods=['GET'])
def show_mypage():

    # 로그인에서 받은 mytoken 값 요청해서 저장
    token_receive = request.args.get('mytoken')

    # try 아래를 실행했다가, 에러가 있으면 except 실행.
    try:
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        user_info = db.user.find_one({'id': payload['id']}, {'_id': False})
        return jsonify({'user_info': user_info})
    except jwt.ExpiredSignatureError:
        # return redirect(url_for("login", msg="로그인 시간이 만료되었습니다."))
        return render_template('login.html')

mytoken 값을 요청할때 request.cookie.get('mytoken') 으로 가져오는 거였지만 로그인기능이 아직 구현이 안돼어 cookie에 저장값이 없으므로 args (argument, 인자값을 받겠다의미) 를 썼다. 로그인유저의 토큰정보가 payload에 저장되고 최종적으로 user_info에 담겨 브라우저로 return 해준다.

 

 

 

2-4 postman 실행하여 테스트 

 

Postman은 개발한 API를 테스트하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼이다. 좌측 My workspace에서 collection을 만들고 request 를 추가해서 사용하면 된다. 

상단 회색줄에 사용한 요청method를 고르고 주소를 입력하는데 http://localhost:5000(사용한포트)/사용한url주소 를 써주면 된다. 

POST 메서드의 경우, 데이터를 주고받을 때 정보가 http body에 들어가기 때문에 form에서 데이터를 전송한다. 따라서 바로밑 body 에 form-data를 선택하고 받는 변수(key)와 값을 넣고 Send 하면 결과가 나온다.

 

 

 

*참조 

api

https://enjoyinjoanne.tistory.com/56

api설계

https://ing-yeo.net/2020/02/study-nodejs-create-simple-restful-api-server/