REACT

4월 한 달 동안 베타 프로젝트를 세팅하고 배포까지 마무리했다. ✏️ 프로젝트 요구사항웹 기반 서비스웹 UI 내에서 카메라를 통해 사진 촬영카카오 맵이나 구글맵이 아닌 자체 제작한 지도 이미지 위에 핀으로 위치를 표시특정 위치에 대한 리뷰 작성 및 좋아요 기능사용자 활동 분석을 위한 Mixpanel 연동🤔 웹에서 카메라 촬영이 된다고?처음에는 웹 UI안에서 카메라 촬영을 할 수 있는 건가 했다..? 찾아보니 가능했고 나는 react-webcam을 활용해서 구현했다.이 라이브러리는 내부적으로 태그를 사용해 카메라 화면을 실시간으로 보여준다.구체적으로는 브라우저가 제공하는 표준 Web API인 navigator.mediaDevices.getUserMedia()를 호출해서 사용자의 카메라 스트림(strea..

useStateconst [state, setState] = useState(initialState)useState는 배열을 반환하고 비구조화 할당을 통해 state, setState를 추출하여 사용한다. 그렇다면 useState는 어디서 오는 것일까? 함수형 컴포넌트는 렌더링이 발생하면 함수 자체가 다시 호출된다. 그렇다면 어떻게 함수가 다시 호출되었을 때 이전의 상태값을 가져올 수 있는 것인가?바로! useState는 closure로 구현되어 있기 때문에 이전의 상태값을 유지할 수 있다!그렇다면 closure란 무엇인가? 이에 대해 먼저 확인해 보자! closure란?mdn에 따르면 함수와 그 주변 상태(lexical environment, 함수가 정의될 때 주변의 스코프와 변수에 대한 정보를 포함하..

웹 프레임워크에서 주로 쓰이는 react와 vue를 비교해 보겠다그중에서도 데이터 바인딩과 데이터 흐름 방식에 대해 자세히 알아보자!UI 라이브러리와 프레임워크 각각 공식문서에 따르면 react는 라이브러리이고 vue는 프레임워크로 소개되고 있다.react는 라이브러리이기 때문에 리액트만으로 전역상태관리, 라우팅 등을 지원하지 않는다. 사용자가 별도의 라이브러리를 추가하여 사용해야 한다. vue는 프레임워크로 주어진 문법에 따라 사용해야 한다.  코드 형태react는 jsx를 사용하고 자바스크립트를 통해 UI로직과 DOM을 구현한다.vue는 에는 html, {{ childData }}   데이터 바인딩데이터 바인딩이란?화면상에 보이는 데이터와 브라우저 메모리에 있는 데이터를 서..

입점사 프로젝트를 진행하며 페이지네이션과 함께 많이 쓰인 것은 필터일 것이다! 각 페이지에서 데이터를 조회하기 위해 필터와 페이지네이션이 사용되었다. 각각의 페이지마다 필터 컴포넌트로 만들면서 그에 대한 로직이 반복되어 이를 개선하고 뒤로가기 또는 새로고침 시 필터값을 유지하는 방법을 알아보겠다! 필터 컴포넌트와 필터 관련 hook 구현하기 필터 컴포넌트 초기 필터값들과 검색, 초기화 시 동작되는 함수를 전달 받는다. 사용자가 입력한 필터값을 내부적으로 관리한다. src/components/filter/deliveryTemplateFilter.tsx interface DeliveryTemplateFilterProps { initialFilterValues: FormState onSubmit: (filte..

지난 글에 이어(Pagination comonent) 오늘은 Pagination component를 잘 관리하기 위한 custom hook에 대해서 소개하겠다 Pagination custom hook 반복되는 페이지 관련 상태관리 로직을 어떻게 처리하지? 입점사 프로젝트를 진행 중이었기 때문에 거의 모든 페이지에 페이지네이션이 들어갔다 이때마다 페이지 관련 상태 관리 로직이 생겨났고 🥲 하나 잘못된 로직이 있다면 다른 부분도 소스 검색해서 똑같이 수정해줘야 했다 비효율적인 일은 없애고자 페이지네이션 관련 로직을 한 곳에서 한 번에 관리하기 위해 custom hook으로 만들어주기로 결심했다 💪 전체 소스 src/hooks/usePageInfo.ts import { useRouter } from 'next..

리액트를 사용하기 위해 cdn을 추가해준다. 개발용 버전 React의 용량 및 성능 최적화된 배포용 버전 나의 경우에는 php 파일이라서 import React, { useState } from 'react';와 같은 방식으로 useState를 import 하는 게 불가능했다. (혹시 가능한 방법이 있다면 알려주세요..ㅎㅎ) 그래서 useState를 사용하기 위해서는 React.useState로 써줘야 한다. 바벨 추가하기 (php 파일에서 리액트 사용하는 법) 아래와 같이 잘 동작한다! https://ko.reactjs.org/docs/cdn-links.html

ButtonTab에서 클릭된 버튼에 따라 초기화, 모든 아이템 이동, 선택된 아이템만 이동하도록 구현했다. 초기화 클릭 시 availableOptions에 emojiMenus를 넣어주고 selectedOptions에 빈 배열을 넣어 초기화시켜줬다. 모든 아이템 이동을 클릭 시 spread 연산자를 통해 availableOptions와 selectedOptions 배열을 병합해 줬다. moveAll(state, action) { if (action.payload === 'left') { // 모든 아이템 왼쪽으로 이동 state.availableOptions = [ ...state.availableOptions, ...state.selectedOptions, ]; state.selectedOptions =..

addComment: (state, action) => { // 어느 게시글에 해당하는 댓글인지 찾기 위해 게시글의 id를 받아와 filter함수로 해당 게시글 찾기 const currentReview = state.data.filter( (review) => review.postNumber === action.payload.postNumber, ); // 해당 게시글에 새로운 댓글 추가 currentReview[0].comments.push(action.payload.newComment); }, addRecomment: (state, action) => { // 해당 게시글 찾기 const currentReview = state.data.filter( (review) => review.postNumbe..

새로운 타입 스크립트를 이용한 리액트 프로젝트를 시작했다. 타입 스크립트를 복습할 겸 기존의 JavaScript로 만들었던 프로젝트를 TypeScript로 변경해보기로 했다. TypeScript를 설치한다. yarn add typescript @types/node @types/react @types/react-dom @types/jest // 또는 npm install typescript @types/node @types/react @types/react-dom @types/jest 그다음 yarn install // 또는 npm install tsconfig.json파일이 생성된다. (혹은 생성되지 않았다면 tsconfig.json을 최상단에 추가해준다.) 아래 소스를 tsconfig.json에 추가해..

ESLint 자바스크립트 문법에서 에러를 찾아준다. Prettier 코드 스타일을 자동으로 fotmatting해준다. 이 두가지를 함께 사용하면 협업 시 코딩 스타일에 대한 규약을 지킬 수 있다! React에서 ESLint와 Prettier 설정 React 프로젝트 생성 npx create-react-app example CRA로 생성된 프로젝트는 안에 ESLint가 자동으로 들어간다. 추가로 ESLint를 설치하면 에러가 나니 주의! Prettier 설치 npm i prettier -D -E npm i eslint-plugin-prettier eslint-config-prettier -D Prettier와 ESLint를 함께 쓰기 위해 설치해준다. eslint-plugin-prettier eslint-..