FE (154) 썸네일형 리스트형 [ Next / loading ] Nextjs에서 대표적으로 사용되는 Loading Next js 에는 여러 가지 방식의 Loading 있다. 이것들을 어떻게 작동하는지 간략하게 알아보고 상황별 사용을 알아 보려고 한다. 요약기능 분류기능핵심 특징성능 영향자동 라우트 레벨 로딩폴더- 라우트 탐색 시작 시 자동 활성화 - 자동 제어 방식- 초기 로딩 화면 즉시 표시(TTFB(Time To First Byte) 개선 효과)eg. 간단한 페이지 전체 로딩 화면명시적 컨포넌트레벨 로딩Suspense fullback - 특정 컴포넌트 영역 로딩 상태 격리 및 관리 - 컨포먼트 래핑 제어 방식- 부분 화면 로딩으로 사용자 경험 향상eg. 복잡한 대시보드, 특정 섹션 데이터 패칭, 부분 업데이트스트리밍기반콘텐츠 로딩@defer 디렉티브- 서버 컴포넌트 렌더링 스트리밍 방식으로 개선 - 디렉티브 .. [ UI / pagination ] 어떤 타입의 페이지네이션들이 있을까? 최근 게시판을 만들어볼려고 작업을 하고 있었다.게시판은 정말로 간단한 작업이다. 그렇기 때문에 특별한 기술은 필요없다.그럼에도 게시판에서도 나름의 UX를 고민해보고 싶어서'페이지네이션(pagination)'에 고민을 해 보았다.하여, AI의 도움을 받아 TOP3에 해당하는 페이지네이션 UI를 보고 장단점을 고민해 보자. 페이지네이션 목록1. 네비게이션 타입2. 컨텍스트 타입3. 하이브리드 점프 타입 1. 네비게이션 타입가장 많이 쓰이는 타입 중 하나라고 생각한다.이 페이지네이션의 핵심은 처음과 맨 마지막 중간즘에 있을때,가운데 3개를 제외하고 양 옆에 ... 처리하는 방식이다.장점단점처음/이전/다음/마지막 페이지로의 완전한 네비게이션 제공현재 위치와 전체 범위를 명확히 표시하여 사용자 방향성 제공접근.. [ UI / 색상 위계] 메인페이지 시각적 계층구조를 통한 강조 아래의 사진은 개인적으로 생각을 반영한 것임을 말한다.더불어, 브라우저 개발자 코드를 통해 수정한 부분이며, Episoden 무관함을 전달한다.지극히 개인적인 취향을 담은 개인 작업 기존 색상과 UI를 변경하여 Start 버튼을 강조하고자 했다. AI에게 물어본 결론:Ai는 물어볼 때마가 다른 결과값 + 어떤 질문을 했는지에 따라 정보가 달라진다.따라서 약간의 편차가 있다는 것을 인지하고 내용을 읽어주길 바란다.영역별 기존수정정보 표시 (Next)"Join next session!"이라는 텍스트가 큰 제목으로 있고, "Next topic:"이 별도로 표시됨."Join NEXT session!"에서 'NEXT'가 강조되어 있어 더 명확한 계층구조를 보여줌.버튼 (Start)"Start this sessio.. [ ReactNative / expo ] .env를 설정해 볼까요? 글을 쓰는 저는 한 번도 ReactNative를 만저본 적이 없다. 다만 React를 해봤으니,괜찮지 않을까 라는 아니란 생각에 출발한 프로젝트였다.결론부터 말하면,이 글은 여전히 .env 설정과 sensitive Info 등록을 고민중에 있는 글임을 밝힙니다.앱은 Ai + Expo 코드를 작성했다.많은 코드는 Ai와 함께 코드를 작성했고 많은 component 코드는 문제가 없었다.그런데, 광고를 넣기 위해서 데이터를 Ai에게 요청하면서 문제가 발생했다.Ai가 출력하는 코드는 문제가 없다고 생각했다. 이유는 내가 React 기반 코드를작성해본 사람이기 때문이다. 1. expo .env는 next js와 같이 전용 접두어가 있다.2. 필요하다면 Ai 말고 "검색"을 통해 데이터를 찾아야 한다. Rea.. [ UI / Pictogram ] '픽토그램'을 왜 사용해야하는가? 글자가 있는데?! 최근 여행관련 홈페이지를 보다가 가독성이 안되는 사이트를 보고이것보다 더 좋은 사이트가 있겠지? 라는 생각에 몇몇 사이트를 검색했다.그중 눈에 띄는 부분은 왜 이 사이트가 의미 전달이 선명하고, 직관적인지?라는 생각이 들었다. 그 차이는 픽토그램 여행을 떠나 보자 '일정 선택' 영역만 볼까요?대다수 일정 페이지는 '스카이스케너'와 같이 UI를 제작한다. 배경과 대비차가 좋아인식하기도 좋다고 생각했다. 다만 각각의 항목이 뭘 나타내는지 읽기 위해선 눈에힘을 줘야 한다. 각 항목별() 정보밀도(텍스트 개수)가 높다. 반면, 에어아시아는 픽토그램을 활용해 정보 밀도(텍스트 개수)를 낮춤으로써, 가독성을 높였고,각 항목별() '날짜 입력' 단어를 제외하고, 픽토그램과 날짜 입력 방식을 조합, 장소는 흔히 .. [UI / 여백의미 ] 동양미술에서 말하는 '여백의미' 이 내용은 AI의 내용으로 작성된 점을 인지해 주시고 읽어 주시기 바랍니다.더불어, 최대한 데이터를 확인하기 위해 노력했다는 점을 인지해 주세요.ResourcesA more accurate approach would be to:Consult primary sources in their original languages (Classical Chinese, Japanese, and Korean texts)Review peer-reviewed academic publications specifically focused on East Asian aestheticsExamine art history texts from respected institutions in each countryCompare multipl.. [ 인지 / LandingPage ] 어떤 메인 UI가 더 편하게 읽힐까?(3개 홈페이지 비교) 먼저 현재 개인으로서 "혼자" UIUX 분석이 어렵기 때문에 AI 툴을 활용하여, 이 AI를 활용하여, 이 친구가 좋다고 생각하는 데이터 기반으로 측정한 결과로 작성한 글입니다.개수와 사례이커머스 및 서비스 플랫폼 데이터:- 상위 성과를 보인 글로벌 이커머스 플랫폼 약 500개 사례- 주요 리테일 웹사이트 약 300개 사례- 서비스 기반 플랫폼 약 200개 사례이 중에서 제시된 3개 웹사이트와 유사한 구조와 목적을 가진 케이스는:- 네이버 스토어 유형: 약 150개 사례- 쿠팡 유형: 약 120개 사례- 퍼블로그 유형: 약 80개 사례 한계 : Ai, Ai 가 좋다고 생각하는 UI/UX 데이터 기반이 어떤 건지 확인 불가. 비교 대상 : 쿠팡 vs 퍼블로그 vs 네이버 스토어 첫 화면 비교(L.. [ React / 데이터] 메모리 관점으로 JavaScript와 React는 어떻게 다른가? 메모리 관점에서 React를 고려해 보면리엑트는 메모리 주소를 참조하고 있다. 따라서 메모리 주소가 변경되어야만 Rendering을 시도한다. JavaScriptReact메모리 관점직접적인 메모리 조작, 단일 참조불변성 기반 새로운 메모리 할당, 여러 버전의 상태 유지상태 보존 단일 상태만 유지이전 상태의 히스토리 관리 가능(시간 여행을 통한 디버깅)메모리 사용량효율적인 메모리 사용 bc 직접 수정약간 더 많은 메모리 사용 bc 새로운 객체 생성하기 때문가비지 컬렉션let obj = { value : 123} obj = null즉시 대상const [ obj, setObj ] = useState({value : 123});setObb(null)내구적으로 관리하며 적절한 시점에 GC 처리 1. 데이터 처.. [ UI ] 디자인 시스템에 던지는 3가지 질문(속도, 일관성, 품질) 디자인 시스템 디자인 시스템이 당신의 작업을 더 나아지게 하고 있나요? 작업 속도는 더 빨라지고, 일관성이 높아졌으며, 품질이 향상되었나요? 글의 개요1. 속도2. 일관성3. 품질 이 글은 아래의 블로그를 요약하며 저만의 생각을 기록한 내용입니다. 디자인 시스템의 깨진 약속들(The broken promises of design systems)매년 Figma에서 개최하는 Config에서 올해(2024)의 Config 영상 중 하나가 좋았어서(해당 영상) 이를 글로 정리하고자 해요.minnimalism.medium.com 1. 속도 : 속도가 빠른 것이 좋은 것일까?발표자와 같은 회사 다른 팀원이 특정 페이지를 제작하기로 했다. 발표자는 디자인 시스템을 사용해 약 12분이 걸렸고 다른 팀원은 약 2시.. [ CSS / display : flex] hover가 적용되지 않는 것 처럼 보이는 이유 이 글은 Chat ai와 질문을 통해서 결론에 도달한 글을 정리한 글입니다. 따라서 일정 부분 내용이 잘못됐을 수 있다는 것을 이해해 주시기 발랍니다. 나는 Header을 만들고 있다. Header는 보통 1depth에 마우스가 hover되면 2depth가 노출되는 구조를 가지고 있다.그래서 관성적으로 고민없이 1depth 에 display : flex 를 걸고 hover 효과를 넣은 다음에 2depth를 block으로 바뀌게 해 봤는데 작동이 안 된다. 왜 일까? 결론부터 말하면 display :flex의 속성 때문이다. display : flex의 속성flex는 display : block과 달리 자식 요소들의 크기에 따라 부모의 배치와 크기가 결정된다.flex는 기본적으로 자식 요소들이 자동으로 .. [ JS ] !! // ??문법 삼항 함수같은거 좀 보는데, !! ?? 이런 문법은 거의 못봐서. 검색해 봤어요. ?? - Nullish Coalescing Operator (널 병합 연산자)??는 왼쪽의 값이 null이나 undefined일 경우에만 오른쪽 값을 반환합니다. let name = null;let defaultName = "Anonymous";console.log(name ?? defaultName); // "Anonymous" 차이점:|| 연산자와 유사하지만, null이나 undefined인 경우에만 오른쪽 값을 반환합니다.||는 0, false, ""(빈 문자열)과 같은 falsy 값도 오른쪽 값을 반환할 수 있습니다. !! - Double Negation (이중 부정)여기서 "hello"는 truthy 값이므로 !!.. [ React / TossPayment-1 ] <div id='payment-method'/> 어떻게 보여줄 것인가?(Feat. 결제) 이번에 프로젝트를 하면서 Toss Payment를 설치해 봤다.현재 토스 2가지 버전이 있다. 1과 2버전 있으며 API를 활용하거나 SDK를 활용한다.여기서는 Toss ver2 + SDK를 활용했다 토스를 붙이면서 고민해야 할 부분은 총 3개자 있었던 거 같다. 고민했던 지점 3가지1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?2. 결제 취소시 어떻게 작성 상태 및 데이터를 정리해 나갈 것인가?3. 결제 완료 후 어떻게 플로우를 설정할 것인가? 1. Toss 위젯을 어떻게 사용자에게 보여줄 것인가?Toss에서는 를 통해서 UI를 그린다.토스로 위젯을 부를 준비가 되면useEffect(() => { async function renderPaymentWidgets() { if (wi.. [ CSS / background-image] check box or radio에 SVG이미지 넣기 CSS에 svg background image 넣기 input[type="checkbox"]:checked { background-color: rgba(255, 255, 255, 1); /* Background color when checked */ border-color: rgba(0, 0, 0, 1); /* Change border color when checked */ background-image: url('data:image/svg+xml;charset=UTF-8,http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejo.. [ React / useState ] 부모에서 자식으로 useState Hook 넘기기 때론 지식 component에게 useState hook을 넘겨서 부모에서 정보를 처리해야 할 때가 있다.(React은 근히 정보 구조를 잘 짜야 한다.) 여튼 여기서 이야기 할 부분 아닌데, 넘기게 된다면 타입을 자알~ 써줘야 한다.타입 선언interface CustomSelect { selectedPosition : string, setSelectedPosition : React.Dispatch>} 자식 콘포넌트에 넣기const ChildCompo : React.FC =>{ return( )} 작성하는 방법을 자꾸 까먹어서 여기에 기록 [ React / Generic ] argument (Feat. unkown) Type Generic의 작성 const makeFetch = (url : string) : Promise =>{ return new Promise(( res, rej ) => { fetch(url).then(res => { if(!res.ok) throw new Error('Network response was not ok'); return res.json(); }) .then(data => res(data as TData)) })} Type arugment : unknow1. JSX와의 모호성 해결React와 TypeScript를 함께 사용할 때, JSX 문법과 제너릭 문법 사이에 모호성이 발생할 수 있다. 따라서 extend unkown을 .. [ React / vite ] .env가 vite.config.tx에서 적용되지 않을때 vite .env 보통은 아래 처럼 적용 가능하다. env를 선언이 필요하다. default defineConfig(({ mode }) =>{...}를 통해서 const env = loadEnv(mode, process.cwd(), '');설정 vite.config.tximport { defineConfig, loadEnv } from 'vite'import react from '@vitejs/plugin-react';import { sentryVitePlugin } from '@sentry/vite-plugin';// https://vitejs.dev/config/export default defineConfig(({ mode }) =>{ const env = loadEnv(mode, proc.. [ CORS / React ] CORS 원리 보다는 해결 방식<local 환경> (Feat. vite) 현재 컨퍼런스 페이지를 만들고 있다. 토이 프로젝트로.결제를 위해서 데이터를 받아와야하는데, 데이터가 들어오지 않고 있다. 이유는 CORS. 환경은 물론 Local이다.이걸 해결하기 위해서 첫번째로 ngrok을 사용했다.이렇게 해서 얻은 URL을 넘겨서 server에서 내 주소를 허용하게 해놨는데도 문제가 생겼다.로컬 환경이 아니고 서버에서 도메인을 허용해줘도 안 될때, React with Typescriptconst submitData = { method: "POST", cache: "no-cache" as RequestCache, credentials: "same-origin" as RequestCredentials, headers: { "Content-Type":"applic.. [ React / Error ] Invalid DOM property `clip-path`. Did you mean `clipPath`? (Feat. 카멜케이스) Figma에서 만든 svg를 그대로 썼는데, 아마도 React에서는 약간의 경고를 내는 거 같다. 따라서 아래처럼 바꿔주길 원한다. clip-path => clipPathstroke-width => strokeWidth [ React / useState ] 다중 팝업 제어하기 열기(Feat.) 보통은 CSS클레스로도 display none 처리하여 popup을 처리하기곤 한다.이번엔 useState를 사용하여 처리를 해보려고 했다. situtation : 한 페이지에서 일자와 사람이 같이 팝업으로 열림. Task : 한 페이지에서 1개 이상의 팝업이 열리는 것 방지 action1) CSS => display : none2) useState => boolean or number 2)을 선택하여 진행 => 이유 1) 속도 측면에서 큰 차이가 없다. 누가 먼저 동일 페이지에서 로드 했냐가 차이를 .1 만들뿐 2) 1)보다는 코스 수가 간결하다 특히 CSS Result1. 한개만 띄게 완료2. 바탕화면(?) 클릭 시 팝업 닫기 완료 [ Next / Component ] child component의 리셋(feat.parent Hook toggle) button component를 사용할 꺼 같아서 만들었다. Prop으로 정보 값을 전달했다. 그런데... 상황이 이렇다. 숙박을 위해서 추가 인원 설정 팝업이 필요했다.그래서 버튼이 성인 1개, 어린이 1개 이렇게 있어서 component로 만들어봐야겠다 했다. 간단한 정보는 Prop으로 전달했다. 성공했다! 그런데 팝업이 꺼지면 데이터가 날아갔다. 다시 말해 데이터가 리셋됐다. 데이터 정보값은 2개 있다. 총 인원 useState, the child button comonent.-총 인원 : parents component Hook-성인 + 어린이 : child component Hook 팝업은 parent component에서 useState으로 처리하기 때문에 false가 되는 순간 the c.. 이전 1 2 3 4 ··· 8 다음
