본문 바로가기
반응형

전체 글71

[UX 디자이너] UI/UX 공부 - UX 디자이너 목차1. UX (User eXperience)User eXperience(사용자 경험)편리함보다 익숙함을 제공한다.발명이 아닌 발견이다.넓은 의미 : 기획, 설계, 마케팅, 서비스좁은 의미 : 인포그래픽, 레이아웃, 컬러, 인트랙션, 구조, 스타일, BX(Brand eXperience)2. UX 디자이너의 기술아래와 같은 설계 및 디자인 할 수 있음UI : 사용자의 조작 편의와 시스템 운영을 쉽고 편하게 하기 위해 설계된 화면GUI 설계 : 사용자 실제로 기기 또는 콘텐츠를 조작하기 위해 UI를 그림, 색상, 레이아웃, 아이콘 등으로 형상화한 화면인터렉션 디자인 : 축소, 넘기기 등 동작의 대한 디자인인포그래픽스 디자인 : 정보 시각화 (모바일과 같이 작은 화면에 효율적으로 시각화하는 것)BX : 보는.. 2024. 9. 19.
[Next] ReferenceError: window is not defined 목차 1. 원인 Next는 SSR로 서버에서 렌더링 된다. window 객체는 브라우저 환경에서만 정의되고 서버 환경에서는 window 객체가 존재하지 않기 때문에 이러한 오류가 발생함. 2. 해결 2-1. AS-IS const currentURL = window.location.href; const handleCopyClipBoard = async () => { try { alert("복사되었습니다."); } catch (error) { alert("다시 시도해주세요."); } }; return ( ); 2-2. TO-BE window 객체가 존재하는지 판단하는 코드를 추가해준다. const currentURL = typeof window !== 'undefined' ? window.location.h.. 2024. 2. 14.
[Next] Next+styled components에서 SVG 커스텀하기 목차 1. SVG 로더 설치 npm i @svgr/webpack 2. next.config.js 설정 module.exports = { webpack(config) { const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'), ) config.module.rules.push( { ...fileLoaderRule, test: /\.svg$/i, resourceQuery: /url/, // *.svg?url }, { test: /\.svg$/i, issuer: fileLoaderRule.issuer, resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/.. 2024. 1. 8.
[Next] Next.js + Styled Components 사용하기 목차 1. Next.js에서 styled components 사용 시 깜빡이는 현상 환경 Next 14.0.4 styled-components 6.1.6 프로젝트를 진행하면서 Next.js와 styled components를 사용할 때 아래와 같이 깜빡임이 발생했다. 🧐 깜빡임이 발생하는 이유 styled-components는 CSS in JS로, JS안에 CSS를 작성하는 것을 의미한다. Next.js는 SSR(Server Side Rendering)로 Hydrate 과정에서 다운로드 받은 JS를 통해 지정된 스타일 정보가 생기기 때문에 페이지 로드 시 스타일이 잠깐 누락되어 깜빡이는 현상이 발생한다. Hydrate ? Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트.. 2024. 1. 8.
반응형

티스토리툴바