PC/Mobile Browser Window Viewport✨
잊을만하면 다시 꺼내쓰게 되는 viewport 한번 정리하고 가야겠다. PC와 Mobile는 Viewport가 다르다. 편의상 height 기준으로 작성. width도 동일하다고 이해하라. PC Viewport window.innerHeight / window.outerHeight window.innerHeight : 가로 스크롤...
고양이발
숫자 범위만큼 map 돌리기
지정된 숫자 범위만큼 map을 돌리고 싶다면 [...Array(n).keys()].map; 혹은 Array.from(Array(n).keys()); 숫자만큼 배열을 만들어 map을 돌린다. How to generate range of numbers from 0 to n in ES2015 only?
[error] The current branch master has no upstream branch
fatal: The current branch <branchname> has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin <branchname> push 할 때 브랜치...
styled-components에서 keyframes 작성하기
styled.div 대신에 keyframes을 사용한다. import styled, { keyframes } from 'styled-components' const fadeIn = keyframes` 0% { opacity: 0; } 100% { opacity: 1; } ` const FadeInButton = sty...
styled-components에서 for문 돌리기
styled-components에서 각 엘리먼트에 animation을 적용하려다 for문 코드에 대해 알아보았다. const createCSS = () => { let str = ""; for (let i = 1; i < 30; i++) { str += ` &:nth-of-type(${i}) { ...
autocomplete : 자동완성 허용 설정
<input type="number" name="cc-number" id="cc-number" autocomplete="off" /> 사용자에게 어떤 정보에 대한 자동완성을 원하는지 안내할 수 있다. <input>, <textarea>, <select>, <form> 요소가 다음 조건을...
프로토콜이란? TCP와 UDP의 차이점
프로토콜 네트워크 통신 규약 다양한 규격끼리 데이터를 주고받을 때 같은 프로토콜을 사용하여 주고받는 방식을 따르도록 함 상황에 따라 전달할 데이터가 다르기 때문에 맞는 프로토콜을 사용한다. Syntax, Semantic, Timing 세 가지 요소로 구성됨 Syntax 문법, 구문...
IP란? - Public/Private IP, 고정/유동 IP, 넷마스크
IP 주소란? Internet Protocol address (표준어: 인터넷규약주소) 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호 이 번호를 이용하여 발신자를 대신하여 메시지가 전송되고 수신자를 향하여 예정된 목적지로 전달된다. 모든 장비에는 IP 주소가 부여되어야만 한다. IPv4 주소...
[Object] value 값으로 key 찾기
key 값으로 value를 찾는건 쉽지만, value를 가진 key를 찾는 건 좀 헷갈린다. 객체의 키를 배열로 만든 후 순환하며 value와 비교하여 key를 찾을 수 있다. const object = { a: 0, b: 1, c: 2, }; const getKey = (value) => { const result = Obj...
스크립트 미지원 태그
HTML <noscript> 요소는 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의한다. <noscript> 요소는 <body> 요소나 <head> 요소 둘 중 어디에도 위치할 수 있지만, <head> 요소에 위치할 때는 <link...