항해 99 5기 TIL_2

▶ Today I Learned

 

<Bulma>

 

장점

1) 부트스트랩과 달리 순수 css로 이루어져 있다.

2) 사용법이 부트스트랩보다 훨씬 더 직관적

3) 예쁜 디자인이 많다.

 

확실히 표현이 부트스트랩에 비해 직관적이었다. 간혹 색깔을 파란색으로 바꾸고 싶으면 class = "is_red"와 같은 식이었다.

앞으로 자주 활용해보아야겠다 ㅎㅎ

 

<해시함수>

 

알고리즘의 한 종류, 임의의 데이터 값을 받아 고정된 길이로 된 임의의 값으로 변환해줌

 

<JWT(JSON Web Token)>

 

JSON으로 된 객체를 이용하여 정보를 안정성있게 전달해주는 웹 표준 토큰, 로그인 시 주로 사용하는 듯 하다.

 

<Payload>

 

전송되는 데이터를 나타낼 때 주로 쓰는 표현

 

<Github>

 

예전에 드림코딩 엘리님의 Git강의를 들은 적이 있어 커밋까지는 할 수 있었으나

한동안 사용하지 않아서 간만에 사용하려니 힘이 들긴했다.

한시간 반 동안 삽질한 결과 git init부터 커밋 후 pull request까지 해봄으로써 팀원들과 협업 시 어떻게 사용해야하는지 간략히 알게되었다.

삽질에는 git push origin <branch명> 당시 Authentication failed가 있었다. 알고 보니 깃헙에서는 커밋을 위해 Personal access token을 만들게 했었는데 그것으로만 인증이 가능했었고 난 비밀번호만 입력했기 때문에 발생한 문제였다. 과거에는 비밀번호로도 로그인이 되었지만 몇 개월 전부터 토큰 키로만 인증이 된다고 공식블로그에 나와있었다. 과거에 발급한 것은 내가 90일 후 만료되도록 설정한 것이었고 기억이 나지 않은 덕분에 시간을 많이 잡아먹었다.

 

그래도 이렇게 머리를 싸매며 사용해본 결과 확실히 좀 더 감이 잡힌 듯 하다.

이후 사요은 점차 순조로워 질것으로 보인다.

 

<프로젝트 구현해야할 기능>

 

사용자 게시글을 DB에서 AJAX로 요청해 SSR로 받아오기 (게시글을 받아오기 전에 테스트로 값을 먼저 alert 해보려 했다.)

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

function postingArticles() {

    $.ajax({
        type: "GET",
        url: '/api/sending',
        data: {},
        success: function (response) {

            let postings = response['all_postings'];

            let title = postings['title']
            let channel_title = postings['channel_title']
            let url = postings['url']
            let image = postings['image']
            let comment = postings['comment']

            alert(title,channel_title,url,image,comment)
        }
    })
}

 

서버 측에서 등록된 게시글을 보내는 코드

 

# 등록된 글 보내기
@app.route('/api/sending', methods=['GET'])
def mainPosting():
    postings = list(db.dbsparta.find({},{'_id': False}))
    return jsonify({'all_postings': postings})

 

둘 다 알맞게 작성하였고 코드 실행 결과 홈페이지 상에서 입력 시 DB까지는 데이터가 잘 전달되었다.

그래서 위 코드로 등록된 글을 내보내려 하였으나 어째서인지 작동하지 않았다.

IDE상에선 별다른 에러가 없었고 콘솔창에서는 받아오는 값들은 undefined로만 나오고 있어 '서버 측 -> 클라이언트 측 ' 해당 구간 문제이거나 '클라이언트 AJAX response -> response의 세부 값들' 구간에서 발생하는 문제라고 생각한다.

 

하지만 둘의 url을 통일시키되 기존의 것들과 다르게 바꾸어 보거나 겹치게도 바꾸어보고(ex: '/' ) 오타나 빠진 문자기호는 없는지, db리스트 내 입력이 잘못되었는지 등 많은 고민을 해보았지만 여전히 문제는 해결되지 않고 있다.

코드를 애초에 잘못 짠 것인지 생각해보아도 기존에 성공적으로 실행된 코드에서 따온 것이었고 서로 비교해보며 틀린 부분이 없는지 확인해보았지만 발견하지 못했다. 우선은 보류해두고 다른 기능들을 먼저 구현해야겠다.

시간이 많이 남지 않아서도 있지만, 지금 당장 해결이 안되어도 다른 시점에 다른 관점으로 보다보면 해결책이 보이기도 하기 때문이다.

보류하는 사이 다른 일을 할 수도 있으므로 효율적인 방식이라고 생각한다 :3

 

(이 외에도 메인 페이지 내 많은 기능들과 css를 구현하고자 고민을 하였지만 제대로 된 것이 없어 우선은 생략한다.)

 

▶ 느낀 점

하루종일 고민하고 구글링하고 강의자료를 참고하여도 쉽사리 문제 해결의 실마리를 발견하지 못했다. 간혹 발견하더라도 알맞게 사용하지못했고 알맞게 사용한 코드 마저도 잘 실행되지 않아 많은 시간과 노력을 쏟았다. 그러다보니 집중력이 흐려지는 순간도 있고 어제 배운 기능이 어떻게 작동되는 건지 갑자기 생각이 나지않아 진땀을 흘리기도 했다. 패닉에 빠져 머리가 새하얀 기분을 오랜만에 느껴보는 듯 하다.

팀원 분들은 차근차근 척척 해결해나가시는 반면 나는 진전이 크게 없는 것 같아 죄송한 마음도 들었다. 매우 막막한 것이 어떤 기분인지 제대로 느껴 힘들었다.

 

하지만 힘든 와중에도 재밌긴 하더라. 코딩을 하다보면 저절로 몰입을 하게되기도 하고 문제를 해결해나가는 과정이 왜인지 모르게 재미있었다. 또 끝까지 붙잡은 문제가 한 가지 해결되었을 때의 쾌감은 매번 느껴도 새롭고 매우 기쁜 일이다. (내가 이렇게 똑똑한가 라는 자뻑에 빠지기도 하고...ㅎㅎ 사실 간단한 문제였지만.)

 

비록 힘들었어도 내일도 열심히 해야지!

처음부터 잘하는 사람은 없으며 분명히 성장해나갈 것이라고 생각한다.

오늘 하루도 고생 많았다, 내 자신 :)

 

▶ 공부 시 참고 링크들

 

http://melonicedlatte.com/web/2020/01/14/205200.html

페이로드(payload)란? 개념 설명 - Easy is Perfect

 

 

https://upcake.tistory.com/142

1. Ajax 기초 문법