FE 썸네일형 리스트형 FE/React Redux로 간단한 Count 기능 구현하기 Redux를 사용하기 위해서는 redux와 react-redux를 설치해야한다. 설치를 하고 나면, DEPENDENCIES redux, react-redux가 설치되어 있는 것을 확인할 수 있다. . . . "dependencies": { "@types/react": "^16.8 || ^17.0 || ^18.0", "@types/react-dom": "^16.8 || ^17.0 || ^18.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-native": ">=0.59", "react-redux": "^8.0.2", "redux": "^4" }, . . . index.js import React from 'react'; import { createRoot .. FE/React 상태 관리 라이브러리 Redux [프론트엔드 개발에서 상태 관리를 보다 더 효율적으로 할 수 있는 방법] * 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리 Redux - 컴포넌트와 상태를 분리하는 패턴 - Redux에서 사용하는 Action, Dispatcher, Reducer 그리고 Store의 의미와 특징 - Redux의 3가지 원칙 React 애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다. 그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. 그러나 상태 변경 로직을 컴.. FE/React 쇼핑몰 애플리케이션에서 Hooks를 이용한 상태 관리 * React Hooks를 사용한 상태 관리 방법 - 컴포넌트끼리 상태 주고받기 결과 화면 파일(컴포넌트) 구조 루트 컴포넌트 : 내비게이션 바 "상품리스트" , "장바구니" 버튼 또는 : 물건 목록이 나열된 쇼핑몰 메인 화면 또는 장바구니 화면 (Pages) : map으로 렌더링 : 각 물건의 이름, 가격, '장바구니 담기' 버튼 등 : map으로 렌더링 : 각 물건의 이름, 가격, '장바구니에서 삭제하기' 버튼 등 : 주문 합계, 총 아이템 개수 등 상태 상품 목록 (items) : 개별 상품에 대한 정보를 담은 객체 (배열의 형태) { "id": 1, "name": "노른자 분리기", "img": "../images/egg.png", "price": 9900 } 장바구니 목록(cartItems) :.. FE/React Props Drilling이란? Props Drilling이란? [Props Drilling] 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상이다. 위 그림처럼 컴포넌트 A의 state를 컴포넌트 D로 전달하기 위해선 사이에 있는 컴포넌트 B, C를 거쳐야 한다. Props Drilling의 문제점 Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않는다. 하지만 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생한다. 코드의 가독성이 매우 나빠지게 된다. 데이터의 출처를 쉽게 파악할 수 없어서 코드의 유지보수 또한.. FE/React [React] 전역 상태의 필요성 * (프론트엔드에서의) 상태 관리의 개념과 필요성 * 로컬 상태와 전역 상태의 차이점 * 전역 상태의 필요성 * 상태 관리 라이브러리의 필요성 상태 관리 React는 상태 관리를 위한 라이브러리가 아니다. 그러나 상태 관리의 주요 원칙을 배우고 이를 따라간다면, 컴포넌트 간 서로 느슨하게 결합된(loose coupled), 구조적으로 아름다운 코드를 작성할 수 있다. 상태는 변하는 데이터이다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터"이다. 여기에 쇼핑몰에서 흔하게 볼 수 있는 장바구니 화면이 있습니다. 여기에는 다양한 상태가 존재한다. "장바구니에 담기"와 같은 버튼을 눌러, 해당 물품을 장바구니에 추가할 수 있다. 동적인 데이터이므로 이것은 상태이다. 상단에 [일반구매/정기배송.. FE/React Styled Components로 ClickToEdit 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 ClickToEdit 커스텀 컴포넌트를 구현 ClickToEdit Component 완성 예시 ClickToEdit 컴포넌트는 input 창을 클릭하면 수정이 가능하고, input 창이 아닌 다른 곳을 클릭하면 수정한 내용이 반영되는 기능을 가진 컴포넌트이다. 필요한 컴포넌트 InputView (div) : Tab 상위바에서 메뉴를 선택할 수 있는 구역 -- label : '이름', '나이' l -----------------> clickToEdit 컴포넌트 (부모) MyInput : 실제로 이름, 나이 값을 입력할 수 있는 박스 ------ InputBox ---.. FE/React Styled Components로 Tag 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Tag 커스텀 컴포넌트를 구현 Tag Component 완성 예시 Tag UI 컴포넌트는 레이블 지정을 통해 구성이나 분류에 도움이 되는 키워드 집합을 만들 때 사용된다. 필요한 컴포넌트 TagInput (div) : Tag 최상위 박스 ul id "tags" li className "tag" : 각각의 tag 박스 (나열) span className "tag-title" span className "tag-close-icon" input className "tag-input" : tag를 입력하여 추가하는 구역 state Tag 컴포넌트는 아래와 같은 state.. FE/React Styled Components로 Tab 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Tab 커스텀 컴포넌트를 구현 Tab Component 완성 예시 Tab UI 컴포넌트는 동일한 메뉴 라인에서 뷰를 전환할 때 사용한다. 필요한 컴포넌트 TabMenu (ul) : Tab 상위바에서 메뉴를 선택할 수 있는 구역 li ClassName "submenu focused" 또는 "submenu" (조건부 스타일링) Desc (div) : 선택한 Tab에 따라 넣어둔 텍스트를 담는 컴포넌트 state Tab 컴포넌트는 아래와 같은 state가 존재한다. currentTab state : 현재 tab의 index를 확인 토글 버튼 제어를 위한 핸들러 함수 s.. FE/React Styled Components로 Toggle 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Toggle 커스텀 컴포넌트를 구현 Toggle Component 완성 예시 Toggle UI 컴포넌트는 두 가지 상태만을 가지고 있는 스위치이다. 예를 들어, 한번 누르면 불이 들어오고 한번 누르면 불이 나가는 스위치를 Toggle Switch라고 할 수 있다. 필요한 컴포넌트 ToggleContainer (div) : Toggle을 구현하는데 필요한 컴포넌트를 감싸주는 컨테이너 div ClassName "toggle-container" : Toggle 바깥쪽 테두리 div ClassName "toggle-circle" : Toggle 안쪽 원 도형 (Toggle.. FE/React Styled Components로 Modal 만들기 * React, Styled-Component, Storybook을 활용한 UI 컴포넌트 개발 * Styled Components를 활용해 Modal 커스텀 컴포넌트를 구현 * Storybook을 사용 한 컴포넌트 관리 Modal Component 완성 예시 Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다. 팝업 창: 현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것 (브라우저에서 이 창을 열고 닫기 제어가 가능) 모달 창: 현재 열려있는 브라우저 페이지에 레이어를 까는 것 (기존의 페이지와 부모-자식의 관계로 브라우저의 새 창 제어 옵션에 전혀 영향을 받지 않는다.) -> 팝업 창은 기존의 웹 페이지와 분리된 상태에서 작.. FE/JavaScript [JS] 하노이의 탑 * 레퍼런스 Khan Academy - 하노이의 탑 하노이의 탑이란? 하노이의 탑(Tower of Hanoi) 문제는 세 개의 기둥과 이 기둥에 꽂을 수 있는 크기가 다양한 원반들이 주어지는데, 다음의 조건을 만족시키면서, 한 기둥에 꽂힌 원반들을 그대로 다른 기둥으로 옮겨서 쌓는 것이 목적이다. 한 번에 한개의 원반만 옮길 수 있다. 이동하는 원반은 세 개의 기둥 중 하나에 반드시 꽂혀야 한다. 가장 위에 있는 원반만 이동할 수 있다. 큰 원반이 작은 원반 위에 있어서는 안 된다. (A) 기둥에 있는 N개의 원반을 (C) 기둥에 옮기기 위하여, 실행되어야 할 최소 원반 이동 과정을 프로그래밍한다면? 원판이 n개 일 때, 최소 이동 횟수 공식은 (2**n) - 1(번)이다. 예를 들어 한 번의 실수 없이.. FE/React React Custom Component 개요 UI 컴포넌트의 필요성 UI를 개발해 본 개발자라면 UI 개발은 다른 분야의 개발보다 복잡하고 까다롭다는 사실을 알 것이다. UI 개발은 도대체 왜 까다로운 걸까? 프로젝트의 상황에서 절대적으로 많은 수의 화면과 복잡한 화면이 문제이다. 웹사이트의 모든 화면들을 분석해 보면 몇 가지 패턴들을 발견할 수 있다. 즉, 화면이 아무리 복잡하고 다양해도 기본적인 레이아웃 구성 내부에서 사용되는 UI들은 반복적으로 재사용되는 경우가 많다. 그렇다면 개발자들은 반복되는 UI들을 어떻게 재사용하고 있었을까? 누군가 먼저 코드를 설계해 놓으면 그 코드를 비슷하게 쓰거나, 해당 UI가 어느 화면에 개발되어 있는지 알 수 없을 땐 새로 개발하기도 했다. 이런 크고 작은 불편함이 쌓여, 자연스럽게 UI 컴포넌트 개발에 대한.. FE/React DOM reference를 잘 활용할 수 있는 useRef React 애플리케이션을 만들 때 DOM을 직접 조작하는 것은 지양해야 하지만, 개발을 하다 보면 DOM을 직접 건드려야 하는 상황이 발생하기도 한다. 아래와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우 특히 그렇다. focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 기반 라이브러리 활용 이럴 때 사용할 수 있는 것이 바로 useRef라는 Hook 함수이다. React는 이런 예외적인 상황에서 useRef 로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다. 아래 코드처럼 작성하면 주소값을 활용할 수 있다. input focus const 주소값을_담는_그릇 = useRef(참조자료형) // 이제 .. FE/UI & UX [UI] 컴포넌트 UI 개발을 위한 Storybook Component Driven Development 가 트렌드로 자리 잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer (컴포넌트 탐색기) 가 등장했다. Component Explorer에는 많은 UI 개발 도구가 다양하게 있는데 그중 하나가 Storybook이다. Storybook이란? Storybook은 UI 개발 즉, Component Driven Development를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해 주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발 스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다. Storybook은 재사용성을 확대.. (비) bubbleSort 보호되어 있는 글입니다. (비) 피보나치 보호되어 있는 글입니다. FE/UI & UX [UI/UX] 와이어프레임 & 프로토타입 * 와이어프레임과 프로토타입의 특징과 차이점 * 와이어프레임과 프로토타입을 피델리티에 따라서 구분하기 와이어프레임과 프로토타입은 제품 개발 이전에 화면 구조를 설계하기 위해 작성하는 것이라는 공통점을 가지며, 두 개념을 혼동해서 사용하는 경우도 종종 있다. 하지만 둘은 작성 시점도 작성 목적도 완전히 다르다. 와이어프레임(wireframe) 와이어프레임은 선(wire)으로 틀(frame)을 잡는다는 뜻으로, 제품 기획 단계에서 페이지를 어떻게 구성할 것인지 구조를 잡기 위한 목적으로 만든다. 피델리티(fidelity) 와이어프레임을 표현할때의 품질 수준을 전문용어로 피델리티(fidelity)로 표현하며 3가지 레벨로 나뉜다. 1. Low Fidelity Wireframe (Lo-Fi Wireframe) .. FE/UI & UX [UI] UI 디자인 패턴 / UI 레이아웃 구성법 (컬럼 그리드 시스템) * UI 디자인 패턴 : 화면에 배치할 수 있는 자주 쓰이는 컴포넌트 * UI 레이아웃 구성법 : 컴포넌트들을 화면에 어떻게 배치할 것인지를 정하는 방법론 - 컬럼 그리드 시스템 UI 디자인 패턴 UI 디자인 패턴은 프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든 패턴을 말한다. 쉽게 말하면 자주 사용되는 UI 컴포넌트라고 할 수 있다. 재귀로 구현해 보았던 Tree UI도 자주 쓰이는 UI 패턴 중에 하나이다. 자주 쓰이는 UI 디자인 패턴을 익혀두면 UI를 디자인하기 보다 쉬워지고, 프론트엔드 개발자, 디자이너, PM 과의 의사소통도 원활해져 협업 효율도 높아진다. 다음은 자주 쓰이는 UI 디자인 패턴의 예시이다. 모달 (Mo.. FE/UI & UX [UX] 피터 모빌(Peter Morville)의 UX 7요소 / User Flow 피터 모빌(Peter Morville)의 UX 7요소를 만드는 요소 User flow의 개념과 활용법 UX를 디자인한다는 것은 사용자들을 이해하고 배려하여 최상의 경험을 제공하고자 노력한다는 뜻이다. 단순히 기능하는 페이지를 만드는 것을 넘어서 더 완성도 있는 서비스를 만들 수 있게 된다. 좋은 UX를 만드는 요소 " 좋은 UX를 만들려면 무엇을 고려해야 할까? " 피터 모빌의 벌집 모형 피터 모빌(Peter Morville)의 벌집 모형은 이 질문에 대한 답을 준다. 이 모형에서 제시한 UX의 7가지 요소를 알아보자. 1. 유용성(Useful) : 사용 가능한가? 유용성은 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소이다. 계산기라면 계산을 틀리지 않고 맞는 결괏값이 .. FE/UI & UX [UI/UX] UI와 UX / 제이콥 닐슨의 10가지 사용성 평가 기준 UI와 UX 두 키워드 모두 사용자에게 보이는 화면을 구성하는 방법, 사용자가 사용하게 될 기능을 구현하는 방식과 관련이 있다는 점에서 프론트엔드 개발과 밀접한 관련이 있다. UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호 작용하는 시스템을 의미한다. 보통 UI라고 하면 떠오르는 화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호 작용하기 위한 시스템이므로 UI라고 볼 수 있다. 예시: 휴대폰 휴대폰을 예시로 들어보면, 스마트폰 이전의 피처폰들은 디스플레이가 있긴 했지만, 터치로 상호 작용할 순 없었다. 물론 화면 터치가 가능한 모델도 있었지만, 그 수가 많지 않았다. 그래서 숫자 버튼, 방향 버튼 등 다양한 종류의 물리적 UI가 있는 형태.. ⬆︎ 이전 1 2 3 4 5 6 ··· 9 다음
