멋사 프론트엔드 스쿨 2기 TIL (03.31)

멋사로고

 

🚀 Embedded content(30일 부터 이어서)

---

 

<iframe>

• 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용
• width, height 속성으로 크기 조절 가능, default는 width: 300px, height: 150px
• src 속성에 불러올 HTML링크를 설정할 수 있다
• 보통 유튜브 영상을 불러올 때 많이 사용
  • frameborder : 사용하지 않음 CSS border 속성 사용
  • allow : iframe 에서 허용할 기능들을 지정
  • allowfullscreen : 전체화면을 지원!!

⭐️  autoplay 속성은 브라우저 정책 상 일부 모바일 브라우저에 작동하지 않을 수 있으며, 항상 mute 속성과 함께 사용되어야 한다. (깜놀방지 + 트래픽 유발 방지 + 접근성 측면에서 좋지 않음)

<iframe> 뿐만 아니라 <audio>, <video> 요소 모두 동일하게 적용된다.

 

<audio>

• <audio> 는 음악 컨텐츠를 재생하기 위한 태그이다.
  • src 속성은 브라우저에게 오디오 파일의 위치 및 파일명을 알려준다.
  • controls : 음악 파일을 제어할 수 있는 컨트롤러를 불러옵니다.
  • autoplay : 로딩이 완료된 파일을 자동으로 재생합니다. (Chrome 정책상 autoplay가 안된다. 그래서 js로 컨트롤)
  • loop : 음악을 반복.
• <audio> 요소도 <source> 요소를 자식으로 사용할 수 있다. 크로스 브라우징을 위해 여러 포맷의 파일을 지원 가능

 

<video>

• <video> 는 동영상 파일을 재생하기 위한 태그
  • src : 브라우저에게 비디오 파일의 위치 및 파일명을 알려준다.
  • controls : 영상 파일을 재생하는데 필요한 컨트롤러를 불러온다.
  • autoplay : 로딩이 완료되면 자동으로 영상 파일을 재싱시킨다.
  • loop : 영상이 종료되면 다시 반복해서 재생한다.
  • preload : 좋은 사용자 경험을 위해 고려해 볼 수 있는 속성!!
    1. none : 미리 로딩하지 않음. 서버가 최소한의 트래픽을 유지하며 페이지 로딩이 좀 더 빨라짐
    2. metadata : 미리 로딩하지 않지만 파일의 메타데이터 (ex. 영상의 길이)를 미리 가져온다.
    3. auto : 비디오 파일을 미리 로딩하여 사용자가 바로 영상을 볼 수 있도록 준비.
  • poster : 영상이 로딩 중일때 대신해서 화면에 보여줄 이미지 지정
  • <source> : 다른 embedded 요소들과 마찬가지로 포맷을 여러가지 지정할 수 있다.

⭐️  비디오 태그로 동영상을 서비스하면 트래픽을 조심해야한다!! 동영상의 트래픽을 내가 다 부담하기 때문

 

🚀 알잘딱깔센 GitHub

---

깃헙예시

•  주로 CLI를 전부터 이용했는데 정말 위의 사진으로 설명이 끝난다.. 완전 대박 정확히 이해 못하고 맨날 git add . 반복만 했는데 저거였군
• github repo 에서 . 누르면 웹 vsc 열림 짱신기
• 그리고 커밋까지는 깃이고 푸시부터 깃헙이다!!
• 형상관리시스템(분산버전관리툴) 중 하나가 깃헙!

 

🦁 Form 과제 (회원가입, 로그인, 약관 페이지 만들기)

---

 

💡 TIP

---

• 가볍게 배운 get, post 찍먹이었지만 은하계 다녀옴;;
  • get : url로 요청을 보낸다. (홈페이지 보여줘!! : Read)
  • post : url로 전달하는게 아니라 body 값으로 보낸다. (주로 Create)
  • 둘의 차이로는 url에 정보가 뜨는지 안뜨는지! 주로 post는 이미지, 보안정보에 사용
• 간단하게 정리하는 모놀리식 아키텍쳐, 마이크로 서비스
  • 모놀리식 = 하나의 서버
  • 마이크로 서비스 = 다수의 서버

 

🍓 하루의 회상

---

• 오늘도 역시 시간은 금방 가지만 살짝 어려운 내용이 있어서 쉽지 않았다..
• 평소에 하던 깃/ 깃헙 기본인데도 어려웠다..
• 내일 특강이다 ㅎㅅㅎ 기대된다 두근대위 ㅎㅎ