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

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

이제까지 만들어놓은 GraphQL API를 사용하는 Apollo 클라이언를 만들어본다. react를 사용하도록 한다. 프로젝트를 시작하기에 앞서,필요한 모듈을 설치해준다. yarn add react-router-dom apollo-boost react-apollo graphql-tag graphql react-helmㄷt --save Apollo 이 중 Apollo Boost는 GraphQL 클라이언트를 가지기 위한 모든 것을 세팅해준다. GraphQL-Apollo 클라이언트의 cli 정도로 생각해주자. redux처럼 Apollo도 Provider를 가지고 있다. (container, present 등) client 생성/선언 Apollo Boost를 이용하여 client를 쉽게 형성하는 파일의 코드를 ..

Programming/GraphQL 2019. 10. 2. 21:06

React tool chain, create-react-app 이번 프로젝트의 클라이언트 구성에서 React.js를 사용함에 있어, 많은 툴체인 중 하나인 create-react-app를 적용하였다. React를 배우고 있는 중이거나, 신규 싱글 페이지 앱을 만들 때 사용하라고 공식 홈페이지에서도 추천하고 있다. 다른 성격의 프로젝트를 진행하거나, 다른 툴체인이 궁금하다면 아래의 링크를 참고하면 좋겠다. 새로운 React 앱 만들기 프로젝트 생성과 라이브러리 설치 cretate-react-app npm install react-router-dom (브라우저에서 사용되는 리액트 라우터) npm install cross-env --dev (프로젝트에서 NODE_PATH를 사용해 절대경로로써 파일을 불러오기 ..

Programming/Hello, stranger 2019. 7. 12. 21:47

Hello, stranger Google Translate API를 통하여, 실시간으로 번역이 가능한 글로벌 채팅 앱 서비스를 기획하여 프로젝트를 진행하였다. 서비스를 이루는 구조와 스킬의 대략적인 도식은 아래와 같다. 서비스 전체 구조 목적 글로벌 채팅 앱은 많지만, 타국간 채팅에서 언어의 장벽은 외부 번역기를 거치는 불편한 과정이 있어야만 원활한 소통이 가능하였다. 이런 불편함을 해소하고, 스스로가 관심있어 하는 국가 거주민 혹은 언어 사용자와의 대화를 편리하게 하는 것에 목적이 있다. 구현할 기능 - 국가 및 언어별 채팅방 운영 - 원하는 언어로의 번역 - 채팅 기록 확인 - 프로필 사용할 기술 1. 서버 nodejs express socket.io AWS EC2 AWS EC2 상에서 배포가 되도록..

Programming/Hello, stranger 2019. 7. 8. 20:01

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