FE 개발자의 성장 기록👩‍💻

최근 프로젝트에서 날짜 문자열을 최신순으로 정렬하기 위해 아래와 같은 코드를 작성했다.// timeArray의 요소는 'yyyy-MM-dd hh:mm:ss' 형식의 문자열timeArray.sort((a, b) => { const targetA = new Date(a); const targetB = new Date(b); return targetB.getTime() - targetA.getTime();});PC브라우저와 모바일 웹 환경에서 모두 정상 동작했기 때문에, 해당 코드에 문제가 없다고 생각했다.하지만 iOS의 특정 기기(인앱 웹뷰)에서 정렬이 제대로 이루어지지 않는다는 타 부서의 문의가 들어왔다.문제 원인iOS에서 발생한 문제의 원인은 자바스크립트 엔진 간의 Date 객체 처리 방식 차이에 ..

item.split(' ').map((value) => +value)); const [N, M] = info; const solution = () => { // 컴퓨터의 신뢰하는 관계가 주어졌을 때, 그 관계 정보를 나타내는 2차원 배열 ( 인접리스트 ) const graph = Array.from({ length: N + 1 }, () => []); for (let i = 0; i { ..

1️⃣ 이미지 크롭 🔴캔버스 위에 마우스를 클릭했을 때 ▶ sX, sY에 시작점의 좌표를 저장 this.canvas.addEventListener("mousedown", (e) => { sX = parseInt(e.clientX - canvasX, 10); sY = parseInt(e.clientY - canvasY, 10); drawStart = true; }); 🔴마우스를 클릭한 상태(drawStart)에서 움직일 때 ( 드래그 ) ▶ 현재 지점을 eX, eY에 저장한 후 sX, sY로부터의 사각형을 그림 this.canvas.addEventListener("mousemove", (e) => { if(!drawStart) return; eX = parseInt(e.clientX - canvasX, 1..

1️⃣ 강남역 부근 카페 3개에 대한 마커 표시 🟡 마커 이미지 생성 함수 isMyLocation : 내 위치를 표시하는지 아닌지 ⇒ true일 경우 직접 만든 myLocation.png 의 이미지로 마커 표시 const createMarkerImage = (isMyLocation = false) => { const imageSrc = (isMyLocation) ? "./markerImg/myLocation.png" : "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; const imageSize = new kakao.maps.Size(24, 35); const markerImage = new kakao.maps.Mark..

트리 : 두 노드 사이에 하나의 간선만 연결되어 있는, 최소 연결과 계층 형태의 비선형 자료구조 노드 ( node ) : 하나 이상의 값을 갖는 객체 단위 간선 ( edge ) : 두 노드를 연결하는 선 루트 노드 ( Root node ) : 부모가 없는 최상위 노드 ▶ A 단말 노드 ( Leaf node ) : 자식이 없는 최하위 노드 ▶ C, D, E 부모 노드 ( Parent node ) : 특정 Sub-Tree 내에서의 상위 노드 ▶ A ( B, C의 부모노드 ), B ( D, E의 부모 노드 ) 자식 노드 ( Child node ) : 특정 Sub-Tree 내에서의 하위 노드 ▶ B와 C ( A의 자식 노드 ), D와 E ( B의 자식 노드 ) 형제 ( Sibling ) : 같은 부모를 가지는 ..

index.html 정답은? 도전 결과 style.css body::after{ position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-image: url('./src/images/BaseBallImg.jpg'); background-repeat: no-repeat; opacity: 0.5; z-index: -1; } label { display: block; padding: 10px; width: max-content; } #submit{ background-color: black; color: white; } #result{ margin: 10px; padding: 10px; width: 300px;..

우선순위 큐 ( Priority Queue ) 우선순위를 고려하여 먼저 넣은 데이터가 먼저 나오는 FIFO(First In First Out) 기반의 선형 자료 구조 - 하나의 요소에는 데이터필드와 우선순위 필드가 있음. //Element에는 data와 priority 필드가 존재 function Element(data, priority){ this.data = data; this.priority = priority; } function PriorityQueue(){ this.array = []; } //getBuffer(): 우선순위 큐에 있는 데이터들을 반환 //-> map()을 이용해 각 요소의 data들을 배열로 반환 PriorityQueue.prototype.getBuffer = function..

스택(Stack) 나중에 넣은 데이터가 먼저 나오는 LIFO ( Last In First Out ) 기반의 선형 자료 구조 스택에서 데이터를 push 하면 가장 상단에 데이터가 추가되며, pop하면 마지막에 추가되었던 상단의 데이터가 삭제된다. 배열을 이용한 Stack 구현 function Stack(array){ this.array = array ? array : []; } //스택에 있는 데이터를 복사해서 반환함. Stack.prototype.getBuffer = function (){ return this.array.slice(); } //배열 함수 push를 이용하여 스택의 마지막에 데이터 추가 Stack.prototype.push = function (data){ return this.array..

연결 리스트 : 각 노드가 데이터와 포인터를 가지며, 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료 구조 - Head는 연결 리스트의 첫 노드를 가리킨다. - 노드의 포인터영역은 다음 노드를 가리킨다. - 연결 리스트의 마지막 노드의 포인터는 Null을 가리킨다. //노드 function Node (data){ this.data = data; this.next = null; } //연결 리스트 function LinkedList(){ this.head = null; this.length = 0; } [ 연결리스트 관련 함수 구현 ] 🔴 append(data) : 연결리스트 마지막에 data를 값으로 갖는 노드를 추가하는 함수 LinkedList.prototype.append = function(..