멋쟁이사자처럼FE 2기 45

웹 최적화(Optimization)

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

스코프&클래스(Class)

스코프란? 변수값의 생존범위 스코프 체인이란? 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'); } } 이렇게 표현할 수 있다. 그리고 또한 객체는 행동과 상태를 가진다. 여기서 행동은 메소드, 상..

20일차_Sass(1)

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..

반응형 웹 만들기(CSS)

브라우저 / 테블릿 / 모바일 반응형 헷갈렸던 부분 테블릿과 모바일 부분에서 자꾸 가로 스크롤이 생겼다. 문제는 처음에 부모요소와 자식요소 모두에 width가 rem 등으로 지정되어 있어서 발생한 듯 하다. 부모요소에 width:100vw를 주고 자식요소에 width를 삭제 해주니 문제가 해결되었다. 참고영상 보기 이 2가지 영상을 보고 참고해서 다시 작성해보는 것도 좋은 방법일 듯 하다. https://www.youtube.com/watch?v=xWMKz9NCD0k https://www.youtube.com/watch?v=AfxL9OKBBCU&start=3

SVG로 지도 만들기

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..

19일차_Base 64코드

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