몽땅뚝딱 개발자

◽ 차이점 로컬 스토리지(Local Storage)의 데이터는 사용자가 지우지 않는 이상 사라지지 않고 영속적이다. 세션 스토리지(Session Storage)의 데이터는 사용자가 윈도우나 브라우저 탭을 닫을 경우 사라진다. 출처 https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

몇번이고 다시 읽어봐야 되는 글.. [Vue.JS] 대용량 데이터의 처리 방법과 성능 최적화 방법 (Vue.js Performance) Vue.js에서 대용량 데이터 처리 시에 성능을 최적화하는 방법에 대해 알아보자. 남들은 모르는 Vue.js 성능 개선과 Vue.js에서 대용량 데이터를 처리하는 방법을 배워보자. Vue.js 성능 개선에서 가장 kdydesign.github.io

https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 모두 풀어보았다! 나도 나중에 직접 만들어보고 싶은 튜토리얼 사이트였다. 정답은 추후 정리할 예정이다.

콘솔 찍을 때 사용하면 좋은 팁 정리. 제공해주는 API도 굉장히 다양하다. Update: 220220 ◽ 간단한 사용 찍을 변수, 문자열 등등 뒤에 .log를 자동완성으로 입력하면 알아서 씌워진다. 간편하다. ◽ %s - 문자열 (String) // 문자열 찍기 console.log('data is %s', myStrVal) ◽ %d - 숫자 (Digit, Integer) // 숫자 찍기 console.log('data is %d', myNumVal) ◽ 문자열과 숫자 같이 찍기 // 같이 찍기 console.log('data is %s (%d)', myStrVal, myNumVal) ◽ 객체 // Bad // '+'를 사용하는 경우 const object = {value: "hi"} console.l..

◽ SVG(Scalable Vector Graphics)란? 확장가능한 벡터 그래픽을 SVG라고 한다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어이다. ◽ SVG의 주요 속성 - 뷰박스(viewbox) 좌표와 가로, 세로의 비율을 결정하는 svg의 특성이다. viewBox="0 0 0 0"으로 사용할 수 있으며, 각 자리는 순서대로 x, y, width, heigth를 의미한다. 영화관에 비추는 영상이라고 생각하면 된다. - 뷰포트(viewport) svg의 가시영역으로 해당 요소의 너비와 높이를 의미한다. width="100px", height="100px"으로 사용할 수 있다. 영화관에서 스크린보다 큰 영상을 비추면 화면에 보이지 않게 되는 것 처럼 영화관의 스크린 영역이라..

◽ 반응형(RWD, Responsive Web Design) 반응형은 디바이스 기종에 상관없이 화면의 레이아웃을 구성하는 것이다. 미디어 쿼리를 사용하여 화면의 크기를 확인하고 유연한 이미지와 그리드를 사용한다. ◽ 적응형(AWD, Adaptive Web Design) 적응형은 접근한 디바이스에 딱 맞는 크기로 만드는 것이다. 디바이스 기종 별로 딱 맞는 최적화된 마크업으로 구성하여 디바이스에 맞는 최적의 성능을 가져올 수 있다. 출처 및 참고 TIL. 반응형 웹 vs 적응형 웹 근본적으로 웹사이트가 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 모바일 사용자 경험을 제공하기 위한 방법이다.그러나, 적응형 웹과 반응형 웹은 사이트 설계부터 velog.io 개인적으로 공부한 내용을 정..

◽ 웹서버(WEB)란? - HTTP 프로토콜을 통해 읽힐 수 있는 정적인 웹 리소스를 반환(처리) ex) HTML, 이미지, js 등 - Apache, tMax, WebtoB가 대표적인 예이다. ◽ 웹 어플리케이션 서버(WAS, Web Application Server)란? - DB에 접근하는 등의 동적인 웹 리소스를 반환(처리) ex) jsp, asp 등 - Tomcat, Jeus, tMax가 대표적인 예이다. ◽ 웹서버와 WAS를 분리하는 이유 - 분산처리를 위한 것이다. - 기능을 분리하여 서버 부하를 방지한다. - 물리적인 분리로 보안을 강화한다. - 여러 웹 어플리케이션을 하나의 웹 서버를 통해 서비스 가능하다. 출처 및 참조 왜 웹서버와 WAS를 분리하나요? [기본] WEB과 WAS의 차이 개..

쿠키(Cookie) ◽ 쿠키란? 이름은 동화 '헨젤과 그레텔'에서 쿠키를 뿌려두고 간 것에서 유래했으며, 사용자의 정보를 잃어버리지 않기 위한 방법이다. 클라이언트 로컬에 저장되는 키(key)와 값(value)이 들어있는 파일이다. 사용 예로는 로그인 시 아이디와 비밀번호를 저장할 때나 쇼핑몰 장바구니에서 사용할 수 있다. ◽ 구성 요소 - 쿠키의 이름(name) - 쿠키의 값(value) - 쿠키의 만료시간(Expires) - 쿠키를 전송할 도메인 이름(Domain) - 쿠키를 전송할 경로(Path) - 보안 연결 여부(Secure) - HttpOnly 여부(HttpOnly) 세션(Session) ◽ 세션이란? 일정 시간 동안 같은 브라우저로부터 들어오는 요청을 하나의 상태로 보고 그 상태를 유지하는 ..

수도 없이 사용했던 document.ready, getElementById, location.href .. '이런 접근은 어떻게 가능한 것일까?'를 한번도 생각해 본 적이 없었던 나를 반성하며 정리하는 글 DOM ◽ DOM(Document Object Model) - 단어 그대로 '도큐먼트를 객체로 표현하는 모델', 문서 객체을 의미한다. - 문서 객체란 HTML 문서의 태그들을 JavaScript가 읽을 수 있는 객체(object)로 만든 것이다. - HTML, XML 문서의 프로그래밍 인터페이스이다. - DOM은 수정사항이 있을 때 처음부터 렌더링을 거치는데, 스케일이 커질수록 노드가 증가하여 브라우저의 속도가 느려진다. ◽ DOM에 접근하기 document 객체를 통하여 접근할 수 있다. - get..