[TIL] 21.11.05 항해 5일차

Today I Learned

항해 5일차 TIL

(2021.11.05)

---

 

오늘 일정 / 계획

1. 17:00 spring QnA
2. 24:00 프로젝트 제출
3. 페이지 상단으로 올리는 아이콘 넣기
4. git / github공부
5. PG배포 및 영상 찍어서 제출하기

 

새로 학습한 내용

• 오늘도 git과 github에서 엄청 헤맸다. 지금까지는 브런치에 커밋을 하고 있었는데 유튜브에서 깃 강의를 보고 우리조 깃허브를 보니 나만 fork가 없었다. 인터넷에 찾아보니 초간단하게 fork라는 글자만 클릭하면 되는것!! 그리고 터미널에서 기존의 저장소를 동기화 한 후 다시 pull, push 하니 pull requests 성공!!! fork한 깃허프 저장소와 원본의 저장소를 동기화 하는 방법은 아래 블로그를 참고했다.

      =>https://hyunjun19.github.io/2018/03/09/github-fork-syncing/

 

 

fork

• 상단으로 올라가는 아이콘은 전에 스타벅스 메인페이지 클론코딩할 때 사용했던 것을 가져왔다. 아이콘, gsap, rodash를 이용해서 만든 상단으로 올라가는 아이콘. logdash를 이용해 스크롤이 상단에 있을 때는 아이콘이 안보이고, 밑으로 갔을 때보인다.

<!-- CDN -->

<!-- 아이콘 -->
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
<!-- GSAP & ScrollToPlugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"
        integrity="sha512-2fk3Q4NXPYAqIha0glLZ2nluueK43aNoxvijPf53+DgL7UW9mkN+uXc1aEmnZdkkZVvtJZltpRt+JqTWc3TS3Q=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/ScrollToPlugin.min.js" integrity="sha512-pejU3r+QqP9FinPBc7gRHMjcI5MUoiGSyiJNHuFKJOAls/cucff3Z931FwmB6pMRkFxBnq8DGEpmn4xjBqpPpA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--rodash.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
#to-top {
    width: 52px;
    height: 52px;
    background-color: #005a0b;
    color: white;
    border: 2px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9;
}
</style>


<div id="to-top">
    <div class="material-icons">arrow_upward</div>
</div>

//상단으로 올라가는 아이콘
window.addEventListener('scroll', _.throttle(function () {
    console.log(window.scrollY);
    if (window.scrollY > 500) {
        //버튼 보이기
        gsap.to('#to-top', .2, {
            x: 0
        });
    } else {
        //버튼 숨기기
        gsap.to('#to-top', .2, {
            x: 100
        });
    }
}, 300));
// _.throttle(함수, 시간)

const toTopEl = document.querySelector('#to-top');
toTopEl.addEventListener('click', function () {
    gsap.to(window, .7, {
        scrollTo: 0
    });
});

잘한 점 / 아쉬운 점 / 느낀점

• 오늘의 잘한점은 결국 pr을 해냈다는 것과 시간 내에 제출했다는것!!!! 마음편히 잘 수 있어 너무 좋다. 주특기를 아직 선택하지 못했다는게 조금 마음에 걸리지만 그것은 내일까지 시간이 있으니 내일고민으로 패쓰~
• 이렇게 완성한 우리팀 프로젝트! 다이어트 레시피 공유하는 가벼운 식탁!

      => http://light-table.shop/

메타태그는 미처 신경쓰지 못해 시작페이지 이미지로 대처!

 

이용 영상입니다!