본문 바로가기

FRONT-END70

실무하며 알게 된 CSS TIPS 폰트 관련1. 크롬의 최소 폰트 사이즈는 10px이다. 10px보다 작게 보이도록 우회할 수 있는 편법은 transform을 활용한다.2. 흐르는 텍스트 css 속성 : marquee 참고 click, drag 관련1. CSS로 클릭을 막는 속성pointer-events: none 2. user-selector: none 처리-ms-user-select: none;-moz-user-select: -moz-none;-webkit-user-select: none;-khtml-user-select: none;user-select: none;user-drag: none;user-select: none;-moz-user-select: none;-webkit-user-drag: none;-webkit-user-se.. 2022. 3. 28.
[JavaScript] REST API와 JSON Server REST API REST(Representational State Transfer)는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. REST API의 구성 - 자원(Resource) : HTTP URI - 행위(Verb) : HTTP 요청 메소드 - 표현(Representaitions) : HTTP 페이로드 REST API 설계 방침 - URI는 리소스를 표현해야 한다. (명사) - 리소스에 대한 행위는 HTTP 요청 메소드로 표현한다. (GET, POST, PUT, PATCH, DELETE는 URI에 미표현) JSON Server JSON Server는 json 파일을 사용하여 REST .. 2020. 5. 26.
[JavaScript] Ajax Ajax란? 데이터를 교환하고 서버로부터 수신한 데이터를 기반으로 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 의미한다. Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 서버와 브라우저 간의 비동기적 데이터 통신을 가능케하는 여러 메소드와 프로퍼티를 메소드를 제공한다. 이 방식이 나오기 전가지 웹페이지는 서버로부터 완전한 HTML을 전송 받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송 받아 웹 페이지 전체를 처음부터 다시 렌더링 하였다. 하지만 이러한 방식은 단점이 존재했다. 1. 변경이 없는 부분까지 포함된 HTML을 서버로부터 매번 다시 전송 받기 때문에 불필요한 데이터 통신.. 2020. 5. 26.
[JavaScript] 비동기 프로그래밍 동기식 처리 모델과 비동기식 처리 모델 - 함수 호출 시 함수의 실행 컨텍스트 생성 - 해당 실행 컨텍스트는 실행 컨텍스트 스택에 푸시되고 함수 코드가 실행됨 - 함수 코드의 실행 종료 시 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 POP되어 제거 함수가 실행되려면 반드시 실행 컨텍스트 스택에 PUSH되어야 함 (즉, 실행 컨텍스트 스택에 PUSH되는 것은 함수의 실행을 의미) 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 실행 컨텍스트 스택에 PUSH 되기 때문이다. 이처럼 함수의 실행순서는 실행 컨텍스트 스택으로 관리한다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 자바스크립트 엔진이 동작하는 브라우저 환경이나 Node.js 환경은 한번에 하나의 태스크.. 2020. 5. 26.