전체 글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 웹 표준의 개념 웹 표준은 과연 무엇일까? 웹 표준(Web Standard) 웹 표준이라는 정의는 '웹에서 표준적으로 사용되는 기술이나 규칙'이란 말을 의미한다. 이는 어떤 브라우저의 환경이던 웹 페이지가 똑같이 보이고 정상적으로 잘 동작하게 해야 한다 라는 말을 의미한다. 웹 표준은 W3C(World Wide Web Consortium) 에서 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 웹 표준의 가이드라인이 정해진다. W3C에는 HTML, CSS, Javasciprt 등의 대한 규정을 담고 있다. 웹 표준 준수 이유 국내 웹은 특정 브라우저의 사용자들의 이용환경과 비 표준 페이지, 과도한 플러그인 사용으로 노약자, 장애인등의 사용이나 모든 사용자들이 운영체제 및 웹 브라우저 등의 정보 접근 제약이 있음... 2022. 9. 26. 10:11 블로그 시작하기 [네이버 서치 어드바이저] 블로그를 세팅 하면서 네이버에 티스토리 블로그를 노출하려면 네이버 서치 어드바이저에 등록해야 한다. https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com 우선 위 링크를 클릭하여 네이버 서치어드바이저에 접속하고 로그인을 한다. 그 다음 네이버 서치어드바이저에서 웹 마스터 도구를 클릭한다. 그 후 사이트 등록에서 자신의 티스토리 사이트를 등록해준다. 클릭 후 HTML 태그를 복사한다. 다시 티스토리 블로그로 돌아와서 티스토리 블로그 관리 > 스킨 편집으로 들어와서 우측 상단에 html 편집을 클릭한다. 태그 사이에 네이버 서치어드바이저 에서 복사한 정보를 붙여넣고 적용버튼 클릭.. 2022. 9. 22. 23:45 티 스토리 블로그 시작. 주 목적은 나의 개발 스터디를 기록화하는 습관을 들이기가 주 목적이고 부 목적은 열심히 쓴다면 부가 수익 창출..! 꾸준히 습관화하며 열심히 해보자.! 2022. 9. 22. 23:05 이전 1 ··· 8 9 10 11 다음 728x90
