📖 들어가며 React에서 화면 (DOM)를 캡처, 저장하는 기능에 대해서 알아보려 합니다. 작은 토이 프로젝트를 하면서 여러가지 문제를 맞이 했었는데, 결과적으로 성공한 방법들로 포스팅하게 됩니다. 캡쳐(스크린샷)을 도와주는 라이브러리들 대표적으로 html2canvas, dom-to-image, html-to-image 등이 있습니다. 기능을 구현하면서 html2canvas와 dom-to-image를 모두 사용해 봤습니다. 제가 사용해 본 두 가지 라이브러리에 대해서는 일반적으로 두 라이브러리 모두 영역을 정확하게 캡처하고 DOM 요소에 적용된 CSS 스타일을 캡처하는 데 큰 문제는 없었습니다. 그러나 dom-to-image가 html2canvas보다 더 빠르고 안정적이라고 하는 사용자도 있다고 합니다..

❓ 문제 문제 설명 지나다니는 길을 'O', 장애물을 'X'로 나타낸 직사각형 격자 모양의 공원에서 로봇 강아지가 산책을 하려합니다. 산책은 로봇 강아지에 미리 입력된 명령에 따라 진행하며, 명령은 다음과 같은 형식으로 주어집니다. ["방향 거리", "방향 거리" … ] 예를 들어 "E 5"는 로봇 강아지가 현재 위치에서 동쪽으로 5칸 이동했다는 의미입니다. 로봇 강아지는 명령을 수행하기 전에 다음 두 가지를 먼저 확인합니다. 주어진 방향으로 이동할 때 공원을 벗어나는지 확인합니다.주어진 방향으로 이동 중 장애물을 만나는지 확인합니다. 위 두 가지중 어느 하나라도 해당된다면, 로봇 강아지는 해당 명령을 무시하고 다음 명령을 수행합니다.공원의 가로 길이가 W, 세로 길이가 H라고 할 때, 공원의 좌측 상단..

❓ 문제 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는..

❓ 문제 문제 설명 얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바뀝니다. 선수들의 이름이 1등부터 현재 등수 순서대로 담긴 문자열 배열 players와 해설진이 부른 이름을 담은 문자열 배열 callings가 매개변수로 주어질 때, 경주가 끝났을 때 선수들의 이름을 1등부터 등수 순서대로 배열에 담아 return 하는 solution 함수를 완성해주세요. 제한 ..

💡 slice() 배열 메서드 slice() 메서드는 배열의 복사본을 만들거나 배열의 일부를 반환하는 데 사용할 수 있다. slice() 메서드는 원래 배열을 변경하지 않고 대신 얕은 복사본을 생성한다는 점에 유의해야 한다. 기본 구문은 다음과 같다. slice(optional start parameter, optional end parameter) 이 예시에서는 과일 목록을 만들었다. const fruits = ['apple', 'banana', 'mango', 'melon']; slice() 메서드를 매개변수 없이 사용하는 방법 ❓ slice() 메서드를 활용해 해당 배열의 얕은 복사본을 만들 수 있다. console.log(fruits.slice()); // ['apple', 'banana', 'm..

📖 들어가며 알고리즘, 자료구조를 공부하는 데에 있어서 자꾸 빅오(Big O), 빅오(Big O) 거리는데 도대체 빅오(Big O)가 뭐고 왜 사용하는 건지 몰라서 공부한 내용을 정리하게 된다. 1. 빅오(Big O) 표기법은 왜 사용하는 거지? 먼저 빅오(Big O) 표기법을 왜 사용하는 걸까. 자료구조, 알고리즘 해결에 있어서 문제를 해결할 수 있는 방법이 여러 가지인 경우가 대다수이다. 정수 n을 받으면 1부터 n까지의 합을 구하는 두 가지의 코드를 예로 들어보겠다. 첫 번째 코드 function addUpTo(n) { let total = 0; for (let i = 1; i O(1), O(5n^2) => O(n^2) 등 이런 식으로 표기하는 것이다. 3-3 계산 방법 간단하게 말하면 연산이 몇 ..

📖 들어가며 프로그래머스에서 연습문제 '2차원으로 만들기' 문제를 풀던 도중 여러 방식이 있었고 내가 푼 방식과 다른 방식을 비교하며 같이 이해하기 위해 기록한다. ❓ 문제 문제 설명 정수 배열 num_list와 정수 n이 매개변수로 주어집니다. num_list를 다음 설명과 같이 2차원 배열로 바꿔 return하도록 solution 함수를 완성해주세요. num_list가 [1, 2, 3, 4, 5, 6, 7, 8] 로 길이가 8이고 n이 2이므로 num_list를 2 * 4 배열로 다음과 같이 변경합니다. 2차원으로 바꿀 때에는 num_list의 원소들을 앞에서부터 n개씩 나눠 2차원 배열로 변경합니다. num_list n result [1, 2, 3, 4, 5, 6, 7, 8] 2 [[1, 2], [..

📖 들어가며 최근 React Native + TypeScript 로 간단한 어플을 만들면서 공부하던 도중에 환경 변수 (env)를 적용이 필요했는데, 그냥 React에서 사용하던 방법과 조금 다른 것 같아서 생소했습니다. 1. react-native-dotenv react-native-dotenv는 React Native 환경에서 환경변수(env)를 적용할 수 있습니다. 터미널을 켜고 해당 명령어를 통해 라이브러리를 설치합니다. npm i react-native-dotenv 또는 yarn add react-native-dotenv 그리고 타입스크립트 환경에서는 추가로 types를 설치해 줘야 타입스크립트 환경에서 사용할 수 있습니다. npm install -D @types/react-native-dote..

📖 들어가며 최근 '클린 코드'책과 여러 개발 관련 영상이나 문서를 보고 테스트 코드의 중요성을 깨닫게 되었다. 앞으로 개발을 하면서 테스트 코드를 작성하기 위해서 테스트 코드를 먼저 작성하고 테스트 코드를 통과하기 위한 코드를 작성하는 TDD 개발 방식으로 React에서 Jest와 React testing library로 테스트 코드를 작성하는 법을 공부하게 되었다. 공부한 내용을 복습하고 정리하기 위해 글을 작성해 본다. 해당 글에서는 버튼을 클릭하면 숫자가 증감되는 간단한 앱을 TDD 개발 방식으로 테스트하고 만들어 볼 것이다. Jest와 React testing library Jest ? Jest는 개발자가 자바스크립트와 타입스크립트 코드에 대한 테스트를 실행할 수 있도록 하는 자바스크립트 테스트..