항해 9일차 (TIL) / CSS,부트스트랩

1주차 풀스택 프로젝트가 끝났다. 진짜 고생많았고 많이 배우는 시간이였다. 오늘은 css작업을 하면서 배웠던것들을 정리해보겠다!

이번 프로젝트 메인업무

오늘의 문제

1. logout 함수가 작동이 되지않는 안타까움을 경험했다. onclick버튼에 함수를 적용하였고 JWT토큰을 가져왔는데 

$.removeCookie가 작동되지 않았다. 

 

2.css 를 부트 스트랩을 이용해서 디자인 하며 색과 배경등을 바꾸고 싶었다.

 

3. GET,POST 방식을 이용해서 DB를 호출하고 저장하는 방식에 혼돈이 왔다.

 

문제에 대해 몰랐던점과 시도한점

1. logout 함수는 작동되지 않았던 이유가 login.html > main.html 로 넘어오면서 토큰이 전달되는 방식인데 main.html이 아닌 다른지정으로 이동하여 오류가 발생했던것 같다. 그래서 html 위치를 변경도 하였고 페이지내에 있는 URL 위치를 변경해보았지만 작동 되지않아 다른방법을 찾아보려한다.

 

2. css를 변경하기 위해선 양식과 틀 ,즉 부트 스트랩 내에 정의된 함수를 style 안에 넣어줘야한다는 점을 인지하였고

그로인해 배경(https://getbootstrap.com/docs/4.3/utilities/colors/),

버튼색상 바꾸기(https://ittrue.tistory.com/50),

글자색상 바꾸기( https://nowonbun.tistory.com/524,https://getbootstrap.com/docs/4.3/utilities/colors/ ),

글자크기 바꾸기(https://www.codingfactory.net/10544)

콘텐츠 위치조정( http://bootstrapk.com/css/, https://hianna.tistory.com/675)

width 조정의 예(<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>) 

하이퍼링크 새탭으로 열기

<p>Check out <a href="https://www.freecodecamp.org/" target="_blank" rel="noopener noreferrer">freeCodeCamp</a>.</p>

 

3. get,post 방식은 웹종반에서 이미 충분히 배웠다고 생각했는데 순서대로 하려니까 충돌이 일어나는 부분이 조금씩 생겼다.

 

문제를 어떻게 해결하였는지?

1. logout 함수는 작동되지 않았던 이유가 그게 아니였던것 같다. jwt토큰 자체가 문제였던것 같은데 조금더 수정이 필요한것 같다. 해결 못함,,,, ㅜㅠㅠ

 

2.

<div class=writing-box id="board_write">
    <!-- <h3 id='nickname'>닉네임 : </h3> -->
    <div id="write_area">
        <form enctype="multipart/form-data" action="write_ok.php?board_id=<?echo $board_id;?>" method="post">
            <div class="mb-3">
                <A href="https://www.kyobobook.co.kr/" target="_blank" rel="noopener noreferrer">
                    <div class="ky">
                        <img src="https://mblogthumb-phinf.pstatic.net/20160921_44/ppanppane_14744296135275Iv6a_PNG/%B1%B3%BA%B8%B9%AE%B0%ED_%B7%CE%B0%ED_%281%29.png?type=w800"
                             style="width:150px; height:150px;">
                    </div>
                </A>
                <label for="url" class="w-100 h-1 p-3 say form-label">:녹색_책:교보문고를 눌러서 책주소를 알려주세요:녹색_책:</label>
                <P>
                    <button class="btn btn-primary" type="button" disabled>
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        https://product.kyobobook.co.kr/detail/S000000000000
                    </button>
                    <input id="url" type="email" class="form-control" placeholder="예시와 같이 작성해주세요◕‿◕">
            </div>
            <div class="mb-3">
                <label for="reviewcomment" class="form-label">:녹색_하트:리뷰를 작성해주세요:녹색_하트:</label>
                <textarea class="form-control" id="reviewcomment" rows="8" placeholder="코멘트를 작성해주세요✏"></textarea>
            </div>
            <div class="reviewbtns">
                <button onclick="posting()" type="button" class="btn btn-outline-dark text-light"
                        style="background-color:#20c996b4;">저장하기
                </button>
                <button onclick="redirectMyPage()" type="button" class="btn btn-outline-dark text-light"
                        style="background-color:#2ed6a4" ;>취소하기
                </button>
            </div>

코딩으로 확인하쟈~

 

3.

HTML

function show_comment() {
        $('#comment-list').empty()
        $.ajax({
            type: "GET",
            url: "/comment/show",
            data: {},
            success: function (response) {
                let rows = response['comments']
                for (let i = 0; i < rows.length; i++) {
                    let comment = rows[i]['comment']
                    let temp_html = `

                    <div class="comments" id="comment-list">
                    <p>${comment}</p></div>`
                    $('#comment-list').append(temp_html)
                }
            }
        });
}

function save_comment() {
    let comment = $('#comment').val()
    $.ajax({
        type: "POST",
        url: "/comment/write",
        data: {comment_give: comment},
        success: function (response) {
            alert(response["msg"])
            window.location.reload()
        }
    });
}

API 

@app.route("/comment/show", methods=["GET"])
def comment_show():
    comment_list = list(db.comment.find({},{'_id':False}))
    return jsonify({'comments':comment_list})


@app.route("/comment/write", methods=["POST"]) # id, comment
def comment_save():
    comment_receive = request.form["comment_give"]
    doc = {
        'comment': comment_receive,
    }
    db.comment.insert_one(doc)
    return jsonify({'msg': '댓글 등록 완료!'})

 

오늘 알게된점

프로젝트를 하다보면 다양한 일과 어려움이 있다. GIT 연동문제, 코딩 지식 부족, 소통오류 등 하나부터 끝까지 전~~~~부 배우고 알게된 점인것 같다. 항해의 장점이 그런것같다. 다른 부트캠프들은 가르쳐주고 숙제를 해오는 식인데 항해는 벌써 프로젝트를 진행하면서 생기는 문제점들을 미리 인지시켜주는것같다. 기술적으로 당연히 미숙하니까 혼자 더 공부하게 만들고 더 앎을 갈급하게 만드는 것같다. 사실 이런 마음은 어디에서도 필요하지만 유독 이번 프로젝트를 통해 많이 깨닳았다. 어떤일이던지 이렇게 하면 성공할수 있다고 생각하는데 그게 코딩이여서 너무 다행이고 나중에 내 사업을 할때에도 지금하는 경험들이 많은 도움이 될것같아 벌써 기대된다. 난 이 과정이 끝날때까지 최선을 다할것이다. 화이팅!