1. 대학 정렬 버튼

✅ HTML file

대학을 선택하면 대학별로 정렬된 랭킹이 보일 수 있도록 onclick = "location.href = '{{url_for('ranking', page=i, college='')}}'" 코드를 포함하고 있는 대학 선택 button을 만들어준다.

<!--btn-->
        <br>
        <div class="padding">
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='all')}}'">전체</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='인문과학대학')}}'">인문과학대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='사회과학대학')}}'">사회과학대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='자연과학대학')}}'">자연과학대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='엘텍공과대학')}}'">엘텍공과대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='음악대학')}}'">음악대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='조형예술대학')}}'">조형예술대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='사범대학')}}'">사범대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='경영대학')}}'">경영대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='신산업융합대학')}}'">신산업융합대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='의과대학')}}'">의과대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='간호대학')}}'">간호대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='약학대학')}}'">약학대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='스크랜튼대학')}}'">스크랜튼대학</button>
            <button class="btn10" onclick="location.href='{{url_for('ranking', page=i, college='호크마교양대학')}}'">호크마교양대학</button> 
        </div>
        <br>

✅ CSS

버튼이 hover되고 active 되었을 때 색상이 변경될 수 있도록 css를 추가해준다.

.btn10 {
    width: 110px;
    border: none;
    /*border-color: var(--default-blue);*/
    border-radius: 10px;
    transition: all 0.3s ease; /* 변경 효과를 주기 위한 transition 속성 추가 */
}

.btn10:hover {
    width: 110px;
    color: white;
    background-color: var(--default-blue);
    border:none;
    border-radius: 10px;
}

.btn10-active {
    width: 110px;
    color: white;
    background-color: var(--default-blue);
    border:none;
    border-radius: 10px;
}

✅ js

추가한 css가 js의 이벤트리스너 함수로 적용되었을 때, 페이지가 리로드 되어도 css가 유지될 수 있도록 상태를 local storage에 저장해주는 함수를 추가한다.

<!--버튼 hover, active 속성 변경 js 추가-->
<!--js 유지하기 위해 브라우저 local storage에 저장하는 코드 포함-->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var buttons = document.querySelectorAll('.btn10');

        // 눌러진 버튼 local storage set
        var activeButtonIndex = localStorage.getItem('activeButtonIndex');
        if (activeButtonIndex !== null) {
            buttons[activeButtonIndex].classList.add('btn10-active');
        }

        // click
        buttons.forEach(function (button, index) {
            button.addEventListener('click', function () {
                buttons.forEach(function (btn) {
                    btn.classList.remove('btn10-active');
                });
                button.classList.add('btn10-active');

                // 눌러진 버튼의 인덱스 local storage에 저장
                localStorage.setItem('activeButtonIndex', index);
            });


            // hover
            button.addEventListener('mouseover', function () {
                button.classList.add('btn10-hover');
            });

            button.addEventListener('mouseout', function () {
                button.classList.remove('btn10-hover');
            });
        });
    });
</script>

2. 바차트 만들기

✅ HTML file

디비와 연동할 수 있는 변수를 테이블에 채워 넣어 한 블록의 랭킹을 만들고 데이터에 유저가 존재하는 동안 반복할 수 있도록 한다.

<div class="ranking-inner">
            <p class="warning-msg">*총 거래 포인트(판매포인트+구매포인트)를 기준으로 한 순위입니다.</p>
            {% if session['id'] %}           
            <p>{{session['id']}}님의 랭킹포인트는 {{ user_rankingpoint }}p입니다.</p>  
            {% else%}
            <p>랭킹포인트 확인을 위해 로그인을 해주세요.</p>
            {% endif %}

            <table style="width:100%; margin: 0 auto;">
                {% for rank, user_data in datas %}
                    <tr>
                        <td> {{ loop.index }} </td>
                        <td><img src="/static/img/profile.jpg"></td>
                        <td> {{ user_data['nickname'] }} </td>
                        <td>
                            <div class="bar-container">
                                <div class="bar" id="bar{{ rank }}"></div>
                            </div>
                        </td>
                        <td>{{ user_data['rankingpoint'] }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>

✅ CSS

페이지가 로드되면 바가 차오를 수 있도록 transition: width 1s; 코드를 포함하는 style.css를 추가해준다.

.bar-container {
    width: 300px;
    height: 40px;
    background-color: #f0f0f0;
    position: relative;
    margin-bottom: 10px;
}

.bar {
    height: 100%;
    background-color: var(--default-blue);
    width: 0;
    position: absolute;
    transition: width 1s;
}

✅ js

마지막으로 버튼으로 선택된 대학에 따라 bar를 채워주는 script를 추가한다.

<script>
    $(document).ready(function () {
    // alert("{{college}}");
    $('#college option:contains("{{college}}")').prop("selected", true);
    });
    </script>

<!-- 선택된 college에 따라 상위 10위 랭킹 동적으로 구현하기 -->
{% for rank, user_data in datas %}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        setBarWidth('bar{{ rank }}', {{ user_data['rankingpoint'] }});
    });

    function setBarWidth(barId, value) {
        const bar = document.getElementById(barId);
        {% if max is defined %}
            const width = (value / {{ max }}) * 100;
            bar.style.width = width + '%';
        {% endif %}
    }
</script>
{% endfor %}

💡 TIP

• js를 많이 포함하고 있는 코드들임이 html과 css를 구현하면서 예상되므로 이 부분들을 고려하며 화면설계를 하는 것이 좋다. js 함수들과 화면 구성 요소들간의 다이어그램을 생각하면서 구현하면 동적으로 값을 할당하는 부분을 만들기 수월할 것이다.

[해설 2]에 이어지는 글입니다. ✨해설 2 보러가기

💡 9 ~ 12 [해설3] : 백_윤소민 회원가입, 아이디 중복확인, 닉네임 중복확인, 로그인 및 로그아웃, 상품 구매시 포인트, 랭킹포인트 증감 기능, 사용자 포인트별 랭킹 정렬 기능

9. 회원가입 – Session을 이용한 새로고침 시 값 소실 방지

[app.py]

• Tip : 닉네임, 비밀번호확인시 session 사용하면 새로고침을 하여도 값이 날아가지 않는다.
• 세션(Session): 쿠키와 같은 고객의 데이터 값, 클라이언트의 브라우저에 저장해놓는다.

@application.route("/signup_post",methods=['POST'])
def register_user():
    data=request.form
      id=request.form['id']
      pw=request.form['pw']
      pw2=request.form['PWconfirm']
      nname=request.form['nickname']
      pw_hash=hashlib.sha256(pw.encode('utf-8')).hexdigest()
      pw_hash2=hashlib.sha3_256(pw.encode('utf-8')).hexdigest()
      session['id_'] = id
      session['pw']=pw
      session['pw2']=pw2
    session['nickname']=nname
    session['email']=request.form['email']
    session['HP']=request.form['HP']
    session['college']=request.form['dropdown1']
    session['major']=request.form['dropdown2']

• 이처럼 우선 form에 입력한 클라이언트의 정보를 변수에 저장한다.
• session[‘’]안에 session이름으로 사용할 변수를 적고 session에 넣고 싶은 값을 이전에 저장한 변수를 이용해 대입한다.

return render_template("8~10/signup.html",
    id=session.get('id_', ''),pw=session.get('pw',''),nickname=session.get('nickname',''),hp=session.get('HP',''),pw2=session.get('pw2',''),
    email=session.get('email',''),college=session.get('college',''),major=session.get('major',''))

• 이후에 화면을 넘길 때 값이 유지되도록 render_template()안에 session 값들을 모두 넣는다.

10. 회원가입 – 중복확인 및 비밀번호 확인 기능

[app.py]

#아이디중복확인
    if 'check_duplicate_id' in request.form:
        if DB.id_duplicate_check(id):
            flash('사용할 수 있는 아이디입니다.')
            return render_template("8~10/signup.html",
            id=session.get('id_', ''),pw=session.get('pw',''),nickname=session.get('nickname',''),hp=session.get('HP',''),pw2=session.get('pw2',''),
            email=session.get('email',''),college=session.get('college',''),major=session.get('major',''))
        else:
            flash('이미 존재하는 아이디입니다.')
            return render_template("8~10/signup.html",
            id=session.get('id_', ''),pw=session.get('pw',''),nickname=session.get('nickname',''),hp=session.get('HP',''),pw2=session.get('pw2',''),
            email=session.get('email',''),college=session.get('college',''),major=session.get('major',''))

• Tip : flash값을 사용해서 백에서 전달하는 메시지를 프론트에 넘긴다.
• py에서 검증을 거친 후 나온 결과를 flash(‘’)안에 메시지 값을 넣어주고 프론트에서 이를 화면에 표시한다. 예시로는

[signup.html]

{% extends "index.html" %}
    {% block section %}
    {% with mesg = get_flashed_messages() %}
    {% if mesg !=[]%}
    <script>alert("{{ mesg[0] }}")</script>
    {% endif %}
    {% endwith %}

• Html에 이렇게 flash값이 있을 때 mesg안에 값을 넣고 alert를 통해 알림창에 메시지가 뜨는 방식으로 구현할 수 있다.

[database.py]

# 회원가입 시 아이디 중복확인
    def id_duplicate_check(self, id_string):
        users = self.db.child("user").get()

        print("users###",users.val())
        if str(users.val()) == "None": # first registration
            return True
        else:
            for res in users.each():
                value = res.val()
                if value['id'] == id_string:
                    return False
            return True

• 중복을 검증하는 방법은 db에서 아이디에 해당하는 정보들을 모두 찾은 후, 이것이 사용자가 입력한 아이디와 같을 시 false값을 리턴하고 존재하지 않을 경우 true값을 넘겨준다. 넘겨받은 이 값을 py에서 flash값으로 프론트에 메시지를 넘겨준다.

11. 유저 포인트 증감 구현

[app.py]

#구매하기 버튼 누르면
@application.route("/1~4/order_item/<item_name>/")
def view_order_confirmation(item_name):

    point=DB.get_price(str(item_name))
    seller=DB.get_seller(str(item_name))

                        … 추가 코드 …

        DB.update_point(session['id'], point) #구매자 포인트 감소
        DB.update_ranking_point(session['id'], point) #구매자 랭킹 포인트 증가
        DB.update_point_2(seller,point) #판매자 포인트 증가
        DB.update_ranking_point(seller,point) #판매자 랭킹 포인트 증가

        flash('포인트가 차감되었습니다')

        data=DB.get_item_byname(str(item_name))
        session['user_point'] = DB.get_user_point(session['id'])

    return render_template("1~4/order_item.html", data=data, item_name=item_name, seller_email=seller_email, download_count=download_count)

• 구매하기 버튼을 눌렀을 때 db에서 구매자와 판매자의 포인트가 변하도록 구현한다.

[database.py]

#구매하기
    #가격 가져오기
    def get_price(self, item_name):

        data = self.db.child("item").child(item_name).get().val()
        point=int(self.db.child("item").child(item_name).get().val()['price'])
        return point
    #판매자 가져오기
    def get_seller(self, name):
        seller=self.db.child("item").child(name).get().val()['writer']

• 우선 아이템의 가격과 판매자를 가져온다.

#구매자 포인트 감소
    def update_point(self, user_id, point):
        user_data = self.db.child("user").child(user_id).get().val()
        if user_data is not None and 'point' in user_data:
            b_point = int(user_data['point'])
            a_point = b_point - point
            point_info = {
                "point": a_point
            }
            self.db.child("user").child(user_id).update(point_info)
        return True

    #판매자 포인트 증가
    def update_point_2(self, user_id, point):
        user_data = self.db.child("user").child(user_id).get().val()
        if user_data is not None and 'point' in user_data:
            b_point = int(user_data['point'])
            a_point = b_point + point
            point_info = {
                "point": a_point
            }
            self.db.child("user").child(user_id).update(point_info)
        return True

• 이후 구매자는 session에 있는 현재 로그인된 유저의 정보를 이용해 DB에 있는 유저의 포인트를 감소시켜준다. 판매자는 get_seller를 통해 가져온 판매자 정보를 이용해 DB에 있는 판매자의 포인트를 증가시켜준다.

#사용자 포인트 가져오기
    def get_user_point(self, name):
        point=int(self.db.child("user").child(name).get().val()['point'])
        return point

• 이를 이용하여 헤더나 다른 곳에 유저의 포인트를 표시해주고 싶다면, 위 함수를 사용하여 사용자의 포인트를 가져와서 표시해준다.

12. 유저 포인트 랭킹 구현

: 사용자의 랭킹 포인트를 가져와서 랭킹 포인트가 큰 순서대로 정렬한다.

[app.py]

#랭킹
@application.route("/ranking")
def ranking():
    page = request.args.get("page", 0, type=int)
    per_page=int(10) 
    per_row=int (1) 
    college = request.args.get("category", "all")
    row_count=int(per_page/per_row)
    start_idx=per_page*page
    end_idx=per_page*(page+1)

    if college=="all":
        data = DB.get_users() #전체상품조회 그대로
    else:
        data = DB.get_items_bycollege(college)
    data = dict(sorted(data.items(), key=lambda x: x[1]['rankingpoint'], reverse=True))
    item_counts = len(data)
    if item_counts<=per_page:
        data = dict(list(data.items())[:item_counts])
    else:
        data = dict(list(data.items())[start_idx:end_idx])
    tot_count = len(data)
    for i in range(row_count): 
        if (i == row_count-1) and (tot_count%per_row != 0):
            locals()['data_{}'.format(i)] = dict(list(data.items())[i*per_row:])
        else: 
            locals()['data_{}'.format(i)] = dict(list(data.items())[i*per_row:(i+1)*per_row])

    if 'id' in session:
        user_id = session['id']  
        user_ranking_point=DB.get_user_ranking_point(user_id)
    else: 
        user_ranking_point=0

• 한페이지에 표시하고 싶은 인원수를 perpage안에 넣어주고 랭킹포인트대로 배열하는 것을 data = dict(sorted(data.items(), key=lambda x: x[1]['rankingpoint'], reverse=True)) 로 구현한다.
• 여기서 x[1]['rankingpoint']는 랭킹 포인트 순서대로 표시한다는 것이고 reverse=True를 통해 내림차순으로 만들어준다.

• 위 화면과 같이 화면에 보유 포인트 순으로 정렬됨을 확인할 수 있다.

[해설 1]에 이어지는 글입니다. ✨해설 1 보러가기

💡 7 ~ 8 [해설2] : 백_황혜진 리뷰 작성, 등록한 리뷰 조회, 상품별 리뷰 조회 화면, 리뷰 상세보기 화면, 회원별 마이페이지 구현

7. 사용자의 전체 구매 목록 화면의 페이지네이션 구현

[app.py]

# 5~7
# 리뷰작성 -> 구매내역페이지
@application.route("/5~7/reg_reviews")
def view_reg_review():
    if 'id' not in session or not session['id']:
        flash('리뷰를 작성하려면 로그인을 해주세요.')
        return redirect(url_for('login'))
    else:
        #return render_template("5~7/reg_reviews.html")
        page = request.args.get("page", 0, type=int)
        per_page=6
        per_row=1
        row_count=int(per_page)
        start_idx=per_page*page
        end_idx=per_page*(page+1)

        user_id = session.get('id')
        purchase = DB.get_purchase(user_id)        #구매내역 불러오기
        if purchase == None:                       #구매내역 
            none = "Y"
            return render_template("/5~7/mypage.html",none=none)
        else:
            none = "N"
        item_counts = len(purchase)
        purchase = dict(list(purchase.items())[start_idx:end_idx])
        tot_count = len(purchase)
        for i in range(row_count):
            if (i == row_count-1):
                locals()['data_{}'.format(i)] = dict(list(purchase.items())[i*per_row:])
            else:
                locals()['data_{}'.format(i)] = dict(list(purchase.items())[i*per_row:(i+1)*per_row])
        return render_template("/5~7/mypage.html",none=none, purchase=purchase.items(), row1=locals()['data_0'].items(), row2=locals()['data_1'].items(),
                           row3=locals()['data_2'].items(), row4=locals()['data_3'].items(),row5=locals()['data_4'].items(), row6=locals()['data_5'].items(),
                           limit=per_page, page=page, page_count=int((item_counts/per_page)+1), total=item_counts)

• 현재 로그인하고 있는 아이디의 구매내역을 불러와서 한 페이지에 6개씩 보여주도록 페이지네이션 구현

if 'id' not in session or not session['id']:
        flash('리뷰를 작성하려면 로그인을 해주세요.')
        return redirect(url_for('login'))
    else:

• 로그인이 되어 있지 않을 경우, 로그인 화면으로 연결한다.

user_id = session.get('id')
        purchase = DB.get_purchase(user_id)        #구매내역 불러오기
        if purchase == None:                       #구매내역 
            none = "Y"
            return render_template("/5~7/mypage.html",none=none)

else:
            none = "N"
            item_counts = len(purchase)
            purchase = dict(list(purchase.items())[start_idx:end_idx])
            tot_count = len(purchase)
            for i in range(row_count):
                if (i == row_count-1):
                    locals()['data_{}'.format(i)] = dict(list(purchase.items())[i*per_row:])
                else:
                    locals()['data_{}'.format(i)] = dict(list(purchase.items())[i*per_row:(i+1)*per_row])
            return render_template("/5~7/mypage.html",none=none, purchase=purchase.items(), row1=locals()['data_0'].items(), row2=locals()['data_1'].items(),
                           row3=locals()['data_2'].items(), row4=locals()['data_3'].items(),row5=locals()['data_4'].items(), row6=locals()['data_5'].items(),
                           limit=per_page, page=page, page_count=int((item_counts/per_page)+1), total=item_counts)

• get_purchase() 함수를 사용해서 아이디에 해당하는 구매내역을 불러온다.
• 구매내역 없을 경우 none값만 구매목록화면으로 보낸다.
• Tip : ‘NoneType’ 객체에는 ‘items()’ 메서드가 없음

따라서, 구매내역이 없을 때(purchase = none) purchase.items()에서 오류가 발생하기 때문에 구매내역이 none일때와 아닐 때 두 경우로 나눠서 접근함

• 구매내역이 있을 때, 해당페이지에 표시할 구매내역들만 추출하여 row_i에 담아서 html로 전송

[database.py]

def get_purchase(self, user_id):
        purchase = self.db.child("user_purchase_history").get().val() 

        for id, purchase_items in purchase.items(): #각 내역에 대해 반복
            if id == user_id:                       #key값이 사용자 id와 같으면 그 구매내역 반환
                return purchase_items
        return None

• firebase에 "user_purchase_history"라는 특정 위치에 저장되어 있는 각 사용자의 구매내역 전체를 불러온다.
• 반복문을 사용하여 사용자id에 해당하는 구매내역을 찾아서 반환하고, 찾지 못할 경우 none을 반환한다.

8. 상품 세부 화면에서 리뷰 작성 버튼 클릭 후 해당 상품에 대한 리뷰 작성 화면으로 연결

[app.py]

Tip : 동적라우팅 사용하여 상품이름으로 라우팅

동적라우팅(Dynamic Routing): 라우팅이 사용자의 요청이나 다른 동적인 조건에 따라 동적으로 결정되는 프로세스. URL 경로의 일부가 고정되어 있지 않고 가변적인 경우에 적용.

@application.route("/reg_review_init/<name>/")
def reg_review_init(name):
    if 'id' not in session or not session['id']:
        flash('리뷰를 작성하려면 로그인을 해주세요.')
        return redirect(url_for('login'))
    else:
        info = DB.get_item_byname(name)
        item_name = info.get("item_name",None)
        professor = info.get("professor",None)
        subject = info.get("course_number",None)
        writer = info.get("writer",None)
        reviewer = session['id']
        return render_template("5~7/reg_reviews.html", writer=writer, item_name = item_name, reviewer=reviewer, professor=professor,subject=subject)

• 동적라우팅으로 받은 매개변수을 이용해서 get_item_byname() 함수를 호출하여 그 상품에 대한 정보를 리뷰작성화면으로 넘겨준다.

[database.py]

def get_item_byname(self, name):
        items = self.db.child("item").get()
        target_value=""
        print("#############", name)
        for res in items.each():
            key_value = res.key()
            if key_value == name:
                target_value=res.val()
        return target_value

• firebase에 "item"라는 특정 위치에 저장되어 있는 각 상품내역 전체를 불러온다.
• 반복문을 사용하여 상품이름에 해당하는 상품정보를 찾아서 반환한다.

이는 conda 실행이 안 되어 있는 경우로, 수동으로 실행시켜준 후에 가상환경을 실행시켜야 한다.

✅ 해결 방법 1

• cd 명령어를 사용하여 app.py가 있는 폴더로 들어간다.

• conda activate 해준다.

✅ 해결 방법 2

anaconda가 설치되어 있는 폴더 아래의 Scripts 폴더 아래 activate를 수동으로 실행시켜준다. anaconda 위치/Scripts/activate를 터미널에서 실행하면 된다.

✅ 해결 방법 3

• new terminal을 실행시킨다. 새로운 터미널을 여는 단축키는 Ctrl+Shift+`이다.

• Command Prompt로 들어간다.

• Show all commands: 단축키 Ctrl+Shift+P 또는 F1을 눌러 들어갈 수 있다.

• Python: Select Interpreter를 검색하여 들어간다.

• 인터프리터를 선택한다. (내가 선택 할 인터프리터는 Python 3.10.13 (‘OSWP_F’))

• conda activate 완료

🚩2. 가상환경 실행된 상태인데도 flask run 시 오류가 나는 경우

Error: Could not locate a Flask application.

✅ 해결

현재 작업폴더, 즉 flask run을 실행하고 있는 폴더 (pwd)가 app.py가 속해있는 폴더가 아니어서 발생하는 오류이다. app.py가 속해있는 폴더로 이동하여 flask run 실행하면 해결할 수 있다.

💡 TIP

• anaconda의 위치, working directory 위치 등 폴더들의 저장위치를 꼬이지 않게 잘 저장하는 것이 중요하다.

✅ 해결 시도 1: flash 값을 alert로 출력하는 대신 innerHTML로 출력

1. warning-msg를 추가

• 아이디 중복확인

• 비밀번호 확인

• 닉네임

2. innerHTML js를 추가

3. flask run

• Input값 모두 입력
• 중복확인 버튼을 누르면 warning문구가 이상하게 변경됨, 입력한 input값이 모두 날아간다.

분석

if-else문으로 구현된 flash값의 return값은 하나로 고정되어 있어서 배열을 사용하여 변경이 필요한 워닝문구를 부분적으로 변경시키는 것에서 문제가 발생한 것으로 보인다.

아이디 중복확인 return flash, 비밀번호 확인 return flash, 닉네임 중복확인 return flash 값을 서로 다른 배열에 저장하여 각각의 버튼이 onclick 되었을 때 해당 flash값으로 문구를 바꾸면 해결이 될 것 같지만, 이미 만들어진 register_user() 함수의 주 기능을 수정해야 하는 위험이 있다고 판단했다. 따라서 구현된 함수를 최대한 활용하여 페이지에 출력할 수 있도록 해결하고자 한다.

✅ 해결 시도 2: app.py의 register_user() 함수가 입력받은 input값을 return 하도록 수정

return render_template("8~10/signup.html")

만 있던 기존 코드에

id=session.get('id_',''), pw=session.get('pw',''), nickname=session.get('nickname',''), hp=session.get('HP',''), pw2=session.get('pw2',''), email=session.get('email',''), college=session.get('college',''), major=session.get('major','')

을 return값으로 추가했다.

• alert창 뜨면 값 날라가는 문제를 해결하였으므로 html에 flash값을 alert로 출력하는 코드를 추가했다.

• flask run 아까와 같은 input값을 입력하고 중복확인버튼을 누르면 flash값이 alert창에 정상적으로 출력된다.

• alert창을 닫으면 입력했던 input값들이 return되어 날라가지 않고 뜬다.

✅ 해결 확인: 다양한 경우에서의 적용 확인

-확인한 아이디 중복확인과 동일한 결과가 비밀번호 확인, 닉네임 중복확인에서도 잘 작동한다.

💡 TIP

• 경우에 따라 HTML 페이지에 출력을 하는 방법을 적절히 선택한다. window.alert(), innerHTML 등
• 문제 없이 구현된 부분을 최대한 활용할 것
• 오류가 있는 부분을 확인하기 위해 출력문을 작은 단위로 쪼개서 실행시켜보는 것도 좋은 방법이다.

• 프론트엔드 : HTML, CSS, JavaScript
• 백엔드 : flask
• 데이터베이스 : firebase
• 버전관리 : Git, GitHub

2. 백엔드 담당 파트

💡 1 ~ 6 [해설1] : 백_양지원 상품 등록, 등록한 상품 조회, 전체 상품 리스트 조회, 상품 상세보기 화면, 좋아요 및 다운로드 횟수 카운팅 기능, 구매 완료 화면 연결

💡 7 ~ 8 [해설2] : 백_황혜진 리뷰 작성, 등록한 리뷰 조회, 상품별 리뷰 조회 화면, 리뷰 상세보기 화면, 회원별 마이페이지 구현

💡 9 ~ 12 [해설3] : 백_윤소민 회원가입, 아이디 중복확인, 닉네임 중복확인, 로그인 및 로그아웃, 상품 구매시 포인트, 랭킹포인트 증감 기능, 사용자 포인트별 랭킹 정렬 기능

3. 기능과 코드

1. 상품 등록 화면 접근 시

[app.py]

@application.route("/1~4/item_reg")
def view_reg_items():
    if 'id' not in session or not session['id']:
        flash('상품을 등록하려면 로그인을 해주세요.')
        return redirect(url_for('login'))
    else:
        return render_template("1~4/item_reg.html")

• 비로그인 상태의 경우, ‘상품을 등록하려면 로그인을 해주세요’ flash 창 팝업 후 로그인 화면으로 이동
• 로그인 상태의 경우, 정상적으로 상품 등록 화면으로 연결

2. 상품 등록 화면에서 작성한 값 DB에 저장 & 상품 등록 후 상품 세부 보기 화면으로 연결

[item_reg.html]

<div id="regitem-container"> 
<form id="regitem" action="/submit_item_post" method="post" enctype="multipart/form-data">
     … 입력 내용 …  </form>

• html에서 사용자가 입력한 내용들이 모두 ‘/submit_item_post’라는 링크로 넘어감. 해당 링크로 넘어갔을 때의 동작은 아래 app.py의 함수에서 담당함.

[app.py]

@application.route("/submit_item_post", methods=['POST'])

def reg_item_submit_post():
    if 'id' not in session or not session['id']:
        flash('상품을 등록하려면 로그인을 해주세요.')
        return redirect(url_for('login'))
    else:
        item_file=request.files['item_upload']
        item_file.save("static/items/{}".format(item_file.filename))
        photo_file=request.files.getlist("photo_upload[]")
        data=request.form
        writer = session['id']
        for f in photo_file:
            f.save('static/photos/' + f.filename)
        DB.insert_item(data['item_name'], data, item_file.filename, [f.filename for f in photo_file], session['id'])
    return render_template("1~4/item_detail.html", data=data, item_path="static/items/{}".format(item_file.filename), photo_paths=["static/photos/{}".format(f.filename) for f in photo_file])

• 사용자가 등록한 상품(item) 저장: 사용자가 입력한 정보들을 넘겨받은 지점인 ‘request’로부터 ‘item_upload’라는 name을 찾아 item_file 변수에 저장한다. 그 item_file을 static/items/ 경로에 저장한다.
• 사용자가 등록한 사진(photo) 저장: 사용자가 입력한 정보들을 넘겨받은 지점인 ‘request’로부터 ‘photo_upload’라는 name의 배열을 찾아 pthoto_file 변수에 저장한다. 그 photo_file 배열을 차례로 순회하며 static/photos/ 경로에 하나씩 저장한다.
• 사용자가 입력한 모든 정보 저장: 사용자가 입력한 정보들을 넘겨받은 지점인 ‘request’로부터 저장한다.
• insert_item()함수를 이용하여, 사용자가 등록한 상품의 이름, 등록한 모든 정보, 등록한 상품, 등록한 사진, 그리고 현재 접속 중인 id (상품을 등록한 유저)를 firebase에 저장한다.
• 데이터베이스에 상품의 값을 모두 저장한 후, 정상 등록된 상품의 세부 정보를 보여주는 상품 세부화면으로 render_template함. 이때 html 파일에서 사용할 정보인 data, item_path, photo_path를 함께 전달한다.

[database.py]

#상품 정보 등록하기
    def insert_item(self, item_name, data, item_path, photo_path, user_id):
        item_info = {
            "writer": user_id,
            "item_name": data['item_name'],
            "item_type": data['item_type'],
            "price": data['price'],
            "course_type": data.get('course_type'),
            "faculty": data.get('faculty'),
            "major": data['major'],
            "course_number": data['course_number'],
            "professor": data['professor'],
            "description": data['description'],
            "tag": data['tag'],
            "item_path": item_path,
            "photo_path": photo_path,
            "download_count": 0
        }
        user_and_item = user_id + '_' + data['item_name']
        self.db.child("item").child(user_and_item).set(item_info)
        print(data, item_path)
        for path in photo_path:
            print("사진 경로:", path)
        return True

• 사용자로부터 등록받은 정보를 다음과 같이 저장한다.
• 등록한 정보들은 ‘item’ child 아래에 저장되며, 각 상품을에 대한 저장 항목의 이름은 ‘등록한 유저의 아이디_상품의 이름’으로 설정하여 서로 다른 유저가 같은 이름으로 상품을 등록하였을 때 database에 값이 덮어씌워지는 문제를 방지하였다.
• 각 상품에 대한 다운로드 횟수를 측정하기 위해 사용자가 상품 등록 시 입력한 값 외에 ‘download_count’라는 key를 추가하였다.
• 위 함수의 결과로 데이터베이스에 저장되는 상품의 정보는 다음과 같다.

3. 상품 전체보기 화면의 페이지네이션 구현

[app.py]

#### 맨 처음 화면이 이 view_items()함수로 옴.
@application.route("/1~4/view_item")
def view_items():
    page = request.args.get("page", 0, type=int)
    per_page=5 # item count to display per page
    per_row=1 # item count to display per row
    row_count=int(per_page/per_row)
    start_idx=per_page*page
    end_idx=per_page*(page+1)

    data = DB.get_items()
    item_counts = len(data)
    data = dict(list(data.items())[start_idx:end_idx])
    tot_count = len(data)

    for i in range(row_count): #last row
        if (i == row_count-1) and (tot_count%per_row != 0):
            locals()['data_{}'.format(i)] = dict(list(data.items())[i*per_row:])
        else: 
            locals()['data_{}'.format(i)] = dict(list(data.items())[i*per_row:(i+1)*per_row])
    return render_template("1~4/view_item.html", datas=data.items(), row1=locals()['data_0'].items(), row2=locals()['data_1'].items(), limit=per_page, page=page, page_count=int((item_counts/per_page) +1), total = item_counts)

• View_items() 함수는 페이지 매개변수 ‘page’를 받아와 해당 페이지에 해당하는 아이템 목록을 가져와 템플릿으로 전달한다.
• 페이지당 5개의 아이템을 표시하며, 각 행에 1개의 아이템이 표시된다. 페이지 수와 총 아이템 개수도 함께 전달된다.

4. 상품 전체보기 리스트에서 특정 상품 클릭 시 상품 세부보기 화면으로 연결

[view_item.html]

<div class="item-card" onclick="location.href='/1~4/view_item_detail/{{key}}/';" style="cursor:pointer;">
                            … 추가 내용 …                     </div>

• 등록된 상품 전체를 리스트로 보여주는 html에서 특정 상품에 대한 item card를 클릭 시, ‘/1~4/view_item_detail/{{key}}/’ 로 연결된다.
• 해당 연결 지점에 대한 py의 함수를 아래에 구현하였다.

[app.py]

#전체 리스트에서 상품 클릭 시 세부정보 볼 수 있음
@application.route("/1~4/view_item_detail/<item_name>/")
def view_item_detail(item_name):
    data=DB.get_item_byname(str(item_name))
    return render_template("1~4/detail.html", item_name=item_name, data=data)

• 위 html 파일에서의 key 값은 사용자가 클릭한 item card에 대한 특정 상품이므로, 그 클릭된 상품 이름에 따라서 동적으로 라우팅된다.
• get_item_byname 함수를 이용해, 사용자가 클릭한 상품의 이름을 key로 하여 DB에서 해당 아이템의 정보를 찾아 가지고 온다.
• 찾은 정보 data와 item_name을 갖고, 상품의 세부 정보를 확인할 수 있는 상품 세부보기 화면 (1~4/detail.html)으로 render_template 한다.

[database.py]

#상품 이름으로 상품 정보 가져오기
    def get_item_byname(self, name):
        items = self.db.child("item").get()
        target_value=""
        for res in items.each():
            key_value = res.key()
            if key_value == name:
                target_value=res.val()
        return target_value

• Firebase의 child("item").get() 메서드를 사용하여 "item" 경로의 데이터를 가져온 후, 반복문을 통해 각 상품을 확인하여 입력받은 이름과 일치하는 상품을 찾는다. 일치하는 상품이 발견되면 해당 상품의 정보를 변수에 저장하고 반환한다. 일치하는 상품이 없으면 빈 문자열을 반환한다.

5. 상품 세부

화면에서 좋아요 기능 구현

[Detail.html]

<script>
        function showHeart() {
        $.ajax({
            type: 'GET',
            url: '/show_heart/{{item_name}}/',
            data: {},
            success: function (response){
                let my_heart = response['my_heart'];
                if (my_heart['interested'] == 'Y')
                {
                    $("#heart").css("color","red");
                    $("#heart").attr("onclick","unlike()");
                }
                else
                {
                    $("#heart").css("color","grey");
                    $("#heart").attr("onclick","like()");
                }
                //alert("showheart!")
                }
            }); 
        } 

        function like() {
            $.ajax({
                type: 'POST',
                url: '/like/{{item_name}}/',
                data: {
                    interested : "Y"
                },
                success: function (response) {
                    alert(response['msg']);
                    window.location.reload()
                }
            });
        }

        function unlike() {
            $.ajax({
                type: 'POST',
                url: '/unlike/{{item_name}}/',
                data: {
                    interested : "N"
                },
                success: function (response) {
                    alert(response['msg']);
                    window.location.reload()
                }
                });
            }

        $(document).ready(function () {
            showHeart();
        });

    </script>

• 상품의 세부 정보를 확인할 수 있는 상세페이지를 구현한 html에서, 하트 아이콘을 클릭할 시 동작하는 javascript 코드를 확인할 수 있다.
• ShowHeart(): 해당 상품에 대해 현 사용자가 관심을 눌렀는지, 누르지 않았었는지 확인하기 위해 서버에 ajax get 요청을 보내는 함수이다. 이때 사용자가 이전에 누른 기록이 있다는 응답을 받으면 현재 클릭에 대한 결과를 unlike() 함수로 연결하고, 누른 기록이 없다는 응답을 받으면 현재 클릭에 대한 결과를 like() 함수로 연결한다.
• Like(): 해당 상품에 대해 현 사용자가 하트를 클릭하는 경우 서버에 ajax post 요청을 보내고 응답을 받으면 alert 메시지를 띄운 후 페이지를 다시 로드한다.
• Unlike(): 해당 상품에 대해 이미 하트를 눌렀던 사용자가 하트를 재클릭하여 관심을 취소하는 경우, 서버에 ajax post 요청을 보내고 응답을 받으면 alert 메시지를 띄운 후 페이지를 다시 로드한다.

[app.py]

#좋아요 관련 기능
@application.route('/show_heart/<item_name>/', methods=['GET'])
def show_heart(item_name):
    if 'id' not in session or not session['id']:
        flash('상품을 찜하려면 로그인을 해주세요.')
        return redirect(url_for('login'))
    else:
        my_heart = DB.get_heart_byname(session['id'],item_name)
        return jsonify({'my_heart': my_heart})

• 비로그인 상태에서 하트를 누르는 경우, ‘상품을 찜하려면 로그인을 해주세요’라는 flash 알림을 띄운 후 login 화면으로 바로 redirect한다.
• 로그인 상태에서 하트를 누르는 경우, DB.get_heart_byname 함수를 통해 사용자의 id와 상품 이름을 활용하여 해당 사용자가 이 상품에 대해 좋아요를 눌렀었는지 여부를 조회한다.

@application.route('/like/<item_name>/', methods=['POST'])
def like(item_name):
    if 'id' not in session or not session['id']:
        flash('상품을 찜하려면 로그인을 해주세요.')
        return redirect(url_for('login'))
    else:
        my_heart = DB.update_heart(session['id'],'Y',item_name)
        return jsonify({'msg': '좋아요 완료!'})

@application.route('/unlike/<item_name>/', methods=['POST'])
def unlike(item_name):
    if 'id' not in session or not session['id']:
        flash('상품을 찜하려면 로그인을 해주세요.')
        return redirect(url_for('login'))
    else:
        my_heart = DB.update_heart(session['id'],'N',item_name)
        return jsonify({'msg': '안좋아요 완료!'})

• update.heart() 함수를 이용하여 데이터베이스에 해당 상품에 대한 좋아요 결과를 저장한다. 정상적으로 등록된 DB의 모습은 다음과 같다.

[database.py]

#heart 정보 가져오기
    def get_heart_byname(self, uid, name):
        hearts = self.db.child("heart").child(uid).get()
        target_value=""
        if hearts.val() == None:
            return target_value

        for res in hearts.each():
            key_value = res.key()

            if key_value == name:
                target_value=res.val()
        return target_value

• 특정 사용자(‘uid’)의 하트 정보를 특정 상품(‘name’)에 대해 조회한다. 데이터베이스에서 해당 사용자의 하트 정보를 가져와서 반복문을 통해 특정 상품과 일치하는 정보를 찾는다.

#heart 값 변경하기    
    def update_heart(self, user_id, isHeart, item):
        heart_info ={
            "interested": isHeart
        }
        self.db.child("heart").child(user_id).child(item).set(heart_info)

• 사용자 ID, 상품에 대한 하트 여부 (‘isHeart’), 상품 이름(item)을 인자로 받아서 업데이트할 정보를 딕셔너리 형태로 만든다. 해당 정보를 Firebase의 “heart” child에 업데이트한다.

6. 상품 세부 화면에서 구매 버튼 클릭 후 구매 완료 화면으로 연결

[Detail.html]

<div>
<button onclick="location.href='/1~4/order_item/{{item_name}}/';" title="to-payment" id="order-btn" class="button btnFade btnDefaultblue">바로 구매하기</button>

• 상품 세부 화면에서 ‘바로 구매하기’ 버튼 클릭 시, ‘/1~4/order_item/{{item_name}}/’이라는 경로로 라우팅됨.

[app.py]

#구매하기 버튼 누르면

#구매하기 버튼 누르면
@application.route("/1~4/order_item/<item_name>/")
def view_order_confirmation(item_name):

    point=DB.get_price(str(item_name))
    seller=DB.get_seller(str(item_name))

    if 'id' not in session or not session['id']:
        flash('구매하시려면 로그인을 해주세요.')
        return redirect(url_for('login'))
    else:

        download_count = DB.increase_download_count(item_name) #다운로드 횟수 증가

        DB.update_point(session['id'], point) #구매자 포인트 감소
        DB.update_ranking_point(session['id'], point) #구매자 랭킹 포인트 증가
        DB.update_point_2(seller,point) #판매자 포인트 증가
        DB.update_ranking_point(seller,point) #판매자 랭킹 포인트 증가

        DB.insert_purchase_history(item_name, session['id'])
        seller_email = DB.get_seller_email(item_name)

        flash('포인트가 차감되었습니다')

        data=DB.get_item_byname(str(item_name))
        session['user_point'] = DB.get_user_point(session['id'])

    return render_template("1~4/order_item.html", data=data, item_name=item_name, seller_email=seller_email, download_count=download_count)

• insert_purchase_history() 함수를 이용하여, 각 사용자별 구매한 상품의 리스트가 업데이트될 수 있도록 한다.
• increase_download_count() 함수를 이용하여, 구매 버튼 클릭 시마다 해당 구매된 상품의 다운로드 횟수가 하나씩 증가될 수 있도록 한다.
• get_seller_email() 함수를 이용하여, 구매한 상품의 이름을 key로 하여 구매된 상품의 판매자의 이메일 정보를 DB로부터 찾아올 수 있도록 한다.
• get_item_byname() 함수를 이용하여, 구매한 상품의 이름을 key로 하여 구매된 상품의 모든 정보를 data 라는 변수에 담아온다.
• 위 DB 함수들로 얻은 정보를 포함하여 ‘1~4/order_item.html’로 render_template한다.

[database.py]

def insert_item(self, item_name, data, item_path, photo_path, user_id):
        item_info = {
           … 추가 내용들 …
            "download_count": 0
        }

• 각 상품에 대한 다운로드 횟수를 카운트하기 위해, 상품 최초 등록 시 각 상품에 대한 database에 “download_count”라는 key를 추가하였다. 최초 등록 시이므로 초기값은 0으로 설정하였다.

#사용자별 구매내역 저장하기
def insert_purchase_history(self, item_name, user_id):

      timestamp = int(time.time())

      purchase_info = {
          "item_name": item_name,
          "timestamp": timestamp
      }
      self.db.child("user_purchase_history").child(user_id).set(purchase_info)
        return True

• Database에 “user_purchase_history”라는 child를 만들어, 그 아래 각 user_id별로 purchase_info를 key로 하여 저장한다. Purchase_info에는 구매한 상품의 이름과, 구매한 시간이 저장된다.

#구매 버튼 누를 때마다 download 횟수 하나씩 늘려 저장
    def increase_download_count(self, item_name):
        current_count = self.db.child("item").child(item_name).child("download_count").get().val()

        new_count = current_count + 1
        self.db.child("item").child(item_name).update({"download_count": new_count})
      return new_count

• 현재 상품의 download_count 값을 db로부터 검색하여 가져오고, 그 값을 1 증가하여 유에 저장된 값을 업데이트한다.

#판매자 이메일 가져오기
    def get_seller_email(self, item_name):
        writer = self.db.child("item").child(item_name).get().val().get('writer')
        if writer:
            user_data = self.db.child("user").child(writer).get().val()
            if user_data:
                email = user_data.get('email')
                return email        return None

• Firebase의 ‘item’ child에서 ‘item_name’에 해당하는 데이터를 찾아, 그 안의 writer 값을 가져온다.
• 만약 writer 값이 존재한다면, firebase의 ‘user’ child에서 그 writer 값과 일치하는 데이터를 찾는다. 일치하는 사용자가 존재하는 경우, 그 사용자의 email 값을 반환한다. 찾지 못한 경우 None을 반환한다.

HTML

HTML이란 웹사이트의 모습을 기술하기 위한 마크업 언어. 웹 브라우저에서 문서 및 웹 페이지가 표시되는 방법을 규정하는 언어이다. 이를 사용하여 웹사이트의 구조를 만들 수 있다.

마크업 언어(Markup Language)란? 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 언어의 일종이다.

CSS(Cascading Style Sheets)

HTML등의 마크업 언어로 만들어진 문서의 스타일을 지정하는 방식을 규정하는 스타일 시트 언어이다. 색상, 테두리, 폰트 등 간단한 스타일 지정부터 반응형 특징을 정의하는 등 문서를 꾸며주는 역할을 한다.

여기서 CSS의 C는 Cascading의 약자다. 한국말로 직역하면 ‘폭포수처럼 흐르는'을 뜻하는데 이는 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜주는 모습이 DOM 트리구조에서 마치 폭포수처럼 내려가는 모습을 닮았기 때문에 쓰였다.

CSS는 총 3가지 방법으로 사용할 수 있다.

1. 태그 내의 style 속성

   <h1 style="display: hidden;"></h1>

2. 내부 css 파일

   <style>
    h1 {
    display: hidden;
    }
   </style>

3. 외부 css 파일: html 파일에는 다음 코드만 입력.

   <link href="css 파일의 경로" type="text/css" rel="stylesheet">

JavaScript

자바스크립트는 객체 기반의 스크립트 언어이다.

*스크립트 언어란? * 프로그래밍 언어의 한 종류로, 기존에 이미 존재하는 소프트웨어(애플리케이션)를 제어하기 위한 용도로 쓰이는 언어이다.

자바스크립트가 가지고 있는 언어적 특징은 다음과 같다.

1. 자바스크립트는 객체 기반의 스크립트 언어이다.
2. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다.
3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

HTML, CSS, JS가 웹을 이루는 방식

세 가지는 웹을 이루는 기본적인 요소이다. 이들이 웹에서 하는 역할을 정리해보자면 다음과 같이 말할 수 있다.

• HTML: 웹 페이지의 기본 구조와 뼈대 담당

• CSS: 웹을 디자인

• JavaScript: 클라이언트 단에서 웹 페이지가 동작하는 것을 담당

일단 프로젝트에 쓸 가상환경을 설정하자. vscode에서 플라스크 프로젝트를 작업한다는 것을 가정하여 쓰인 가이드이다. vscode는 이미 설치되어 있다고 가정한다. vscode가 설치되어 있지 않다면 먼저 설치하고 올 것.

사양 체크

1. 운영체제 확인
   • Mac OS인가? ➡ windows powershell에서 실행하는 것 외에는 모두 유사하다.
   • Windows OS인가?
     • 64bit인가? ➡ 아래 그대로 실행
     • 32bit인가? ➡ 32bit Windows를 위한 아나콘다는 더이상 지원하지 않는 것으로 보인다. Installer를 찾지 못했다.

아나콘다 설치, 가상환경 설정

다음 링크는 아나콘다 인슽톨러 다운로드 페이지로 이동하는 링크이다. https://www.anaconda.com/download 위 링크에 접속하면 다음과 같은 화면이 나온다. 아래 캡쳐는 위 화면의 확대샷이다. 여기에서 1번, 'Download' 버튼을 누르면 아래 화면과 같이 자동으로 자신의 운영체제에 맞는 인스톨러가 다운로드된다. 또는 'Download' 아래에 있는 2번, 'Get Additional Installers'를 눌러 직접 어떤 인스톨러를 다운받을지 선택할 수 있다.

인스톨러 실행, 설치

인스톨러 파일을 모두 다운받았으면 다운받은 파일을 실행한다. 그러면 아래와 같이 셋업을 시작한다. 아래 캡쳐와 같이 계속 진행하면 된다. 완료

아나콘다 설치 확인

시작 버튼을 누르면 Anaconda3 (64-bit) 폴더가 보일 것이다. 이 안에서 Anaconda Prompt를 클릭하여 실행한다. Anaconda Prompt를 찾기 힘들면 시작버튼 오른쪽의 '찾기' 탭에서 검색하여 찾을 수도 있다. Anaconda Prompt에 python을 쳐서 위와 같은 결과가 나오면 설치를 성공한 것이다.

vscode

vscode 왼쪽 탭의 네 개의 블럭 아이콘은 vscode extension(확장프로그램)을 설치하는 곳이다. vscode extension에서 python을 찾아 설치해주어야 한다.

가상환경 생성

그럼 기본 설정이 완료되었다! 이제 가상환경을 생성해보자. 이번엔 Anaconda PowershellPrompt를 열자. 위에서 아나콘다 설치 확인 시에 확인했던 폴더와 같은 폴더 아래에 있다. 실행하면 다음과 같은 창이 뜰 것이다. conda create -n VENV_NAME python=3.10 VENV_NAME 부분에 자신이 만들고자 하는 가상환경의 이름을 쓰면 된다. python=3.10 부분은 가상환경을 만들 때에 꼭 필요한 부분은 아니다. 만들 가상환경에서 쓰일 파이썬 버전을 지정하는 부분이다. 이 프로젝트에서는 추후 pyrebase library를 이용할 것이므로 python 버전을 3.10으로 지정해줬다. (python3.11을 쓰면 라이브러리의 특정 부분에서 파이썬이 그 코드를 해석하지 못하는 오류가 발생했었다. 가상환경에서 이처럼 파이썬 버전을 지정하였음에도 다른 이유로 python3.11로 파일이 실행되는 문제가 있어 고생했다.) conda create -n VENV_NAME python=3.10을 입력하면 다음과 같은 화면이 뜬다. 마지막에 다음과 같이 묻는다. y라고 입력하여 가상환경 설정을 마저 완료한다. 아래와 같이 뜨면 새로운 가상환경이 만들어진 것이다! 이제 이 가상환경에서 우리가 쓸 라이브러리를 설치할 것이다. 이제 conda activate GUIDE(가상환경이름)을 입력하여 새로 만든 가상환경을 실행해보자. 빨간색 밑줄이 현재 작업하고 있는 환경을 나타낸다. base, 기본 환경에서 GUIDE라는, 방금 새로 만든 가상환경으로 이동했다. 여기에서 우리가 설치하려는 라이브러리들을 설치해주자.

Flask 설치

새로 만든 가상환경, GUIDE속에서 conda install flask를 입력한다. 다시 Proceed([y]/n)?가 뜬다. 이번에도 y를 입력해주자. 이것저것 열심히 설치하더니 마지막에는 done 하나만 뜬다.

Windows Powershell에서 실행 정책 변경하기

이제 Anaconda Powershell Prompt를 끄고 Windows Powershell을 관리자로 실행해준다. 사용자의 어쩌고... 하는 경고창에서 '예'를 클릭하면 다음과 같은 파란 프롬프트 창이 뜬다. Set-ExecutionPolicy Unrestricted를 실행한다. 띄어쓰기와 철자에 유의하라. 실행 정책을 변경하겠냐고 물어본다. Y라고 해준다. 그럼 이제 거의 다 끝났다! Windows Powershell도 이만 닫아준다.

vscode에서 python interpreter 변경하기

다시 vscode로 이동하여 아래 캡쳐의 빨간 박스 부분에서 >을 누르고 Python: Select Interpreter를 선택한다.

그러면 여러 가지 interpreter가 뜬다. 개중 우리가 방금 만든 가상환경을 선택해주자. 나는 GUIDE라는 이름의 가상환경을 만들었으므로 GUIDE를 선택한다. 찾아보니 이 과정은 코드에서 빨간줄이 안 생기게 하는 역할을 했다. 실제 코드 수행과는 상관 없을 수 있지만, 이왕이면 내가 실행할 가상환경과 python interpreter가 같으면 코드를 이해하기가 편할 것이다.

vscode 인코딩 확인

vscode의 왼쪽 바 하단에 있는 톱니바퀴를 클릭하여 설정(Settings)에 들어간다. 단축키는 Ctrl+,이다. encoding을 검색하여 인코딩이 UTF-8로 되어 있는지 확인한다. 다르다면 UTF-8로 변경해준다.

Flask app 실행

아래는 학교 수업 실습 중에 만든 폴더이다. 다음과 같이 flask의 기본 구조인 static폴더, templates폴더, app.py파일을 만들고 작업한다. 그럼 플라스크 앱을 실행해보자. 플라스크 앱은 터미널 창에서 flask run을 입력하여 실행할 수 있다. 새 터미널(terminal)을 여는 단축키는 Ctrl+Shift+`이다.

다음은 여러 시행착오를 거쳐 얻은, 플라스크 앱이 정상적으로 실행되지 않았을 경우 체크해야 할 몇 가지 사항이다.

1. 터미널이 Command Prompt인가? Command Prompt라면 터미널 상단 바의 오른쪽에 'cmd'라고 쓰여 있을 것이다. 아니라면 bash, powershell 등등 다른 이름이 쓰여 있을 것이다. 아래와 같이 여러 가지 터미널이 떠 있을 수도 있다. cmd 터미널로 옮겨서 실행하자.
2. app.py가 위치한 폴더에서 실행하는가? app.py가 위치한 그 폴더에서 실행하지 않으면 flask가 app.py를 찾지 못한다. cd명령어를 이용하여 app.py가 있는 폴더로 이동하여 실행하자.

3. python 파일의 이름이 app.py인가? app.py여야만 실행된다!