TIL_2023_09_19

이종현·2023년 9월 19일
TodayILearned
0

Today_I_Learned

목록 보기
89/145
post-thumbnail

Today 요약

  1. 모던 자바스크립트 Deep Dive 정리
  2. 모바일 반응형 웹 강의
  3. 슈퍼코딩 과제

1. What I did?

1.1 모바일 반응형 웹 강의 다시 듣기

기존에 들었었던 모바일 반응형 웹 강의를 다시 들어봤다. 기존에는 flask로 서버를 만들어서 프론트와 통신하게 하고 몽고 DB로 데이터베이스를 생성한 것과 연동시키는 부분에 대한 것이였는데, 처음에 할 때는 제대로 해결을 하지 못했었다. 그랬다가 오늘 다시 보면서 제대로 크롤링 해오지 못하거나 서버 코드를 잘못 작성하거나 서버와 통신하는 프론트 코드(fetch 부분)에서 잘못된 부분을 받아오는 등의 삽질을 몇 번 하고 나서야 해결을 완료했다.

내일은 오늘 배운 걸 토대로 나머지 강의 부분을 참고해서 복습해보도록 해보자.

2. What I Learned?

2.1 CSS 애니메이션

애니메이션을 적용하는 두 가지 방법에 대해서 공부했다.

animation

delay, direction, duration, fill-mode iteration-count, name, play-state, timing-function의 순서대로 한 번에 설정하는 것도 가능..

  • delay : 지연시간 (설정해놓은 시간 뒤에 애미메이션 실행)
  • direction: 방향
    • normal, reverse, alternate, alternate-reverse
  • duration: 애니메이션의 지속 시간
  • fill-mode: 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
    • none, forwards, backwards, both
  • iteration-count: 애니메이션 시퀀스가 중지되기 전에 재생되어야 하는 횟수를 설정 (반복)
  • name: keyframes 이용해서 애니메이션의 이름을 등록해서 사용
  • play-state: paused 하든지, running 하든지
  • timing-function: 애니메이션의 동작 타이밍을 결정
    • linear
    • ease-in-out
    • steps(n, end)
    • cubic-bezier(0.1, -0.6, 0.2, 0);

transition

transition: property timing-function duration delay | initial | inherit;
  • property : transition을 적용시킬 속성을 정합니다.
    • none : 모든 속성에 적용하지 않습니다.
    • all : 모든 속성에 적용합니다.
    • property : 속성을 정합니다. 여러 개의 속성을 지정할 경우 쉼표로 구분합니다.
    • initial : 기본값으로 설정합니다.
    • inherit : 부모 요소의 속성값을 상속받습니다.
  • timing-function : transition의 진행 속도를 정합니다.
    • 기본값은 ease입니다.
    • ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )과 같습니다.
    • linear : cubic-bezier( 0, 0, 1, 1 )과 같습니다.
    • ease-in : cubic-bezier( 0.42, 0, 1, 1 )과 같습니다.
    • ease-out : cubic-bezier( 0, 0, 0.58, 1 )과 같습니다.
    • ease-in-out : cubic-bezier( 0.42, 0, 0.58, 1 )과 같습니다.
    • step-start : steps( 1, start )와 같습니다.
    • step-end : steps( 1, end )와 같습니다.
    • steps( n, start|end ) : n단계로 나누어서 변화시킵니다. start 또는 end를 입력하지 않음녀 end로 처리합니다.
    • cubic-bezier( n, n, n, n ) : n에는 0부터 1까지의 수를 넣습니다.
    • initial : 기본값으로 설정합니다.
    • inherit : 부모 요소의 속성값을 상속받습니다.
  • duration : transition의 총 시간을 정합니다.
  • delay : transition의 시작을 연기합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

이런 속성들을 이용해서 하나는 keyframes를 이용해서 해보고 하나는 transition으로 구현해서 확인해봤다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Animation</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        margin: 20px;
      }

      .box1 {
        background-color: yellow;
        animation: 1s linear slidein;
      }

      .box2 {
        background-color: green;
        animation: 1s reverse both 2 steps(3, end) slideReverse;
      }

      .box3 {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rebeccapurple;
        transition: ease-in-out 3s;
      }

      .box4 {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(148, 203, 188);
        transition: steps(5, end) 1s;
      }

      .clicked {
        width: 200px;
        height: 200px;
        background-color: blanchedalmond;
        border-radius: 50%;
      }

      .clicked2 {
        transform: translate(50px, -150px);
      }

      @keyframes slidein {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(50px);
        }
        100% {
          transform: translateX(100px);
        }
      }

      @keyframes slideReverse {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(50px);
        }
        100% {
          transform: translateY(100px);
        }
      }
    </style>
  </head>
  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3">Click Me!</div>
    <div class="box box4">Click Me!</div>
    <script>
      const box3 = document.querySelector('.box3')
      box3.addEventListener('click', () => {
        box3.classList.add('clicked')
      })

      const box4 = document.querySelector('.box4')
      box4.addEventListener('click', () => {
        box4.classList.add('clicked2')
      })
    </script>
  </body>
</html>

2.2 프레임워크 vs 라이브러리

두 개의 차이점은 제어의 흐름이 어디 있는지가 가장 중요한 것 같다. 제어의 흐름이 프레임워크에 있는 걸 제어의 역전이라고 표현하고, 두 가지는 장단점이 있는 것 같다. 대표적인 프레임워크 Next.js만 해도 어느 정도 까지는 프레임워크로 틀을 잡아두고 개발하는 게 편리하다는 장점도 충분히 존재하기 때문이다.

나중에 개발을 더욱 디테일하게 잘하게 되면 프레임워크의 한계가 분명히 존재하기 때문에 리액트 같은 라이브러리로 커스텀해서 사용하게 될지는 모르겠지만, 현재는 프레임워크로도 충분히 기능적으로 구현할 수 있기 때문에 실용적으로 프로그래밍하려면 가급적 Next 같은 프레임워크를 사용할 것 같다.

2.3 css box-sizing

box-sizing 두 가지 content-box와 border-box의 차이점에 대해서 정리하기 위해 코드를 작성하고 직접 어떻게 차이가 나는지 비교했다.

content-box는 witdh가 100px에 추가적으로 padding과 border가 추가된다면 border-box는 width가 100px이면 padding과 border를 포함하면서 100px로 정해지는 차이가 있다.

내가 알기로는 border-box를 많이 사용하는 것으로 알고 있다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="box-sizing.css" />
    <title>Box-Sizing</title>
  </head>
  <body>
    <div class="content-box" style="box-sizing: content-box"></div>
    <div class="border-box" style="box-sizing: border-box"></div>
  </body>
</html>
.content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 5px solid black;
  background-color: yellow;
}

.border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
  border: 5px solid black;
  background-color: green;
}
profile
이종현
데이터리터러시를 중요하게 생각하는 프론트엔드 개발자
이전 포스트

TIL_2023_09_18

다음 포스트

TIL_2023_09_20

0개의 댓글