codeStates front-end/React
-
[React] custom component/ Styled-ComponentcodeStates front-end/React 2023. 2. 20. 16:43
HTML 삽입 미리보기할 수 없는 소스 📌 custom component 📍 Component-Driven Development(CDD) 부품 단위로 UI 컴포넌트를 만들어나가는 개발 🔗 실제로 CDD 방법을 활용하여 UI를 구축하는 사이트 - 링크1 : BBC - 링크2 : UN Storybook uikit.wfp.org 📍 구조적인 CSS 프로젝트 규모나 복잡도, 다양한 디바이스들의 등장으로 일괄된 CSS패턴이 없다는 것이 문제점으로 떠올라 이를 해결하기 위해 CSS 전처리기(CSS Preprocessor)라는 개념이 등장 이는 CSS가 구조적으로 작성될 수 있게 도움을 주는 도구이다 🔗 SASS(Syntactically Awesome Style Sheets) CSS를 확장해 주는 스크립팅 언어 특정..
-
[React] UX 디자인codeStates front-end/React 2023. 2. 15. 22:20
HTML 삽입 미리보기할 수 없는 소스 📍 UX 디자인 1. 유용성(Useful) : 사용 가능한가? 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소입니다. 계산기라면 계산을 틀리지 않고 맞는 결괏값이 나오는지, 계산기 본연에 목적에 맞는 기능을 하는지가 중요하겠죠. 여기에 꼭 목적에 맞지 않더라도, 비실용적이라도 추가적인 기능을 제공하는지도 관련이 있습니다. 계산기의 디자인은 계산기의 기능 자체에는 영향을 주지 않지만, 심미적 기능을 제공한다고 판단합니다. 2. 사용성(Usable) : 사용하기 쉬운가? 사용성은 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소입니다. 기능이 아무리 잘 작동하더라도 사용자가 사용하기 어렵다면 좋은 UX를 제..
-
[React] UI 디자인codeStates front-end/React 2023. 2. 15. 22:12
HTML 삽입 미리보기할 수 없는 소스 📌 UI 디자인 📍 UI 디자인 패턴 반복되는 문제점에 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태를 만든 패턴 쉽게 말해 자주 사용되는 UI 컴포넌트 🔗 자주 쓰이는 UI 디자인 패턴 모달 (Modal) 모들 윈도(Modal Window)는 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말한다. 모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 뜻한다. 닫기 버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이다. 모달을 닫기 전에는 기존 화면고 상호작용 X 꼭 보여주고 싶은 내용이 있다면 모달을 사용하는 것이 좋다. //click 이라는 버튼을 눌러 onclick이 발생할..
-
[React] UI/UXcodeStates front-end/React 2023. 2. 15. 21:35
📌 UI/UX 📍 UI(User Interface) 사용자 인터페이스 사람들이 컴퓨터와 상호 작용하는 시스템을 의미 화면상의 그래픽 요소 외에도, 키보드, 마우스, 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템 GUI(Graphical User Interface, 그래픽 사용자 인터페이스) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경 운영체제(window, mac, os) 화면, 애플리케이션 화면 프론트엔드 개발에게 -> UI 즉 GUI 📍 UX(User Experience) 사용자 경험 사용자가 어떤 시스템,제품,서비스를 직/간접적으로 이용하면서 느끼고 생각하는 총체적 경험 📍 UI와 UX의 관계 UX는 UI를 포함한다. UI가 항상 좋은 UX를 보장하지 않는다. 나쁜 UI는 나..
-
[React] 실습 - StatesAirline ClientcodeStates front-end/React 2023. 2. 4. 16:52
📌 StatesAirline Client 📖 학습 목표 Part - 1 [React] 데이터 흐름 📌리액트 데이터 흐름 📍단방향 데이터 흐름( one-way data flow ) React는 페이지 단위가 x -> 컴포넌트 단위 컴포넌트를 만들고 -> 페이지를 조립 (상향식(bottom-up)으로 컴포넌트 구조를 짠다) 컴포넌 hwantech.tistory.com Part - 2 [React] Effect Hook 📌Effect Hook React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정 🔗Side Effect (부수 효과) React에서 컴포넌틑 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 hwantech.tistory.com Part 1 - Test..
-
[React] Effect HookcodeStates front-end/React 2023. 2. 2. 17:46
📌Effect Hook React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정 🔗Side Effect (부수 효과) React에서 컴포넌틑 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 한다. ------------------------------- 💡 fetch가 뭐에요? 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일 // fetch() 기본 문법 let promise = fetch(url, [options]) //fetch 함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나 //fetch API는 3개의 interfeace를 도입하고 있는데 Headers, Request, Respons..
-
[React] 데이터 흐름codeStates front-end/React 2023. 2. 2. 16:23
📌리액트 데이터 흐름 📍단방향 데이터 흐름( one-way data flow ) React는 페이지 단위가 x -> 컴포넌트 단위 컴포넌트를 만들고 -> 페이지를 조립 (상향식(bottom-up)으로 컴포넌트 구조를 짠다) 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달인자 혹은 속성처럼 전달 받음 데이터를 전달하는 주체 : 부모 컴포넌트 -? 데이터 흐름이 하향식(top-down) 이를 단방향 데이터 흐름이라고 한다 💡 props와 state의 설명 이해하기 [React] State & Props & 렌더링 정의 📌리액트 개념 📍State & Props State : 살면서 변할 수 있는 값(상태) 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 Props : 성별이나 이름처..
-
[React] 실습 - React Twittler State & PropscodeStates front-end/React 2023. 1. 30. 20:30
📌 react twittler SPA 📖 학습 목표 React Router 설치 React Router를 npm으로 설치해야 합니다. 상세 컴포넌트 구현하기 원하는 레이아웃에 끼워 넣을 수 있게 상세 컴포넌트를 먼저 구현합니다. Sidebar 컴포넌트 (Sidebar.js) Sidebar 컴포넌트는 이미 구현되어 있습니다. Sidebar.js 파일에서 직접 확인하세요. Footer 컴포넌트 (Footer.js) Footer 컴포넌트의 후손 엘리먼트로 시멘틱 엘리먼트 가 있어야 합니다. Tweet 컴포넌트 (Tweet.js) 각 트윗에 꼭 필요한 정보를 담고 있어야 합니다. (프로필 사진, 유저 이름, 트윗 생성 일자, 트윗 메시지) 프로필 사진을 넣기 위해 엘리먼트를 작성하고, src 속성에 전달받은 p..