[JavaScript] every, some
·
JavaScript
알고리즘 문제를 풀다가 Array의 every와 some에 대해서 알게 되었다. every 배열의 모든 요소가 특정 조건을 충족하는지 확인한다. const array = [10, 20, 30, 40, 50]; const result1 = array.every(num => num num >= 10); console.log(result2) // true 인자로 특정 조건을 확인하는 callback 함수를 전달한다. 이때 배열의 모든 요소가 해당 조건을 충족한다면 true / 아니라면 false가 리턴된다. some 배열의 1개의 요소라도 특정 조건을 충족하는지 확인한다. const..
[알고리즘] 숫자 카드 나누기
·
알고리즘
문제 설명 철수와 영희는 선생님으로부터 숫자가 하나씩 적힌 카드들을 절반씩 나눠서 가진 후, 다음 두 조건 중 하나를 만족하는 가장 큰 양의 정수 a의 값을 구하려고 합니다. 철수가 가진 카드들에 적힌 모든 숫자를 나눌 수 있고 영희가 가진 카드들에 적힌 모든 숫자들 중 하나도 나눌 수 없는 양의 정수 a 영희가 가진 카드들에 적힌 모든 숫자를 나눌 수 있고, 철수가 가진 카드들에 적힌 모든 숫자들 중 하나도 나눌 수 없는 양의 정수 a 예를 들어, 카드들에 10, 5, 20, 17이 적혀 있는 경우에 대해 생각해 봅시다. 만약, 철수가 [10, 17]이 적힌 카드를 갖고, 영희가 [5, 20]이 적힌 카드를 갖는다면 두 조건 중 하나를 만족하는 양의 정수 a는 존재하지 않습니다. 하지만, 철수가 [10..
후쿠오카 여행기 - 3일차 계획
·
취미생활/잉여로운 여행기
3일차 계획을 작성해보자! 역시 시작은 숙소에서! 3일차에는 기린 맥주 공장을 가려고 한다! 지난번에 가지 못한 아사히 맥주 공장을 가려했는데 공장 자체가 이전이라는 소식을 듣고 기린 맥주 공장으로 변경! 가격은 500엔이고 맥주 3잔을 무료로 준다고 한다! Good! 미리 인터넷으로 예약을 해야하는데, 여행 블로그도 아니고 인터넷에 많이 떠다니는 정보가 있으니 그것을 보고 예약하길 바란다! 내가 예약을 하는 날 기준으로 1자리 남아서 내가 문닫고 예약을 했다. ( 마지막 한자리는 못참지 ㅋㅋ ) 맥주 공장을 갈 생각이 있다면 생각이 들었을 때 미리 예약하는 것을 추천한다. 12명이 최대 인원이고 생각보다 인기 있어서 못갈수도... 하카타 역에서 가는 방법을 모르기 때문에 구글에 검색을 해봤다. 소요 시..
[알고리즘] 귤 고르기
·
알고리즘
문제 설명 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 크기가..
[React] 벨로퍼트와 함께하는 React Testing - 비동기 작업 테스트
·
React/실험실
들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 비동기적으로 바뀌는 컴포넌트 UI 테스트 const { useState, useEffect } = require("react"); const DelayedToggle = () => { const [toggle, setToggle] = useState(false); useEffect(() => { setInterval(() => { setToggle((prev) => !prev); }, 1000); }, []); return ( 상태 : {toggle ? "On" : "Off"} {toggle && 토글이 켜졌다!} ); }; export default DelayedToggle; 다음과 같이 1초마다 상태 값이 바뀌는 컴포넌트가 있습..
[React] 벨로퍼트와 함께하는 React Testing - Todo List
·
React/실험실
들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이번에는 TDD 방식으로 Todo List를 만들어본다. 전체적인 시나리오는 벨로퍼트님을 따라가지만 컴포넌트 자체는 스스로 만들어볼 생각이다. 컴포넌트 계획 Todo List를 만들기 위해서 필요한 컴포넌트는 무엇일까? ▶ Todo Form : Input과 Button으로 이루어진 Form 컴포넌트이다. Todo App으로부터 Submit을 전달받아 새로운 항목을 추가할 수 있어야 한다. ▶ Todo Item : 각 Todo 항목을 보여주는 컴포넌트이다. 텍스트를 클릭하면 텍스트에 삭제선이 그어져야 하고, 우측 삭제 버튼을 누르면 항목이 사라져야 한다. ▶ Todo List : Todo 배열을 받아와서 여러 개의 TodoItem 컴..
[React] 벨로퍼트와 함께하는 React Testing - react-testing-library
·
React/실험실
들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이 전에 Test Coverage를 공부할 때 한번 정리했지만 사용의 전반적인 흐름이 더 좋다고 느껴서 다시 정리한다. react-testing-library 모든 테스트를 DOM 위주로 진행하는 방식이다. 컴포넌트를 리팩토링할 때, 내부 구조 및 네이밍은 많이 바뀔 수 있지만 작동 방법은 크게 바뀌지 않는다. react-testing-library는 이러한 특징을 중요하게 생각해서 컴포넌트의 기능이 똑같이 작동한다면, 컴포넌트의 내부 구현 방식이 변해도 테스트가 실패하지 않도록 설계되어있다. 테스트 코드 const Profile = ({ username, name }) => { return ( {username} ({name}) ..
[React] 벨로퍼트와 함께하는 React Testing - TDD
·
React/실험실
들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. TDD ? TDD는 테스트를 통해서 개발을 이끌어나가는 형태의 개발론이다. 먼저 테스트 코드를 작성하고, 구현을 하는 방식이라고 보면 된다. TDD에는 3가지 절차가 있다. 실패 첫 번째 절차로 실패이다. 말 그대로 실패하는 테스트 케이스를 먼저 만드는 것이다. 상황에 따라 다르지만, 먼저 구현할 기능부터 하나씩 테스트 케이스를 작성한다. 성공 두 번째 절차로 성공이다. 앞서 작성한 실패하는 테스트 케이스를 통과시키기 위해서 코드를 작성하는 것을 말한다. 리팩토링 구현한 코드가 테스트를 통과한다면, 중복되는 코드 또는 개선시킬 방법이 있는 코드를 리팩토링 시킨다. 리팩토링을 했을 때 테스트 케이스가 성공하면 다른 기능을 다시 첫 번..