카테고리 전체99 WEB 개발 시간을 단축하는 방법 WEB 개발 시간을 단축하는 방법 웹 개발을 진행하면서 나도 모르고 있던 웹 개발 팁들을 정리해보고자 한다. 앞으로는 개발하면서 사용해야지..! 1. 디자인 모드(Design Mode) 디자인 모드는 웹 브라우저에서 임시로 화면을 수정할 수 있다. 크롬, 파이어폭스, 사파리 등의 웹 브라우저에서 F12 키를 눌러 개발자 도구를 켜고 아래와 같이 document.designMode = 'on'을 입력하면 브라우저에 텍스트나 이미지를 옮겨볼 수 있다. //디자인 모드 켜기 document.designMode = 'on' //디자인 모드 끄기 document.designMode = 'off' 2. 시간 절약을 위한 자바스크립트 코드 1) 변수 교체 다음은 간단히 변수를 교체하는 방법이다. 두 변수의 값을 교체.. 2022. 10. 2. 11:10 HTTP 상태 코드 (status code) HTTP 상태 코드 (status code) 대게 개발을 진행하거나 특정 사이트에 접속하면 "404 NOT FOUND" 라는 에러 코드를 본적이 있을 것이다. 상태 코드 에러가 날때마다 매번 구글링하여 찾아보았는데, 이제는 내가 정리해서 내 블로그에서 찾아봐야겠다! HTTP 상태코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려준다. 모든 응답 코드는 5개의 그룹으로 나누어지며 첫번째 숫자는 응답의 클래스를 정의하고, 마지막 두자리는 클래스나 분류 역할을 하지 않는다. 상태코드는 RFC2616 section-10에 정리되어있다. https://tools.ietf.org/html/rfc2616#section-10 첫자리의 5가지 그룹은 다음과 같다. - 1xx (정보) : 요청을 받았으며 프로세스를 .. 2022. 9. 30. 23:18 WebStorage API WebStorage API Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공함. WebStorage 개념 Web Storage의 두가지 방식은 다음과 같다. sessionStorage 페이지 세션이 유지되는 동안, 브라우저가 열려있는 동안 제공됨. - 세션에 한정해, 브라우저 또는 탭이 닫힐 때까지만 데이터 저장 - 데이터를 서버로 전송하지 않음 - 저장 공간이 쿠키 보다 크다 (최대 5MB) LocalStorage 로컬스토리지는 브라우저를 닫았다 열어도 데이터가 남아있다. - 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬저장 데이터를 지워야만 사라짐 - 저장 공간이 셋 중 제일 크다. - 동일한 컴퓨.. 2022. 9. 30. 10:28 웹 브라우저에 URL을 입력하면 일어나는 일 웹 브라우저에 URL을 입력하면 일어나는 일. 우리 일상생활에서 항상 사용하는게 웹 사이트이며, www.naver.com과 같은 도메인을 사용하여 사이트에 접속한다. 과연 우리가 일반적으로 사용하는 주소창에서 주소를 입력하고 엔터키를 치면 무슨일이 일어날까? AWS 한국 블로그를 읽어보면서 알아보자. 기초 지식 웹 브라우저에 URL(https://channy.creation.net/blog)을 입력하고 Enter 키를 누르게 되면, 브라우저는 인터넷에서 사이트를 호스팅하는 서버를 파악해야한다. 이는 channy.creation.net 도메인을 검색하여 주소를 찾는다. 서버나 휴대폰, 스마트 냉장고 등 인터넷의 각 디바이스에는 IP주소라는 고유한 주소가 있다. IP주소에는 3.34.220.186와 같은 4.. 2022. 9. 29. 23:15 Babel과 polyfill Babel 바벨은 자바스크립트 컴파일러이다 . ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는데 주로 사용되는 도구 체인이다. 아래는 바벨이 할 수 있는 주요 기능이다. - 변환 구문 - 대상 환경에서 누락된 폴리필 기능(core-js와 같은 폴리필을 통해) - 소스 코드 변환(codemods) // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); JSX 에서의 Babel 다음과 같은 커맨드 명령어로 설치 할 수 있다. npm install --save-dev @babel/.. 2022. 9. 29. 16:05 리액트 가상 DOM(React Virtual Dom) React Virtual DOM React 가상 DOM을 알기 위해선 우선 DOM의 개념부터 알아야한다. DOM(Document Object Model): 문서 객체 모델 문서 객체 모델(DOM)은 XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같은 계층 구조로 표현된다. DOM(Document Object Model)의 종류 1. Core DOM : 모든 문서 타입을 위한 DOM 모델 2. HTML DOM : HTML 문서를 위한 DOM 모델 3. XML DOM : XML 문서를 위한 DOM 모델 DOM(Document Object Model.. 2022. 9. 28. 00:29 이전 1 ··· 13 14 15 16 17 다음 728x90
