JavaScript87 HTML - 공식문서 1.8 HTML vs XML syntax HTML 스펙 문서를 읽고 간추리고 번역하고 정리해 보았다(부족한 부분이 있다면 댓글로 남겨주세요~) 1.8 HTML vs XML syntax 문서와 프로그램을 설명하는 추상 언어와 해당 언어를 사용하는 자원들(DOM)의 인터랙션을 위한 API 를 정의해보자. 이 자원들(in-memory representations)은 DOM HTML 혹은 DOM 이라고 짧게 줄여 말할 수 있다. 이러한 자원들을 전송하기 위해 사용되는 다양한 콘크리트 syntax(구문)들 중 2가지를 소개해보겠다. 첫 번째로 소개할 형식은 HTML 이다. 이 구문는 대체로 널리 사용되고 있는 포맷이고, 레거시 브라우저들과도 호환이 가능하다. [text/html] 와 같은 mime type 을 네트워크 헤더에 포함시킨 문서.. 2025. 1. 7. HTML - 이미지 태그에 lazy loading 적용하기 웹의 화면을 그리는 로딩(렌더)시간은 짧으면 짧을 수록 좋다.결국 리소스를 서버에서 받아와 그리는 작업이기 때문에 마치 전투와 같이 어떤 병력을 선발대와 후발대로 배치하느냐의 전략과도 같다고 생각한다. 날쌔고 빠른 놈은 선발대로 보내고, 무겁고 느린놈은 후발대로 보내는 경우, 리소스 배치도 이와 비슷하다고 생각한다.웹 페이지 로딩시에 텍스트나 작은 섬네일처럼 무게가 가벼운 친구들은 그대로 보여주지만 스크롤을 내려야 만날 수 있는 애들은 내릴때쯤 느긋하게 보여주는 것도 방법이다. 이를 위해 여러 프레임워크의 라이브러리나 바닐라로 구현도 가능하겠지만, 이 포스팅에서는 브라우저 레벨에서의 attribute 로서의 lazy 에 대해서 최대한 심플하게 설명하고자 한다. 해외 블로그의 브라우저 로드에 관한 포스팅도.. 2024. 12. 27. Network - Cache 그리고 Cache-Control 캐시라는 단어는 오로지 캐쉬 ca-sh 였던 때가 있었다하지만 지금은 이 캐시 ca-che 라는 녀석이 업무 영역 전반에 자리잡고 있다이 친구 매력 있어서 궁금하다 좀 더 알아보자 Network - Cache 그리고 Cache-Control 클라이언트와 🔛 서버는 통신을 하며 데이터를 화면에 보여준다BUT 이전에 받은 데이터와 === 새로 요청한 데이터가 같으면 이 과정은 낭비이다 그 낭비를 줄이기 위해 cache 정책을 사용하게 된다잘 사용하면 Server는 부하를 줄이고, Client는 네트워크를 거치는 시간을 아낄 수 있다 데이터를 CDN같은 cache 서버 혹은 브라우저의 cache 안에 저장하고 꺼내서 사용하게 된다그러기 위해 요청 헤더에 Cache-Control 을 사용한다 캐시의 종류Pri.. 2024. 11. 14. HTML - 공식문서 1.7 Design notes 그간 미루어 왔던 HTML 스펙문서를 읽고 정리해 보았다.영어실력도 기를 겸 영어문서를 내가 이해한 방식으로 정리도 함께 해보려고 한다. 1.7 Design notesHTML 을 처음 볼때 비합리적이고 일관성이 없어보인다. 많은 DOM API 를 서포팅하는 HTML 은 수십년 동안 많은 케이스 중에서 서로의 존재를 몰랐던 많은 사람들은 다양한 우선순위를 가지고 발전해왔다. HTML 의 기능들은 많은 소스들에 의해 만들어졌고, 항상 일관성있게 고안되지는 않았다.게다가 implementation 된 버그가 사실상(de-facto) 표준이 되었고, 이제는 법적(de-jure) 표준이 되었다.버그가 수정되기 전에 종종 콘텐츠가 그 버그에 의존하는 방식으로 작성되기 때문이다.그럼에도 불구하고 design g.. 2024. 8. 19. CSS - Scss vs Css in Js 동작방식 비교하기 실무에서는 각기 다른 프로젝트에 scss 와 Css in js 를 둘다 사용한다. 알고 모르고의 차이가 엄청난 업무 효율의 차이를 가져온다. 어렴풋이 알고만 있고 설명할 수 없다면 그것은 지식이 아니기 때문에(의식의 흐름대로 이해해본) scss 와 css in js 에 대한 포스팅을 올려보게 되었다. 문득 면접 질문들 중에 렌더 과정에 대한 질문이 생각났다.당시에는 면접용으로 달달 외우듯이 공부했었지만실무에서 한 모먼트씩 떠오르며 기초체력을 바탕으로 추진력과 인사이트를 얻었던 계기가 되었다.더 추가되는 지식이 있으면 계속 업데이트해볼 생각이다 CSS - Scss vs Css in Js 의 동작방식 비교하기 SCSScssom 트리를 그리기 위해서는 css 파일을 읽어야 한다.기존의 css 파일은 좀 구렸다.. 2024. 8. 4. JavaScript - async / defer 스크립트 속성 (feat. kakao sdk 로컬 에러) 카카오 sdk 는 로컬에서 돌아가지 않고 퍼블릭 url 에서만 돌아가게 된다. 스크립트 형식으로 삽입되면 에러를 내뱉을 때까지 한참을 기다려야 해서로컬 개발 환경에서의 개발자 경험이 좋지 못하다. // .... err// 나 : 잉....? 왜 안되지? 왜 그럴까html 은 async script 안에 async 속성을 사용하면 마찬가지로 브라우저는 백그라운드에서 다운로드한다.따라서 스크립트를 다운로드 하는 도중에도 HTML 파싱은 계속된다. 파싱이 완료 된후 스크립트는 실행된다.defer 와 달리 DOMContentLoaded 이벤트를 신경쓰지 앟고 HTML 파싱 후 그냥 되는데로 실행이 된다.실행순서가 보장이 안되고 제각각이다. 해결async 옵션을 통해 비동기적으로 완료되는대로.. 2024. 7. 15. 알고리즘 - 퀵 정렬(Quick Sort) 퀵 정렬 (Quick Sort)이란퀵 정렬은 특정 원소(피벗) 기준으로 주어진 배열을 두 부분 배열로 분할한 뒤, 각 부분 배열에 대해서 퀵 정렬을 순환적(재귀적)으로 적용하는 방식이다 퀵 정렬은 최악의 경우 시간 복잡도 O(n²) 이고 평균적인 시간 복잡도는 O(nlogn) 이다. 최악의 경우는 피봇이 배열의 맨 처음 혹은 마지막으로 쏠려 일어나는 불균형적인 분할인 상황이며, 최선의 경우는 피봇이 정확히 n/2크기로 분할되는 균형적인 분할로 볼 수 있다. 하지만 피봇의 임의성만 보장된다면 평균성능 O(nlogn) 의 가능성이 매우 높게 된다. 퀵 정렬을 분할 정복 단계로 본다면분할: 피벗을 기준으로 주어진 배열을 두 부분 배열로 분할한다.정복: 두 부분배열에 대해서 퀵정렬을 순환적으로 적용하여 각 부분.. 2024. 6. 9. 알고리즘 - 이진 탐색 탐색은 배열 형태로 주어진 데이터에서 원하는 값을 가진 데이터를 찾는 알고리즘이다.이진 탐색은 입력된 데이터가 정렬된 상태로 주어진 경우에 효과적으로 수행할 수 있다. 여기서는 데이터가 오름차순으로 정렬되어 있다고 가정한다. 먼저 큰 틀에서 심플하게 4단계로 생각해보았다.배열은 오름차순 기준이고, 탐색키 key 와 가운데 원소 값이 같다면 즉시 종료한다.가운데 원소를 기준으로 좌우로 배열을 쪼갠다.key 와 가운데 원소를 비교해서 작으면 좌배열 크면 우배열에서 검사를 다시 시작한다.key 를 찾을 때까지 1번부터 다시 반복한다. 재귀적 용법을 사용한 이진트리 알고리즘BinarySearch 라는 함수의 입력값은 arr과 right,left, key 라는 값이다.arr 은 오름차순 정렬된 배열이다.key 는.. 2024. 5. 19. 알고리즘 - 알고리즘이란 알고리즘이란 주어진 문제를 해결하기 위한 일련의 처리과정을 단계적으로 나열한 것입출력 / 명확성 / 유한성 / 유효성설계 → 기술 → 정확성 분석 → 효율성 분석 알고리즘의 기본 자료구조선형 자료구조 : 배열 / 연결 리스트 / 스택 / 큐비선형 자료구조 : 트리 / 그래프 알고리즘의 대표적인 설계기법- 분할 정복 방법- 동적 프로그래밍 방법 - 욕심쟁이 방법 알고리즘의 분석정확성 / 효율성 분석 (공간 복잡도 & 시간복잡도) - 시간 복잡도알고리즘을 실행시켜 완료까지 걸리는 시간으로알고리즘에서 수행되는 단위 연산의 총 횟수로 계산된다입력 크기의 함수로 표현하며 최악의 수행 시간을 사용한다 점근 성능입력 크기가 충분히 커질 때의 알고리즘 성능다항식의 수행 시간에 대해서 계수 없이 최고 차항 만을 표시- .. 2024. 5. 11. 이전 1 2 3 4 ··· 10 다음 반응형
