전체 글52 휴리스틱 평가 체크리스트: 닐슨의 10원칙과 화면 평가 예시 휴리스틱 평가는 화면을 사용성 원칙에 비춰 살펴보고, 사용자가 막힐 만한 지점을 찾아 기록하는 방법이다. 실제 사용자를 모집하기 전에도 진행할 수 있어 초기 검토에 유용하다. 다만 평가자의 판단으로 문제 가능성을 찾는 방식이므로 사용성 테스트를 대신하지는 않는다. 사용자가 실제로 어디서 망설이고 어떤 표현을 이해하는지는 직접 관찰해야 알 수 있다. 사용성 테스트가 참여자에게 과제를 주고 행동을 관찰하는 조사라면, 휴리스틱 평가는 평가자가 정해진 기준으로 인터페이스를 검사하는 점이 다르다. 둘은 서로 보완할 수 있다. 아래 체크리스트의 원칙 이름은 닐슨 노먼 그룹(NN/g)의 표현을 옮겼고, 각 질문은 초심자가 화면을 살펴보도록 이 글에서 재구성했다. 닐슨의 10원칙 체크리스트1. 시스템 상태의 가시성Vi.. 2026. 10. 2. React Native 웹뷰 키보드 감지, iOS·Android 메시지 받는 법 웹뷰 안에서 키보드가 열렸는지 웹 화면에 알려야 한다면 React Native의 Keyboard 이벤트를 구독해 WebView.postMessage로 보내면 돼요. iOS는 keyboardWillShow/keyboardWillHide, Android는 keyboardDidShow/keyboardDidHide를 사용해요. 받은 메시지는 iOS에서 window, Android에서 document에 전달되므로 웹에서는 두 곳을 구독합니다. 아래 코드는 React Native 0.83 Keyboard 문서와 react-native-webview v13.17.0의 iOS·Android 구현을 대조해 작성했어요. 두 버전을 묶은 앱을 iOS·Android 기기에서 실행한 결과는 아니에요. React Native에서.. 2024. 8. 11. Next.js 동적 경로 params와 generateStaticParams 사용법 App Router에서 params.slug에 바로 접근하던 코드가 Next.js 16에서 타입 오류나 런타임 오류를 내면, params를 동기 객체로 쓴 경우가 많아요. params를 Promise로 선언하고 await한 뒤 사용하면 돼요. 빌드할 slug 목록은 generateStaticParams라는 named export로, 페이지 컴포넌트는 default export로 분리해야 해요. 이 글은 cacheComponents를 켜지 않은 기본 설정에서 Next.js 16.3.6, React 19.2.4, TypeScript 5.9.3 기준으로 적어요. /blog/[slug]처럼 URL 일부를 파일명으로 받을 때의 예제예요. 아래 코드는 기존 App Router TypeScript 프로젝트의 app/.. 2023. 9. 26. [Next.js] Routing Groups(경로 그룹) app 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑되지만, 의도적으로 해당 폴더가 URL 경로에 포함되지 않도록 할 수 있다. Convention(컨벤션) 경로 그룹은 폴더 이름을 괄호로 묶어 생성할 수 있다.(ex: (folderName)) URL 경로에 영향을 주지 않고 경로 구성하기 아래 구조에서 (marketing)과 (shop)은 URL 경로에서 제외된다. URL 경로에서 제외되더라도, 아래 구조처럼 내부에 layout.js 파일을 추가해 서로 다른 레이아웃을 적용할 수 있다. Opting specific segments into a layout(특정 세그먼트를 레이아웃으로 선택하기) 특정 경로를 레이아웃으로 선택하려면 새 경로 그룹(ex: (shop))을 생성하고 동일한 레이아웃을.. 2023. 9. 24. SWR 무한스크롤 첫 페이지 재요청, revalidateFirstPage 설정 기준 useSWRInfinite로 무한스크롤을 만들고 더보기를 누르면 새 페이지만 받지 않아요. 네트워크 탭을 보면 1페이지 요청도 매번 같이 찍혀 있어요.버그는 아니고 revalidateFirstPage 옵션 때문이에요. 기본값이 true라서, 목록 캐시가 있는 상태에서 새 페이지를 추가하면 첫 페이지도 다시 요청해요. 요청을 줄이고 싶으면 revalidateFirstPage: false로 바꾸면 돼요.다만 끄면 최신 글이 목록 맨 위에 늦게 반영될 수 있어요. 그래서 끌지 말지는 목록의 성격을 보고 정해야 해요.아래 설명은 SWR 2.5.0 소스(src/infinite/index.ts)를 확인한 범위예요. 이후 버전에서도 동작이 같은지는 확인하지 않았어요.원인: 첫 페이지 재요청 조건SWR 2.5.0 소스.. 2023. 9. 16. Next.js 16에서 Link 이동이 느릴 때, loading.tsx와 프리페치 확인 App Router에서 를 눌렀는데 다음 화면이 바로 바뀌지 않는다면, 먼저 개발 서버인지 프로덕션인지 확인하고 해당 경로가 정적인지 동적인지 살펴보세요. 개발 모드에서는 자동 프리페치가 꺼져 있어요. 프로덕션에서 동적 경로에 loading.tsx가 없으면 클릭한 뒤 서버 응답을 기다릴 수 있고, 로딩 경계를 추가하면 그 UI를 먼저 보여 줄 수 있어요.이 글은 2026년 10월 1일 기준 Next.js 16.3.8 App Router를 다뤄요. Next.js 16.3의 새 Instant Navigations 기능은 cacheComponents와 partialPrefetching 설정을 켜야 하는 선택 기능이라, 여기서는 두 설정을 켜지 않은 기본 동작만 설명해요. 활성화된 앱은 프리페치와 로딩 동작이 .. 2023. 8. 17. [Next.js] Pages and Layouts(페이지와 레이아웃) Pages(페이지) 페이지는 각 라우트의 고유 UI이며, React와 같이 컴포넌트를 구성하여 내보내서 사용할 수 있다. 아래 이미지와 같이 앱 루트에 page.ts를 생성하여 /에 엑세스 할 수 있으며, 중첩된 폴더를 구성해 내부에 page.ts를 생성하면 해당 라우트에 엑세스 할 수 있다. page 파일은 .js, .jsx 또는 .tsx 확장자를 사용할 수 있다. Layouts(레이아웃) layout.js 파일은 여러 페이지에 사용될 수 있는 공용 UI를 생성하며, 이 파일은 상태를 보존하며 리렌더링되지 않는다. 최초 앱 루트에 생성할 수 있지만, 라우트와 마찬가지로 하위에 중첩해서 사용할 수 있다. 중첩된 레이아웃의 경우, 하위로 갈수록 우선순위가 높아진다. const DashboardLayout .. 2023. 8. 12. [Next.js] Defining Routes(라우트 정의) 라우트 생성 Next.js는 폴더 자체가 라우트를 정의하는 파일 시스템 기반 라우터를 사용한다. 각 폴더는 URL 세그먼트 에 매핑되는 라우트를 나타내며, 폴더를 서로 중첩해서 중첩 라우트를 구현할 수 있다. 라우트에 액세스할 수 있도록 page.ts 파일을 사용하며, page.ts는 각 라우트의 루트이다. 위 예시에서 /dashboard/analytics에는 page.ts 파일이 없으므로 엑세스 할 수 없다. UI 생성 각 라우트에 대한 UI를 생성하기 위해 일반적으로 page.ts 파일을 사용하며, 여러 라우트의 공용 UI를 생성하기 위해서는 layout.ts 파일을 사용한다. 예를 들어, Next.js에서 첫 번째 페이지를 만든다고 하면, app 폴더 내부에 page.ts 파일을 생성하고 해당 컴포.. 2023. 8. 11. [Next.js] Routing Routing(라우팅) 먼저, 라우팅을 이야기할 때 주로 사용되는 용어를 살펴보겠다. Tree(트리) 계층적 자료 구조. 예를 들어 부모 및 자식 컴포넌트가 있는 컴포넌트 구조, 폴더 구조 등이 있음 Subtree(하위 트리) 새로운 기준의 계층에서 시작해 마지막에서 끝나는 트리의 일부 Root(루트) 트리 또는 하위 트리의 첫 번째 노드 Leaf(리프) 세그먼트의 노드 중 자식이 없는 노드(예를 들어, URL 경로의 마지막 세그먼트) URL Segment, URL Path 세그먼트는 슬래시로 구분된 URL 경로의 일부이며, URL Path는 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)이다. App Router(앱 라우터) Next.js 13버전에서는 공용 스타일을 관리하는 레이아웃 파일, 중첩 라.. 2023. 8. 5. [Next.js] Getting Started - Installation(설치하기) Next.js 공식문서 바로가기 Next.js 설치하기 React의 CRA와 유사하게 간편 설치할 수 있으며, 자동 설치와 수동 설치가 있다. 자동 설치 자동 설치의 경우, 명령어로 설치 후 기본적인 폴더 구조가 자동으로 생성된다. npx create-next-app (프로젝트명) 설치 시 아래와 같은 프롬프트가 표시된다. Would you like to use TypeScript? (타입스크립트 사용 여부) Would you like to use ESLint? (eslint 사용 여부) Would you like to use Tailwind CSS? (테일윈드 사용 여부) Would you like to use `src/` directory? (src 폴더를 사용할지 여부) Would you like .. 2023. 8. 2. 이전 1 2 3 4 ··· 6 다음