못생긴 기본 스타일을 제거해보자

1
2
3
4
5

a,
button,
input {
  all: unset;
}

예전의 삽질들…

• https://chinsun9.github.io/2020/10/08/a-tag-no-color/
• https://chinsun9.github.io/2020/11/03/li-point-remove/
• https://chinsun9.github.io/2020/12/15/input-number-화살표-없애기/

참고

• https://developer.mozilla.org/ko/docs/Web/CSS/all

• https://ngrok.com/download
• 포트포워딩없이 서버 외부에 공유하기
• https로 열어준다
• 너무 간단하다
• zip 받아서 원하는 곳에 풀고,

1

ngrok http 3000

• path 환경변수 등록해서 어디서든 cli에서 실행할 수 있다

• 근데 이거보다 더 쉬운 localtunnel이 있다

대안 ; localtunnel

1

npx localtunnel --port 3000

• 포트만 설정해주면 끝

참고

• localtunnel ; https://github.com/localtunnel/localtunnel
• https://www.softwaretestinghelp.com/ngrok-alternatives/
  • ngrok의 대안들

• 커스텀 로딩 아이콘을 만들 수 있다
• gif, svg, css, png, apng 등 여러 형식을 지원한다

• css로 받으면 html, css 코드 스니펫을 주는데, 너무 신기하다 ㅋㅋㅋ

참고

• https://loading.io/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

let controller;

const fetchData = async (pram) => {
  try {
    console.log(`fetchData`);
    if (controller) controller.abort();
    controller = new AbortController();
    const { signal } = controller;

    const res = await fetch(`${API_END_POINT}/${pram}`, { signal });

    if (!res.ok) {
      throw new Error('no ok error');
    }

    return await res.json();
  } catch (error) {
    throw new Error('server error');
  }
};

• AbortController를 사용해서 기존에 요청이 있으면
• 취소하고 새로운 요청을 보내는 예제이다

• 버튼을 눌러서 fetchData를 실행시킨다고 하자
• 유저가 빠르게 버튼 10번을 눌러서 fetchData가 10번 실행되었다
• 이런 입력에 대한 아무런 방지를 않았으면, fetch 결과에 대한 콜백이 10번 실행될 것이다
• AbortController을 사용하면 버튼을 연속적으로 누르더라도 콜백이 마지막 결과에 대해서만 한번 동작할 것이다
• 하지만 AbortController를 사용한다고 해서 API를 콜하는 비용이 덜 드는 것은 아니다
• 단순히 해당 fetch에 대한 결과를 핸들하지 않겠다는 것이기 때문에,
• 지금의 예처럼 동일한 API를 중복해서 호출하는 것을 막기 위해서는
• 최초에 버튼을 누르면 버튼을 비활성화하는 것이 좋다

참고

• https://developer.mozilla.org/ko/docs/Web/API/AbortController/abort

• defer이 먼저 실행된다

defer 여러개 실행 순서

1
2

<script src="./defer.js" defer></script>
<script src="./defer2.js" defer></script>

• 여러개의 defer가 있으면 위에서 아래로 순서대로 실행된다
• defer.js 실행 -> defer2.js 실행

async와 DOMContentLoaded는 서로 무관하다

• DOMContentLoaded 먼저 실행될수도 async가 먼저 실행될수도 있다

참고

• https://ko.javascript.info/script-async-defer

https://css-tricks.com/the-complete-guide-to-lazy-loading-images/

레이지로딩

• 페이지에 이미지가 너무 많으면 로딩 속도가 느리다
• 일반적으로 페이지가 로드되고 페이지에 포함된 모든 이미지가 로드된다
• 레이지 로딩을 사용하면 로드를 뒤로 미룰 수 있고, 원하는 타이밍에 로드할 수 있다
• 이를 통해 페이지를 빠르게 로딩할 수 있다
• 콘텐츠를 제공하는 서버 비용을 아낄 수 있다

src 대신 data-src사용

1
2

<!-- <img src="https://via.placeholder.com/468x200?text=1" /> -->
<img class="lazy" data-src="https://via.placeholder.com/468x200?text=1" />

• src를 사용하면 이미지가 로드되기 때문에, src는 사용하지 않는다
• 대신 이미지 주소를 data-src에 저장한다
• data-를 사용하면 js에서 dataset을 통해 접근할 수 있다

Observer API 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

let lazyloadImages;

if ('IntersectionObserver' in window) {
  lazyloadImages = document.querySelectorAll('.lazy');
  const imageObserver = new IntersectionObserver(
    function (entries, observer) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          const image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove('lazy');
          imageObserver.unobserve(image);
        }
      });
    },
    {
      root: document.querySelector('.container'),
      rootMargin: '0px 0px 500px 0px',
    }
  );

  lazyloadImages.forEach(function (image) {
    imageObserver.observe(image);
  });
}

• Observer API를 통해 이미지가 뷰포트에 들어오면
• 그제야 src를 초기화해서 이미지를 로드한다
• 로드된 이미지는 더 이상 옵저버가 관찰하지 않도록 unobserve() 해준다
• IntersectionObserver 생성자 두 번째 인자로 rootMargin을 설정해줄 수 있는데,
• 사용하지 않았을 때, 뷰포트에 들어오면 이미지 로드가 시작되어 불러오는 반면
• rootMargin을 설정해주면, 설정한 값만큼 미리 옵저버가 반응해서 이미지를 로드할 수 있도록 한다

참고

• https://css-tricks.com/the-complete-guide-to-lazy-loading-images/
• https://github.com/chinsun9/lazy-loading-images-practice

• 모바일에서 동작하는 devicemotion 이벤트 등 디버깅하기 위해 개발자 도구를 봐야 했다
• 모바일에서 개발자 도구를 어떻게 켜는지 등 찾아보다가
• 핸드폰을 데탑에 연결하고
• 데탑의 크롬에서 console의 출력 결과를 확인할 수 있다
• 그리고 모바일 화면을 미러링 해준다

하는 법

“[Android 개발] 크롬 개발자 도구 모바일 디버깅/Mobile Debugging/ PC에서 모바일 디버깅 / 모바일 개발환경 구축”
https://backstreet-programmer.tistory.com/30

• 위 블로그를 참고해서 핸드폰과 데탑을 연결했다

포트포워딩 하기

• devicemotion, geolocation 등 보안 컨텍스트가 필요한 Web API의 경우 localhost로 만들어줘야 한다
• 내부IP:PORT 해서 접속은 할 수 있지만,
• devicemotion가 정상 동작하려면 localhost여야 한다

상황

• 데탑에서 웹 개발 진행 중

• 로컬에서 5500 포트로 웹서버가 열려있음

• 모바일에서 위 웹서버에 접속하려면 내부아이피:포트를 입력해야함

• 모바일에서 localhost:5500을 입력해서 접속할 수 있도록 해보자

• chrome://inspect/#devices 에 접속한다

• 내 핸드폰이 잘 연결되었는지 확인한다

• 포트 포워딩 버튼을 누른다

• 5500 포트와 localhost:5500을 매칭시켰다
• 이제 핸드폰 크롬에서 localhost:5500으로 접속하면 웹서버에 접속할 수 있다!
• 물론 Web API도 모두 잘 동작한다

참고

• https://backstreet-programmer.tistory.com/30

• geolocation 등 특정 Web API들은 localhost 또는 HTTPS 환경에서만 동작한다
• 그래서 로컬에서 테스트했을 땐 동작하는 것들이 http로 배포했을 때 동작하지 않을 수 있다
• secure context가 필요한 API 목록은 아래 링크에서 확인할 수 있다

참고

• https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts

1
2
3

.box {
  transition: all 0.2s ease;
}

• 자연스러운 변화를 주기 위해서 사용하곤 했다
• ease는 여러 가지가 있는데 어떤 차이일까?

transition-timing-function

• 영상 편집할 때 영상의 앞뒤에 투명도를 가지고 페이드인 페이드아웃하는 그래프가 있는데 그거랑 똑같다
• ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier, steps 가 있다

함수들

• 캡처 ; https://cubic-bezier.com/

• ease ; 천천-빠름-천천
• linear ; 등속
• ease-in ; 천천-보통
• ease-out ; 보통-천천
• ease-in-out ; 천천-보통-천천
• cubic-bezier ; 커스텀

• steps ; 뚝뚝 끊어 보여준다

cubic-bezier

베지에 곡선이라고 한다
ease, in, in-out은 미리 정의어 있는 곡선이다
각각을 cubic-bezier로 표현하면 다음과 같다

• ease === cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear === cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in === cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out === cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out === cubic-bezier(0.42, 0, 0.58, 1.0)

참고

• https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function
• https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function

유용한 도구

• cubic-bezier 커스텀
• https://cubic-bezier.com/

용어

• 베지에 곡선, 베지어 곡선
• https://ko.wikipedia.org/wiki/베지에_곡선

select:

1
2
3
4
5
6
7
8

<label for="myInput">select: </label>
<input list="myInputList" id="myInput" />

<datalist id="myInputList">
  <option value="hello">안녕</option>
  <option value="hi">안뇽</option>
  <option value="bye">잘가</option>
</datalist>

• datalist를 사용하면 input 태그를 select 태그와 비슷하게 쓸 수 있다
• input에 입력하면 자동으로 필터링된다

참고

• https://developer.mozilla.org/ko/docs/Web/HTML/Element/datalist