Frontend36 substring과 slice String을 추출하는 다양한 방법substr()해당 메서드는 더이상 지원하지 않는다.그래서 아래의 메서드를 사용하도록 하자 (문서) substring()사용법String.substring(indexStart, indexEnd); 결과indexStart부터 indexEnd까지 반환하는데 indexEnd는 포함하지 않는다.원본 데이터를 손상시키지 않는다.egconst str = 'apple';/* 2번째 index string은 반환하지 않음 */console.log(str.substring(0, 2)); // ap 주의`indexStart`가 `string`의 길이보다 클 경우, `indexStart`와 `indexEnd`를 교환하여 연산한다.const str = 'apple';/* 실제로 str.sub.. 2025. 2. 22. position sticky, 알고 쓰고 계신가요? 요소의 위치를 정하는 CSS 속성 중 position에 다른 값보다 늦게 합류하게 된 sticky가 있다.오늘은 무심코 써왔던 sticky에 대해 간략히 파헤쳐 볼 것이다. sticky?사전적 정의로는 끈적거리는, 착 달라붙는이라는 뜻이다.fixed는 스크롤의 위치와 관계없이 가장 최상위 블록(시각상 뷰포트)을 기준으로 고정이 되고,sticky는 부모 요소의 스크롤이 되는 시점에 고정된다는 것이다. 부모의 스크롤이 사라지면 함께 고정이 풀린다. sticky의 조상은?element는 normal flow를 따라 element의 가장 가까운 scroll 조상과 containing block을 기준으로 상대적 위치가 정해진다.이것은 다른 요소의 위치에 영향을 주지 않고 독립적으로 움직인다.sticky elem.. 2025. 2. 22. 큐와 스택, 데크는 뭘까? 큐와 스택, 데크 일렬로 늘어선 같은 형태의 자료들을 저장한다. 셋의 차이는 어느 쪽 끝에서 자료를 넣고 뺄 수 있는가 이다. 셋 다 O(1)에 이루어진다. push : 자료를 넣는 것 pop : 자료를 빼는 것 큐 선입선출 가장 먼저 들어간 자료 순으로 빠진다. 줄서기 스택 후입선출 가장 늦게 들어간 것 순으로 빠진다. 컨텍스트 관리 데크 양쪽 끝에서 자료들을 넣고 뺄 수 있다. 스택과 큐를 모두 구현 가능하다. 19.2 큐와 스택, 데크의 구현 연결 리스트 양쪽 끝에서 추가와 삭제를 모두 상수 시간에 할 수 있다. 노드의 할당과 삭제, 포인터를 따라가는데 드는 시간이 걸리기 때문에 가장 효율적이진 않다. 동적 배열 스택은 쉽게 가능하다. 하지만 앞에서 추가와 삭제가 일어나는 것은 동적 배열에서 쉽지 .. 2024. 4. 17. 제너레이터와 async/await (모던 자바스크립트 Deep Dive) 46.1 제너레이터란? 코드 블록의 실행을 일시 중지했다가 재생할 수 있는 함수 특징 호출자에게 함수 실행의 제어권을 양도할 수 있다. 함수와 호출자와 양방향으로 함수의 상태를 주고 받을 수 있다. 함수 코드를 실행하는 것이 아니라 이터러블이면서 이터레이터인 제너레이터 객체를 반환한다. 46.2 제너레이터 함수의 정의 function* 키워드로 선언한다. yield 표현식을 포함한다. 화살표 함수로는 정의할 수 없다. 생성자 함수로 호출할 수 없다. 46.3 제너레이터 객체 제너레이터 함수가 반환한 제너레이터 객체는 이터러블이면서 이터레이터다. value, done , next() 를 소유한다. return , throw 도 가진다. function* genFunc() { try { yield 1; yi.. 2024. 4. 17. 프로미스 (모던 자바스크립트 Deep Dive) ES6에서 비동기 처리를 위한 새로운 패턴 프로미스 제시! 45.1 비동기 처리를 위한 콜백 패턴의 단점 콜백 헬 비동기 함수는 동기처리 되는 함수들이 모두 처리되고 나서 마지막에 처리되기 때문에 비동기로 동작하는 코드에서 나오는 결과를 외부로 반환하거나 상위 스코프의 변수에 할당하면 기대한 대로 동작하지 않는다. 동기 함수가 자바스크립트 엔진의 콜 스택에서 모두 처리되어야, 비동기 함수가 태스크 큐에서 꺼내어져 실행이 완료될 수 있다. 비동기 함수는 브라우저 또는 Nodejs에서 이벤트 루프와 태스크 큐에서 따로 관리되기 때문에 그렇다. 그러므로 비동기 함수 내부의 코드를 외부로 반환하거나 상위 스코프에서 할당하면 눈으로 보는 것처럼 동작하지 않을 수 있다. 위와 같은 문제로, 비동기 함수의 처리 결과.. 2024. 4. 17. Ajax (모던 자바스크립트 Deep Dive) 43.1 Ajax란? Asynchronous JavaScript an XML 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체 기반으로 동작한다. 전통적인 브라우저 동작 방식을 전환한 프로그래밍 방식이다. 비동기 방식을 이용해 변경이 필요한 부분만 한정적으로 렌더링한다. 비동기 방식이기 때문에 서버와의 통신에서 블로킹이 사라진다. 43.2 JSON JavaScript Object Notation 클라이언트와 서버간의 HTTP 통신을 위한 텍스트 포맷 자바스크립트만의 데이터 포맷은 아니다. 표기 방식 객체 리터럴과 유사한 키와 값으로 .. 2024. 4. 17. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
