학습내용

1. 미니프로젝트 개인페이지 수정
2. Github 토큰 설정 및 사용법

미니프로젝트 개인페이지 수정

HTML/CSS

1. 맨위로가기 버튼 생성
2. 뒤로가기 버튼 생성

둘 다 Font awesome을 사용해서 포인트를 줬다.

기능

방명록 역순 정렬

구현 이유

최근에 작성된 방명록을 보려면 스크롤을 내려야하므로 가장 최근에 작성된 방명록이 최상단에 보이도록 역순 정렬 기능을 추가

구현 방법

정렬함수 sort() 안에 비교함수를 넣어서 내림차순 정렬 적용

💡 토막상식
배열은 순서를 갖고 있지만 객체는 순서가 없다. 정렬할 데이터가 객체에 해당된다면 배열과는 다른 접근이 필요하다.

1. 정렬 기준 데이터 선택
   👉🏻 방명록이 작성된 날짜와 시간을 토대로 정렬할 예정이므로 해당 데이터가 들어있는 date를 선택

2. sort() 함수 적용 위치 선택
   👉🏻 for문부터는 데이터를 받아와서 붙이는 단계에 해당. 그러므로 for문 전에 데이터를 역순으로 정렬하는 과정을 완료하고 역순 정렬이 적용된 데이터를 for문으로 전달

3. sort(비교함수) 적용
   👉🏻 기존 순서로 정렬된 rows에 sort()를 적용해서 rowsReverse라는 변수에 담아 for문에 적용

        function show_guestbook() {
            $('#guest-list').empty()
            $.ajax({
                type: "GET",
                url: "/yun/guestbook",
                data: {},
                success: function (response) {
                    let rows = response['guestbooks']
                    let rowsReverse = rows.sort(
                        function(a, b){
                            if (a.date > b.date) return -1;
                            else if (b.date > a.date) return 1;
                            else return 0;
                        }
                    )

                    for (let i = 0; i < rowsReverse.length; i++) {
                        let guest = rowsReverse[i]['guest']
                        let read = rowsReverse[i]['read']
                        let num = rowsReverse[i]['num']
                        let name = rowsReverse[i]['name']
                        let date = rowsReverse[i]['date']


                        let newGuest = ``
                        if (read == 0) {
                            newGuest = `<div class="guestbookList">
                                                <div>
                                                    <p>${guest}</p>
                                                    <div class="guestInfo">
                                                        <button class="readBtn" onclick="read_guestbook(${num})">🤍</button>
                                                        <span class="user">${name}</span>
                                                        <span class="date">${date}</span>
                                                        <span onClick="remove_guestbook()" id="trash">🗑</span>
                                                    </div>
                                                </div>
                                        </div>`
                        } else {
                            newGuest = `<div class="guestbookList">
                                                <div>
                                                    <p>${guest}</p>
                                                    <div class="guestInfo">
                                                        <span class="user">🖤 ${name}</span>
                                                        <span class="date">${date}</span>
                                                        <span onClick="remove_guestbook()" id="trash">🗑</span>
                                                    </div>
                                                </div>
                                        </div>`
                        }

                        $('#guest-list').append(newGuest)
                    }
                }
            });
        }

참조한 내용
[생활코딩] JavaScript - Word Counter 7: JS배열의 정렬 방법
[생활코딩] JavaScript - Word Counter 8: 단어의 빈도에 따라 정렬
JavaScript - 배열 정렬 방법 (오름차순, 내림차순)

감사합니다 저의 은인이세요

방명록 삭제 기능 만들다가 안풀려서 쉬운 것부터 하자! 하고 먼저 한 건데 전혀 쉽지 않았다 ㅎ......... 거의 반나절이 걸렸다. 하필이면 면담날이라 튜터님들에게 질문할 틈이 없어서 혼자 고민하느라 머리가 빠개질 뻔 했다. 결국 스스로 해결했기에 그만큼 더 뿌듯하기도 하지만! 아마 발표 때 마음에 드는 함수 이걸로 할 것 같다.

개발자한테는 수학적인 능력이 중요하다고들 하는데 html/css만 만질 때는 그 이유를 몰랐다. 그보다는 영어가 훨씬 중요하다고 생각했다. 자바스크립트를 다뤄보니 알 것 같다. 문제를 접근할 때는 논리적인 사고가, 논리를 바탕으로 코드를 구현할 때는 수학적인 접근이 필요하다. 논리는 자신 있는데 수학은 자신이 없어서 앞으로 험난한 길이 예상된다... 당장 비교함수만 해도 핵심 원리는 이해하는데 디테일한 원리는 잘 이해가 안간다. 설명을 열심히 읽고 또 읽어도 말장난 같다 ^^.... 시간적 여유가 있을 때 수학 공부를 하면 좋을 텐데 현시점에서는 자바스크립트를 공부하는 게 훨씬 효율적이라 수학은.....나중에

---

Github

토큰 설정하기

에러

git push origin master -> fatal: Authentication failed for ~

원인

기존에 사용하던 토큰이 만료됨

해결

새로운 토큰 생성하기

1. Github - 상단 우측 프로필 사진 - Settings
2. 좌측 메뉴 하단 Developer settings
3. Personal aceess tokens - Tokens (classic)
4. Generate new token - Generate new token (classic)
5. Note 이름 설정 - repo에 체크 - 하단 Generate token라고 적힌 초록색 버튼
6. 생성된 토큰 메모장에 저장(해당 페이지를 나가면 열람 불가)

토큰 사용하기

1. 터미널 실행 - 깃헙과 연결된 로컬 저장소 진입
2. git config --global credential.helper cache
3. cd .git - vim config
4. url 형식을 https://(github user id):(토큰)@(기존에 있던 url) 로 변경(변경 전에 i를 먼저 눌러야 문서를 편집할 수 있다.)
5. esc키 - :wq

github 사용하기

1. 로컬저장소에서 git init
2. git add (업로드할 파일)
   모든 파일을 업로드 하고 싶다면 git add .
3. git status로 파일이 스테이지에 업로드 되었는지 확인
4. git commit -m "커밋메시지" - git log로 커밋 내역 확인
5. 연결할 repositrory의 https 복사
6. git remote add origin (https 링크)
7. git remote -v로 연결 확인
8. git push origin master

이 이후로 새로운 파일을 push 할 때는 5~7 과정을 생략한다.

원래는 오늘내로 방명록 삭제 기능도 넣는 게 목표였는데 방명록 역순 정렬에서 생각보다 시간을 많이 잡아먹기도 했고, 저녁 먹고서는 내배캠 게임에 참여 하느라 완성하지 못했다. 다행인 것은 문제를 어떤식으로 접근해야 하는지 알았다는 것! 팀장님께서 Date.now()로 자체id를 받아와 데이터를 관리하는 방법을 알려주졌다. 로직을 알았으니 아마 내일 오전 중으로 해결할 듯 싶다. 혼자 했다면 또 몇날 며칠을 고민하고 막막했을 텐데 팀원분들이 있어서 다행이다. 나도 팀원분들에게 도움을 줄 수 있는 인재가 되어야지.