화면 크기와 방향Dimensions APIreact-native의 Dimensions API를 활용해 기기의 너비와 높이를 구할 수 있다.const deviceWidth = Dimensions.get('window').width;const deviceHeight = Dimensions.get('window').height;get메서드를 통해 ‘screen’ 또는 ‘window’ 를 인수로 전달하면 되는데,android에서 ‘screen’의 경우 상태 표시줄을 포함한 너비와 높이를 의미하고, ‘window’는 상태 표시줄을 제외한 너비와 높이여서 실제 UI가 표시되는 화면을 의미한다.Dimensions API를 통해 최대 사용 가능한 공간을 파악한 뒤 다음과 같이 스타일을 설정할 수 있다.padding: ..
프로젝트에서 인증번호를 입력하는 input이 있어서 6자리로 제한하려고 maxLength 속성을 지정해줬는데 6자리로 제한이 안되고 계속 입력이 가능했다. 그 이유를 알아보니,input의 maxlength 속성은 type이 text, search, url, tel, email, password 일 때만 가능하다. 따라서 number type인 input에는 적용이 안되는 것이다. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-maxlength) 따라서 input이 number 타입일 때 입력 글자수를 제한하고 싶다면, oninput 이벤트나 onchange 이벤트를 사용해서 직접 제한하는 방법을 사용해야 한다. onChange..
프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 설명 f(x): 양의 정수 x에 대해 x보다 크고 x와 비트가 1~2개 다른 수들 중에서 제일 작은 수 예시)f(7) = 117: (0)1118: 1000 -> 4 (다른 비트 개수)9: 1001 -> 310: 1010 -> 311: 1011 -> 27보다 크고 비트가 다른 지점이 2개이하이면서 가장 작은 수는 11이다. 정수들이 담긴 배열 numbers가 주어지고 각 수들에 대해 f 값을 구하는 문제이다. 해결 방법비트 개수가 2개 이하로만 달라야 하기 때문에 마지막에 0이 나오는 위치(가장 오른쪽의..
https://school.programmers.co.kr/learn/courses/30/lessons/42898 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 설명m x n 크기의 격자모양으로 나타냈을 때 물에 잠긴 지역(puddles)을 피해 (1, 1)에서 (m, n)까지 갈 수 있는 최단 경로의 개수를 1,000,000,007로 나눈 나머지를 구하는 문제이다.이때 오른쪽과 아래쪽으로만 움직일 수 있다.⚠️ 다른 문제와 다르게 여기서 m이 열이고 n이 행을 나타낸다.입출력 예) 입력 - m: 4, n: 3, puddles: [[2, 2]] 출력 ..
React Portal을 사용한 Modal 컴포넌트 생성React Portal을 사용해 모달을 띄워보자우선 루트 레이아웃에 모달을 넣을 div를 넣어놓았다. (id="modal-root")export default function RootLayout({ children,}: Readonly) { return ( {children} );} 그리고 Portal이라는 컴포넌트를 따로 만들어서 모달을 children으로 받고, 이 모달을 위에 넣어놓은 id modal-root의 div로 이동시킨다.'use client';import { PropsWithChildren, useEffect, useState } from 'react';import ..
Layout shift 현상 발생 프로젝트에서 BottomNavigation을 구현하고 확인하던 중 새로고침이 될 때마다 글씨가 조금씩 움직이는 걸 확인했다. 자세히보면 기본 폰트에서 커스텀(로컬) 폰트로 빠르게 바뀌는 것을 볼 수 있다. 지난 포스팅에서 설명했던 폰트 최적화가 필요했던 이유를 내 눈으로 직접 확인할 수 있었던 시간이다! 2024.04.19 - [Next.js] - [Next.js] Learn - Ch3. 폰트와 이미지 최적화 (next/font, next/image) 구글 폰트 적용만 설명했었지만 이번엔 로컬 폰트 적용하는 방법을 기록하고자 한다. 로컬 폰트 적용하기 next/font/local에서 localFont를 import해서 사용한다. import localFont from '..
이 글은 Next.js 공식문서 Learn Next.js를 읽고 정리한 글입니다. 폰트를 최적화하는 이유 프로젝트에서 폰트 파일을 가져와서 로드하는 과정이 필요한 경우 이러한 커스텀 폰트는 성능에 영향을 줄 수 있다. 폰트를 사용하면 브라우저가 처음으로 fallback이나 기본 시스템 폰트를 렌더링하는데, 커스텀 폰트가 로드된 후 폰트가 바뀔 때 레이아웃 변경이 일어난다. 이때 텍스트 크기, 간격, 또는 레이아웃이 변경되고 그 주변 요소들이 이동할 수 있다. 그래서 Next.js는 next/font 모듈을 제공해서 자동으로 폰트를 최적화한다. 이 모듈은 빌드할 때 폰트 파일을 다운로드하고 다른 정적 asset들과 함께 호스팅한다. 이것은 사용자가 애플리케이션에 방문할 때 성능에 영향을 미치는 추가적인 네..
정의할 수 있는 타입 type과 interface는 공통적으로 객체 타입을 정의하거나 클래스에 특정 메서드나 프로퍼티를 가지도록 강제할 때 사용할 수 있다. interface PersonA { name: string } type PersonB = { name: string } type은 모든 타입(원시 타입, 유니온 타입, 튜플 타입 등)을 정의할 때 사용할 수 있지만, interface는 객체 타입을 정의할 때 사용가능하다. // ⭕️ type name = string; // ❌ interface name = string; 확장 방법 (상속) interface Person { name: string } interface Player extends Person { nickname: string } typ..
