본문 바로가기

부트캠프교육중301

CDD (Component Driven Development) # 재사용할수있는 UI컴포넌트의 필요성을 느껴 이를 해결하기 위해 등장한 개발방법이 Component Driven Development(CDD)이다. 레고처럼 조립해 나갈수있는 부품단위로 UI컴포넌트를 만들어나가는개발. 컴포넌트단위로 만들어 페이지를 조립하는 개발방식으로 상향식 개발에 가깝다. # 구조적인 CSS가 필요하게 된 이유 -점점 커지는 프로젝트의 규모와 복잡도, 팀원 수의 증가 -모바일이나 태블릿을 비롯한 다양한 디바이스의 등장으로 웹사이트들이 다양한 디스플레이를 커버해야하기때문에 Css는 더 복잡해지게 되었다. 이러한 문제점들을 해결하기 위해 CSS전처리기(CSS Preprocessor)이 등장했다. # CSS 전처리기(CSS Preprocessor) -CSS가 구조적으로 작성될수있게 도움을.. 2023. 2. 20.
useNavigate # useNavigate - 특정행동을 했을때 해당 주소로 이동시켜주는 역할을 한다. - 로그인이 되어있을경우 버튼을 누르면 navigate('/mypage')가 실행되어 mypage로 이동한다. - link와 달리 함수 호출을 통해 특정 조건에 따라 페이지를 이동할수있다. #과제중에 fe-sprint-react-twittler-spa 부분중 useNavigate를 이용해서 뒤로가기 버튼을 만드는 부분 const App = () => { const navigate = useNavigate(); const goBack = () => { navigate(-1); }; const goForward = () => { navigate(1); }; return( 앞으로가기 뒤로가기 ); 2023. 2. 19.
Figma Figma -UI디자인 & 프로토타이밍 툴 -개인에게는 모든 기능을 무료로 제공하고있다. 특징 1.실시간 협업가능 -한 화면에서 여러명이 동시에 작업할수있는 기능을 제공한다. 2.다양한 환경 지원 -웹브라우저 기반 프로그램이기때문에 브라우저만 사용할수있다면 어떤 환경에서든 사용이 가능하다. -mac, window, linux 등 가리지 않는다. -필요에 따라 프로그램을 직접 설치해서 사용할수도 있다. 3.자동 저장 및 버전 관리 -자동저장기능을 제공한다. 히스토리기능도 있어 버전관리에도 유리하다 4.다양한 무료폰트 지원 -구글폰트를 활용할수있어 폰트를 별도로 설치할 필요가 없고, 폰트가 없어서 화면이 깨지는 현상도 발생하지 않는다. 구글폰트 이외에도 사용자 PC에 저장된 로컬폰트를 불러와서 사용할수도있다.. 2023. 2. 15.
와이어프레임 & 프로토타입 와이어프레임과 프로토타입은 제품 개발 이전에 화면 구조를 설계하기 위해 작성하는 것이라는 공통점을 가진다. 작성시점, 작성목적 완전히 다르다 #와이어프레임(wireframe) - 선(wire)으로 틀(frame)을 잡는다 -제품 기획단계에서 페이지를 어떻게 구성할것인지 구조를 잡기위한 목적으로 만든다. -피델리티(fidelity): 와이어프레임을 표현할때의 품질수준을 표현하는 전문용어 1. Low Fidelity Wireframe (Lo-Fi Wireframe) -손으로 빠르게 그린 수준의 와이어프레임 -작성하는데 시간이 많이 들지 않아 수정하거나 새로운 의견을 반영하기 쉽다. -아이디어를 구체화 시키며 큰 그림을 잡는데 좋다. 2.Middle Fidelity Wireframe (Mid-Fi Wirefr.. 2023. 2. 15.

티스토리툴바