Front-End7

• 

  [Prettier] VS Code 에서 Prettier 프리티어만 설정하기 안녕하세요, 다람쥐입니다! 예전에 Visual Studio Code (VS Code) 에서 프리티어(Prettier)와 ESLint 를 같이 설정해서 프로젝트를 구성하여 사용했었습니다. 그러던 중 자바스크립트 교재 실습하려고 프로젝트를 구성했는데, 프리티어(Prettier)만 쓰려고 했는데 설정이 잘 안되길래 공식 문서를 차근 차근 따라했더니 바로 됐습니다. ( 역시 문서를 잘 봐야.. ) 다음에 까먹지 않기 위해 VS Code 에서 Prettier 플러그인 설정하는 법을 정리했습니다. 위에서 언급한 대로 Visual Studio Code 에서 Prettier 플러그인을 제공해줘서, 저장 시에 자동으로 포맷팅을 해주도록 설정할 수 있습니다. VS Code 왼쪽 메뉴 중에서 가장 아래 버튼을 클릭하면 플러.. Front-End/Front-End 자료실 2022. 1. 24.

• 

  CSS Flex 귀여운 개구리로 실습해보자 안녕하세요~ CSS Flex를 연습해볼 수 있는 사이트를 소개하고자 합니다. 연못 안의 개구리를 개구리 집으로 돌아가도록 CSS Flex로 정렬하는 실습들이 준비되어있습니다. CSS Flex 속성도 몇 개 없기에 이런 튜토리얼 사이트로 빠르게 배우는게 효율적인 것 같습니다. justify-content, align-items, flex-direction, order, align-self, flex-wrap, flex-flow, align-content 속성들을 익힐 수 있습니다. 친절하게 속성에 어떤 요소들이 있는지도 마우스 포인터를 올리면 설명해주니 금방 문제를 해결할 수 있습니다. 바로 가기 : https://flexboxfroggy.com/ Front-End/Front-End 자료실 2020. 5. 27.

• 

  HTTP/2 프레임 정리 1. 프레임 헤더 모든 프레임은 동일한 9 bytes(옥텟)의 헤더로 시작. * HTTP/2 프레임 유형 2. DATA DATA 프레임은 가변 길이의 옥텟으로 구성됨. 최대 프레임 길이 설정값으로 전송되는 개체 데이터가 하나 이상의 프레임으로 나눌 수 있음. Pad Length 필드와 Padding 필드는 보안 상 필요에 따라 메시지의 크기를 숨기기 위해 사용. * DATA 프레임 플래그 3. HEADERS HEADERS 프레임은 스트림을 시작해 엔드포인트에 메시지 헤더를 전송하는 데 사용 * HEADERS 프레임 플래그 4. PRIORITY PRIORITY 프레임은 스트림의 우선순위를 지정하기 위해 전송된다. 여러 번 전송될 수 있고, 이 경우 이전에 설정된 우선순위를 변경한다. 5. RST_STREA.. Front-End/Front-End 자료실 2018. 7. 22.

• 구글크롬 HTTP/2(h2) 프로토콜 디버깅 툴 구글크롬 HTTP/2(h2) 프로토콜 디버깅 툴크롬 개발자 도구net-internalschrome://net-internals 으로 이동하여 접근할 수 있다. 저수준의 네트워크 데이터의 수집/내보내기/가져오기, 네트워크와 DNS 로그 확인, 네트워크 활동 시각화 등의 기능으로 네트워크 데이터를 한 눈에 볼 수 있다. HTTP/2 트래픽 데이터를 수집하는 데 사용한다. 보통 다음의 HTTP/2 개념을 확인한다.스트림 ID우선순의의존성 서버 푸시세션 PING 메뉴에서 HTTP/2 를 선택한다. 원하는 사이트를 접속한 뒤, 다시 net-internals 탭으로 돌아온다.HTTP/2 프로토콜을 사용하는 호스트이름들이 적힌 목록을 확인한다. 그 목록 옆에 ID 링크를 클릭한다. Events 화면으로 넘어가는 데,.. Front-End/Front-End 자료실 2018. 7. 22.

• HTTP 웹 성능 개선하기 웹 성능에 중요한 부분웹 페이지를 불러오는 데 전반적으로 영향을 미치는 네트워크 수준의 지표지연 시간 : IP 패킷이 한 지점에서 다른 지점으로 이동하는 데 걸리는 시간. 왕복 시간(Round-Trip Time, RTT) 는 지연 시간의 두 배.대역폭DNS 조회연결 시간TLS 협상 시간 : HTTPS 연결 시 SSL(Secure Socket Layer), TLS(Transport Layer Security) 협상이 필요. 왕복 시간이 더 추가 서버 자체의 내용이나 성능에 좀 더 의존적인 지표TTFB(Time To First Byte) : 클라이언트가 웹 페이지 탐색을 시작한 때부터 기준 페이지 응답의 첫 번째 바이트를 수신한 때까지 걸린 시간콘텐츠 다운로드 시간 : 요청한 개체에 대한 TTLB(Time .. Front-End/Front-End 자료실 2018. 7. 18.

• 

  [CSS] 글 드래그 시 나오는 색상 바꾸기 '::selection' iOS 스터디를 하는 도중 SQLite 포스팅을 봤다. 그 포스팅에서 글을 드래그하면 배경색상이랑 글자색이 다르길래, 티스토리 블로그에 적용해봤다. ::selection 가상 요소로 스타일을 지정해줄 수 있다. 소스 코드12345678910111213/* 본문 */.area_view p::selection { background-color: #ff7b7b; color: white; }/* 영역 */.area_view div::selection { background-color: #ff7b7b; color: white; }/* 헤더 */.area_view h1::selection,.area_view h2::selection,.area_view.. Front-End/Front-End 자료실 2018. 6. 3.

• 

  티스토리 키보드 자판 효과내기. 단축키 효과 여러 IT 블로그들을 보면 키보드 자판 모양으로 스타일링된, 단축키 안내들이 있다.지금까지 필요는 없었지만 우연치 않게, 단축키를 설명해야 하는 포스팅을 올려야 했다.CSS 삽입이야 금방 하는 작업이다. 티스토리 관리 페이지 ➡ 꾸미기 메뉴의 스킨 편집 ➡ html 편집 ➡ CSS 탭 선택 CSS Reset(초기화) 가 끝나고 아무 자리나 넣어 저장버튼을 눌러주자! 12345678910111213141516171819202122/* 키보드 효과 css */.key { background-color: #f7f7f7; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; c.. Front-End/Front-End 자료실 2018. 5. 28.