ji-frontdev

문제 설명(Lv1 / 76% 정답률) 입출력 예 numberresult[-2, 3, 0, 2, -5]2[-3, -2, -1, 0, 1, 2, 3]5[-1, 1, -1, 1]0입출력 예 설명입출력 예 #1문제 예시와 같습니다.입출력 예 #2학생들의 정수 번호 쌍 (-3, 0, 3), (-2, 0, 2), (-1, 0, 1), (-2, -1, 3), (-3, 1, 2) 이 삼총사가 될 수 있으므로, 5를 return 합니다.입출력 예 #3삼총사가 될 수 있는 방법이 없습니다. 나의 접근 방법1. Number 배열에서 3개씩 뽑아서 조합 하는 함수 + 조합된 3개를 계산2. 조합하는 함수를 헤매다가 3중 반복문으로 해결(개선이 필요하다 생각함) => 완전 탐색(Brute Force) 방법 나의 JS 코드 / ..

문제 설명문제 설명숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서,이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다.제한사항1 ≤ p의 길이 ≤ 18p의 길이 ≤ t의 길이 ≤ 10,000t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다.tpresult"3141592""271"2"500220839878""7"8"10203""15"3나의 접..

문제 설명1부터 6까지 숫자가 적힌 주사위가 네 개 있습니다. 네 주사위를 굴렸을 때 나온 숫자에 따라 다음과 같은 점수를 얻습니다.네 주사위에서 나온 숫자가 모두 p로 같다면 1111 × p점을 얻습니다.세 주사위에서 나온 숫자가 p로 같고 나머지 다른 주사위에서 나온 숫자가 q(p ≠ q)라면 (10 × p + q)2 점을 얻습니다.주사위가 두 개씩 같은 값이 나오고, 나온 숫자를 각각 p, q(p ≠ q)라고 한다면 (p + q) × |p - q|점을 얻습니다.어느 두 주사위에서 나온 숫자가 p로 같고 나머지 두 주사위에서 나온 숫자가 각각 p와 다른 q, r(q ≠ r)이라면 q × r점을 얻습니다.네 주사위에 적힌 숫자가 모두 다르다면 나온 숫자 중 가장 작은 숫자 만큼의 점수를 얻습니다.네 주..

CSS 서브그리드(Subgrid): 현대적인 레이아웃 설계의 새로운 가능성웹 개발에서 레이아웃을 구성하는 작업은 언제나 중요한 도전 과제였습니다. CSS Grid는 이러한 문제를 해결하기 위한 강력한 도구로 자리 잡았지만, Grid 내부의 하위 요소가 부모 Grid의 간격과 정렬을 따르기 어렵다는 단점이 있었습니다. 이를 해결하기 위해 등장한 기능이 바로 **서브그리드(Subgrid)**입니다. 이번 글에서는 CSS 서브그리드가 무엇인지, 어떤 문제를 해결하는지, 그리고 실제 사용 사례를 소개합니다.1. CSS 서브그리드란?CSS 서브그리드는 부모 Grid의 레이아웃 설정(행 또는 열)을 하위 요소들이 그대로 따를 수 있도록 지원하는 기능입니다. 즉, 하위 Grid 컨테이너가 독립적인 레이아웃을 갖는 대..

CSS를 작성할 때 우리는 계층 구조를 표현하기 위해 클래스나 선택자를 중첩하여 사용합니다.하지만, 기존 CSS에서는 이를 직관적으로 표현하기 어려웠습니다.CSS 네스팅(Nesting)은 하위 선택자 스타일을 부모 안에 중첩하여 작성할 수 있도록 하는 기능으로,CSS의 가독성과 유지보수를 크게 향상시킵니다.CSS 네스팅은 Sass, Less와 같은 전처리기에서 제공하던 기능을 네이티브 CSS에서 사용할 수 있도록 한 것입니다.🧐 왜 CSS 네스팅이 필요한가요?기존 CSS에서는 하위 선택자를 작성할 때 부모 선택자를 반복해야 했습니다.기존 방식.navbar { background-color: #333;}.navbar .menu { display: flex;}.navbar .menu .menu-item..

반응형 웹 디자인을 구현할 때 우리는 보통 미디어 쿼리(Media Queries)를 사용합니다.하지만 미디어 쿼리는 화면 크기를 기준으로 스타일을 변경하기 때문에 컴포넌트 중심의 디자인에서는 한계가 있습니다.이 문제를 해결하는 새로운 도구가 바로 CSS 컨테이너 쿼리(Container Queries)입니다.컨테이너 쿼리는 특정 컨테이너의 크기를 기준으로 스타일을 변경할 수 있어컴포넌트 단위의 반응형 디자인을 쉽게 구현할 수 있습니다. 🧐 왜 컨테이너 쿼리가 필요한가요?기존의 미디어 쿼리는 화면 전체의 크기만 고려하므로, 같은 컴포넌트가 다양한 컨텍스트(사이드바, 메인 콘텐츠 등)에서 다른 크기로 나타나야 하는 상황에 적합하지 않습니다.예를 들어, 카드 컴포넌트가 부모 컨테이너의 크기에 따라 레이아웃을 ..

1. 우선순위 점수 계산 방법인라인 스타일 (예: )점수: 1000인라인 스타일은 가장 높은 우선순위를 가집니다.인라인 선택자 css아이디 선택자 (#id)점수: 100아이디 선택자는 강력한 우선순위를 가지며, 클래스나 태그 선택자보다 높습니다.아이디 스타일 css클래스, 속성, 의사 클래스 선택자 (.class, [type="text"], :hover)점수: 10일반적으로 자주 사용되는 선택자들로, 태그 선택자보다는 높지만 아이디 선택자보다는 낮은 우선순위를 가집니다.클래스 선택자 css태그, 의사 요소 선택자 (div, p, ::before, ::after)점수: 1태그 선택자와 의사 요소 선택자는 가장 낮은 우선순위를 가집니다.태그 선택자 css전체 선택자, 결합자 (*, +, >, ~, )점수: ..

React 컴포넌트를 작성하다 보면 JSX에서 최상위 요소를 하나만 리턴해야 하는 규칙을 마주하게 됩니다.이 규칙은 React의 가상 DOM과 연관이 있으며, 효율적인 렌더링과 성능 최적화를 위해 중요합니다.이 글에서는 React.Fragment와 그 축약형인 빈 태그 ( )를 사용하는 이유와 동작 방식을 설명합니다.React에서 최상위 요소 하나만 리턴하는 이유React는 가상 DOM (Virtual DOM)을 사용하여 렌더링 성능을 최적화합니다.컴포넌트가 업데이트될 때마다 React는 가상 DOM에서 변경 사항을 확인하고, 최소한의 변경만 실제 DOM에 반영합니다.이를 Reconciliation (조정) 과정이라고 부르며, React의 핵심 동작 방식 중 하나입니다.이때 가상 DOM을 효율적으로 비교..

문제이 오류는 현재 프로젝트가 특정 pnpm 버전(8버전)을 요구하는데, 사용 중인 pnpm 버전(9.9.0)이 그 요구 사항을 충족하지 않아서 발생하는 문제입니다.오류 메시지에서 보면:필요한 pnpm 버전: 8현재 설치된 pnpm 버전: 9.9.0프로젝트의 package.json 파일 내에 engines.pnpm 필드가 있어, 이 프로젝트는 pnpm 버전 8만 지원한다고 명시되어 있습니다.해결 방법1. pnpm의 특정 버전 설치 pnpm 버전 8을 설치하여 문제를 해결할 수 있습니다. 다음 명령어로 pnpm의 버전을 8로 지정하여 설치하세요:npm install -g pnpm@8  2. 프로젝트의 engines 설정 수정 만약 프로젝트 팀이 pnpm 9 버전을 사용할 준비가 된 상태라면, 프로젝트의 p..

이 경고 메시지는 SSH가 원격 서버의 호스트 키(fingerprint)를 변경되었거나 기존의 호스트 키와 일치하지 않는 것으로 인식할 때 발생합니다. 이는 보안상의 경고로, 주로 아래와 같은 이유로 발생합니다:원격 서버의 SSH 호스트 키가 변경된 경우: 서버가 다시 설치되었거나 SSH 설정이 변경되었을 때 새로운 호스트 키가 생성될 수 있습니다.IP 또는 도메인이 동일하지만 서버가 다른 경우: 동일한 IP를 사용하는 다른 서버로 인해 기존 호스트 키와 충돌이 발생할 수 있습니다.서버의 도메인/IP와 호스트 키의 불일치: IP가 동일한 서버의 키가 변동된 경우에 발생할 수 있습니다.이 문제는 SSH가 이전의 호스트 키와 현재의 호스트 키가 일치하지 않는다는 것을 감지해 보안 경고를 발생시킨 것입니다. ..