Dev_Ryomi

Expo) Expo란 무엇인가?

보호되어 있는 글입니다.

DOM 대신 Native Components : 웹에서는 , , , 같은 HTML 태그를 사용하지만, React Native에서는 이에 상응하는 네이티브 컴포넌트를 사용합니다. -> : 가장 기본적인 컨테이너 컴포넌트. 레이아웃 구성에 사용., -> : 텍스트를 표시하는 컴포넌트. React Native에서는 모든 텍스트는 반드시 컴포넌트 내부에 있어야 합니다. -> : 이미지를 표시하는 컴포넌트. -> : 사용자 입력을 받는 컴포넌트.스크롤 가능한 컨텐츠 -> 또는 , (대량의 데이터 목록 표시에 최적화) 스타일링(Styling):CSS in JS: 스타일은 JavaScript 객체 형태로 작성합니다. 웹의 CSS와 문법이 유사하지만, 모든 CSS 속성이 지원되지는 않습니다. (예: float..

React Native란?네이티브 앱 개발을 위한 JavaScript 프레임워크: React Native는 Facebook에서 만든 오픈소스 프레임워크로, JavaScript와 React의 개발 방식으로 iOS 및 Android용 네이티브 모바일 애플리케이션을 만들 수 있게 해줍니다."Learn once, write anywhere": React의 철학을 따릅니다. 하나의 코드베이스로 여러 플랫폼(iOS, Android)에서 동작하는 앱을 만들 수 있지만, 때로는 플랫폼별 특화된 코드가 필요할 수 있습니다. (완전히 "Write once, run anywhere"는 아닐 수 있습니다.)WebView 기반이 아님: React Native는 웹뷰(WebView)를 사용하여 웹 기술을 단순히 감싸는 방식(하이..

문제 설명 문제 분석각 지표는 두 가지 성격 유형으로 구성됩니다. (RT, CF, JM, AN)검사지(survey)와 선택지(choices) 배열이 주어집니다.choices는 1-7 사이의 값으로, 4를 기준으로 어느 성격 유형에 점수를 줄지 결정합니다.각 지표에서 점수가 같으면 사전순으로 빠른 유형이 선택됩니다. 첫 번째 접근: O(n) function solution(survey, choices) { const character = { RT: { R: 0, T: 0 }, CF: { C: 0, F: 0 }, JM: { J: 0, M: 0 }, AN: { A: 0, N: 0 }, } survey.forEach((el, i) => {..

기본 개념Controlled Components- 사용자 입력을 컴포넌트의 state로 관리하는 컴포넌트- UI에서 입력한 데이터와 저장한 데이터의 상태가 항상 일치- 변경할 수 있는 state는 일반적으로 컴포넌트의 state 속성에 유지되고 setState()에 의해 업데이트- 사용자가 입력할 때마다 리렌더링되므로, 실시간으로 값이 필요한 경우 사용function ControlledInput() { const [value, setValue] = React.useState(""); return ( setValue(e.target.value)} /> );} Uncontrolled Components- React가 아닌 DOM 자체에서 상태를 관리하는 컴포넌트- 입력값을 제어하지 않고, ..

1. Request WaterfallRequest Waterfall는 데이터 요청이 순차적으로 처리되며 발생하는 지연을 의미합니다.문제점:하나의 요청이 완료된 후에야 다음 요청이 시작되기 때문에 요청 처리 시간이 누적됩니다.특히, 여러 데이터를 의존적으로 가져와야 하는 경우 페이지 로드 속도에 큰 영향을 줍니다.예시:async function fetchData() { const user = await fetchUser(); const posts = await fetchPosts(user.id); return { user, posts };}위 코드에서는 fetchUser가 끝난 뒤에야 fetchPosts가 실행되므로 비효율적입니다.2. Static RenderingStatic Rendering은 빌드..

API 레이어API는 애플리케이션 코드와 데이터베이스 사이의 중개자 역할을 합니다. 다음과 같은 경우에 API 레이어를 활용할 수 있다:서드파티 서비스 사용 시: 외부 서비스에서 제공하는 API를 통해 데이터를 가져와야 할 때.클라이언트에서 데이터 페칭 시: 데이터베이스 비밀 정보를 클라이언트에 노출하지 않기 위해 서버에서 실행되는 API 레이어를 사용하여 데이터를 가져온다.Next.js에서는 Route Handlers를 사용하여 API 엔드포인트를 생성할 수 있다. 데이터베이스 쿼리풀스택 애플리케이션을 개발할 때는 데이터베이스와 직접 상호작용하는 로직이 필요하다. Postgres와 같은 관계형 데이터베이스의 경우, SQL이나 ORM을 통해 이를 수행할 수 있다. 다음과 같은 상황에서 데이터베이스 쿼리가..

정리searchParams vs useSearchParams 특징  searchParams  useSearchParams 사용 환경서버 컴포넌트클라이언트 컴포넌트선언 방식props로 자동 전달React Hook으로 import데이터 형태일반 객체URLSearchParams 객체사용 방법searchParams.categorysearchParams.get('category')변경 감지페이지 새로고침 시실시간 (자동 갱신)주 사용 목적초기 데이터 로딩, SEO동적 필터링, 실시간 업데이트 params vs usePathname 특징  params  usePathname 사용 환경서버 컴포넌트클라이언트 컴포넌트선언 방식props로 자동 전달React Hook으로 import반환 값동적 라우트 파라미터 객..

네비게이션 최적화가 필요한 이유전통적인 웹사이트에서는 태그를 사용하여 페이지 간 이동을 구현했다. 하지만 이 방식은 매번 전체 페이지를 새로고침하게 되므로 다음과 같은 문제가 발생한다.느린 페이지 전환 속도깜빡임 현상상태 초기화불필요한 서버 요청 Next.js의 Link 컴포넌트Next.js는 이러한 문제를 해결하기 위해 Link 컴포넌트를 제공한다.기본 특징클라이언트 사이드 네비게이션:페이지 간 이동이 브라우저 전체를 다시 로드하지 않고, 클라이언트 측에서 처리됩니다.빠른 페이지 전환으로 사용자 경험이 향상됩니다.자동 코드 스플리팅:Next.js는 각 페이지를 필요한 코드만 로드하도록 자동으로 최적화합니다.프리패치(prefetch)를 기본적으로 활성화하여 사용자가 링크에 접근하기 전에 이동할 페이지의..

문제 설명 문제 분석두 정수 X, Y가 주어집니다.X, Y에서 공통으로 나타나는 숫자를 사용하여 만들 수 있는 가장 큰 정수를 찾아야 합니다.공통된 숫자가 없다면 "-1", 공통된 숫자로 0밖에 만들 수 없다면 "0"을 반환합니다. 첫 번째 접근:  O(n * m) function solution(X, Y) { let answer = '' let [xLength, yLength] = [X.length, Y.length] new Array(10).fill(0).forEach((_, i) => { X = X.replaceAll(9 - i, '') Y = Y.replaceAll(9 - i, '') const count1 = xLengt..