본문 바로가기

ALL

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가 있는 형태..
FE/JavaScript [JS] 재귀를 이용하여 Tree UI 구현하기 Tree UI Tree UI는 화면을 구성할 때 재귀를 사용하는 가장 대표적인 예시이다. 만들고자 하는 간단한 HTML DOM 구조 (예: 음료 -> 콜드브루 -> 나이트로 콜드브루) 음료 콜드브루 나이트로 콜드 브루 돌체 콜드 브루 제주 비자림 콜드 브루 콜드 브루 메뉴 데이터 (길어서 생략) 더보기 const menu = [ { type: 'group', name: '음료', children: [ { type: 'group', name: '콜드 브루', children: [ { type: 'item', name: '나이트로 콜드 브루' }, { type: 'item', name: '돌체 콜드 브루' }, { type: 'item', name: '제주 비자림 콜드 브루' }, { type: 'item'..
FE/JavaScript [JS] JSON.stringify 재귀를 이용하여 직접 구현하기 * 재귀를 이용해 메서드 JSON.stringify를 함수의 형태로 직접 구현하기 JSON.stringify는 객체를 JSON으로 변환하는 메서드이다. 이 메서드를 재귀를 사용하여 함수의 형태로 직접 구현해본다. 자바스크립트 객체와 JSON은 대표적인 트리 구조로 되어 있다. 즉, 전형적인 재귀 탐색이 가능한 구조(객체의 값으로 객체를 포함하는 구조)이기 때문에 재귀 사용을 적극 권장한다. JSON.stringify 아래의 JSON.stringify와 같은 결과를 구현하는 함수를 만들어본다. JSON.stringify 규칙 [Browser에 존재하는 JSON.stringfy 함수 === 구현할 stringifyJSON] JSON.stringfy 함수는 input 값을 JSON 형식으로 변환한다. 1. ..
FE/JavaScript [JS] JSON 개요 (JavaScript Object Notation) JSON의 탄생 배경 JSON은 JavaScript Object Notation의 줄임말이다. (자바스크립트 객체 표기법) 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 네트워크를 통해, 어떤 객체 내용을 다른 프로그램에 전송한다고 가정해보자. 이 객체 내용을 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메시지라 한다면, 다음 객체를 어떻게 전송할 수 있을까? const message = { sender: "김코딩", receiver: "박해커", message: "해커야 오늘 저녁 같이 먹을래?", createdAt: "2023-01-12 10:10:10" } 메시지 객체가 전송할 수 있게 하려면, 메시지를 보내는 발신자와 메시지를 받는 수신자가 같은 프로그램을 사용하거나, 문자열처럼 범용적..
FE/코딩테스트 [JS] 재귀 - 상, 중 상 1. giftBox function unpackGiftbox(giftBox, wish) { // recursive case for (let i = 0; i < giftBox.length; i++) { if (giftBox[i] === wish) { return true; } else if (Array.isArray(giftBox[i])) { // ** 배열 속 배열인 경우 const result = unpackGiftbox(giftBox[i], wish); // ** 재귀 if (result === true) { return true; } } } // base case return false; } // 📌 다른 풀이 방법 1 (추천) function unpackGiftbox(giftBox, wish)..
FE/코딩테스트 [JS] 재귀 - 하 하 1. sumTo 먼저 base case, recursive case를 생각하자. 2. factorial 3. fibonacci 메모리제이션은 금지된다. 그림으로 살펴보면 금방 이해가 된다. // 🟣 반복문일 때 function fibonacci(num) { // 피보나치를 한 마디로? // 다음 수 = 맨 끝에 있는 수 + 그 앞에 있는 수 // 1. 피보나치 수열을 넣어줄 배열을 만든다. let fib = []; // 2. 반복문을 돌린다. -> 0부터 num까지 반복 // 0과 1은 피보나치수열의 기본세팅 // i가 0일 때, 1일 때는 바로 배열에 push한다. for (let i = 0; i fib[2] = fib[1] + fib[0] // 다음 반복 // i = 3, fib = [0, 1, ..
⬆︎

728x90