[18강] 인스타그램 페이지 살펴보기

• 대충 정리해보기!

1. 일단 자바스크립트는 우리는 구현하지 않을 것!
2. svg: 보통 사진의 확장자는 png나 jpg인데, 이건 픽셀들로 이루어져 있어 확대할 경우 깨지게 된다. 하지만 선과 면을 수학적으로 정의해 해상도를 무한대로 만들면 확대를 해도 깨지지가 않는다. 그게 바로 svg! 보통 사진보다는 아이콘같은 곳에 많이 사용한다.
3. class 이름이 좀 이상하다. 그것은 react에서 그런 건데, 처음 작성했을 때는 의미있는 이름들을 작성했지만, 컴파일하는 과정에서 랜덤으로 class 이름을 붙인 것이다. 이것은 다른 사람이 웹 페이지를 베끼는 경우를 막기 위해서이다. 보안이 아주 철저하다.
4. 크기를 줄이면 사이드바가 보이지 않는다. 더 줄이면 헤더가 줄어든다. 아마 모바일로 인식하는 것 같다!
5. 스크롤을 내리면 헤더와 사이드바는 고정되어 있다. fixed 되어있다! 이것도 구현해보자.

🍒 정리

오늘은 실습을 한 것은 아니고, 인스타그램 페이지 구성을 살펴보았다. 배우고 나서 보니까 이제 뭐가 보인다. 역시 아는만큼 보인다... 내 좌우명해도 되겠다. 요즘 이걸 많이 느낀다.
예전에는 화면 캡쳐하다가 모르고 F12 잘못 누르면 놀래서 어떡하지 하다가 다시 누르고 그랬는데..ㅋㅋㅋ
심지어 모바일로 쇼핑하는데, 페이지가 로딩이 덜 돼서 코드가 화면에 나온 경우가 있었다. 그때 보니까 다 아는 문법들이었다! 아 나도 코딩에 미쳐가는구나 싶기도 했고, 재밌기도 했고, 알아보니까 공부하긴 했구나 뿌듯하기도 하고. 여러 감정이 들었다.
이제 드디어 인스타그램 페이지 만드는 시간! 진짜 재밌겠다. 강의 다 듣고 꼭 혼자서 해봐야지. 그것도 한번 더 올려야지~