Development 썸네일형 리스트형 [UI 만들기] 4. Popper 이번에 만들어보고자 하는 UI는 Popper이다. 일명 토스트라고도 부르는 UI이다. 이번에는 특정시간에 일정한 시간만큼 띄워졌다가 없어지는 기능을 넣고자 한다. 거기에 애니메이션을 추가해서 오른쪽에서 날아오는 형식을 추가하겠다. 먼저, CSS부터 구성한다. .nightly-toast { position:fixed; right: -300px; // 화면 밖에서 시작함. top: 50px; z-index: 9999; width: 300px; background-color: #fff; border: 1px solid #ddd; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transition: all 2s ease-out; } .nightly-toast.show { right: 5.. 더보기 [UI 만들기] 3. Top Navbar Navbar 만들기 그중 Top Navbar를 만들어 보고자 한다. Navbar는 메뉴창이기 때문에 당연히 링크기능이 포함돼야 한다. 메뉴 버튼에 따라 페이지가 전환되는 형식을 채택했다. 먼저 Navbar 컴포넌트를 만든다. import React from 'react'; function Navbar() { return ( Home About Contact ) } export default Navbar; 그리고 상위 컴포넌트에서 불러와 페이지 상단에 위치하도록 코드를 작성한다. import React from 'react'; import Navbar from './components/Navbar'; function App() { return ( Hello World ) } export default Ap.. 더보기 [UI 만들기] 2. Modal 이번에 만들어 볼 UI는 Modal이다. Modal 역시 정말 많이 사용되는 UI이고 그 종류가 아주 많다. 그러나 이번에는 가장 간단한 Modal을 구현해보고자 한다. 이 바탕에 대부분의 Modal을 제작할 수 있다. Modal을 만들 때 React의 컴포넌트를 먼저 구성해야 하는데, 이 컴포넌트는 모달의 내용을 props로 전달받아야 한다. 이 컴포넌트는 기본적으로 렌더링을 담당하는 컴포넌트이다. import React from 'react'; type ModalProps = { content: JSX.Element; isOpen: boolean; } const Modal: React.FC = ({ content, isOpen }) => { return ( {isOpen && ( {content} ).. 더보기 [UI 만들기] 1. Accordion 프로젝트를 진행하며 아쉬웠던 점 중 하나가 UI를 제작하는 부분이었다. 아직 경험이 부족하다 보니 UI를 만들기는 하는데, 이게 좋은 UI인지 이렇게 하는게 성능상 문제는 없는지와 같은 지식이 부족했다. UI 역시 나름 어느정도는 정석에 가까운 최적화된 개발 방식들이 있다고 생각한다. 그래서 좀 더 좋은 프론트 개발자가 되기 위해서 UI를 제작하는 방법들을 하나씩 공부해보고자 한다. 아코디언은 정말 많이 사용되는 UI중 하나이다. 아코디언을 첫번째로 꼽은 이유는 사실 이번에 개발했던 UI중 가장 아쉬운 UI이기 때문이다. 아코디언은 기본적으로 열고 닫기 기능을 포함한다. 여기서 중요한 것은 열고 닫으면서 특정 상태를 변경해야 하고, 하나의 컴포넌트로 만들되 각각 독립적으로 제어가 되야 한다. import.. 더보기 chat GPT가 말하는 프론트엔드 개발자의 전망 chat GPT가 요즘 아주 핫하다. 처음 이것이 발표되었을 때 나는 개발자니까 최신 트렌드를 빨리 따라가야 한다는 생각에 궁금해서 사용해 봤다. 그러나 그때는 영어 외에는 이해하지 못했고 생각보다 답변도 아쉽다는 느낌을 받았었다. 그래서 바쁘게 내 일을 하며 한, 두 달 정도를 보내고 보니 모든 곳에서 이 chat GPT를 떠들기 시작한다. 그래서 나는 다시 이것을 사용해 봤다. 그랬더니 그야말로 신세계이다. 이젠 한글도 아주 잘 지원되고 물어보는 질문이 깊어질수록 더 깊은 답을 내놓기 시작한다. 지금에 와서 생각해 보니 그때는 GPT를 잘 사용하지 못해서 그런 결론을 내렸던 것 같다. 그래서 이번엔 내가 해결하지 못한 라이브러리 사용법을 묻기도 하고 내가 작성한 코드의 좀 더 좋은 리팩토링을 물어보기.. 더보기 이전 1 다음
