React (13) 썸네일형 리스트형 [React] 카카오톡 간편인증 개선편 이전에서 카카오톡 간편인증을 처리하는 로직을 트래픽 부하를 줄이기 위해 개선해보았다. https://haardy.tistory.com/98 [React] 카카오톡 간편인증관련 현재 세금환급서비스를 만들고 있다. 그 중에서 기존에 해보지 않은 로직을 짤 일이 생겨서, 이렇게 기록으로 남겨둔다. 물론 지금의 코드는 추후 개선될 확률이 높다. 먼저 코드를 짜기 전에, haardy.tistory.com 바뀐 점은 다음 한 가지이다. (기존)1분동안 계속해서 API호출을 불러와서 인증을 확인함 => 고객이 인증버튼을 눌렀을 때, 5초간 API호출 위와 같이 바꾼다면, 많은 사용자들이 동시에 인증요청을 하였을 때, 단시간내의 트래픽을 많이 줄일 수 있다고 생각하였다. 아래는 플로우대로 이미지를 캡쳐해보았다. 개선된.. [React] 카카오톡 간편인증관련 현재 세금환급서비스를 만들고 있다. 그 중에서 기존에 해보지 않은 로직을 짤 일이 생겨서, 이렇게 기록으로 남겨둔다. 물론 지금의 코드는 추후 개선될 확률이 높다. 먼저 코드를 짜기 전에, 아래와 같은 플로우차트를 작성하였다. 기존의 백엔드와 데이터를 주고받는 방식이 조금 달랐기에, 재미는 있었다. Response의 데이터 값이 유동적이다. 간편인증 정보를 입력한 뒤 보낸 요청으로 스크래핑 업체에서는 총 3개의 API를 거친다. 근데, 간편인증 정보의 조건에 따라서 2개를 거칠수도 있고, 1개를 거칠수도 있다. 그럼 어떤 문제가 생길까? Response로 오는 데이터값이 객체인데, 그 중 키값이 2개일수도, 1개일수도 또는 3개일수도 있다. 참으로 난잡하다. 키값이 계속해서 달라지는 것을 대비해서, 데이.. 네이버클라우드에서 Nginx적용 후, 리액트 배포하기 기존 AWS의 EC2서버로 배포를 하는 것과 네이버클라우드에서 배포를 하는 것이 큰 차이가 없다. 큰 흐름은 다음과 같다. 네이버클라우드에서 일단 서버를 연다. (필자는 ubuntu를 사용했다.) 서버에서 nginx를 설치하고, nginx의 default설정을 살짝 바꿔주자. git에서 파일을 받아오든, 서버에 프로젝트파일을 가져와 빌드해서 nginx에 연결시켜주면 된다. 추가적으로, 보안인증서를 nginx와 letsencrypt를 사용하여 https도 연결해주자. 네이버클라우드에서 일단 서버를 연다. (필자는 ubuntu를 사용했다.) 이번 프로젝트에서는 회사에서 사용하고있던 기존 서버를 받아서, 이에 대한 자료가 거의 없다. 근데 서버를 설정하는 방법은 AWS와 크게 다르지 않을 것 같다. 가장 실수.. 리액트 this키워드 문제 testdome에서 재미난 리액트 문제를 발견했다. 지금은 비록 사용하지 않는 클래스 컴포넌트이지만, this키워드를 이해하기 좋은 문제라 생각하여 해설해보려고 한다. 문제는 일단 다음과 같다. ( 출처: testdome ) // React is loaded and is available as React and ReactDOM // imports should NOT be used const sampleOptions = [ { id: "753", title: "This is the first option" }, { id: "035", title: "This is the second option" } ]; class OptionsShower extends React.Component { constructor.. useMemo와 useCallback을 이용한 렌더링 최적화 이때까지 외면해오던 것이 있었다. useState 와 useEffect만 사용해도 충분히 기능을 구현하는 것에 문제가 없었기에, useMemo와 useCallback을 알아볼 생각이 없었다. 이 두개는 렌더링 최적화를 위한 hook이기 때문에, 무언가 아직 최적화까지 내가 생각을 해야해? 라는 생각이 머릿속을 지배했었던 것 같다. 하지만, 어떻게 개발자가 최적화를 외면할 수 있겠는 가. 지금이라도 렌더링 최적화를 위한 hook에 익숙해져보자. class형 컴포넌트는 리액트 16.8버전이였나, 훅이 나오면서 이제는 deprecated 될 것이다. (조만간 사라지게 될 상태) 대부분이 현재 함수형 컴포넌트를 사용하고 있는데, 함수형 컴포넌트는 말 그대로 함수이다. 즉, 컴포넌트가 실행된다는 것은 함수가 실행.. useEffect는 비동기적이지 않다. 필자도 그렇고, 많은 사람들이 useEffect가 비동기적으로 , 그러니까 useEffect의 콜백함수가 실제로 이벤트 루프가 비워질 때마다 콜스택으로 들어가 처리가된다고 생각을 하고있다. 그리고 충분히 그렇게 오해를 할만한 이유가 있다. function App () { useEffect(() => { console.log("hi") },[]) return ( 누가 먼저 보일까요? ) } 컴포넌트는 함수이고, 위의 함수가 동기적이라면 콘솔에 "hi"가 먼저 찍힌 뒤 "누가 먼저 보일까요?"라는 텍스트가 화면에 보여질 것이다. 하지만, 실제로 작동하면 "hi"가 나중에 찍히는 것을 알 수 있다. 그렇다면 왜 useEffect 안의 콜백함수는 element를 반환한 뒤에, 실행이 되는 것일까? 그 이유는 리.. 10주간 리액트를 쓰면서, 리액트를 몰랐다. 대부분 리액트를 사용하는 개발자라면, 막연히 대강의 동작방식만을 익힌 채 프로젝트를 진행하고 있다는 생각이 든다. 아마도 리액트를 하나하나 이해하는 방식보다 대강의 동작방식을 이해한 뒤 여러 번 코드를 돌려보는 것이 머리도 덜 아프고, 쉽기 때문이다. 하지만, 리액트를 제대로 알지 못하면 언젠가 큰 산을 넘지 못할 것이 분명하기에 면접준비도 하는 겸 리액트를 부셔버리기로 했다. 내가 선택한 참고자료는 아래 블로그이다. 굉장히 세세하게, 여지껏 보지못했던 리액트에 관한 내용들이 적혀있다. 감사합니다. https://goidle.github.io/react/in-depth-react-preview/ React 톺아보기 - 01. Preview | Deep Dive Magic Code 모든 설명은 v16.12.. CSS 모달창을 만들어보자구나! 뭔가 나만의 모달창을 라이브러리처럼 만들어놓고 싶어서, 만들어보았다. import React from "react"; import styled from "styled-components"; const NotifModal = ({ setModalOpen, content }) => { // 모달창 노출 const closeModal = () => { setModalOpen(false); console.log(1); }; return ( {" "} e.stopPropagation()}> {content}{" "} 확인 ); }; const Wrap = styled.div` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color.. 이전 1 2 다음
