DAY 19. 2ed 팀 프로젝트 5일차

발표 D-1

 

완성 D-DAY

 

왠지 계획한 모든 기능을 구현하기는 힘들거 같다는 생각이 든다.

 

심지어 B반 튜터님께서 발표를 참관하는 것이 아닌 A반 튜터님... K 튜터님 칼같은 피드백 무섭습니다.

 

개인적으로 피드백 측면에서는 잘 된 일이지만, 현 상황이 다소 시궁창이다보니 걱정이 앞설수 밖에 없다.

 

팀장으로서 팀원들을 잘 이끄는건 확실하게 실패한거 같다.

 

개념이 확실하지 않은 팀장이 개념이 충만한 팀원들을 이끄는건 어려운 일이 아니다.

 

개념이 확실하지 않은 팀장이 개념이 다소 아쉬운 팀원들을 이끌때 비로소 팀장의 능력이 발휘된 것이라 생각한다.

 

그 점에서 이번 두번째 팀장 역할은 0점이다. 

 

팀장 역할을 수행한 나보다 J 팀원이 더 팀장 역할을 수행한거 같다.

 

(나는 잡일 + 구멍 매꾸기 정도?)

 

J 팀원 덕분에 스트레스를 덜 받은 것도 사실이지만, 능력부족 + 의지부족 이슈로 발전할 기회를 놓친것도 사실이다.

 

그렇다고 좌절할 수는 없기에, 나는 내가 할 수 있는바를 완수 했다.

 

팀원으로서 1인분 정도는 한거 같은데... 찝찝한건 어쩔수 없다.

 

그래도 생각보다 이른시간에 파일 업로드를 제외한 회원가입, 로그인, 마이페이지(프로필 수정) 까지는 아주 기초적인 FE 까지 완료 했다.

 

팀원들도 오늘 빠른시일 내에 완성한다면 빨리 병합해서 최종 점검 및 발표준비를 해야하는데... 

 

잘 모르겠다.

 

============================================================================================

- main.py (get_users(id)) user DB 데이터 가져오기

# user DB 데이터 가져오기
@app.route('/users/<id>', methods = ['GET'])
def get_users(id):
    if "name" in session:
        db = pymysql.connect(host = 'database-1.cbegjfm38p8o.ap-northeast-2.rds.amazonaws.com', user = 'admin',
                             db = 'ione', password = 'ione1234', charset = 'utf8')
        curs = db.cursor()

        sql = '''SELECT user_id, name, gender, email, location, profile_image, intro FROM `user`'''

        curs.execute(sql)

        rows = curs.fetchall()

        # [session['id'] - 1] : 세션에 id 값이 담기는데 index 값보다 1이 많아서 -1 해줬습니다~

        result = {
            "user_id": rows[session['id'] - 1][0],
            "name": rows[session['id'] - 1][1],
            "gender": rows[session['id'] - 1][2],
            "email": rows[session['id'] - 1][3],
            "location": rows[session['id'] - 1][4],
            "profile_image": rows[session['id'] - 1][5],
            "intro": rows[session['id'] - 1][6]
        }

        db.commit()
        db.close()

        return jsonify({'users': result}), 200

코드가 다소 엉망인데, 기능은 구현 되었다. user 데이터를 fetchall() 로 튜플로 받는 값을 jsonify() 를 활용해 javascript 로 값을 넘겨주었다.

 

- mypage.js (flask 에서 데이터를 넘겨 받아 ajax 로 데이터 뿌림)

$(document).ready(function () {
    const id = 1;
    $.ajax({
        type: "GET", url: `/users/${id}`, data: {}, success: function (response) {
            const rows = response["users"];
            let name = rows['name']
            let email = rows["email"]
            let gender = rows["gender"] === 1 ? '남자' : '여자'
            let location = rows["location"]
            let intro = rows["intro"]
            let img = rows["profile_image"]
            let imgsrc = "../static/img/" + img
            let temp_html = `
    <div class="mypage_mid">
        <div class="mypage_midbox">
            <div class="mypage_img">
            <img src="${imgsrc}" id="user_image">
            </div>
            <div class="mypage_name">
                이름 : ${name}
                <hr>
            </div>
            <div class="mypage_email">
                이메일 : ${email}
                <hr>
            </div>
            <div class="mypage_gender">
                성별 : ${gender}
                <hr>
            </div>
            <div class="mypage_location">
                지역 : ${location}
                <hr>
            </div>
            <div class="mypage_intro">
                자기소개 : <p>${intro}</p>
                <hr> 
            </div>
            <div class="editbtn">
                <button class="mybtn" type="button"><a href="/mypage/edit">프로필 수정</a></button>
                <button class="homebtn" type="button"><a href="/">홈으로</a></button>
            </div>
       </div>
    </div>
    `
            $('.mypage_main').append(temp_html)
        }
    })
})

ajax 는 어떻게 어떻게 결과는 도출했지만, 아직 개념이 서지않는다. 공부더 해야할 거 같다.

 

- main.py (put_users(id)) 쿼리문으로 flask 에서 데이터를 받아 jsonify 로 javascript 데이터 전송 및 수정

# user DB 수정
@app.route('/users/<id>', methods = ["PUT"])
def put_users(id):
    if "name" in session:
        db = pymysql.connect(host = 'database-1.cbegjfm38p8o.ap-northeast-2.rds.amazonaws.com', user = 'admin',
                             db = 'ione', password = 'ione1234', charset = 'utf8')
        curs = db.cursor()

        name = request.form["name"]
        email = request.form["email"]
        intro = request.form["intro"]
        # file = request.files['file']
        #
        # if file.filename == '':
        #     return redirect(request.url)
        # if file and allowed_file(file.filename):
        #     filename = secure_filename(file.filename)
        #     file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        #
        # profile_image = file.filename

        # sql = '''UPDATE `user` SET name=%s, email=%s, intro=%s, profile_image=%s WHERE id =%s'''

        sql = '''UPDATE `user` SET name=%s, email=%s, intro=%s WHERE id =%s'''

        # curs.execute(sql, (name, email, intro, profile_image, session["id"]))

        curs.execute(sql, (name, email, intro, session["id"]))

        session["name"] = name

        db.commit()
        db.close()

        return jsonify({'msg': '수정이 완료되었습니다'}), 200

파일 업로드는 아직 기능 구현 안되었고, 추후 진행 해봐야겠다.

 

- mypage_edit.js (사진 업로드 코드가 있지만 적용을 못했다)

$(document).ready(function () {
    const id = 1;
    $.ajax({
        type: "GET",
        url: `/users/${id}`,
        data: {},
        success: function (response) {
            const rows = response["users"];
            let name = rows['name']
            let email = rows["email"]
            let intro = rows["intro"]
            let img = rows["profile_image"]
            let imgsrc = "../static/img/" + img
            let temp_html = `
    <div class="myedit_mid">
        <div class="myedit_midbox">
            <div class="myedit_img">
                <img src="${imgsrc}" id="user_image">
            </div>
            <div class="img_button">
                <label class="editlabel" for="img_edit">
                <div class="btn-upload">사진 업로드</div>
                </label>
                <input class="myedit_imgupload" type="file" id="img_edit"/>
                <!--                사진삭제 변경 필요-->
                <button class="myedit_imgdel">
                    사진 삭제
                </button>
            </div>
        </div>
        <div>
            <label><p>[이름]</p></label>
            <input class="myedit_name"  value="${name}" id="name_edit">
        </div>
        <div>
            <label><p>[이메일 변경]</p></label>
            <input class="myedit_email" value="${email}" id="email_edit">
        </div>
        <p>[자기 소개 변경]</p>
        <div>
            <textarea class="myedit_intro">${intro}</textarea>
        </div>
        <div class="myedit_bottom">
            <button class="okbtn" id="profile_edit">
                확인
            </button>
            <a href="/mypage">
                <button type="button" class="cancelbtn">취소</button>
            </a>
        </div>
    </div>`
            $('.myedit_main').append(temp_html)

            // $("input[type=file]").change(function (event) {
            //     let tmpPath = URL.createObjectURL(event.target.files[0]);
            //
            //     $("#user_image").attr("src", tmpPath);
            // });
            //
            // $(".myedit_imgdel").click(function () {
            //     $("#user_image").attr("src", "../static/img/default-user-image.png");
            // })
            $(".okbtn").click(function () {
                const name = $(".myedit_name").val();
                const email = $(".myedit_email").val();
                const intro = $(".myedit_intro").val();
                // const imageInput = $("#img_edit")[0];

                // if (imageInput.files.length === 0) {
                //     alert("파일은 선택해주세요");
                //     return;
                // }

                const formData = new FormData();
                formData.append("name", name);
                formData.append("email", email);
                formData.append("intro", intro);
                // formData.append("file", imageInput.files[0]);

                $.ajax({
                    type: "PUT",
                    url: `/users/${id}`,
                    processData: false,
                    contentType: false,
                    data: formData,
                    success: function (response) {
                        alert(response["msg"])
                        window.location.href = "/mypage"
                    }
                })
            })
        }
    })
})

팀원의 도움으로 꾸역꾸역 기능을 구현해냈다. 그마저도 사진 업로드는 보류 중이다.

 

============================================================================================

나름 잘 마무리 되는 것 같다.

 

핵심 기능들은 다 구현했고, 발표준비도 어느정도 되었으니, 내일 아침에 마무리하면 되겠다.

 

1시다 일찍 자야지~