Javascript
Custom Component (Styled Components, Storybook)
Component Driven Development (CDD)Styled ComponentsStyled Components 설치Styled Components 문법컴포넌트 만들기컴포넌트 재활용Props 활용Props로 조건부 렌더링하기Props 값으로 렌더링하기전역 스타일 설정StorybookStorybook 설치Storybook 기본 사용법Component Driven Development (CDD)Component Driven Development는 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 부품단위로 만들어 나가는 개발방법을 의미한다. 페이지 전체에 적용될 수 있는 작은 요소들(버튼, 토글, 모달 등)을 사전에 먼저 컴포넌트화 하여 해당 요소가 필요할 때 재사용하고, 이런 컴포넌트..
useRef
DOM reference를 활용할 수 있는 useRef예제 1 : focus예제 2 : media playbackDOM reference를 활용할 수 있는 useRefReact만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있어 DOM 지식이 필요없다고 생각할 수 있지만, React로 모든 개발 요구 사항을 충족할 수는 없다. 아래처럼 DOM 엘리먼트의 주소값을 활용해야 하는 경우 특히 그렇다.focustext selectionmedia playback애니메이션 적용d3.js, greensock 등 DOM 기반 라이브러리 활용React는 이런 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다. 아래의 예시코드를 보자.const 주소값을_..
UI 디자인 패턴 구현
Modal기능 구현Tab기능 구현Tag기능 구현Toggle기능 구현Autocomplete기능 구현Modalimport { useState, useRef } from "react"; import styled from "styled-components"; export const Modal = () => { const [isOpen, setIsOpen] = useState(false); const refBackdrop = useRef(null); const openModalHandler = (event) => { event.preventDefault(); setIsOpen(!isOpen); }; return ( {isOpen ? "Opened!" : "Open Modal"} {isOpen ? ( { if (e..
JSON
JSON(JavaScript Object Notation)JSON의 탄생 배경JavaScript에서의 JSON 변환JSON의 기본 규칙JSON(JavaScript Object Notation)JSON은 서로 다른 프로그램 사이에서 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. JavaScript 뿐만 아니라 많은 언어에서 범용적으로 사용하는 유명한 포맷이기도 하다.JSON의 탄생 배경네트워크를 통해 데이터를 주고 받으려면 데이터를 보내는 수신자와 받는 송신자가 사용하는 프로그램이 같거나 문자열처럼 범용적으로 읽을 수 있어야 한다. 하지만 JavaScript에서 객체는 문자열로 변환하면 [object Object]라는 결과를 리턴하기 때문에 제대로 된 데이터 송수신이 불가능하다.이 문제를 해결하는 방..
재귀
재귀?재귀로 문제 해결하기1. 문제를 작게 쪼개기2. 반복하여 문제를 가장 작은 단위로 쪼개기3. 문제 해결하기재귀는 언제 사용할까?재귀의 활용재귀적으로 사고하기1. 재귀 함수의 입력값과 출력값 정의하기2. 문제를 쪼개고 경우의 수를 나누기3. 단순한 문제 해결하기4. 복잡한 문제 해결하기5. 코드 구현하기재귀?재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴.재귀의 사전적 정의는 원래의 자리로 되돌아오는 것을 의미하며, 위의 이미지처럼 원래의 상태로 계속해서 되돌아오는 것으로 해석할 수 있다. 코드로 작성하면 아래처럼 표현할 수 있다.function recursion () { console.log("This is"); console.log("recursion!"); recursion(); // 자기 ..