Phot_o_matic Programming

우리는 종종 새로운 서비스를 처음 접하거나 기존 서비스에 신규 기능이 추가되는 경우에 튜토리얼을 진행해본 경험이 있을 것이다. 사용자는 튜토리얼을 통하여 특정 위치의, 특정 요소가 가지는 역할에 대해서 차례대로 하나씩 인지하게 된다. 위의 gif는 React의 Portal 기능을 이용하여 만든 튜토리얼 컴포넌트의 진행 과정이다. Portal은 특정 DOM 엘리먼트의 자식으로써 엘리먼트, 문자열 또는 fragment 등 종류에 상관없이 React 자식이기만 하면 렌더링 할 수 있게 해준다. 때문에 Dialog나 Tooltip과 같이 시각적으로 자식 엘리먼트를 "튀어보이게" 하려는 경우에 많이 사용한다. 실제로 예시 이미지에서도 현재 설명중인 엘리먼트는 시각적으로 "튀어"보이고 있다. Portals – Re..

Programming/React 2022. 10. 26. 18:02

⏰Effective Component 제품의 성장 과정에 있어서 잦은 변경이라는 것은, 더 나아지기 위한 성장통과 마찬가지이다. 놓치고 있었던 고객의 니즈를 발견한 것이라고도 할 수 있다. 그렇다면 이런 변경에 대해서 유연하고 효율적으로 대응하려면 어떻게 컴포넌트를 설계해야할까? 목차 Headless 기반의 추상화 변하는 것 vs 상대적으로 변하지 않는 것 [한 가지 역할만 하기] 또는 한 가지 역할만 하는 컴포넌트의 조합으로 구성하기 도메인 분리하기 도메인을 포함하는 컴포넌트와 그렇지 않은 컴포넌트 분리하기 1. 💀Headless UI 기반의 추상화하기 컴포넌트는 크게 세 가지 영역으로 구분된다. 데이터 UI : 어떻게 데이터를 보여줄지? 사용자 상호작용 : 어떻게 상호작용할지? 예를 들어 달력 기능을..

Programming/React 2022. 6. 16. 10:43

요즘 한창 유행인 포켓몬 빵. 없어서 못 산다는 포켓몬 빵... 도대체 정말 팔기는 파는 건지 궁금하다. 구경이라도 해야 빵을 사고, 옛날 추억 회상 겸 띠부씰도 모을텐데... 너무 답답한 마음에 그냥 내 개인 띠부씰 모음집을 앱으로 만들기로 했다. (가질 수 없다면 부셔버리겠...) 사실 앱을 만들어보는 건 처음이라, 비교적 익숙한 React 기반으로 가능한 방법을 사용했다. React Native 자체도 처음이거니와, 한국판 포켓몬 워들은 아직까지 본 적이 없어서 어떻게 구현해야 할 지부터 기획해야했다. 나는 원조 포켓몬 게임을 아주 재밌게 90년대생이므로, 포켓몬 골드/실버 이후로는 취급을 하지 않는다. 하지만 역시 제일은 원조 151마리라하였다. 그래서 이번 워들 단어사전은 151마리의 포켓몬으로..

Programming/React 2022. 4. 15. 15:09

react에서 비동기를 다루는 방법은 다양하다. javascript 언어니까 당연히 Promise, async & await으로 처리가 가능하다. redux를 사용하고 있다면, redux saga, thunk 등 다양한 미들웨어가 제공된다. 하지만 이런 것들로 서버의 상태를 관리하기란 여간 어려운 일이 아니다. 아래의 이유들로 앱과 서버 간의 관계 및 상태를 말할 수 있을 것이다. 원격에 위치한 곳에 저장. 앱이 소유하거나 제어하지 않음. 데이터 가져오기 및 업데이트를 위해서는 비동기 API가 필요. 다른 사람들과 함께 사용해서, 나도 모르는 순간에 업데이트 될 수 있음. 앱에서 사용하는 데이터가 OUTDATED 상태가 될 가능성 가짐. 기본적인 React Query 형태 함수형 컴포넌트 내에서 Hook..

Programming/React 2021. 5. 24. 23:13

styled-components 모듈 설치 npm install styled-componentsstyled-components란? 컴포넌트 마다 css, Sass 파일들을 각자 만들어서 관리하는 것이 아니라, 컴포넌트 파일 내에서 style을 지정하고 적용 가능하게 하는 라이브러리이다. 리액트의 CSS-in_JS 관련 라이브러리 중에서 가장 인기있는 라이브러리이기도 하다. 예시 코드를 보면서 이해해본다. 먼저 style 관련 코드를 작성해보았다. // style 관련 코드 import React from 'react'; import styled, {css} from 'styled-components'; const Box = styled.div` /* props로 넣어준 값을 ..

Programming/React 2019. 8. 30. 18:41

react client를 다루면서 , 항상 눈에 밟히던 것이 있었다. "service worker.unregister()" 도대체 누구냐 넌 service worker 브라우저가 백그라운드에서 실행하는 스크립트 웹 페이지랑은 별개로 동작 페이지나 사용자 상호작용이 필요없는 기능에 대한 문호 개방 (푸시 알림, 백그라운드 동기화 등) 왜 사용해? => 해당 API가 오프라인 환경을 완벽하게 통제할 수 있는 권한을 개발자에게 부여하고, 그 환경을 지원할 수 있도록 해 줘서! 주의할 점은 없어? 표준이 아니다 https가 적용되어 있어야 한다 지원하는 브라우저 확인 필요 생명주기가 있다 생명주기(Life Cycle)

Programming/React 2019. 7. 11. 11:11

React는 Component 내부에서 state라고 하는 속성값을 가짐으로써, rerender를 발생시키는 기준점으로 삼을 수 있다. React의 Lifecycle을 생각해보았을 때, 어떤 state 값의 변화가 있을 경우, 새롭게 render를 하였던 것을 떠올릴 수 있다. 관리하는 state의 수가 몇 가지 안 되고, component의 개수, 깊이가 적은 경우에는 props로 state 변경 및 갱신된 값을 넘겨주는 것이 별 것 아닌 것처럼 느껴질 수 있다. 하지만, 조금만 구조가 복잡해지면 이런 관리가 몇 배는 복잡해지는 것을 상상할 수 있을 것이다. 아래의 그림을 보면 redux라는 것이 있을 경우와 없을 경우를 비교할 수 있다. redux를 통하여 state 관리가 얼마나 간편하고 직관적으로..

Programming/React 2019. 7. 3. 14:32

**1. React data flow : state 관리와 rerendering **2. 설계의 정도 (어떻게? 얼만큼 하고 시작할 것인가?) **3. Data 구조설계 **4. Component 설계 컴포넌트를 어떻게 분리할 것인가? 재사용가능한 컴포넌트로 만드는 것이 이득 컴포넌트 내에서 기능별 함수를 어떻게 구현할 것인가? 재사용가능한 함수로 구성 컴포넌트 작명 **5. commit 잦은 commit은, 문제를 되돌릴 수 있는 시점의 타임 스탬프로 사용할 수 있다 git commit 까지만 치면, vim 화면으로 이동된다 맨 위 제목 같이 쓴 뒤, 엔터 두번 스페이스 한번 - 한번 하고 세부 목록들을 쓸 수 있다.

Programming/React 2019. 6. 18. 10:54