본문 바로가기

verdantjuly/Today I Learned

TIL 20230516

728x90

오늘 목표

TIL 리뷰

소개위드미 뼈대 만들기

TIL 작성

오늘 한 것

TIL 리뷰

소개위드미 1차 완성 (app.py, index.html) - 팀원들과 함께

TIL 작성

Git SSH 설정

프로그래머스 코딩테스트 입문 : 나머지 구하기

모던 자바스크립트 딥 다이브 읽기 ~ p.25

0-1. 소개위드미 뼈대 만들기 (index.html) 

문제

팀원들과 live server 를 통해 index.html 을 살펴보다 방명록 저장하기 버튼이 없는 것을 발견

시도

부트스트랩에서 적절한 버튼을 가져 와서 해당 부분에 끼워 넣음

해결

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>소개위드미</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .title1 {
            width: 100%;
            height: 150px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

        }

        .title1>h1 {
            font-size: 70px;
        }

        .title2>img {
            border-radius: 5px;
            width: 35%;
            height: 35%;
            margin: 20px 20px 20px 20px;

        }

        .title2 {
            margin: 0px 20px 20px 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }



        .desc {

            width: 60%;
            border: 3px dotted;
            border-radius: 5px;
            padding: 20px;
            font-size: 15px;


        }

        .comment-box{
            width: 800px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 20px auto 0px auto;
        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 96%;
            max-width: 1500px;
        }
        .comment-list{
            margin: 20px auto 20px auto;
        }

        .comment-box>h2{
            text-align: center;
            margin: 60px auto 60px auto;
            
        }
       
    </style>
    <script>
        $(document).ready(function () {
            listing();
        });
    </script>
</head>

<body>
    <div class="title1">
        <h1 class=h1 id=h1>소개위드미</h1>
    </div>
    <div class=title2 id=title2>
        <img src="https://i.postimg.cc/PqKgCJbd/allteam.png"></src>
        <div class=desc id=desc>
            <h2>코딩위드미</h2>
            <p>
                팀 소개 : 개발자가 되고 싶은 5명의 조원들이 함께 코딩과 협업을 배워나가는 팀입니다!<br>
                팀 목표 : 프로젝트 완성! <br>
                팀 약속 : 13:00 ~ 14:00 점심 시간 / 18:00 ~ 19:00 저녁 시간 <br>
                <b>[ 팀 규칙 ]</b>
                <br>
                다영: 피드백을 요청하면 긍정/부정에 관계 없이 확실하게 답변을 준다. <br>
                상우: 누구 한명이라도 모르는 것이 있으면 짚고 넘어간다. <br>
                승현: 모르는 내용이 있다면 제일 먼저 검색해 본다. <br>
                성원: 정보 공유를 잘한다. <br>
                혜민: 모르는게 있으면 물어보기.

            </p>
        </div>
    </div>
    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-5 g-5" id="cards-box">
            <div class="col">
                <div class="card h-100">
                    <img src="https://i.postimg.cc/4x5ZLDB2/t043597jk8v-u055afalu9e-844e26a259ec-512-480.jpg"
                        class="card-img-top">
                    <div class="card-body">
                        <h5>이다영</h5>
                        <p>MBTI : INFJ</p>
                        <p>프로젝트를 완성하는 날, <br>트랙을 완주하는 날까지<br> 최선을 다하겠습니다!</p>
                        <button onclick="window.open('https://verdantjuly.tistory.com/');" type="button"
                            class="btn btn-dark">개발 블로그</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://i.postimg.cc/Pr1dZpZj/t043597jk8v-u053jslhs8k-ece0e600acf6-512-480.jpg"
                        class="card-img-top">
                    <div class="card-body">
                        <h5>이승현</h5>
                        <p>MBTI : ENTJ.</p>
                        <p>열심히 캠프 참여해서 <br>어엿한 프로그램 <br>개발자로 거듭나겠습니다</p>
                        <button onclick="window.open('https://skylionandrabbit.tistory.com/');" type="button"
                            class="btn btn-dark">개발 블로그</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://i.postimg.cc/1391qWsG/t043597jk8v-u051ukhdn83-cdd3648e9c6c-512-480.png"
                        class="card-img-top">
                    <div class="card-body">
                        <h5>우성원</h5>
                        <p>MBTI : ISFP</p>
                        <p>포기하지않고 꾸준히 <br> 해서 성공한 개발자가 <br>되겠습니다.</p>
                        <button onclick="window.open('https://skylionandrabbit.tistory.com/');" type="button"
                            class="btn btn-dark">개발 블로그</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="https://i.postimg.cc/KY8bd0WG/t043597jk8v-u055gm324au-7084f39e2aa9-512-480.jpg"
                        class="card-img-top">
                    <div class="card-body">
                        <h5>이상우</h5>
                        <p>MBTI : INFP</p>
                        <p>부트캠프를 수료하여 <br>멋진 개발자로 <br>거듭나겠습니다.</p>
                        <button onclick="window.open('https://sangwoorhie.tistory.com/');" type="button"
                            class="btn btn-dark">개발 블로그</button>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">

                    <img src="https://i.postimg.cc/3JY7pcfn/2023-05-15-22-55-19.png" class="card-img-top">
                    <div class="card-body">
                        <h5>서혜민</h5>
                        <p>MBTI : INFP</p>
                        <p>어엿한 개발자가 <br>될 수 있도록 <br>열심히 참여 하겠습니다.</p>
                        <button onclick="window.open('https://ex-1008.tistory.com/');" type="button"
                            class="btn btn-dark">개발 블로그</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="comment-box">
        <h2>코딩위드미 조 응원하기</h2>
        <div class="form-floating mb-3">
            <input class="form-control" placeholder="닉네임">
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <input class="form-control" placeholder="응원 한 마디">
            <label for="floatingPassword">응원 한 마디</label>
        </div>
        <br>
        <button type="button" class="btn btn-outline-dark">저장</button>
        <div class="comment-list" id="comment-list">
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <p>새로운 앨범 너무 멋져요!</p>
                        <footer class="blockquote-footer">호빵맨</footer>
                    </blockquote>
                    <br>
                    <button type="button" class="btn btn-dark" id = "btn-delete">삭제</button>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <p>새로운 앨범 너무 멋져요!</p>
                        <footer class="blockquote-footer">호빵맨</footer>
                    </blockquote>
                    <br>
                    <button type="button" class="btn btn-dark" id = "btn-delete">삭제</button>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <blockquote class="blockquote mb-0">
                        <p>새로운 앨범 너무 멋져요!</p>
                        <footer class="blockquote-footer">호빵맨</footer>
                    </blockquote>
                    <br>
                    <button type="button" class="btn btn-dark" id = "btn-delete">삭제</button>
                </div>
            </div>
        </div>
    </div>

    </div>
</body>

</html>

알게 된 점

혼자서는 발견하지 못하는 실수들을 같이 하면 찾아낼 수 있다. 

 

 

0-2. flex-direction: row;

문제

flex-direction: column; 이라는 코드가 뭔지 모름. 까먹음.

시도

구글링 

해결

flex-direction은 div 생성 방향을 정한다는 뜻이고 column은 그것의 구체적인 방향이다.

나는 데이터를 옆으로 붙일 거라 flex-direction: row; 를 사용하였다.

알게된 것

flex-direction: row; 옆으로 붙이기

 

 

0-3. 프로젝트 1차 완성

어느 정도 구조를 갖추게 되었다. CSS 부분을 조금 수정하고 제출하면 될 듯하다.

0) 저장 버튼 , 방명록 생성

폼으로 닉네임과 방명록 내용을 입력받아 DB에 저장한다.

저장한 값을 불러와 append 방식으로 붙여 넣는다.

1) 삭제 버튼

처음에는 삭제 버튼을 누르자 마자 댓글이 삭제되는 기능을 구한하려고 했으나 어려워

모달을 이용하여 닉네임을 입력 받고 그것을  delete one 하는 방법으로 구현하였다.

2) 수정 버튼

위와 비슷한 원리로 방명록 내용 부분을 모달로 전달 받아 수정 기능을 작동한다.

app.py

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
import certifi

ca = certifi.where()

client = MongoClient('mongodb+srv://sparta:test@cluster0.0uiki8z.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta



@app.route('/')
def home():
    return render_template('index.html')

@app.route('/comments', methods=["POST"])
def comments_post():
    nickname_receive = request.form['nickname_give']
    comment_receive = request.form['comment_give']

    doc = {
        'nickname':nickname_receive,
        'comment':comment_receive
        }
    db.comments.insert_one(doc)

    return jsonify({'msg': '방명록 저장 완료!'})

@app.route('/comments', methods=['GET'])
def comments_get():
   all_comments = list(db.comments.find({},{'_id':False}))
   return jsonify({'result':all_comments})

@app.route('/comments', methods=['DELETE'])
def comments_del():
   delnickname_receive = request.form['delnickname_give']
   db.comments.delete_one({'nickname': delnickname_receive})
   return jsonify({'msg': '방명록 삭제 완료!'})

@app.route('/comments', methods=['PULL'])
def comments_pull():
    editnickname_receive = request.form['editnickname_give']
    editcomment_receive = request.form['editcomment_give']
    db.comments.update_one({'nickname':editnickname_receive},{'$set':{'comment':editcomment_receive}})
    return jsonify({'msg': '방명록 수정 완료!'})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>소개위드미</title>
    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .title1 {
            width: 1550px;
            height: 150px;


            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background: linear-gradient(to right, #ffa7a3, #5673bd);
            padding: 0.43em 1em;
            border-radius: 10px;
            color: #ffffff;

            margin: auto;
            margin-bottom: 40px;


        }

        .title1>h1 {
            font-size: 80px;
        }

        .title2>img {
            border-radius: 5px;
            width: 600px;
            height: 400px;
            margin: 20px 20px 20px 20px;


        }

        .title2 {
            margin: 0px 20px 20px 20px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

        }


        .desc {
            display: flex;
            align-items: center;
            margin-bottom: 60px;

        }

        .ptitle{
            font-size: 30px;
        }
        .paragraph{
            font-size:20px;
        }

        .desc img {
            width: 600px;
            margin-right: 30px;
            /* 이미지와 텍스트 사이 간격 조정 */

        }


        .comment-box {
            width: 800px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 20px auto 0px auto;


        }

        .mycards {
            margin: 20px auto 0px auto;
            width: 1400px;
            max-width: 1500px;
        }



        .comment-list {
            margin: 20px auto 20px auto;
        }


        .comment-box>h2 {
            text-align: center;
            font-size: 30px;
            font-weight: 300;
            color: #222;
            letter-spacing: 1px;
            text-transform: uppercase;

            display: grid;
            grid-template-columns: 1fr max-content 1fr;
            grid-template-rows: 27px 0;
            grid-gap: 20px;
            align-items: center;
        }

        .comment-box>h2:after,
        .comment-box>h2:before {
            content: " ";
            display: block;
            border-bottom: 1px solid #c50000;
            border-top: 1px solid #c50000;
            height: 5px;
            background-color: #f8f8f8;
        }
    </style>
    <script>
        // 열면 켜지게
        $(document).ready(function () {
            show_comment();
        });
        // POST 방식
        function save_comment() {
            let nickname = $('#nickname').val()
            let comment = $('#comment').val()


            let formData = new FormData();
            formData.append("nickname_give", nickname);
            formData.append("comment_give", comment);

            fetch('/comments', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
                alert(data["msg"]);
                window.location.reload()
            });
        }
        
        //GET 방식
        function show_comment() {
            fetch('/comments').then((res) => res.json()).then((data) => {
                let rows = data['result']
                $('#comment-list').empty()
                rows.forEach((a) => {
                    let nickname = a['nickname']
                    let comment = a['comment']

                    let temp_html = `<div class="card">
                                    <div class="card-body">
                                        <blockquote class="blockquote mb-0" id="blockquote">
                                            <p>${comment}</p>
                                            <footer class="blockquote-footer">${nickname}</footer>
                                            <button id="boxbutton" type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">삭제하기</button>
                                            <!--삭제하기 모달-->
                                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">삭제하기</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                            <div class="mb-3">
                                                <label for="recipient-name" class="col-form-label">닉네임: </label>
                                                <input type="text" class="form-control" id="delnickname">
                                            </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button  type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                                            <button onclick = "del_comment()" type="button" class="btn btn-primary" >삭제하기</button>
                                        </div>
                                        </div>
                                    </div>
                                    </div>
                                    <button id="boxbutton" type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal2" data-bs-whatever="@mdo">수정하기</button>
                                    <!--수정하기 모달-->
                            <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                            <div class="modal-content">
                            <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">수정하기</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                            <form>
                            <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">닉네임: </label>
                            <input type="text" class="form-control" id="editnickname">
                            <label for="recipient-name" class="col-form-label">방명록: </label>
                            <input type="text" class="form-control" id="editcomment">
                            </div>
                            </form>
                            </div>
                            <div class="modal-footer">
                            <button  type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
                            <button onclick = "edit_comment()" type="button" class="btn btn-primary">수정하기</button>
                            </div>
                            </div>
                            </div>
                            </div>
        
                                    </blockquote>
                                        </div>
                                </div>`
                    $('#comment-list').append(temp_html)
                });
            })
        }

        var exampleModal = document.getElementById('exampleModal')
        exampleModal.addEventListener('show.bs.modal', function (event) {

            var button = event.relatedTarget

            var recipient = button.getAttribute('data-bs-whatever')
            var modalTitle = exampleModal.querySelector('.modal-title')
            var modalBodyInput = exampleModal.querySelector('.modal-body input')

            modalTitle.textContent = 'New message to ' + recipient
            modalBodyInput.value = recipient
        })
        //DELETE 방식


        function del_comment() {

let delnickname = $('#delnickname').val()

let formData = new FormData();
formData.append("delnickname_give", delnickname);

fetch('/comments', { method: "DELETE", body: formData }).then((res) => res.json()).then((data) => {

    alert(data["msg"]);
    window.location.reload()
});
}
//PULL 방식
function edit_comment() {
let editnickname = $('#editnickname').val()
let editcomment = $('#editcomment').val()
let formData = new FormData()
formData.append("editnickname_give", editnickname)
formData.append("editcomment_give", editcomment)
fetch("/comments", { method: "PULL", body: formData }).then(res => res.json()).then(data => {
    alert(data["msg"])
    window.location.reload()
})
}
</script>



</head>

<body>
<div class="title1">
<h1>소개위드미</h1>
</div>
<div class="title2" id="title2">
<div class="desc" id="desc">
<img src="https://i.postimg.cc/PqKgCJbd/allteam.png" />

<div class = "descp" id="descp">
    <b class ="ptitle">Team. 코딩위드미</b>
    <p class ="paragraph">
    팀 소개 : 개발자가 되고 싶은 5명이 함께 협업을 배워나가요!<br>
    팀 목표 : 프로젝트 완성! <br>
    팀 약속 : 13:00 ~ 14:00 점심 시간 / 18:00 ~ 19:00 저녁 시간 <br>
    </p>
    <b class ="ptitle">[ 팀 규칙 ]</b>
    <p class ="paragraph">
    다영: 피드백을 요청하면 y/n에 관계없이 확실하게 답변을 준다. <br>
    상우: 누구 한명이라도 모르는 것이 있으면 짚고 넘어간다. <br>
    승현: 모르는 내용이 있다면 제일 먼저 검색해 본다. <br>
    성원: 정보 공유를 잘한다. <br>
    혜민: 모르는 게 있으면 물어보기.
    </p>
</div>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-5 g-5" id="cards-box">
<div class="col">
    <div class="card h-100">
        <img src="https://i.postimg.cc/4x5ZLDB2/t043597jk8v-u055afalu9e-844e26a259ec-512-480.jpg"
            class="card-img-top">
        <div class="card-body">
            <h5>이다영</h5>
            <p>MBTI : INFJ</p>
            <p>프로젝트를 완성하는 날, <br>트랙을 완주하는 날까지<br> 최선을 다하겠습니다!</p>
            <button onclick="window.open('https://verdantjuly.tistory.com/');" type="button"
                class="btn btn-dark">개발 블로그</button>
        </div>
    </div>
</div>
<div class="col">
    <div class="card h-100">
        <img src="https://i.postimg.cc/Pr1dZpZj/t043597jk8v-u053jslhs8k-ece0e600acf6-512-480.jpg"
            class="card-img-top">
        <div class="card-body">
            <h5>이승현</h5>
            <p>MBTI : ENTJ.</p>
            <p>열심히 캠프 참여해서 <br>어엿한 프로그램 <br>개발자로 거듭나겠습니다</p>
            <button onclick="window.open('https://skylionandrabbit.tistory.com/');" type="button"
                class="btn btn-dark">개발 블로그</button>
        </div>
    </div>
</div>
<div class="col">
    <div class="card h-100">
        <img src="https://i.postimg.cc/1391qWsG/t043597jk8v-u051ukhdn83-cdd3648e9c6c-512-480.png"
            class="card-img-top">
        <div class="card-body">
            <h5>우성원</h5>
            <p>MBTI : ISFP</p>
            <p>포기하지않고 꾸준히 <br> 해서 성공한 개발자가 <br>되겠습니다.</p>
            <button onclick="window.open('https://woo-developer.tistory.com/');" type="button"
                class="btn btn-dark">개발 블로그</button>

        </div>
    </div>
</div>
<div class="col">
    <div class="card h-100">
        <img src="https://i.postimg.cc/KY8bd0WG/t043597jk8v-u055gm324au-7084f39e2aa9-512-480.jpg"
            class="card-img-top">
        <div class="card-body">
            <h5>이상우</h5>
            <p>MBTI : INFP</p>
            <p>부트캠프를 수료하여 <br>멋진 개발자로 <br>거듭나겠습니다.</p>
            <button onclick="window.open('https://sangwoorhie.tistory.com/');" type="button"
                class="btn btn-dark">개발 블로그</button>
        </div>
    </div>
</div>
<div class="col">
    <div class="card h-100">

        <img src="https://i.postimg.cc/3JY7pcfn/2023-05-15-22-55-19.png" class="card-img-top">
        <div class="card-body">
            <h5>서혜민</h5>
            <p>MBTI : INFP</p>
            <p>어엿한 개발자가 <br>될 수 있도록 <br>열심히 참여 하겠습니다.</p>
            <button onclick="window.open('https://ex-1008.tistory.com/');" type="button"
                class="btn btn-dark">개발 블로그</button>
        </div>
    </div>
</div>
</div>
</div>

<div class="comment-box">
<h2 class="comment-title">코딩위드미 조 응원하기</h2>
<div class="form-floating mb-3">
<input id="nickname" class="form-control" placeholder="닉네임">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<input id="comment" class="form-control" placeholder="응원 한 마디">
<label for="floatingPassword">응원 한 마디</label>
</div>
<br>
<button onclick="save_comment()" type="button" class="btn btn-outline-dark">저장</button>
<div id="comment-list" class="comment-list" id="comment-list">
<div class="card">
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p>새로운 앨범 너무 멋져요!</p>
            <footer class="blockquote-footer">호빵맨</footer>
            <button onclick="change_comment()" type="button" class="btn btn-dark">수정하기</button>
            <button onclick="delete_comment()" type="button" class="btn btn-dark">삭제하기</button>
        </blockquote>
    </div>
</div>
</div>
</div>

</div>
</body>

</html>

0-4. 모달

알게 된 것

팝업처럼 뜨는 것이다. 부트 스트랩에서 코드 조각을 가져올 수 있다.

 

모달

Bootstrap JavaScript 모달 플러그인을 사용하여 라이트박스, 사용자 알림 또는 사용자 정의 콘텐츠를 만들 수 있습니다.

getbootstrap.kr

1. git : SSH 

알게된 것

SSH 통신(Secure Shell) 을 위해

두개의 키(=암호) 생성

공개키, 개인키

 

다른 사람들이 가로챌 수 없게 암호화된 내용을 깃헙에 보냄

 

Ssh-keygen 공개 생성

 

2. Python : remove 함수

python에서 데이터를 삭제하는 방법이다. 담임 매니저 님께서 삭제 파트에 대한 우리의 고민을 듣고 알려 주셨다.

삭제하려는 인덱스가 아닌 값을 직접 입력한다.

리스트에서 활용할 수 있다.

list.remove(value)

 

 


정리 

flex-direction은 div 생성 방향을 정한다는 뜻이고 column은 그것의 구체적인 방향이다.

flex-direction: row; 옆으로 붙이기

 

혼자서는 발견하지 못하는 실수들을 같이 하면 찾아낼 수 있다. 

 

list.remove(value)

 

소감

완성하기 전까지는 힘든 적도 있었고 그 때문에 더 몰입하게 된 것 같다. 집중해서 집요하게 하다 보면 못할 일이 없다는 것을 알게 되었다. 그리고 함께 했을 때 오류를 더 적게 만들 수 있고 더 많은 일을 할 수 있다는 것을 배웠다. 내가 만약 개발자가 된다면 같이 일하고 싶은 개발자가 되고 싶다. 친절하고, 실력있는 개발자!

 

 

 

 

 

 

'verdantjuly > Today I Learned' 카테고리의 다른 글

TIL 20230518  (0) 2023.05.18
TIL 20230517  (3) 2023.05.17
TIL 20230515  (1) 2023.05.15
TIL 20230514  (1) 2023.05.14
TIL 20230513  (1) 2023.05.13