FrontEnd/React

여담에서 전체적으로 alert();을 활용하다가 간혹가다가 종종 모바일에서 알럿이 안떠서 오류처럼 화면이 멈춰버리는 이슈가 발생되어 alert을 인라인 에러메세지, 토스트메세지, 다이얼로그 등으로 변경하는 작업을 거쳤다.이번에는 다이얼로그를 공통 컴포넌트로 만들어 활용하는 방법에 대해 기록해두려 한다. 1. 다이얼로그 컴포넌트 만들기// Dialog.jsimport Button from "@material-ui/core/Button";import Dialog from "@material-ui/core/Dialog";import DialogActions from "@material-ui/core/DialogActions";import DialogTitle from "@material-ui/core/Dial..

1. action 파일// actions/toast.jsimport { SHOW_TOAST, HIDE_TOAST } from "./types";export const showToast = (message, state) => (dispatch) => { dispatch({ type: SHOW_TOAST, payload: { message: message, state: state }, });};export const hideToast = () => ({ type: HIDE_TOAST,}); 2. types 파일export const SHOW_TOAST = "SHOW_TOAST";export const HIDE_TOAST = "HIDE_TOAST"; 3. reducer 파일import { SH..

회사 전체 대고객사이트에 SNS 로그인 기능을 추가하기로 결정이 되었습니다. 지금 제가 맡고 있는 사이트에서는 멤버십 회원가입과 네이버 간편 회원가입(로그인) 기능만 부착되어 있는 상태입니다. 이번에 APPLE, google, 카카오 로그인 기능을 추가적으로 부착하는 프로젝트를 진행하게 되었습니다. 1. 애플 디벨로퍼 사이트에 로그인 https://developer.apple.com/ Apple Developer There’s never been a better time to develop for Apple platforms. developer.apple.com 위의 링크로 접속해 애플 디벨로퍼 계정을 만들고 로그인합니다. 2. Identifiers 생성하기 좌측의 Identifiers 메뉴를 클릭 후 ..

[data] [ { "cds": "CT00064", "tit": "계절의 틈, 그리고 고양 01", "sub": "One Day Tour", "thn": "00a32db4-6b30-4738-bb13-423759104c72.png", "ref": "by. AB-ROAD" }, { "cds": "CT00063", "tit": "매거진 테스트", "sub": "부제", "thn": "56cb8490-ad55-454e-8b0b-3eacb2dc46ce.png", "ref": "출처" }, { "cds": "CT00062", "tit": "매거진 테스트중❤️😊💕😍🙋‍♀️🎶", "sub": "222", "thn": "8109bbf2-1a46-488e-9adc-3be18bd15889.png", "ref": "출처입니다..

회사에서 60장 분량의 API 규격문서를 하드코딩해서 올리라는 말을 듣고 잠시간 할 말을 잃었습니다.. API연동 문서에는 많은 테이블과 텍스트들이 있었지만 그 중 가장 관건은 request와 response 예시인데 이렇게 되어있는 내용을 이렇게 보기 좋게 구분이 되어있는 예쁜 소스 코드 형태로 만들어야 하는 작업이 생겼습니다. 일일이 span태그로 class를 주는 것은 너무 가혹한 것 같아 부랴부랴 라이브러리가 없는지 찾아보았습니다. 그래서 결정된 오늘의 포스팅 주제!! code 구문 강조하기 많은 개발자들이 웹사이트에 글을 작성할때 코드 부분을 실제 에디터에서 보이는 것 처럼 강조하기 위한 방법으로 highlight.js를 사용합니다. 이것을 사용하기 위해 npm 또는 yarn을 사용하여 프로젝트..

React는 컴포넌트를 렌더링 한 뒤, 이전 렌더된 결과와 비교하여 Dom 업데이트를 결정합니다. 이 때 재렌더가 필요없는 컴포넌트의 렌더를 방지하여 이 업데이트 속도를 높일 수 있는 방법들이 있는데 정확한 역할과 차이점을 구분하기 위해 정리해 보고자 합니다. 1. React.memo React.memo는 Higher-Order Components(HOC)입니다. (HOC란 컴포넌트를 인자로 받아서 새로운 컴포넌트를 return해주는 구조의 함수) HOC의 예시 (Auth에 따른 페이지 권한 검사) // Auth라는 HOC를 통해 권한에 따라 라우팅 처리 function App() { return ( ); } export default App; // Auth validation example import..

👉 부모에서 자식으로 함수 전달 & 자식에서 부모로 데이터 전달 이번에 인프런에서 유튜브 클론코딩을 수강하다가 부모->자식->자식의 함수 및 데이터 전달하는 부분이 있어, 추후에 참고용으로 또 보기 위해 포스팅합니다. 예시 코드를 간단히 설명하자면, 아래 코드에서 VideoDetailPage.js는 영상의 상세페이지를 보여주는 컴포넌트이고, 는 해당 동영상이 표시되는 영역, 는 동영상 아래의 댓글 영역입니다. // VideoDetailPage.js (부모 컴포넌트) import React, { useState } from "react"; import Axios from "axios"; import Comment from "./Sections/Comment"; export default function V..

React에서 Redux toolkit을 활용하는 방법을 정리하고자 합니다. redux-toolkit 설치된 프로젝트를 생성하는 방법 Redux + Plain JS template npx create-react-app my-app --template redux Redux + TypeScript template npx create-react-app my-app --template redux-typescript App.js 에 Provider를 import하고 최상단 컴포넌트에 store를 저장해줍니다. // App.js import { Provider } from "react-redux"; import Counter from "./components/Counter"; import store from "./..