개발 관련 부가 지식/자바스크립트,CSS (6) 썸네일형 리스트형 @keyframes 로 글자 파도타기 표현 Admin Page를 만드는 중에 새로고침 시, 새로고침이 되었음을 표현 해주는게 좋겠다는 생각이 들어 header div에 있는 도메인 글자에 효과를 주기로 했다. html 과 css로 만들 수 있으며, css에 @keyframes 라는 애니메이션 규칙을 통해 만들 수 있다. HTML 작성 H e l l o CSS 작성 .header-text { display:flex; } .header-text span { font-weight:1000; animation: wave 1.5s ease-in-out; animation-iteration-count: 1; } @keyframes wave { 0%, 40%, 100% {transform: translateY(0);} 20%{transform: transla.. 자바스크립트 Template Literal 기본적으로 쓰고는 있었지만, 찾아보고 정리해본 적이 없어서 이참에 간단히 정리해봄.. Template Literal (템플릿 리터럴) -> 내장된 표현식을 허용하는 문자열 리터럴이다. -> 이중 따옴표 나 작은 따옴표 대신 백틱(` `) 을 이용 -> 백틱(` `) 안에서 ${변수명} 를 통해 변수를 입력할 수 있고, 연산도 가능하다 -> 백틱(` `) 안에서 줄 바꿈, 띄어쓰기를 일반 타이핑 처럼 해도 문제가 없다. -> 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 변환 된다. ex) 변수 사용 예제 ex) 연산 예제 ex) 띄어쓰기 및 줄바꿈 예제 자바스크립트 (프론트) websocket event 정리 HTTP 프로토콜 이란? -> 기본 프로토콜인 HTTP는 우리가 알고 있듯이 🤷♂️ , 클라이언트에서 서버로의 요청만 가능하며 서버에서 클라이언트로 먼저 요청을 할 수 없다. -> 서버는 클라이언트를 기억하지 않음 Websocket 프로토콜 이란? -> 서로 양방향의 연결로, 서버단에서 먼저 클라이언트로 요청을 할 수 있다. (채팅에 필수) 👀 -> 서버가 클라이언트를 기억하고 있음 프론트단에서의 Websocket 연결 기본적으로 모든 브라우저에는 Websocket이 내장되어 있다. 따라서, 프론트엔드에서는 별 다른 import 없이 Websocket연결이 가능하다 😀 예시 const socket = new WebSocket("ws://localhost:8080") 또는 const socket = ne.. addEventListener 위임에 대해서 box1 box2 box3 위와 같은 html 구조가 있다고 할 때 box1, box2 box3 에 addEventListener를 붙일려고 하면 아래와 같이 붙일 수 있는데 이렇게 각 box에 일일히 addEventListener붙이면 객체가 늘어날 수록 성능상으로 안좋기 때문에😫, addEventListener 위임을 적용하여 개선 시킬 수 있는데 addEventListener 위임을 적용하면 아래와 같다. addEventListener에 실행파라미터에 함수를 넣을 때 함수 파라미터에는 자동으로 event 객체가 들어가게 된다 (난 줄여서 e로 씀) 이 event 객체에는 e.currentTarget 과 e.target이 있는데 e.currentTarget 은 this와 같고, addEventList.. CSS 기초 정리 선택자 자손선택자 .class1 .class2 {} < 클래스1 안에있는 클래스2 선택 다중선택자 .class#id {} < 해당클래스, 해당 id 다 가진 요소만 선택 전체 선택자 * {} < 전체 선택 그룹 선택자 .class1, .class2 {} 여러 클래스 동시에 선택 가상 클래스 선택자--------------------------------------------------------- first-child .box p:first-child {} 3fr 1fr 1fr viewPort breakPoint mobile 0 ~ 767px Tablet 768px ~ 1023px PC 1024px ~ 1439px PC Large 1440px ~ Javascript 공부 기록 페이지 'use strict'; js 파일 제일 윗단에 위 문장을 적게 되면 선언되지 않는 변수에 값을 할당하는 등의 비정상적인 행동에 에러문구가 보이게 됌. html에 head 태그안에 js 파일 부를 때 defer, async를 사용하면 html 파싱과 자바스크립트 다운로딩이 병렬로 시작함 defer와 async 차이점으로는 defer는 html 파싱이 다 끝난 후 자바스크립트가 순서(src 순서)따라 실행됌, async는 html 파싱이 끝나기 전에 자바스크립트 로딩이 끝나면 바로 실행(자바스크립트 다운로딩 순서로)됌 이전 1 다음
