2023년 3월 14일 TIL

1. 오늘 만난 에러....

처음에 코딩 시작할 때 flask 쓸 거면서 templates 폴더 만들고 그 안에 index.html 넣는 과정을 망각했다.

그랬더니 야심차게 프론트엔드 백엔드 만들고 브라우저에서 localhost:5000 썼더니 황당한 화면이 대신 나왔다 ㅋㅋ

뿅... ㅋㅋㅋ 다시 app.py경로와 동일한 위계로 templates 폴더를 만들어서 그 안에 index.html 파일을 이동시켜 줬더니 정상작동했당!

 

 

2. 오늘 내가 만든 것 ㅋㅋ

팀프로젝트 중 방명록 부분을 맡아서 만들어봤다.

사실 자바스크립트랑 백엔드 API 기능구현 하는 역할인데, 뭔가 대강이라도 허수아비 인형이라도 있어야 기능들을 실현해 볼 수 있을 것 같아서 프론트도 내가 짰다. 덕분에 아직 허접 담백한 나의 html/css 실력을 다시 되돌아보게 되었다 ㅋㅋㅋ

그래도 작업하는건 재밌었다! 적성에 맞는듯?! ㅋㅋㅋ 조금씩 박스 만들어서 간격 띄우고~ 가로 세로 줄맞추고~ 하는 과정이 뭔가 재밌다. 결국 오늘 구현하고자 한 목표는 모두 달성했다.

 

1. 유저한테 입력받은 값 DB에 저장하기 (저장하자마자 window.location.reload()로 새로고침을 줘서 2번 기능을 바로바로 실행시킨다.)  저장될 때마다 고유의 ${num} 값도 갖도록 한다. 나중에 비밀번호 혹은 하트 처럼, 카드마다 자신의 데이터를 가져야 하는 경우가 생길 때 num 값이 그 카드의 정체성을 만들어줘서 심화 단계 작업을 하게 해준다.

 

2. DB에 저장된 데이터 꺼내서 바로바로 카드로 만들어 붙여 달아주기. temp_html = `` 요고와 .append 라는 쿼리를 쓴다.

아!! 오늘 팀원분께 .prepend라는 쿼리를 새로 배웠다! append는 신규데이터가 아래쪽으로 붙고, prepend는 신규데이터가 위쪽으로 붙는 순서의 차이가 있다. 오름차순, 내림차순처럼. 이걸 쓰니까 데이터 자체를 .sort 하는 방법보다 간편해서 좋았다. ㅎㅎㅎㅎ

 

3. 카드를 만들어 붙여 줄 때, 각각의 .append 되는 카드마다 id값에 ${index}를 추가하여 ${num}과 같이 쓰이도록 한다.

 

아래는 내 귀여운(?) 코드!

function show_guestbook() {
        fetch('/guestbook_show').then(res => res.json()).then(data => {
            let rows = data['result']
            $('#guest_cards_wrap').empty()
            rows.forEach((a, index) => {
                let guest_name = a['guest_name']
                let guest_password = a['guest_password']
                let guest_comment = a['guest_comment']
                let num = a['num']

                let temp_html = `
                                <div id="guestbox_${index}" style="background-color: white; width: 1500px; margin-top: 100px; display: flex; flex-direction: column; align-items: flex-start;">
                                    <p style="margin: 50px 20px auto 50px;">
                                        댓 글 내 용</p>
                                    <div style="display: flex; flex-direction: row;">
                                        <p style="margin: 50px 20px auto 50px; font-size: 50px; flex: 1;">
                                            ${guest_comment}</p>
                                    </div>
                                    <div style="display: flex; flex-direction: row;">
                                        <button style="margin: 50px 20px auto 50px; width: 300px; height: 100px; font-size: 50px;">
                                            삭제</button>
                                        <input id="pw${index}" style="margin: 50px 20px auto 5px; width: 600px; height: 100px; font-size: 50px;" placeholder="삭제용비밀번호 입력">
                                        <p>${guest_name}</p>
                                    </div>
                                </div>`
                $('#guest_cards_wrap').prepend(temp_html)
            })
        })
    }

내가 팀프로젝트에서 html/css 총괄이 아니기 때문에, 추후 프론트 작업자께 내 코드를 드릴 걸 대비해서

모든 css를 인라인 형식으로 달았다. ㅎㅎ;;; class가 부딪히거나 보시기 불편하실까봐!

매니저님께 칭찬 받았다. 앞을 내다보는 생각을 했다고 ㅎㅎㅎㅎ. 그래도 앞으로 자기 이름 이니셜을 앞에 붙이고 언더바 하고 클래스 이름을 적으면 문제가 생기지 않으므로 그런 방법도 있다고 말씀해주셨다.

 

내일은 비밀번호 조건 걸어 삭제하기 기능을 구현해야지!

코딩 재밌다!