Bumlog

우분투 실습 실습을 위해서 설치가 필요없는 클라우드 환경을 이용하도록 하겠습니다. 우리는 구름IDE라는 클라우드 서비스를 이용하여 Linux가 설치된 컴퓨터를 무료로 빌려서 실습할 수 있습니다. SaaS(Software as a Serviece) _SaSS(X) SaaS는 가장 사용자 단에 친밀한 서비스이며 네트워크를 통해 애플리케이션 기능을 이용할 수 있는 서비스입니다. 드롭박스, 구글 클라우드 등의 서비스가 여기에 속하죠. PaaS(Platform as a Service) PaaS는 빠르게 어플리케이션을 개발하고 서비스할 수 있도록 고안된 것입니다. 예를 들어 서버에는 이미 Node와 같은 런타임이 깔려있고 우리는 javascript 파일 빌드만 하면 되는 것이죠. IaaS(infrastructure..

Make it work, Make it right, Make it fast Kent Beck 웹 최적화는 중요하지만, 우선순위가 떨어집니다. 하지만 왜 중요할까요? 1. 사용자 경험이 좋아집니다. 2. 면접문제에서 많이 나옵니다. 성능 측정의 척도 1. 올바르게 동작하게 만든다 : 메모리, 네트워크 트래픽(벡엔드)과 같은 자원을 효과적으로 사용한다. 2. 빠르게 동작하게 만든다 : 시간과 긴밀한 관계가 있다. (빠르게 동작하는것처럼 보이는 것도 중요) 시간 초기 구동 시간: 초기에 애플리케이션이 로드 되는 시간 계산 시간: 동일한 계산을 얼마나 빠르게 수행하는가 반응 시간: 사용자의 행동에 얼마나 빠르게 반응하는가 초기 구동 시간 대기 시간을 40%줄였더니 트래픽과 가입 수가 15% 늘었다. 로드 시간을..

스코프란? 변수값의 생존범위 스코프 체인이란? var func1 = function () { // var a = 1; var b = 2; console.log(a + b); }; var a = 20; func1();​ 이때 a+b의 값은 22가 된다. func1 안에서 a의 값을 찾지 못하자 스코프를 더 넓혀서 바깥에 있는 a의 값을 적용하였다. 이러한 현상을 스코프체인이라고 한다.​ 스코프 체인: 안에 없으면 밖에 찾기, 상위 요소로 찾아 찾아 올라가기 전역스코프 어디서든 접근 가능. 협업 시 얽힐 수 있다는 단점. 함수스코프 함수 내부의 공간. function test() { val1 = "hello"; var val1 = "world"; } test(); console.log(val1); conso..

1. 객체지향 프로그래밍이란? 객체지향은 프로그래밍 방법론중에 하나로, 프로그램을 작성할 때 객체들을 만들어 서로 소통하도록하는 방법. (이와 다르게 순서대로 실행되는것을 절차지향 프로그래밍이라고 한다.) 객체란? 우리가 앞서서 배운 자바스크립트 객체는 데이터의 묶음 이라면 객체 지향의 객체는 우리가 표현하고자 하는 구체적인 사물을 추상적으로 표현한것이다. 즉 한 사람을 객체로 표현한다면 const me = { name : 'Jason', address : 'Seoul', phoneNum : '010-1234-1234', canWalk : function(){ console.log('Hi,Hello'); } } 이렇게 표현할 수 있다. 그리고 또한 객체는 행동과 상태를 가진다. 여기서 행동은 메소드, 상..

1. Sass란? 1.1 Sass를 한 마디로 요약한다면... CSS의 확장프로그램으로, CSS를 더 다양하게 활용하기 위하여 기존 css를 "HTML처럼 구조화"하여 적을 수 있고, "JavaScript"처럼 문법을 적용할 수도 있다. 1.2 Sass를 사용하는 이유 위에서 언급했듯이 Sass는 HTML과 같은 특성과 JS같은 특성 2가지가 있다. 따라서 HTML처럼 구조화를 통해 가독성을 높이고, JavaScript처럼 반복문이나 조건문 등을 이용해 코드의 길이를 줄여주어 코드의 효율을 높여줄 수 있다. 2. Scss의 특징을 알아보자! 2.1 특징(1) : 여러 파일로 나누어 작성합니다. 2.1.1 파일을 나누는 방법 파일을 나누는 기준: Scss는 레이아웃(ex. header,main,footer..

1. 국가별 지도 세계지도와 같은 다른 국가별 지도를 SVG파일로 다운 받기 위해서 아래 사이트를 참고하면 됩니다. https://www.amcharts.com/svg-maps/ Free SVG Maps - amCharts www.amcharts.com 국가의 스타일 HTML CSS .one { width: 100vw; height: 100vh; background: url(./southKoreaHigh.svg); } .two { width: 100vw; height: 100vh; } .three { width: 100vw; height: 100vh; } path:hover { fill: red; stroke: blue; stroke-width: 5px; stroke-opacity: 0.5; } svg ..

Cargo Templates - Cargo Templates — Cargo Template Style 1 — Wireframe Show All︎ Template Style 2 — w/ Example Content Show All ︎ cargo.site themeforest(템플릿) WordPress Themes & Website Templates from ThemeForest WordPress Themes & Website Templates from ThemeForest Discover 1000s of premium WordPress themes & website templates, including multipurpose and responsive Bootstrap templates, email t..

1. 개념 Base64 Encoding은 Binary Data를 Text로 변경하는 Encoding이다. 인코딩(encoding) 파일에 저장된 정보의 형태나 형식을 데이터 표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태로 변환하는 처리 혹은 그 처리 방식을 말합니다. 이메일 등의 전송, 동영상이나 이미지 영역에서 많이 사용되며, 반대말은 디코딩(decoding)입니다. 2. Base64를 사용하는 이유 배경 Base64 Encoding을 하게되면 전송해야 될 데이터의 양도 약 33% 정도 늘어난다. 6bit당 2bit의 Overhead가 발생하기 때문이다. http://www.base64encode.org/에서 직접 테스트해보면 어렵지 않게 확인 할 수 있다. Encoding전..

Mac과 윈도우는 기본 스크롤 디자인이 다르다. (윈도우 스크롤 바 너무 못생겼다...) 따라서 스크롤 디자인을 변경하려면 어떻게 해야 할까? 우선 -webkit이라는 친구를 이용해주면 된다. webkit이란? 웹킷 (영어: WebKit)은 웹 브라우저 를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크 이다. 원래는 Mac OS 10의 사파리 웹 브라우저 엔진으로 사용하기 위해 컨커러 브라우저의 KHTML 소프트웨어 라이브러리 에서 가져온 것이었으나 지금은 옴니웹, 시이라, 아로라, 미도리, 유즈블, iCab, 어도비 통합 런타임, 휴대 전화 (아이폰 포함), 노키아의 Series 60 브라우저, 구글의 안드로이드 플랫폼에 사용되고 있다. 그냥 "브라우저에서 제공하는 프레임워크"라고 기억..

1. 반응형 이미지 1.1 이미지 포맷 이미지 포맷의 종류 GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 듭니다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능합니다. 애니메이션 처리가 가능합니다. JPG/JPEG (Joint Photographic Expert Group image): 매우 화소가 높고, 용량도 적지만 투명처리가 불가능합니다. PNG (Portable Network Graphics) : 왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 큽니다. SVG (Scalable Vector Graphics) : SVG 형식의 벡터 이미지는 손실이나 품질 ..