JavaScript85 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 Desige 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. JavaScript - Debugger 사용기 (Feat. 크롬 개발자 도구) 디버거 (잘) 사용하고 싶다 디버거 사용이 손에 익지 않아 우리들의 콘솔로그로 디버깅을 주로 하였는데 손이 아파서 이제 타이핑을 못치겠다.. ("console": ..🤨?) 라는 핑계를 대면서 크롬에서 제공하는 디버깅 툴을 사용해 보려고 한다 이번에 포스팅을 정리해보며 한번이라도 더 손에 익기를 바라며 🙃 JavaScript - Debugger 사용기 (Feat. 크롬 개발자 도구) 그렇다면 우리의 디버거는 어디 숨어있을까 개발자 도구를 키면 [Sources] 라는 탭이 있다 [Sources] 탭을 클릭해보면 조금 복잡해보이지만 섹션이 크게 3개로 나뉘어 있다 소스파일들 디렉터리 소스파일들의 코드들 디버거 툴 우리가 사용할 디버거 툴은 빨간 박스로 표기해놓았다 좀더 자세히 살펴보면 Watch, Break.. 2024. 3. 27. JavaScript - 마우스 커서에 달린 툴팁 최적화하기 (mousemove) 마우스 오버시 커서를 따라다니는 툴팁을 구현하며 리팩토링하는 과정을 간결하게 기록해보았다 이제는 어떻게 라는 질문이 머리속에 제일 먼저 맴돌기 시작한다 오늘 아침에 출근하면서 본 토스 컨퍼런스의 인트로 영상 문구가 생각났다 내가 좀 더 고생해야 사용하는 유저의 시간을 아낄 수 있다 최적화라는 단어에 대해 고심하게 되는 시기가 온 것이다 내가 좀 더 고생해야 사용하는 유저의 시간을 아낄 수 있다 JavaScript - 마우스 커서에 달린 툴팁 최적화하기 (mousemove) 첫번째 이슈 - useState mousemove 이벤트를 통해 실시간으로 좌표값을 받아와 useState 에 저장하여 → 툴팁에 style 값으로 넣어주는 방식을 사용하였다. 그렇게 되니 이슈가 생겼다. mousemove 시에 계속 .. 2024. 2. 1. 이전 1 2 3 4 ··· 10 다음 반응형
