Front End Develop Front End Develop

위와 같은 마크업이 있을 때 제목의 중간에 사진이 위치하게 되겠죠. 그리드를 사용해서 쉽게 만들어볼 수 있고, scss nesting을 사용해서 컴포넌트 형태로 구성해볼 수 있겠네요. 얼핏 보면 플렉스박스를 사용하여 정렬을 처리할 수 있는 것처럼 보입니다. 아이콘이 제목보다 작으면 두 개를 모두 감싸고 플렉스박스로 세로로 정렬하면 됩니다. 그러나 아이콘이 더 크면 제목과 사본 사이에 어색한 간격이 생깁니다. 운 좋게도, CSS Grid는 열과 행을 모두 직관적으로 나눌 수 있습니다. 완료 코드는 다음과 같습니다 : ) See the Pen Bulletproof Flag Component by YoungMinKim (@oinochoe) on CodePen. 출처 : https://www.jayfreesto..

Javascript에서 Proxy를 다루는 내용들이 있습니다. Proxy란 무엇이고 어떻게 사용해야 할까요? ECMAScript 6에서 정의되어진 Proxies에 대해서 알아보고 사용법을 익혀보는 시간을 가져 보시죠 : ) 프록시란 무엇일까 MDN의 문서의 내용과 같이 프록시 객체는 다른 객체에 대한 프록시를 만들고, 이 객체는 해당 객체에 대한 기본 작업을 가로채고 재정의할 수 있는 작업들을 할 수 있다는 것입니다. 다시말하면, 그 객체는 해당 객체를 래핑하고, 그 객체를 재정의하고 사용할 수 있는 것입니다. 일반적으로, 이러한 작업들을 우리는 객체를 가져와서 숨겨진 게이트웨이를 생성하고 원하는 객체에 대한 모든 액세스를 제어할 수 있도록 프록시로 포장한다는 것을 의미합니다. 프록시는 두개의 파라미터로..

파비콘을 동적으로 바꿔보는 작업을 해보시죠 const faviconHref = emoji => `data:image/svg+xml,${emoji}` 위와 같이 faviconHref를 선언해서 emoji를 svg 형태의 data:image/svg+xml로 받을 수 있도록 선언해둡니다. const changeFavicon = emoji => { // browser환경이 아니면 return 합니다. if (typeof window === 'undefined') return; // rel*=icon으로 사용하고 있는 파비콘이 이미 있다면 해당 link를 선택하고, // 그렇지 않다면 link 태그를 생성합니다. const link = window.document.querySelector("link[rel*='i..

버그는 프로그래밍 어디에나 존재하고, Unknown features(알려지지 않은 기능)이라고 까지 불리웁니다. 하지만, 버그는 언제나 우리에게 흥미로운 존재는 아닙니다. 자기 자신 스스로가 발견하는 버그보다, 클라이언트가 발견한 버그에 대해서 기분 좋게 받아들일 수만은 없을 것입니다. Try Catch의 사용법을 알아봅시다. Try Catch 블록은 무엇인가? try/catch 블록은 기본적으로 JavaScript에서 오류를 처리하는 데 사용됩니다. 스크립트의 오류로 인해 코드가 손상되는 것을 원하지 않을 때 이것을 사용합니다. if문으로도 할 수 있을 것 처럼 보이지만, try/catch는 if/else에 비해서 더 많은 기능들을 제공합니다. try { getData(); } catch(e){ ale..

47가지 주요한 ui/ux 관점의 디자인 철학이 담긴 좋은 글이 있어 요약 해봅니다. 1편으로 가시려면 아래 링크를 클릭하세요. https://frontdev.tistory.com/entry/UIUX-47가지-UIUX-디자인-철학1-24가지 [UI/UX] 47가지 UI/UX 디자인 철학(1 - 24가지) 47가지 주요한 ui/ux 관점의 디자인 철학이 담긴 좋은 글이 있어 요약 해봅니다. 1. 픽셀이 아닌 밀도(Density)를 위한 디자인 밀도는 PPI라고도 하는 화면의 인치당 픽셀 수입니다. 예를 들어 200 x 50 dp frontdev.tistory.com 25. 적극적으로 경청하기 모든 훌륭한 UI/UX를 끌어내기 위한 한 방법으로 커뮤니케이션 할 때의 경청이 있습니다. 1. 말하는 사람을 바라..

47가지 주요한 ui/ux 관점의 디자인 철학이 담긴 좋은 글이 있어 요약 해봅니다. 1. 픽셀이 아닌 밀도(Density)를 위한 디자인 밀도는 PPI라고도 하는 화면의 인치당 픽셀 수입니다. 예를 들어 200 x 50 dp에서 버튼을 디자인하면 160ppi 화면에서는 200 x 50픽셀, 320ppi 화면에서는 400 x 100픽셀 또는 원본 크기의 2배 크기로 표시됩니다. iPhone XS Max의 화면 크기는 414 x 896입니다. 하지만 픽셀이 아니라 포인트 수입니다. 픽셀 단위로 1242 x 2688픽셀입니다. iPhone XS Max용으로 디자인할 때 414 x 896 포인트로 디자인한 다음 에셋 @3x를 전달합니다. 2. 8dp 간격으로 디자인 하기 최신 화면 크기의 대부분은 8로 나눌 ..

요즘은 webpack, vite 등의 다양한 번들러들을 사용해서 개발을 하고 계시는데요. 그 안에서 사용할 수 있고, 단독으로도 사용할 수 있는 각종 전처리기들에 대한 문법들을 정리 해보았습니다. Haml - For Loop See the Pen Loop with Haml by YoungMinKim (@oinochoe) on CodePen. Haml - While Loop See the Pen While Loop in Haml by YoungMinKim (@oinochoe) on CodePen. Haml - Each Loop See the Pen Each Loop with Haml by YoungMinKim (@oinochoe) on CodePen. Pug - For Loop See the Pen Loo..

마우스 오버 애니메이션은 응용 프로그램이 동적이고 반응적으로 느껴지도록 하는 좋은 방법입니다. 작은 적용으로 전체 제품을 업그레이드 할 수 있는 디테일입니다. 마우스 오버를 사용하지 않고 키보드로 웹을 사용하는 사람들은 Enter를 눌러서 마우스 오버 효과를 활성화 할 수 있습니다. const Boop = ({ rotation = 0, timing = 150, children }) => { const [isBooped, setIsBooped] = React.useState(false); const style = { display: 'inline-block', backfaceVisibility: 'hidden', transform: isBooped ? `rotate(${rotation}deg)` : `ro..