기기의 디스플레이 너비에 따라 다른 이미지를 사용자에게 제공하려는 경우, srcset을 사용한다. 레티나 디스플레이를 통해 고품질 이미지를 제공하여 사용자 경험을 향상시키고, 저해상도 저사양 기기에 제공하여 성능을 높이고 데이터 낭비를 줄인다. (더 큰 이미지를 제공하는 것은 눈에 보일 정도의 차이가 없기 때문) 예를 들어서 는 클라이언트 해상도에 따라 브라우저에 small, medium, large .jpg 그래픽을 표시하도록 지시한다. (첫번째 값은 이미지이름이고 두번째 값은 픽셀 단위의 이미지 width이다.) 즉, 클라이언트의 해상도가 1x일 경우, small.jpg 에 해당하는 500w가 브라우저에 의해 선택된다. 해상도가 레티나(2x) 인 경우, 브라우저는 최소값에서 가장 위로 가까운 해상도를..
www.acmicpc.net/problem/14499 14499번: 주사위 굴리기 첫째 줄에 지도의 세로 크기 N, 가로 크기 M (1 ≤ N, M ≤ 20), 주사위를 놓은 곳의 좌표 x y(0 ≤ x ≤ N-1, 0 ≤ y ≤ M-1), 그리고 명령의 개수 K (1 ≤ K ≤ 1,000)가 주어진다. 둘째 줄부터 N개의 줄에 지도 www.acmicpc.net 핵심 아이디어 생소한 시뮬레이션 문제로, 주사위를 굴리는 상황을 생각해야한다. 주사위가 움직일때 각 면의 값들을 업데이트 해주는 함수를 만들고 board 값이 0이면 주사위와 board가 맞닿은 면의 값을 board에 복사, 0이 아니라면 주사위와 board가 맞닿은 면의 값이 board의 값으로 바뀌고, 기존 board는 0으로 바뀐다. 주사위..
프로그레시브 렌더링 (점진적인 렌더링)이란 콘텐츠를 가능한한 빠르게 표시하기 위해 웹 페이지의 성능을 향상시키는 데 사용되는 기술이다. (특히, 인식되는 로딩 시간을 향상시킨다.) 서버에서 웹 페이지의 일부를 순차적으로 렌더링하고 전체 페이지가 렌더링 될 때까지 기다리지 않고, 부분적으로 클라이언트에 스트리밍하는 기술이다. 점진적인 렌더링을 이해하려면, Client Side Rendering, Server Side Rendering이 어떻게 작동하는지 이해해야한다. (velog.io/@bisu8018/%EC%A0%90%EC%A7%84%EC%A0%81-%EB%A0%8C%EB%8D%94%EB%A7%81Progressive-Rendering-%EC%9D%B4%EB%9E%80) CSR (Client Side R..
왜 css 를 내에 선언하고, js 를 직전에 위치시키는 것이 좋은 방법인가? - 안에 를 넣는 이유 를 안에 넣는 것은 최적화된 웹사이트를 구출할 때 적절한 스펙이다. 페이지가 처음 로드되면, HTML과 CSS가 동시에 파싱되는데, HTML은 DOM(Document Object Model)을 만들고, CSS는 CSSOM (CSS Object Model) 을 만든다. 2가지 모두 웹 사이트에서 시각적인 부분을 만드는데 필요하므로, 빠른 first meaningful paint를 할 수 있게 해준다. (first meaningful paint은 사이트의 성능 지표중 하나) 문서 최하단에 stylescheet를 두는 것은 이에 반하는 행동이다. 또한, 점진적인 렌더링을 하는 경우 몇몇 브라우저는 스타일이 변..
www.acmicpc.net/problem/1009 1009번: 분산처리 입력의 첫 줄에는 테스트 케이스의 개수 T가 주어진다. 그 다음 줄부터 각각의 테스트 케이스에 대해 정수 a와 b가 주어진다. (1 ≤ a < 100, 1 ≤ b < 1,000,000) www.acmicpc.net 분명히 쉬운문제 같은데 매우 풀기 까다로운 문제였다. 당장 내일 같은 문제를 만단다더라도 헷갈릴것같다. 핵심아이디어 a**b개의 데이터를 1~10번 컴퓨터로 차례로 처리할 때, 마지막 데이터는 몇번 컴퓨터가 처리하는가를 묻는 문제이다. 컴퓨터는 총 10대이므로, a**b가 1이면 1번컴퓨터, 20이면 10번컴퓨터, 115면 5번컴퓨터가 마지막 컴퓨터가 된디ㅏ. 즉, a**b의 1의자리 값만 알면 마지막 데이터를 처리하는 ..
https://github.com/woowacourse-fe-study/havruta-frontend/discussions/30 - HTML 파싱이 중단되고, 스크립트를 즉시 가져오고 실행되며, 스크립트 실행 후 HTML 파싱이 다시 시작된다. - HTML 파싱과 병렬적으로 진행되며, 가능할 때 즉시 실행된다. (HTML 파싱이 끝나기 전) 스크립트가 페이지의 다른 스크립트들과 독립적인 경우에 async를 사용하는 편이다. - HTML 파싱과 병렬적으로 가져오지만, 페이지 파싱이 끝나면 실행된다. 이것이 여러개 있는 경우, 각 스크립트는 페이지에 등장한 순서대로 실행된다. 스크립트가 완전히 파싱된 DOM에 의존하는 경우, defer 속성은 스크립트를 실행하기 전에 HTML이 완전히 파싱되도록 하는데 유용..
www.acmicpc.net/problem/2252 2252번: 줄 세우기 첫째 줄에 N(1≤N≤32,000), M(1≤M≤100,000)이 주어진다. M은 키를 비교한 회수이다. 다음 M개의 줄에는 키를 비교한 두 학생의 번호 A, B가 주어진다. 이는 학생 A가 학생 B의 앞에 서야 한다는 의미이 www.acmicpc.net 핵심 아이디어 문제와 입력 형식을 보자마자, 위상정렬로 풀 수 있는 문제임을 알 수 있다. 위상정렬 기본 템플릿을 적용하여 풀면된다. const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout, }); const soluti..
빅서로 업데이트 한 이후에, mac의 terminal이 조금씩 버벅거림을 느낄 수 있었다. 해결 방법은 terminal에 아래 커맨드를 입력해주고 vs code를 restart 하자. codesign --remove-signature /Applications/Visual\ Studio\ Code.app/Contents/Frameworks/Code\ Helper\ \(Renderer\).app
