스파르팅

알고리즘은 결국 메서드를 얼만큼 아냐 따라서 코드가 예뻐지는 것 같다. 직사각형 형식으로 드래그를 할 수 있는데 , 화면에 있는 파일을 최소한의 넓이로 삭제하기 위한 직사각형의 좌측 상단 인덱스와 우측하단 인덱스를 구하는 것이다. 문제링크 : https://school.programmers.co.kr/learn/courses/30/lessons/161990 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제풀이 : for문을 이용해서 #이 나올때, 해당 값을 기존에 입력된 정답과 비교해서 l 같은 경우에 가장 같을때, r 같은 경우에 값이 클 경우 교체하..

문제 요약하면, 여러마리의 폰켓몬 중에서, 최대한 많은 종류를 선택하고 싶은데 이때 선택 가능한 마릿수는 전체 폰켓몬 중의 절반이다. 따라서 중복이 없는 폰켓몬의 수와 총 폰켓몬의 수의 절반 중에서 더 작은 값이, 선택 가능한 가장 다양한 종류이고 답이다. 자바스크립트에서 Set을 이용하면 중복이 없는 값을 구할 수 있다. 이때 구해진 값은 객체로 나온다. 따라서 객체의 수를 구하기 위해서 나는 Set 객체를 배열로 만들어서 길이를 구하였다.( 안 좋은 방법) function solution(nums) { const nonDuplicatedNums = new Set(nums); const newNums = [...nonDuplicatedNums]; return Math.min(newNums.length,..

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

연속된 부분 수열의 합 비내림차순으로 정렬된 수열이 주어질 때, 다음 조건을 만족하는 부분 수열을 찾으려고 합니다. 기존 수열에서 임의의 두 인덱스의 원소와 그 사이의 원소를 모두 포함하는 부분 수열이어야 합니다. 부분 수열의 합은 k입니다. 합이 k인 부분 수열이 여러 개인 경우 길이가 짧은 수열을 찾습니다. 길이가 짧은 수열이 여러 개인 경우 앞쪽(시작 인덱스가 작은)에 나오는 수열을 찾습니다. 수열을 나타내는 정수 배열 sequence와 부분 수열의 합을 나타내는 정수 k가 매개변수로 주어질 때, 위 조건을 만족하는 부분 수열의 시작 인덱스와 마지막 인덱스를 배열에 담아 return 하는 solution 함수를 완성해주세요. 이때 수열의 인덱스는 0부터 시작합니다. 제한사항 5 ≤ sequence의..

문제 설명 첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요. 내 풀이 function solution(numer1, denom1, numer2, denom2) { let answer = []; let numer = numer1 * denom2 + denom1 * numer2; let denom = denom1 * denom2; for (i = denom; i >= 1; i--) { if (numer % i === denom % i && numer % i === 0..

HTML 요소는 일반적으로 블록(block) 요소와 인라인(inline) 요소 두 가지 유형으로 분류됩니다. 이 두 유형은 서로 다른 방식으로 동작하므로 HTML 문서에서 요소의 타입을 이해하는 것이 중요합니다. 인라인(Inline) 요소 : 인라인 요소는 일반적으로 텍스트와 같은 컨텐츠를 담기 위한 것으로, 요소의 내용이 왼쪽에서 오른쪽으로 이어지는 형태로 표시됩니다. 인라인 요소는 필요한 만큼의 공간만 차지하며, 다른 인라인 요소와 같은 라인에 배치됩니다. 예시로는 , , , , 등이 있습니다. 블록(Block) 요소 : 블록 요소는 인라인 요소와 달리 컨텐츠를 담는 큰 상자 형태로 표시됩니다. 블록 요소는 항상 새로운 줄에서 시작하며, 다른 블록 요소와 같은 라인에 배치될 수 없습니다. 예시로는 ,..

html에서 리스트를 나타내는 방법은 3가지가 있습니다. 은 ordered list의 약자로, 순서가 있는 목록을 작성하는데 쓰입니다. 은 unordered list 의 약자로. 순서가 없는 목록을 작성하는데 쓰입니다. 은 definition list의 약자로, 사전처럼 목록을 설명하는데 쓰입니다. 이 목록들은 하나 이상의 (list item) 요소로 구성됩니다. 따라서 요소는 그 자식 요소로써 최소한 하나 이상의 요소를 가져야 합니다. 이러한 구조는 HTML의 문법적인 요구사항이기도 합니다. HTML은 마크업 언어로써 문서의 구조를 표현하기 위해 설계되었는데, 요소들은 서로 중첩될 수 있습니다. 따라서 요소는 그 자식 요소로써 요소만을 허용하고, 다른 종류의 요소를 직접적으로 포함할 수 없습니다. 이러..

profile 컴포넌트에서 store에 저장된 프로필 정보를 받는다. 이를 props를 통해서 강아지 카드와 유저 프로필에 각각 전달한다. 최적화 진행 이를 강아지 카드와 유저프로필을 memo를 통하여서 랜더링 최적화 하였고, 강아지 카드를 랜더링하기 전에 DogCards라는 컴퍼넌트를 만들어서 , useMemo를 통해서 강아지 정보를 map 돌린 값을 캐싱하였다. export default React.memo(DogCard); const DogCards = useMemo(() => { return ( {profile[1].dogs.map(item => ( ))} ); }, [profile][1]); 동일한 조건에서 측정하기 위해서 불필요한 console.log를 삭제했고, 실험은 home에서 profi..

랜더링을 측정하기 위해서 renative debugger의 devtool의 performance를 통해서 성능을 측정했다. npm run android로 어플을 켠 이후 1. ctrl+ m 으로 devmenu를 연다. 2. 이후 debugging을 통하여서 React Native Debugger를 연다. 그리고 개발자 도구를 열면 아래 화면이 뜬다. (한글 버전이라 성능, 영어버전이면 performance라고 적혀있다.) 3. 왼쪽에 있는 녹화 버튼을 통해서 녹화를 켜고, 앱에서 측정하고자 하는 기능을 실행하면 성능을 측정할 수 있다. 나는 home화면에서 profile 화면으로 스크린 이동을 했다. 실험 조건은 5초 단위마다 profile 페이지 접속 10초단위마다 home화면으로 이동하기다. 이중에서..

프로젝트를 뒤돌아 봤을 때, 랜더링에 대한 최적화에 대한 필요성을 느꼈다. react memo, useMemo, useCallback을 영상을 보고 학습을 한 적은 있으나, 그 당시에는 정확한 차이 및 사용법을 구분하지 못했었다 그 와중에 최적화 기법을 잘 정리한 게시글을 소개 받았고, 이를 통해서 내가 완성한 pupfluencer 프로젝트를 리팩토링 해보려고 한다. 리팩토링에 앞서서 React.memo, useMemo, useCallback를 정리하려고 한다. react 문서에 따르면 ( https://react.dev/reference/react/memo) memo – React The library for web and native user interfaces react.dev memo는 props..