본문 바로가기

분류 전체보기

 (262)
Web - 웹 폰트(Web Font) 최적화 1. 웹 폰트란 무었인가? 2. 웹 폰트의 장, 단점 3. 웹 폰트 확장자 4. 웹 폰트 최적화 방법(폰트 파일사이즈 줄이기, 서브셋 폰트 사용) 웹 성능 최적화 관련 공부를 하다가 네트워크 탭을 보아았는데 폰트 파일의 크기가 무려 3.8MB였다...... OTF 확장자의 폰트를 사용했기 때문이다. 분명 웹페이지 로딩 속도에 상당히 영향을 주었을것이다. 오늘은 이 무지막지한 폰트파일의 사이즈때문에 충격을 먹어 폰트 최적화에 대해 공부하려고 한다. 1. 웹 폰트란 무었인가? 웹 폰트란 웹사이트 방문자의 컴퓨터에 폰트 설치 여부와 상관없이 웹사이트의 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 역할을 한다. 2. 웹 폰트의 장, 단점 장점 웹 폰트를 사용하면 사용자의 컴퓨터에 해당 폰트가 없어도..
Programmers - Js - 피자 나눠 먹기(3) 문제 설명 머쓱이네 피자가게는 피자를 두 조각에서 열 조각까지 원하는 조각 수로 잘라줍니다. 피자 조각 수 slice와 피자를 먹는 사람의 수 n이 매개변수로 주어질 때, n명의 사람이 최소 한 조각 이상 피자를 먹으려면 최소 몇 판의 피자를 시켜야 하는지를 return 하도록 solution 함수를 완성해보세요. 제한 사항 2 ≤ slice ≤ 10 1 ≤ n ≤ 100 입출력 예 입출력 예 #1 10명이 7조각으로 자른 피자를 한 조각 이상씩 먹으려면 최소 2판을 시켜야 합니다. 입출력 예 #2 12명이 4조각으로 자른 피자를 한 조각 이상씩 먹으려면 최소 3판을 시켜야 합니다. 나의 풀이 function solution(slice, n) { let answer = 1; let sliceNum = s..
Programmers - Js - 배열 뒤집기 문제 설명 정수가 들어 있는 배열 num_list가 매개변수로 주어집니다. num_list의 원소의 순서를 거꾸로 뒤집은 배열을 return하도록 solution 함수를 완성해주세요. 제한 사항 1 ≤ num_list의 길이 ≤ 1,000 0 ≤ num_list의 원소 ≤ 1,000 입출력 예 나의 풀이 function solution(num_list) { // 배열 요소를 뒤집기 위해 reverse함수 사용 return num_list.reverse(); }
vue - 성능 최적화(번들 사이즈 줄이기, Code Splitting) 1. 번들 사이즈와 Code Splitting이 렌더링 속도에 영향을 주는 이유 2. 번들(webpack) 사이즈 최적화 3. 코드 분할(Code Splitting) 4.이미지 Lazy Loading 오늘은 진행하고있는 프로젝트의 첫 웹사이트 접근시 렌더링 속도를 개선하기위한 작업을 포스팅하려고한다. 웹사이트의 초기 로딩시간이 길어질수록 사용자 경험은 떨어진다. 네트워크 속도가 빠르다면 크게 문제되진 않겠지만 모두가 좋은 네트워크 환경속에서 있는건 아니기때문에 개선을 하고자한다. 프론트엔드에서의 성능 최적화는 여러 관점에서 볼 수 있다. 번들 사이즈 줄이기, Code Splitting, 이미지 lazy loading, 폰트 최적화, 리플로우 / 리페인팅 등등.... 폰트 최적화에 대한 포스팅 보기 => ..
Programmers - Js - 배열 자르기 문제 설명 정수 배열 numbers와 정수 num1, num2가 매개변수로 주어질 때, numbers의 num1번 째 인덱스부터 num2번째 인덱스까지 자른 정수 배열을 return 하도록 solution 함수를 완성해보세요. 제한 사항 2 ≤ numbers의 길이 ≤ 30 0 ≤ numbers의 원소 ≤ 1,000 0 ≤num1
Programmers - Js - 점의 위치 구하기 문제 설명 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. x 좌표 (x, y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1, 2, 3, 4 중 하나를 return 하도록 solution 함수를 완성해주세요. 제한 사항 dot의 길이 = 2 dot[0]은 x좌표를, dot[1]은 y좌표를 나타냅니다 -500 ≤ dot의 원소 ≤ 500 dot의..
Programmers - Js - 문자열 뒤집기 문제 설명 문자열 my_string이 매개변수로 주어집니다. my_string을 거꾸로 뒤집은 문자열을 return하도록 solution 함수를 완성해주세요. 제한 사항 1 ≤ my_string의 길이 ≤ 1,000 입출력 예 나의 풀이 function solution(my_string) { // 문자열을 배열에 담기 위해 spread연산자를 이용 // reverse함수로 배열내용을 뒤집은 뒤 join함수로 합침 return [...my_string].reverse().join(""); }
Programmers - Js - 짝수의 합 문제 설명 정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요. 제한 사항 0

티스토리툴바