분류 전체보기119 About viewport 컴퓨터 그래픽스에서, 뷰포트(viewport)는 현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역이다. 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분(메뉴바, 탭등을 제외한 순수 화면 영역)을 뜻한다. 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않는다. viewport는 두 가지로 나뉜다. visual viewport: 사용자의 디스플레이 장치에서 현재 볼 수 있는 부분이다. (사용자가 확대/축소 수준을 조정할 때 계속 변화) layout viewport: 레이아웃 뷰포트는 사용자가 확대/축소 수준을 조정할 때 동일하게 유지된다. HTML5에서 소개된 뷰포트 태그를 사용하면 모바일 기기에서 실제 렌더링되는 영역과 뷰포트의 크기를 조절할 수 있다. width=device-width: .. 2021. 7. 21. [React] PureComponent PureComponent 의 렌더링 실험이다. 해당 레퍼런스에서 shouldComponentUpdate와 PureComponent를 이용해서 최적화를 할 수 있다. SCU는 shouldComponentUpdate가 반환한 것을 나타내며, vDOMEq는 React 엘리먼트가 동일한지 여부를 표시한다. shouldComponentUpdate는 C2에 뿌리를 둔 하위트리에서 false를 반환했기 때문에 React는 C2를 렌더링하려고 시도하지 않는다. C4와 C5 또한, C2가 렌더링하지 않기때문에 렌더링 하지 않는다. PureComponent를 사용하면 shouldComponentUpdate과 동일한 효과를 낼 수 있다. https://ko.reactjs.org/docs/optimizing-performan.. 2021. 7. 20. 예쁜 CSS 모음 https://www.youtube.com/watch?v=laNpbZISwjY https://www.youtube.com/watch?v=qKjDXXkkg8I https://www.youtube.com/watch?v=M421fR3TYxg https://www.youtube.com/watch?v=PdNOq7VszY8 https://www.youtube.com/watch?v=HlKBznWcC_k https://www.youtube.com/watch?v=QvERvfZl8qc https://www.youtube.com/watch?v=mW0Z1T8l7sU https://www.youtube.com/watch?v=XMhHEVznWEY 2021. 7. 19. [MDN] 7 월 yari-content-ko — 주요 사항 이전 게시물인 [MDN] 6 월 yari-content-ko — 주요 사항과 향후 계획에서 Markdown에 대한 언급이 있었습니다. 2021년 7월 27일 현재 translated-content에서 해당 PR을 기준으로 공식적으로 Markdown을 사용 가능하게 되었습니다. 이제 translated-content에서 Markdown으로 작성 가능하고, MDN도 Markdown 작성을 지향합니다. 이 게시물에서는 7월 MDN 주요 사항들에 대해서 알아보겠습니다. MDN 문서 Markdown으로 변환 Yari 이전에는 MDN 문서는 WYSIWYG 편집기에서 편집되었으며, 페이지를 HTML로만 편집할 수 있는 옵션이 있었습니다. Yari 이후로는 MDN 문서를 텍스트 편집기에서 HTML로만 편집할 수 있습니.. 2021. 7. 18. Github changelogs 오늘은 Github에서 Conventional Commits 통해서 변경사항들을 추적하는데 도움을 주는 chagelogs에 대해 알아보자. 우리는 chagelogs를 통해 배포에 대한 변경점들을 쉽게 파악할 수 있다. 여러가지 changelogs 생성기들이 있지만 오늘은 우선 standard-version 에 대해서 알아볼 것이다. 설치 yarn add -D standard-version package.json의 scripts에 release를 추가해준다. "scripts": { ..., "release": "standard-version" } 그리고 .versionrc 파일을 추가해준다. Conventional Commits의 형식에서 [적용 범위(선택 사항)]: 타입부분에 대하여 .versionrc .. 2021. 7. 18. gh-pages 로 배포하기 https://pages.github.com/ GitHub Pages Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live. pages.github.com gh-pages를 사용해보자. 1. gh-pages 패키지 설치 yarn add -D gh-pages 2. package.json 에 다음 추가. "homepage" : "https://.github.io/" 3. package.json "scripts"에 다음 추가 "predeploy" : "npm run build", "deploy" : "gh-pages -d build" 최종 pa.. 2021. 7. 17. 이전 1 ··· 11 12 13 14 15 16 17 ··· 20 다음
