![]()
오늘은 tsx 에서 styled-components 사용시 발생한 경고를 해결한 벙법을 정리해보겠습니다.상황은 조건부로 styled-components 를 처리하려고 styled div 에 prop을 전송하는 상황입니다.unknown prop?import styled from "styled-components";import { ToDo } from "../types/d";// 아래와 같이 적용하면,// it looks like an unknown prop "one" is being sent through to the DOM, which will likely trigger a React console error.// 위와 같은 에러가 발생합니다!const StyledDiv = styled.div` b..
![]()
리액트 첫 주차 과제 todo list 만들기를 완료하였습니다.간단한 과제이기 때문에 기술적인 어려움은 없었지만리액트 기본에 관한 몇몇 질문에 확실하게 대답하기 어려운 부분이 있었습니다.무언가 알고는 있지만 말로 해보려니 잘 정리가 안되는 부분들을 다시한번 간결하게 정리해 보려고 합니다.JSX 문법이란?JSX 란 Javascript 와 xml 의 결합어의 약자로서 자바스크립트와 xml 이 합쳐진 문법입니다.하나의 파일에 js 와 html 을 동시에 작성하여 편리합니다.브라우저에서 실행되기 전에 바벨 등을 통해 일반 자바스크립트로 변환됩니다.useState?애플리케이션의 상태를 관리하기 위해 리액트의 useState 훅을 사용하였습니다.데이터의 불변성을 유지하면서 상태를 관리할 수 있으며 간결하고 직관적인..
![]()
오늘은 본격적인 리액트 주차에 접어들어 특강을 수강했습니다.리액트를 다루는데 있어 무엇보다 중요한 리렌더링의 조건에 대해 확실하게 정리가 된 시간이었습니다.이것은 공식처럼 알고 있어야 할 것 같습니다. 리렌더링의 조건state가 변경되면 컴포넌트는 리렌더링됩니다.부모 컴포넌트로부터 받는 props의 값이 변경되면 컴포넌트는 리렌더링됩니다.부모 컴포넌트가 리렌더링되면 자식 컴포넌트는 리렌더링됩니다. state가 변경되면 컴포넌트는 리렌더링됩니다.state는 컴포넌트의 상태를 나타내며, 상태가 변경되면 해당 컴포넌트와 그 하위 컴포넌트들은 리렌더링됩니다.React는 setState 함수가 호출될 때마다 컴포넌트가 새 상태를 반영하도록 리렌더링을 트리거합니다.부모 컴포넌트로부터 전달받는 props의 값이 변경..
![]()
오늘은 리액트를 공부하면서 그동안 왜 그렇게 사용해야 하는지 모르고당연하게 써왔던 방법과 관련하여 그 원리에 대해 알아보았습니다.불변성(Immutability)의 원칙과 순수함수 지향에 대한 내용입니다. 불변성(Immutability)의 원칙리액트에서 상태 관리를 다룰 때 불변성(Immutability)을 유지하는 방식으로 코드를 작성해야 합니다.불변성은 데이터가 생성된 후 수정되지 않고, 변경이 필요한 경우 새로운 데이터를 생성해서 사용하는 원칙을 의미합니다. 리액트에서 불변성을 유지하는 이유는 주로 성능 최적화와 관련이 있습니다.리액트는 상태가 변경될 때 렌더링을 결정하는데, 객체나 배열 같은참조 타입의 데이터는 내용이 변경되어도 참조 주소가 동일할 수 있습니다. 이 경우 리액트는 상태가 변화하지 않..
![]()
두번째 팀프로젝트가 어느새 지나가고, 본격적인 리액트 학습 주차에 접어들었습니다. SPA의 원리와 장단점에 대해 공부하다가, Hash Routing 이라는 방법으로바닐라 자바스크립트에서 SPA 처럼 구현할 수 있다는 것을 알게 되었습니다. 리액트는 History API 로 이러한 SPA 를 구현하는 것으로 알고 있는데,Hash Routing 은 처음 보아서, 두 가지 방법을 모두 정리해 보아야겠다고 생각했습니다. Hash Routing해시드 라우팅은 URL의 해시를 사용하여 클라이언트 측에서 페이지의 구역을 로드합니다.URL의 # 부분은 서버로 전송되지 않기 때문에, 이를 활용하여 페이지 리로드 없이 URL을 변경할 수 있습니다.예를 들어, http://example.com/#/page1에서 #/page..
![]()
오늘은 이벤트 버블링과 캡처링에 대해 다시 공부하면서,관련 메서드 3가지를 정리해 보았습니다.이벤트 버블링과 캡처링이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트가 발생한 가장 아래(자식) 요소에서 시작하여, DOM 트리를 따라 점점 상위 요소로 전파되는 과정을 말합니다. 예를 들어, HTML 문서에서 버튼(button)을 클릭하면 이벤트는 먼저 해당 button에서 발생하고, 그 후 button의 부모 요소로, 그 다음은 조상 요소로 순차적으로 이벤트가 전파됩니다. Click me!위의 예에서 버튼을 클릭하면, 클릭 이벤트는 먼저 button에서 발생하고, 그 후 div, 그리고 body, html 요소로 차례로 전파됩니다.이벤트 캡처링 (Event Capturing)이벤트 캡처링은..
![]()
문제상황오늘은 캐러셀을 만들다가 유저가 반복적으로 이전, 이후를 클릭할 경우에 캐러셀 자동 넘어가기 기능을 재개하는 시점을 어떻게 잡아야 할 것인지에 대한 문제에 봉착했습니다. 캐러셀은 좌 우 로 직접 넘겨볼 수 도 있고, 가만히 놔두면 자동으로 넘어가기도 하게끔 만들고 싶었는데,자동으로 넘어가다가 유저가 좌 우를 클릭하여 개입할 경우에 문제가 발생했습니다. 단순히 좌 우를 유저가 클릭하면 requestAnimationFrame(이하 rAF) 을 cancel 하고, setTimeout 을 이용해 5초 뒤에 다시 rAF 를 실행하게 하였는데, 그러자 클릭할 때마다계속해서 rAF 가 실행되어 결국 stack overflow 엔딩이 될 것이 명백했습니다. 생각한 해결책생각한 해결책으로는, 유저가 좌, 우를 ..
![]()
오늘은 깊은 복사의 구현 방법에 대해 공부하다가, Object.assign 메서드에 대해서도 알게 되었습니다.먼저 Object.assign을 간단히 정리하고, 해당 메서드로도 구현할 수 없는 깊은 복사를재귀함수로 구현하는 방법을 알아보려고 합니다.Object.assignObject.assign 메서드는 소스 객체의 모든 열거 가능한 속성을 타겟 객체에 복사합니다.이 메서드는 타겟 객체를 수정하고, 수정된 타겟 객체를 반환합니다.Object.assign은 주로 객체의 속성을 복사하거나 합치는 데 사용됩니다. 사용법Object.assign 메서드는 첫 번째 인자로 타겟 객체를 받고, 그 뒤에 하나 이상의 소스 객체를 받습니다.소스 객체의 속성은 타겟 객체로 복사되며, 이미 존재하는 속성은 덮어쓰기 됩니다.O..
![]()
오늘은 Object.is 에 대해 정리해 보려고 합니다.Object.is의 개념Object.is는 두 값이 같은지를 판별하는 메서드입니다.이 메서드는 === (엄격한 동등 연산자)와 비슷하게 작동하지만, 몇 가지 특별한 경우에서 다르게 동작합니다.Object.is는 다음과 같은 경우에 true를 반환합니다:두 값이 정확히 같은 경우 (예: 같은 객체를 참조하거나, 두 변수가 같은 기본값을 갖는 경우).두 값이 모두 NaN인 경우 (NaN === NaN은 false이지만, Object.is(NaN, NaN)은 true).두 값이 0과 -0인 경우 서로 다르다고 판단 (0 === -0은 true이지만, Object.is(0, -0)은 false).사용법Object.is 메서드는 두 개의 인자를 받으며, 이 ..
![]()
벌써 3주차가 지나갔습니다. 이번 주는 팀 과제를 수행하면서 주로 실전적인 개발지식들을 좀 더 쌓을 수 있었습니다. HTMLcollection 과 NodeList, DOMcontentLoaded,js모듈에서의 변수 export import 등 다양한 상황에 필요한 내용들을 익혔습니다. 이번 WIL 에서는 이번주에 새롭게 익힌 내용 중 query parameter 에 대한 내용을 살짝 정리해보려고 합니다.쿼리파라미터는 path가 끝난 후 ? 로 시작하여 & 로 연결되는데, 테스트 중 &가 아닌 ? 로 연결했을 때도 작동하는 경우가 있었습니다.왜 이런 것인지는 잘 모르겠지만 아마도 서버가 관대한 부분이 있어서(?) 였던 것 같습니다. 그래서 이 규칙이 갑자기 헷갈렸었는데, 다시 정리해보면 'https://p..
![]()
오늘은 기초적인 내용이지만 헷갈려서 정확히 알지 못했던 변수 사용법에 대해 정리해 보려고 합니다. 상황자바스크립트 모듈 a.js, b.js, data.js 가 있습니다.a.js 와 b.js 는 무언가 기능을 하는 친구고data.js 에는 let fruit = "delicious"; 라는 변수가 export 되었습니다.각 모듈은 html 에서 type="module" 이 적용된 script 입니다. 궁금증은,"a.js 에서 import 한 fruit 변수를 재할당 할 경우 그 변동된 값이 b.js 에서도 반영되는가?"였습니다. 해답자바스크립트 ES6 모듈(commonJS 는 안된다고 합니다)에서 export로 내보낸 변수는,라이브 바인딩(live binding)이 적용되기 때문에, 한 모듈에서 변수의 값을..
![]()
오늘은 바닐라 자바스크립트로 코딩할때 으레 사용하게 되는 domContentLoaded 이벤트에 대해 궁금증이 생겼습니다. 처럼 defer 속성을 주거나 의 최하단에 를 적용하거나 하면dom 요소가 모두 로드되고 실행되어서 domContentLoaded 는 사용하지 않아도 되는 줄 알았는데,확실히 보장하려면 사용하는게 좋다는 결론을 얻었습니다. 사용 여부는 script 태그의 속성이 어떤지에 따라 달라질 수 있으므로, 먼저 script 태그의 속성부터 정리해보겠습니다. script - defer- 로딩 시점: 스크립트는 HTML 파싱 동안에 백그라운드에서 다운로드됩니다.- 실행 시점: HTML 문서의 파싱이 완전히 끝난 후, DOMContentLoaded 이벤트가 발생하기 전에 실행됩니다.- 순서 보장:..
![]()
오늘은 AbortController 라는 새로운 객체에 대해 알게되어 정리해보려고 합니다. AbortControllerAbortController는 하나 이상의 웹 요청을 취소할 수 있게 해주는 인터페이스 입니다. 기본동작1. 생성AbortController 객체는 생성자를 통해 호출합니다.const controller = new AbortController(); 2. 속성AbortController 객체는 signal 이라는 속성을 가지고 있으며, 이 신호는 여러 요청에 사용될 수 있습니다.const { signal } = controller; 3. 요청 취소signal 을 fetch 의 옵션으로 사용하여 나중에 요청을 취소 할 수 있습니다.fetch(url, { signal }) .then(r..
![]()
오늘은 HTMLCollection, NodeList에 대해서 알아보았습니다. querySelectorAll 이나 getElementsByClassName 등으로 dom 유사배열객체를 찾아왔을 경우배열이라고 생각해서 배열메서드를 사용했는데 안되는 경우가 있었습니다. HTMLCollectionHTMLCollection은 getElementsBy~ 와 같은 메서드에 의해 찾아진 유사배열객체입니다.HTMLCollection의 경우 Array.prototype 에 정의된 메서드들을 바로 쓸 수 없습니다.사용하려면 간단히 배열로 변환해서 쓰면 됩니다.//Array.from 사용하기let collection = document.getElementsByClassName('some-class');let elementsA..
![]()
오늘은 자바스크립트의 비동기와 관련된 이벤트 루프와 태스크 큐에 대해 공부했습니다.자바스크립트는 싱글스레드 언어인 것으로 알고 있는데, 태스크 큐는 또 다른 스레드를 쓴다고 합니다.그렇다면 사실 멀티스레드인 걸까요? 그리고 태스크 큐는 비동기 함수나 콜백을 실행할 때만 사용되는 것인가요?자바스크립트의 싱글 스레드 동작자바스크립트 엔진은 싱글 스레드로 동작합니다. 즉, 한 번에 하나의 태스크만 실행할 수 있습니다. 하지만 자바스크립트 환경(주로 브라우저나 Node.js)은 싱글 스레드인 자바스크립트 엔진 외에도 여러 개의 백그라운드 스레드를 사용하여 비동기 작업을 처리할 수 있게 해줍니다.이벤트 루프와 태스크 큐이벤트 루프는 자바스크립트가 멀티 스레드 같이 동작할 수 있게 하는 메커니즘입니다. 이벤트 루프..
![]()
이번 주는 개인학습 주차였습니다.그동안 안다고 생각했지만 다시 생각해보니 정확히 모르고있었던실행컨텍스트, this바인딩, 클로저 등의 개념에 대해 공부하였고, 이해할 수 있었습니다.이번 주차에 공부한 내용을 정리해보려고 합니다.실행 컨텍스트JavaScript에서 "실행 컨텍스트(Execution Context)"는 코드가 실행되기 위한 환경이나 상태를 말합니다. 실행 컨텍스트는 JavaScript 엔진이 코드를 실행할 때 관련 정보를 담고 있는 내부 데이터 구조입니다. 실행 컨텍스트에는 변수, 객체, 함수 호출 등 코드의 실행에 필요한 모든 정보가 포함되어 있습니다.실행 컨텍스트의 구성 요소실행 컨텍스트는 크게 세 가지 주요 구성 요소를 가지고 있습니다:변수 환경(Variable Environment):..
![]()
드디어 제가 클로저에 대해 조금 이해한 것 같습니다..! 그동안 여러번 공부했지만 이해하지 못했던 것 같은데이제야 드디어 약간(?) 알겠어서 정리해봅니다.공식 정의(?)가 아닌 제가 이해한 바를 정리해보려고 합니다. 클로저란?상태를 안전하게 변경하고 유지하기 위해(은닉화) 사용하는 JS의 기능으로중첩된 함수에서, 외부함수의 생명주기가 종료했음에도 여전히 상태가 참조되고 있는 것! 일반적인 상황// 함수가 호출될때다 증가해야하는 상태변수let num = 0;// 상태 변경 함수const increase = () => { return ++num}console.log(increase()); // 1// 만약 여기서 num = 100; // 이런식으로 변경해버리면console.log(increase());..
![]()
다음과 같은 this 바인딩에 대해 생각해볼 수 있는 코드를 실행해보는 과정에서 예상하지 못한 동작이 발생했습니다. var fullname = 'Ciryl Gane'var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function () { return this.fullname; } }, getName: function() { return this.fullname; }, getFirstName: () => { return this.fullname.split(' ')[0]; ..
![]()
오늘은 바닐라 자바스크립트로 DOM에 요소를 추가하는 상황에서documentFragment 객체에 대해 알게 되었습니다.react를 사용하면 볼 일이 많이 없을 수도 있지만 새로운 개념을 알게되어 정리합니다! Document Fragment 의 정의DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는, 가상 메모리에 존재하는 DOM 노드 객체입니다. DocumentFragment 노드를 사용하면 메인 DOM 트리 외부에 경량화된 DOM을 만들 수 있어 브라우저 repaint 영향 없이 메모리에서 DOM 조작이 가능합니다. 용도와 효과-메인 DOM의 조작(manipulation)이 필요할때 페이지 reflow 등 성능적 영향을 최소한으로 줄이기 위해 사용합니다.-Do..
![]()
오늘은 화살표함수와 일반함수에서의 this 바인딩이 너무 헷갈려서 다시 공부했습니다. 안녕하세요! 자바스크립트에서 일반 함수와 화살표 함수의 this 바인딩 차이를 이해하는 것은 중요한 부분입니다. 두 함수 유형의 this 바인딩 방식의 차이는 다음과 같습니다: 1. 일반 함수 일반 함수에서 this의 값은 함수가 호출되는 방식에 따라 결정됩니다. 즉, 누가 함수를 호출하느냐에 따라 this가 결정됩니다. 다음은 몇 가지 일반적인 경우입니다: 객체의 메소드로 호출될 때: this는 메소드를 호출한 객체를 가리킵니다. 단독 함수로 호출될 때: 엄격 모드(strict mode)에서는 this가 undefined가 되고, 비엄격 모드(non-strict mode)에서는 this가 전역 객체(global obj..
![]()
오늘은 전 팀원님과 지난 팀프로젝트 코드 리뷰를 진행했습니다! 꽤나 시간이 걸렸지만 한 줄 한 줄 이야기 나누면서 이해도도 높아지고 함께 코딩한다는 것이 어떤 느낌인지도 확실히 알 수 있었습니다. 그 과정에서 내 코드를 돌아보며, ' 좋은 함수' 란 무엇인지에 대해 되새겨 보았습니다. 특히, 함수 보다 상위 스코프에서 정의된 변수를 사용할 경우, 함수 실행시 해당 상위 변수를 파라미터에 넣어서 쓰는게 좋은지, 아니면 그냥 상위 변수를 참조해도 되는지가 명확하지 않았습니다. 그래서 '좋은 함수'에 대해 다시한번 되짚어 보았습니다. 1. 순수 함수 (Pure Functions): 가능하면 순수 함수를 사용하는 것이 좋습니다. 순수 함수는 동일한 입력에 대해 항상 동일한 결과를 반환하며, 외부 상태를 변경하지..
![]()
첫 WIL 을 작성해보려고 합니다. 캠프 첫 주차를 무사히 통과했고, 배운 것이 참 많은 한 주 였습니다. (사전캠프 때부터 함께하긴 했지만)새롭게 만난 팀원들과 함께프로젝트를 진행하는 것이 쉽지많은 않았던 것 같습니다. 전공자 분들이 계셨지만, 프론트엔드 팀프로젝트는 모두 처음이셔서 하나하나 찾아보고 배우면서 진행해야 했기 때문입니다. 하지만 우리 팀은 케미(?)가 잘 맞았고, 금요일 쯤에는 흩어지는게 아쉬워서수업 종료 이후에도 모두가 남아 계속 이야기를 이어갈 정도로 팀워크가 좋았습니다. [github]1주일을 돌아보면, 우리가 가장 어려워했던 것은 github을 이용한 협업과정 이었습니다.명령어와 동작을 하나하나 이해하고, 알아가게 된 뒤에도 병합상황 등에서 뜻대로 되지..
![]()
오늘 첫 팀 프로젝트를 완료하고 발표까지 마쳤습니다! KPT 에 의거하여 회고를 작성해보려고 하니다. 먼저 K(Keep - 현재 만족하고 있는 부분) 로는, 1. 팀원 분들과의 협업 프로세스가 안정적으로 잘 진행되었다고 생각합니다. 2. 역할 분담 역시 자연스럽게 효율적으로 잘 이루어 진 것 같습니다. 다음으로 P(Problem - 문제라고 생각되는 부분) 로는, 1. 다른 팀의 발표를 보며, 디자인의 중요성을 다시한번 느꼈습니다. 2. readme 작성도 중요한 부분임을 배웠습니다. 3. crud 에서 auth 는 반드시 필요한 것임을 배웠습니다. 마지막으로 T(Try - 해결책) 로는, 1. 프론트엔드에서 디자인이 차지하는 부분이 정말 크다는 것을 체감했고, 디자인을 직접 해야하는 상황이라면, 전체 ..
![]()
오늘은 팀원분들과의 팀프로젝트 마지막 날이었습니다. 거의 하루종일 git & github 때문에 어려웠던 날이었습니다. ㅜ. ㅜ 우리는 각각 branch 를 나눠 작업하고 main 에 병합하는 방법으로 진행해보기로 했는데, 아직 익숙하지 않다보니 계속 에러와 마주쳤습니다. 특히 pull, merge 등 병합 상황에서 conflict가 발생했을 때 충돌 부분을 수정하는 것이 무언가 아직은 부담스럽고 어렵게 느껴졌습니다. 그러나 어려움 끝에 각각 작업한 결과들을 main에 성공적으로 병합할 수 있었고 시간 내에 프로젝트를 완성하였습니다. 물론 여러가지 부족한 점이 많지만 첫 팀프로젝트를 무사히 완료한 것에 뿌듯함을 느낍니다. 마지막으로 오늘 겪었던 git 문제 해결 상황을 정리합니다. ■ 개인branch 에..
![]()
오늘도 팀원들과 함께 팀프로젝트를 진행하였습니다. 바닐라 환경(?) 그러니까 아무것도 없는 폴더에서 시작하여 html 마크업부터 하고, js, css 작성 및 연결하는 상황인데, 오늘의 문제는 env 사용시 마주친, "process is not defined" 였습니다... vite 혹은 react, next 프로젝트에서는 env사용시 클라이언트에서도 NEXT_PUBLIC 등을 붙여주면 접근이 가능했는데, 바닐라 환경(?)에서는 계속해서 process 에 접근하지 못하는 문제가 있었습니다. // 문제가 된 코드 const request = await fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${..
![]()
리액트(React)에서 useMemo와 useCallback은 성능 최적화를 위해 사용되는 훅(hooks)입니다. 이들은 불필요한 연산과 렌더링을 방지하여 애플리케이션의 효율을 높이는 데 도움을 줍니다. 각각의 훅이 어떻게 작동하는지와 사용 사례를 아래에서 자세히 살펴보겠습니다. useMemo useMemo는 메모이제이션된 값을 반환하는 훅입니다. 이 훅은 계산 비용이 많이 드는 함수의 결과값을 저장해두었다가, 의존성 배열에 있는 값이 변경되었을 때만 함수를 다시 실행하여 값을 계산합니다. 그 외의 경우에는 메모이제이션된(저장된) 값을 재사용함으로써 성능을 향상시킵니다. 사용법: const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b..
![]()
네, ES6 이전의 JavaScript에서는 주로 함수를 사용하여 클래스와 비슷한 구조를 만들곤 했습니다. 이러한 방식은 주로 생성자 함수와 프로토타입을 이용하여 객체 지향 프로그래밍을 구현합니다. 이러한 패턴을 '프로토타입 기반 상속'이라고 합니다. 생성자 함수 사용 예제 생성자 함수를 사용하여 클래스와 유사하게 객체를 생성하고 메서드를 정의할 수 있습니다. 아래는 생성자 함수와 프로토타입을 이용한 예제입니다. function Person(name, age) { this.name = name; this.age = age; } Person.prototype.greet = function() { console.log(`Hello, my name is ${this.name} and I am $..
![]()
첫 TIL 을 작성해보겠습니다. 어제 오늘, 팀원 분들과 계속 소통하면서 첫번째 프로젝트를 완성시켜 나가고 있습니다. 혼자서만 외롭게 써오던 github를 새롭게 만난 팀원분들과 함께 협업으로 사용하니 매우 신기합니다. 이 과정에서, 정확하고 매너있는 소통이 정말 중요한 덕목임을 다시 한번 배우는 시간이 되고 있습니다. 협업을 통해 자연스럽게 배우는 것이 정말 많은 것 같습니다. 오늘만 해도 git 과 github 의 여러 명령어들과 씨름하면서 branch 의 개념, stage와 commit 의 차이 pull 과 push 등에 대해 깨닫는? 시간이 되었습니다. 궁금한 것은 pull request 및 merge 에 대한 것인데, 내일 더욱 학습해보려고 합니다. 또한 내일부터는 오늘배운 TIL 작성가이드를 ..
![]()
주어진 정수 n 이하의 수에서 홀수만 배열에 담아서 리턴하면 된다. 이건 별건 아니지만 for 문에서 마지막 조건을 i++ 대신 i+=2 로 하는 방법을 미처 생각못했다.. function solution(n) { var answer = []; for(let i = 1; i
![]()
문자열 "hello"에서 각 문자를 오른쪽으로 한 칸씩 밀고 마지막 문자는 맨 앞으로 이동시키면 "ohell"이 됩니다. 이것을 문자열을 민다고 정의한다면 문자열 A와 B가 매개변수로 주어질 때, A를 밀어서 B가 될 수 있다면 밀어야 하는 최소 횟수를 return하고 밀어서 B가 될 수 없으면 -1을 return 하도록 solution 함수를 완성해보세요. 제한사항 0 0 && count < A.length){ return count; }else if(count === A.length){ return -1; } } 이렇게 풀긴했지만 function solution(A, B) { if (A===B) return 0; for (let i = 0; i < A.length; i++) { A = A.slice(..
