UX·UI - FrontEnd Dev. Story

라이브러리 3

[React] 폰트어썸(fontAwesome) 설치 및 사용 (feat.yarn)

React에서 Font Awesome가 필요할 때 있는데.. 항상 뭐 설치해야할것이 많고.. import 할것도 많고.. 하다보면 무슨 에러가 나길래 짜증나서 그냥 내가 내 블로그에 정리함. 폰트어썸(Font Awesome) 공식페이지가면 잘 설명되어있긴하나.. 공식 홈페이지에서 차분히 영어공부하면서 해보고 싶은 분들은 아래 링크를 클릭해주세요. Set Up with React The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com [ 폰트어썸 설치.. 파해쳐버리기 ] 1. 터미널에 ya..

[React] yarn으로 프로젝트에 Router (리액트라우터) 설치 및 사용

Router란? 결국 페이지 이동을 의미한다. React에서 메뉴의 URL같은 링크 버튼을 클릭했을 때, 그 링크 경로에 맞는 컴포넌트 페이지들을 보여주고싶다. 보통 레거시 스타일로 작업할 땐, 경로 클릭시 새로운 페이지가 로딩이 된다. 그것은 너무나도 데이터 자원낭비! 그럴때는 사용하는것이 Router (리액트 라우터)이다. 라우터를 사용하면 새로운 페이지 로드?? No No!! 업데이트 되는 새로운 페이지만 path와 element로 연결하여 컴포넌트를 불러오는 신박한 기능이다. 아래 예시들은 이해를 돕기위해 개인 홈페이지를 만들면서 필요한 내용을 Router로 만들어보았다. 우선 내가 만들려는 페이지의.. 스케치(?) ---------------------------------------------..

프론트앤드가 알아야 할 용어들 :: 라이브러리 / 프레임워크 / API / UI / UX

핵심 용어 용어 설명 프레임 워크 (Framework) 프레임 제공, 사용자가 동시에 하나 이상의 프로그램 모듈을 사용 할 수 있도록 함. 필요한 기능이 이미 만들어져 있어 틀을 이용해서 컴퍼넌트를 만들어서 완성하는 것. 단점 틀에서 벗어나기 어렵다. 단 하나의 프레임 웍만 사용가능하고 다른거 / 라이브러리랑 충돌. 무겁게 느껴질 수 있다. 라이브러리 (Library) 자주 사용되는 필요한 부분을 프로그램으로 모아놓고 가져와서 사용할 수 있게 한 것. 충돌이 없다. API 미리 만들어놓은 라이브러리를 가져와서 쓰는 기능. UI (User Imterface) 사용자 위주의 인터페이스. UX (User Experience) 사용자 경험의 인터페이스. :: 자바스크립트랑 제이쿼리의 차이가 뭐냐고? 우연히 본 ..

반응형