기록하고 싶은 것들

오늘은 Autocomplete, ClickToEdit UI를 구현해 보는 시간을 가졌다. Autocomplete 코드 import { useState, useEffect } from "react"; import styled from "styled-components"; const deselectedOptions = [ "rustic", "antique", "vinyl", "vintage", "refurbished", "신품", "빈티지", "중고A급", "중고B급", "골동품", ]; /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = "0 4px 6px rgb(32 33 36 / 28%)"; const activeBorderRadius = "1rem 1rem 0 ..

onCreate 함수를 props로 받는 컴포넌트가 삭제시에도 리렌더링 되는 현상 발견 React.memo의 경우 얕은 복사로 리렌더링을 방지하므로, 함수를 인자를 받을 때는 useCallback()이라는 리액트 훅을 사용 useCallback https://ko.reactjs.org/docs/hooks-reference.html#usecallback App.js의 onCreate 함수를 useCallback으로 설정 한 뒤, 일기 삭제 후의 console을 관찰 -> 리렌더링 되지 않음 하지만, 글을 추가한다면 기존의 글들이 모두 사라지고 새롭게 쓴 글만 나온다. 왜 그런것일까? 그 이유는 useCallback의 dependency array를 공백으로 주었기 때문이다. 처음에 마운트 될때의 data는..

고차 컴포넌트 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 React.memo React.memo는 고차 컴포넌트(Higher Order Component) 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, React.memo를 호출하고 결과를 메모이징(Memoizing) 즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용 하지만, 자기 자신의 state 변경 시에는 리렌더링 React.memo 실습 CountView , TextView를 생성한 뒤, state가 변경될 때마다, 컴포넌트가 리렌더링 되는 빈도를 알아보았다. count를 증가하니, count를 사용하지도 않는 TextView에서도 렌더링이 발생하는 것을 볼 수 있었다. TextView에 React.m..

오늘은 React로 자주 사용하는 UI 컴포넌트의 기능 구현을 해보는 시간을 가졌다. Modal, Toggle, Tab, Tag 의 각각의 코드와 설명을 적어보려고 한다. Modal 코드 import { useState } from "react"; import styled from "styled-components"; export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. width: 100%; height: 100%; position: relative; `; export const ModalBackdrop = styled.div` // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니..

오늘은 CDD와 CDD개발도구, useRef에 대하여 공부하였다. CDD Component Driven Development를 뜻하며, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발, 재사용할 수 있는 UI 컴포넌트를 제작해 놓는 방식을 뜻한다. Styled-Component CSS의 일관적이지 않은 패턴 문제와 CSS를 컴포넌트 영역으로 불러오기 위한 CSS-in-JS의 대표적인 예시이며, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발 가능 Styled-Component의 기능 1. 컴포넌트 만들기 2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기 3. Props 활용하기 4. 전역 스타일 설정하기 Storybook Storybook은 UI 개발 즉, Compon..

storybook으로 실습을 진행하기 위해, 아래와 같이 React 프로젝트를 만들어준 뒤 storybook을 설치하여 실행해 주었다. npx create-react-app storybook-practice npx storybook init npm run storybook 실행을 하니 99%에서 멈추고, 99% done plugins webpack-hot-middlewarewebpack built preview 4451975daa4b1645ed13 in 447ms 오류가 발생하였다. 처음에는 단순히, 설치오류라고 생각해서 2-3회 정도 삭제하고 다시설치하였지만 똑같은 오류가 계속나타났다. 구글링을 통해서 동일한 오류가 나타난 사람들의 글을 보면서, npm의 버전도 높여보고 storybook을 upgrad..

오늘은 Figma를 통해서 UI를 제작해보는 실습을 하였다. Nav 우선 버튼을 컴포넌트로 제작한 뒤, hover상태일 때의 poperty를 생성해준다. 그 뒤 버튼 여러개를 인스턴스로 제작하여 이어 붙인뒤 이름을 수정하고, 하나의 컴포넌트로 만들어 Nav를 제작하였다. 모달 모달은 모달 버튼을 누르면 모달이 나오게 open overay을 주고, 모달닫기를 누르면 close overay를 주어 구현하였다. 토글 토글은 on 상태를 컴포넌트로 만든 뒤, off일 때의 property를 추가하여 제작하였다. 탭 구현한 UI중에 탭 창의 구현이 제일 까다로웠다. 어떤 곳에 어떤 interactions을 주어야 되는지 헷갈려서, 의도치 않게 탭 창이 중복되고, 버튼의 색만 변하는 실수를 겪었다. 최종적으로는 선..

오늘은 UI,UX에 대해서 공부를 하며 Figma의 사용법을 익히고, High Fidelity 프로토타입 예제를 만들어보았다. 초기에 주어진 와이어프레임은 아래와 같다 와이어프레임만 구성된 상황에서, 실제 서비스에서 구현되는 듯하게, UI를 구현하며 인터렉션도 구현해 보려고 한다. 헤더 생성 및 인터렉션 생성 우선 헤더를 실제 서비스에서 제공하는 것 처럼 제작한 뒤, 컴포넌트로 바꾸어준다. 그 후 동그란 프로필 창에 클릭하면, 프레임이 나타나게 인터렉션을 추가해준다. 이제 이 컴포넌트를 구현하고자 하는 위치에 (shirt+option)을 이용하여 인스턴스로 생성한 뒤, 메뉴 창을 누르면 오버레이를 켜고, 끌수 있는 인터렉션을 추가해준다. 좌우 스크롤 기능 우선 보여주고 싶은 사진들을 하나의 프레임으로 생..

오늘은 재귀 내용을 바탕으로 한, 과제를 풀었다. Tree UI를 구현한 과제였는데, 아래의 예시처럼 자식이 없다면 li태그에 이름을 넣어주고, 자식이 있다면 li 태그에 checkbox, span, ul 태그를 넣어주는 ui를 구현하는 것이 목표였다. 아래코드로, 위의 내용을 구현하였는데 동일한 구조로 나왔지만, 왜인지 모르게 과제를 통과할 수 없었다. // TODO: createTreeView 함수를 재귀(자기 자신을 계속 부르게 함)호출하여 테스트케이스를 통과하세요. // GOAL: 최종 결과가 resut.html와 같은 모습으로 나와야 합니다. const root = document.getElementById("root"); function createTreeView(menu, currentNod..

오늘은 재귀에 대하여 배웠고, 재귀를 이용한 문제들을 푸는 시간을 가졌다. 문제를 푸는 도중에 가장 단순한 실수로 시간을 허비한 문제가 있어서 기록으로 남겨보려 한다. 선물 상자에 대한 정보를 담은 배열과 문자열을 입력받아, 조건에 맞는 선물이 있는지 여부를 리턴하는 코드였다. function unpackGiftbox(giftBox, wish) { // TODO: 여기에 코드를 작성합니다. let n = giftBox.length if(n===0 || wish.length===0) return false //giftBox 순회 for(i=0;i