Language/React
React) 함수형 컴포넌트에서 에러 잡아내기
안녕하세요 프런트엔드 개발자 웹 코기입니다. 리액트 작업을 하다 보면 에러와 로딩 처리를 해줘야 하는 경우가 있는데요, 작업하다 보니 에러 처리를 모두 건너뛰고 만들기에 급급해.. 뒤늦게 에러를 잡아보려니 해야 할 작업이 상당해서 당황스러웠습니다. 그렇게 찾던 중 알게 된 정보를 공유합니다. componentDidCatch를 사용하자 리액트에서는 위의 객체를 이용해 에러가 발생한 곳이 어디인지 알 수 있고, 메시지도 받아볼 수 있습니다. 아래는 벨로 퍼트님이 작성한 문서입니다. https://react.vlpt.us/basic/26-componentDidCatch-and-sentry.html 26. componentDidCatch 로 에러 잡아내기 / Sentry 연동 · GitBook 26. compo..
React에서 .env 파일에 환경변수 넣어쓰기
안녕하세요 웹 코기입니다. 오늘은 보안이 필요한 API 키를. env 파일에 넣어서 꺼내와 사용하는 방법을 알아보겠습니다!! 1.. env 파일 만들기 먼저 리액트 최상위 루트에. env 파일을 만들어줍시다. 그리고 깃에. env파일이 올라가면 안 되니 . gitIgnore에. env를 꼭 추가시켜줍니다!! 2. 변수 내용 작성 파일 안에 저장할 환경변수 내용을 적어줍니다. 이때 중요한 점은, 반드시 변수명 앞에 REACT_APP_ 을 붙여줘야 합니다!! 이걸 붙여주지 않으면 리액트 앱에서는 변수를 불러오지 않는 것으로 확인됐어요 3. 등록한 변수 사용하기 리액트는 라이브러리나 컴포넌트 사용 시 import를 꼭 해줘야 하지만, .env에 등록된 변수는 별도의 import가 필요하지 않아요 전역 어디서든..
컴포넌트가 사라지면 컴포넌트 안에 작성한 기능도 함께 사라진다 ?
안녕하세요 프런트엔드 개발자 웹 코기입니다. 리액트로 작업하던 중 console.log가 찍히지 않아 헤매다가 새로운 사실을 발견해 정보 공유합니다. 원하는 작업순서 1. 로그인을 하면 컴포넌트를 보이지 않게 만든다. 2. 아래 이미지와 같이 안에 useEffect에 있는 console.log를 찍어 value를 확인한다. 콘솔이 찍히지 않는다? 위처럼 작업했지만 콘솔이 찍히지 않고 증발(?)했어요 그래서 컴포넌트를 유지한 채로 콘솔을 찍어보니 찍혔습니다. 당연해 보일 수 있는 결과지만, 기존에는 컴포넌트 안에 return()에 있는 DOM만 사라지게 하고 영향을 끼치지 않는 줄 알았습니다. 하지만 컴포넌트안에 함수 변수 등 작성된 모든 기능에도 영향을 준다는 사실을 알 수 있었어요!!
서버에서 다운받은 바이너리 데이터를 img 태그에 넣고 이미지로 표시하는 방법?
바이너리 데이터 서버에 이미지를 저장한 후, 그 이미지를 바이너리 데이터로 가져오면 콘솔에서 아래와 같이 출력됩니다. 이것이 바이너리 데이터라는 것만 이해하고, 어떻게 변환해서 이미지로 출력해야 할지 몰라서.. base64로 디코딩, 인코딩 등등 별짓을 다해봤으나 실패했죠...! POSTMAN에선 이미지 불러와짐? 그런데 postman에서 통신해 다운받아보면 이미지가 잘 불러와집니다. GET 사용하고, URL + '/ws/upload/1' (1번 이미지 파일) 이런 식으로요! 그럼 통신이나 서버엔 문제가 없고, 중간 과정에서 어떤 문제가 있을 것이라고 파악이 됐습니다. 하지만 여전히 방법은 몰랐고, 시간은 흘러갔습니다.. 해결 열심히 찾던 중 역시 갓구글... 찾았습니다...!! 해석이 구글 번역기 돌린..
React 장단점 분석 정리
안녕하세요 프론트엔드개발자 웹코기입니다. React 공부를 계속하면서 실무에서 사용해왔지만, 장단점을 직접 말로 해보려고 하니 제 머릿속이 정리가 안돼서 난잡해지더라고요. 그래서 오늘은 스스로 정리도 할 겸 React 장단점에 대해 분석해보겠습니다!! React 장점 1. Virtual DOM 사용 DOM 이란? 문서 객체모델 (Document Object Model) 말이 어려워서 쉽게 머리에 들어오지 않으실 텐데요, 쉽게 생각하면 html 태그 하나하나의 요소를 지칭한다고 생각하시면 되겠습니다. Real DOM 이란? Real DOM = 실제 DOM 처리 기존 Javascript & jQuery는 real DOM을 사용합니다. (최근 떠오르는 스벨트도 Real DOM을 사용한다고 합니다...) DOM..
react에서 SNS로그인 시 token, id 가져오기 (카카오, 네이버, 구글)
안녕하세요 프런트엔드 개발자 웹코기입니다. 오늘은 react에서 카카오, 네이버, 구글 로그인에 필요한 데이터 id 또는 token을 가져오는 방법을 알아보겠습니다. 우선 이 정보를 가져와야 백단과 통신해 로그인을 진행할 수 있습니다! 저는 세 가지 모두 npm라이브러리를 이용해 쉽게 가져와봤습니다. 1) 라이브러리 설치와 import 우선 첫 번째로 세 가지의 라이브러리를 모두 설치합니다. yarn add react-naver-login react-kakao-login react-google-login 그리고 사용할 JS파일에 import 해줍니다. import NaverLogin from 'react-naver-login'; import KakaoLogin from 'react-kakao-login'..