배열

하나의 컴포넌트를 만든 뒤, 컴포넌트를 여러 번 반복해서 보여주는 목록 화면을 개발한다고 해보자. React에서 권장하는 배열 렌더링 방법은 JavaScript의 map() 함수를 활용하는 것이다. 예를 들면 다음과 같다. function Expenses() { return ( {EXPENSES_MOCK.map((expense) => ( ))} ); } map() 함수를 통해서 엘리먼트의 모음을 만들고, 이걸 JSX에 포함시키기만 하면 된다. 그런데 이 상태로 실제로 서버를 띄워 실행해보면 다음과 같은 경고를 만날 수 있을 것이다. 직역해보면, 리스트에 존재하는 각각의 자식 컴포넌트들은 고유한 “key” 값을 가지고 있어야 한다는 것이다. 실행은 가능하지만, 냅두기에는 빨간 색 경고라 약간 찜찜하다. 대..

문제 출처: https://programmers.co.kr/learn/courses/30/lessons/42587 코딩테스트 연습 - 프린터 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린 programmers.co.kr 지나치게 많은 과업이 쌓여갈 때, 우리는 흔히 대기열을 만들듯이 목록의 끝에 과업들을 추가하고 먼저 들어온 과업부터 순서대로 처리한다. 먼저 들어온 것을 먼저 처리하고, 나중에 들어온 것을 나중에 처리하는것. 우리에게 익숙한 이 First In First Out이라는 개념을 가진 자료구조가 바로 큐(Queue)다. 오늘은 이 큐 자료구조를 활용한 문제를..

문제 출처: https://programmers.co.kr/learn/courses/30/lessons/12909 코딩테스트 연습 - 올바른 괄호 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 programmers.co.kr 괄호가 바르게 짝지어져있는지를 반환하는 함수를 만들어보았다. 마치 텍스트 에디터를 만드는 듯한 재미있는 문제였다. ‘(’ 괄호가 나오면 배열에 괄호를 추가하고, ‘)’ 괄호가 나오면 닫아줄 괄호가 있는지 확인한 뒤, 닫아서 없애고자 하였다. 자바스크립트 배열의 push(), pop() 메서드를 통해 스택 ..

이전 포스트에서도 알아봤듯이, 자바스크립트에서는 많은 것들이 객체로 간주된다. 그 중 하나가 바로 배열이다. 오늘은 웹개발을 하는 데 있어서 절대 빠질 수 없는 배열에 대해서 알아보고자 한다. 배열이란 무엇이고, 왜 자바스크립트에서는 배열을 객체라고 할까? 위키피디아에 따르면, 배열의 정의는 다음과 같다. 컴퓨터 과학에서 배열(Array) 은 번호(인덱스)와 번호에 대응하는 데이터들로 이루어진 자료 구조 를 나타낸다. 일반적으로 배열에는 같은 종류의 데이터들이 순차적으로 저장되어, 값의 번호가 곧 배열의 시작점으로부터 값이 저장되어 있는 상대적인 위치가 된다. 즉, 일반적으로 배열이란 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조를 말한다. 보통 동질적인 타입의 값들이 저장되며, 순서에..