일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- TSDoc
- 커스텀
- const 단언문
- 제네릭
- 2022
- reactjs
- NonNullable
- 누구나 자료구조와 알고리즘
- returnType
- 폰트적용하기
- vue.js
- JS console
- 공통컴포넌트
- 레이아웃쪼개기
- React Native
- 티스토리꾸미기
- react
- 반복줄이기
- React.js
- 성능최적화
- click and drag
- Chart.js
- utilty type
- 타입스크립트
- typescript
- javascript
- 개발콘텐츠
- 타입좁히기
- CSS
- 리액트
- Today
- Total
목록Something Useful/또 다른 정보 (47)
몽땅뚝딱 개발자
◽ 반응형(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..
◽ 스택(Stack) - 차곡차곡 쌓는 것. 자료가 시간 순서에 따라 층층이 겹쳐 쌓인다. - 후입선출(LIFO, Last-In-First-Out) 구조로 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다. - top 한 곳에서 삽입, 삭제가 이루어진다. - 삽입하는 연산을 'Push', 삭제하는 연산을 'Pop'이라고 한다. - 비어있는 스택에서 원소를 추출하는 경우 stack underflow, 스택이 넘치는 경우 stack overflow라 한다. 예시) 웹 브라우저의 방문기록(뒤로 가기), 역순 문자열 만들기, 실행 취소 등 ◽ 큐(Queue) - 줄을 서서 기다리는 것. 시간 순서대로 처리해야하는 경우에 사용한다. - 선입선출(FIFO, First-In-Fisrt-Out) 구조로 가장 먼저 삽입된..
모 필드에서 한 화면을 PDF 형식으로 저장하는 기능을 구현해야했다. Canvas2Html은 그냥 코드를 가져다쓰고, 몇개의 옵션만 간단히 설정해주면 됐다. 📄 스크립트 // PDF로 저장버튼 클릭 시 $('.PDF').click(function() { html2canvas(document.body, { onrendered: function (canvas) { // 캔버스를 이미지로 변환 var imgData = canvas.toDataURL('image/png'); var imgWidth = 210; // 이미지 가로 길이(mm) A4 기준 var pageHeight = imgWidth * 1.414; // 출력 페이지 세로 길이 계산 A4 기준 var imgHeight = canvas.height *..