숨참고 개발다이브

지난 글에 이어 이번에는 SVG를 활용하여 라인 차트를 그리고 react-spring으로 애니메이션 효과를 추가해 주었다.차트의 데이터 배열, 최대 데이터 수, 차트의 Y축의 최댓값을 받아 변형되는 라인차트 컴포넌트를 만들었다. RN으로도 해당 차트를 그리기도 했었는데, RN의 경우에는 이 코드를 많이 참고했었다.https://github.com/indiespirit/react-native-chart-kit/tree/master LineChart.tsximport { useCallback, useEffect, useRef, useState } from "react";import { useSpring, animated } from "react-spring";const DEFAULT_FILL_COLOR = ..

이런 식으로 생긴 원형 Progress는 자주 사용되는 디자인 요소 중 하나이다. 이런 프로그래스 컴포넌트를 라이브러리가 아닌, 직접 커스텀할 수 있는 컴포넌트로 생성해 보았다. 게시글에 올라가는 코드는 React 프로젝트이지만, 애니메이션 부분을 React Native에서 제공하는 Animated를 활용하여 Path 컴포넌트에 애니메이션을 적용하면 동일하게 작동된다. 전체 코드의 완성본은 다음과 같다. 반지름과 수치를 조절할 수 있는 range bar를 태그를 활용해 생성하였고, react-color라는 괜찮은 라이브러리가 있어 색상 피커도 추가해보았다. 포스팅에서는 가장 중요한 CircleProgress 컴포넌트에 대해서만 설명하도록 한다. CircleProgress.tsximport { animat..

React Native의 기존 구조 기존 구조는 JavaScript와 Native 사이의 통신을 위해 Bridge를 사용했으며, 데이터를 JSON 형식으로 직렬화하여 전달하는 방식으로 이루어졌다. 그러나 Bridge 기반 통신은 이벤트 생성 속도를 따라가지 못해 성능 이슈가 발생하는 한계가 있다. 이러한 문제를 해결하기 위해 React Native 0.73 버전에서부터 Bridgeless Mode 설정이 가능하도록 적용되었다. 또한 0.74 버전부터 Bridgeless Mode가 기본값으로 변경되었다. https://ramveloper.tistory.com/61 [React Native] React Native의 구 Bridge 아키텍쳐(Architecture)React Native 공식 블로그에 New..

React Native 공식 블로그에 New Architecture가 새로 소개되었을 때(https://reactnative.dev/blog/2024/04/22/release-0.74), 작업 중이던 프로젝트에서는 일부 이슈때문에 당장 업데이트가 불가한 상황이었다.그렇게 잠시 잊고 살았는데 어느새 RN이 0.76버전까지 소개되었고, 이젠 New Architecture 위주의 업데이트가 이루어져서 더 늦기 전에 한번 정리해 둔 내용을 옮겨보려 한다.   우선, 왜 New Architecture가 나왔는지에 대한 정보가 필요하기 때문에 기존 구조에 대해 먼저 정리한다.기존 RN의 구조는 다음과 같다.React: React는 애플리케이션의 UI를 선언적으로 정의하는 부분으로, React Native에서 UI ..

문제선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다.가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다.삼각형의 두 변의 길이가 담긴 배열 sides이 매개변수로 주어집니다. 나머지 한 변이 될 수 있는 정수의 개수를 return하도록 solution 함수를 완성해주세요.제한사항sides의 원소는 자연수입니다.sides의 길이는 2입니다.1 ≤ sides의 원소 ≤ 1,000입출력 예[1, 2]1[3, 6]5[11, 7]13입출력 예 설명입출력 예 #1두 변이 1, 2 인 경우 삼각형을 완성시키려면 나머지 한 변이 2여야 합니다. 따라서 1을 return합니다.입출력 예 #2가장 긴 변이 6인 경우될 수 있는 나머지 한 변은 4, 5, 6 로 3개입니다.나머지 한 ..

감기 이슈로 일주일이나 쉰 건에 대하여...  1. 문자열 섞기function solution(str1, str2) { const answers = []; for (i = 0; i  .map()을 사용하면 더 간단하게 해결function solution(str1, str2) { return [...str1].map((x, idx)=> x+str2[idx]).join("");}   2. 문자 리스트를 문자열로 변환하기function solution(arr) { var answer = arr.join(''); return answer;} 까먹지 말라고 반복되는 join() 문제  3. 문자열 곱하기function solution(my_string, k) { var answer..

문제코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다.컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일들은 바탕화면의 격자칸에 위치하고 바탕화면의 격자점들은 바탕화면의 가장 왼쪽 위를 (0, 0)으로 시작해 (세로 좌표, 가로 좌표)로 표현합니다. 빈칸은 ".", 파일이 있는 칸은 "#"의 값을 가집니다..

쉬는 동안 프로그래머스 Lv.0부터 다시 문제를 풀이해 보는데 기초를 정리한다는 마음으로 작성한다.풀이가 아니기 때문에 내가 작성한 답이 정답도 아닐 뿐더러 다른 사람의 답변을 보며 고찰하는 글임!!  const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout});let input = [];rl.on('line', function (line) { input = [line];}).on('close',function(){ str = input[0];});lv.0 단계에서 자바스크립트로 선택 시 기본적으로 제공해주는 포맷이다.보통 입출..