본문 바로가기
TIL

내일배움캠프 4기_미니프로젝트 3일차 TIL

팽투더이 2022. 11. 16. 21:18
728x90

내일배움캠프 4기_미니프로젝트 3일차 TIL

미니프로젝트 개인페이지&공통페이지

 

📌 마우스 클릭 시, 효과주기

 

이미지를 클릭하면, 효과를 주고 싶어서 class 네임을 지정해주었다.

<body>
	<img class="visualYellow" width="200" src="../static/image/coffee.jpg" alt="yellow">
</body>

 

📌 마우스 이미지 변경

<style>
	.visualYellow {
        cursor: pointer;
    }
</style>

 

📌 마우스 커서 올렸을 때 효과주기

<style>
	.visualYellow:hover {
        box-shadow: 0px 0px 10px 10px #F2B84B;
        border-radius: 10px;
    }
</style>

 

📌 입력된 값 없을 때, 기록 되지 않도록 구현

 

개인페이지 방명록에 입력된 글자 없을 경우, 알람뜨고 기록도 되지 않게 해주기.

처음에 생각한 코드는 input값에서 받아온 value가 ''일 때, 알람을 띄우고 아니면 ajax을 통해 서버 통신하도록 했는데 구동 안된다. 아무래도 if문 안에 ajax 코드를 넣으면 안되는 느낌!

 

그래서 다르게 생각해 아예 ''값이면 알람을 울리고 빈값이 아닐 때의 값만 서버와 통신해 DB에 저장되도록 코드를 수정해봤다. 

<script>
	function save_comment() {
        let name = $('#name').val()
        let comment = $('#comment').val()

        if(name === '' || comment === ''){
            alert('내용을 입력해주세요.')
        } else {
            nameTrim = name.trim()
            commentTrim = comment.trim()
        }


        $.ajax({
            type: 'POST',
            url: '/yellow/homework',
            data: {name_give:nameTrim, comment_give:commentTrim},
            success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        })
    }
</script>

 

이렇게 이름과 응원메세지 둘 중 하나라도 입력하지 않으면 알람을 띄우게 하고

둘 다 입력했으면 trim()명령어로 value값을 다듬은 뒤, data를 서버에 보내는 식으로 작성했다.

📌 검색 기능

 

📄 app.py

# 오색조 멤버 구성 db 삽입
arr = [{'name':"홍길동", 'color':"검정"},
        {'name':"길잡이", 'color':"파랑"},
        {'name':"야미야", 'color':"카키"},
        {'name':"노가리", 'color':"노랑"},
       	{'name':"나야나", 'color':"주황"}]

for i in arr:
	db.ProjectMembers.insert_one(i)

@app.route('/searchMember', methods=["GET"])
def serchMember():
    members_list = list(db.ProjectMembers.find({}, {'_id': False}))
    return jsonify({'membersList':members_list})

이름과 컬러를 입력해 db에 저장하는게 딱히 없어서 임의로 db에 ProjectMembers란 이름으로 데이터를 입력해줬다.

 

📄 index.html

<script>
    $(document).ready(function () {
        // search_Member()
        // window.location.reload()
    });

    function search_Member() {
        let inputName = $('#memberName').val()

        let getName
        if(inputName === ''){
            alert('이름을 입력해주세요')
        } else {
            getName = inputName.trim()
        }

        $.ajax({
            type: "GET",
            url: "/searchMember",
            data: {},
            success: function (response) {
                let rows = response['membersList']
                // console.log(rows)

                // var flag = new Boolean();
                let flag = false
                let color
                let name
                for(let i=0; i<rows.length; i++){
                    let cur_name = rows[i]['name']
                    let cur_color = rows[i]['color']

                    if(cur_name === getName) {
                        name = cur_name
                        color = cur_color
                        flag = Boolean(true)
                        break
                    }
                }

                // console.log(flag)

                if(flag) {
                    alert(`${name}님은 오색조 ${color}멤버입니다.`)
                } else {
                    alert(`${getName}님은 오색조 멤버가 아닙니다.`)
                }

            }
        });
    }
</script>

 

 

📌 git push 에러

 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://id:pw@github.com/.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.

내가 만든 index.html 파일을 main 페이지로 쓴다고 main(master)에 파일을 올려달라고 해서 시도.

그런데!! 에러가 떠서 너무 당황스러웠다.

 

검색해보니, repository에 있는 파일 가져오기 한 뒤에 다시 push하라는 글이 많아서 시도!

git pull master origin

 

이렇게 하니, yellow폴더에 있던 저의 작업물이 없어지고 기존에 main(master)에 있던게 제 폴더에 들어왔습니다.

작업용 폴더하나, git 업로드용 폴더 하나 이렇게 따로따로 폴더 관리하는게 좋을 거라는 생각이 듭니다.

 

git branch로 main인지 확인 후, add, commit 진행

git branch -M main 기존의 branch이름이 있더라도 덮어쓰고 main으로 이름 변경

git 저장소에 모두 commit한 뒤에 push전에 remote로 올릴 깃 ssh 설정

 

git remote add [원격저장소 이름] [깃주소]

git push -u [원격저장소 이름] [branch]
git push -u [원격저장소 이름] main

처음에 원격저장소 이름을 origin이라고 했는데 이미 있다고 안된다고 해서 그냥 임의로 dbyeon하니깐 연결되었다.

그리고 master이름을 main으로 변경했기때문에 원격저장소이름 다음에 main을 적어줬다.

 

그냥 git push와 git pull을 하면, 원격저장소 master로 연결된다는데, 다음에 시도해 봐야 겠다.

 

📌 git 저장소 에러

fatal: 'master' does not appear to be a git repository 
fatal: could not read from remote repository. 
please make sure you have the correct access rights and the repository exists.

이럴 경우, 현재 주소를 해제 후 재연결~

git remote -v

git remote remove [원격저장소 이름]

// 저장소 삭제한거 확인
git remote -v

✏️ 느낀점

 

오늘은 오전에 조원들과 간단하게 회의와 튜터님의 점검 후, 개인페이지 기능 추가 + 공통페이지 구성을 해보는 시간을 가졌다.

 

Git branch에 팀원들이 올린 코드 참고해 CSS 기능을 조금 추가해봤다.

그리고 대망의 나의 소개페이지 내용을 작성하는 시간을 가졌다. 무슨 사진을 넣어야 할꼬..

 

다들 어제 늦게까지 접속해 있어서 그런가? 오늘 아침 접속이 늦었다 ㅠㅠ

페이스 관리를 잘해야 하는 것 같다. 집중할 때 집중하고, 쉴 때 알아서 쉬어야 하는 것 같다.

말그대로 캠프니깐!! 뭐,, 회사 생활도 마찬가지일 듯하다.

 

 

저작자표시

'TIL' 카테고리의 다른 글

내일배움캠프 4기_개인진도 7일차 TIL  (0) 2022.11.22
내일배움캠프 4기_개인진도 6일차 TIL  (0) 2022.11.21
내일배움캠프 4기_미니프로젝트 4일차 TIL  (1) 2022.11.17
내일배움캠프 4기_미니프로젝트 2일차 TIL  (0) 2022.11.15
내일배움캠프 4기_미니프로젝트 1일차 TIL  (0) 2022.11.14

'TIL' Related Articles

티스토리툴바