React (115) 썸네일형 리스트형 [React] 캘린더 react-datepicker 라이브러리 사용법 날짜를 선택하는 캘린더를 적용하고 싶어서 react-datepicker 라이브러리를 사용하였다. 다양한 커스텀이 가능하며, 예제코드는 아래 공식사이트에서 확인할 수 있다. react-datepicker A simple and reusable datepicker component for React. Latest version: 4.16.0, last published: 6 days ago. Start using react-datepicker in your project by running `npm i react-datepicker`. There are 2673 other projects in the npm registry using react-datepi www.npmjs.com React Datepick.. [React] 소셜로그인- 카카오톡 로그아웃 Logout 로그인은 지난번 해보아서 로그아웃을 구현해보았다. (REST API) 1방법: 기본 로그아웃 - 로그아웃시키면 카카오토큰은 만료되어 API호출 불가 - 로그아웃시 다시 카카오 계정 로그인은 안함, 안해도 로그인하면 다시 토큰 받아옴 - 재로그인시 ID,PW치게하는 방법은 아래!! https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#logout Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 나는 액세스토큰 방식 요청으로 진행했다. 아래는 구현 코드 const snsLogout = as.. [React] useEffect, API 2번씩 호출 (feat:<React.StrictMode/>) 오류 useEffect안에서 함수를 2번 실행시키면 해당 컴포넌트가 각각 1개씩 총 2개가 뜨도록 구현중이었다. 그런데 계속 2번씩 호출되어 총 4개가 출력되는 문제가 일어났다. 조건문을 달아 함수를 작성해도 도저히 원하던대로 화면이 구현되지 않았다. 그리고 서치중 알게된 것..... react의 index.js에 모드가 존재하는데, 이것은 개발단계에서만 오류를 잘 잡기위해 구성요소를 두번 렌더링 한다. 이것때문에 계속 API가 2번씩 호출되었던 것이다..!! React Hooks: useEffect() is called twice even if an empty array is used as an argument I am new to reactJS and am writing code so that bef.. [React] 로컬스토리지에 저장된 Token을 API header전송시 오류 로그인 후 세션스토리지에 accessToken을 저장한 후, navigate('/')를 통해 게시판 화면으로 넘어간다. 그리고, 저장된 토큰을 API의 header에 전송하여 게시판의 정보를 불러와야한다. 그런데 게시판의 정보가 새로고침시에만 API 통신이 성공되어 불러와지는 오류가 발생했다. 살펴보니 로그인 후 저장된 token이 header로 제대로 전송되지 않았던 것이다. [Try 1] 원인 navigate는 HTTP요청을 새로 하지 않고 안의 내용만 바꾸기 때문에, 페이지가 unload되지 않고 내용만 바꿔지는 라우팅이 적용되었기 때문이다. 해결 window.location.href나 window.location.replace를 통해 해결할 수 있다. 이를 통해 페이지 전환을 할 시 HTTP요청을.. [React] file 전송, formdata API전송시 에러 해결 * 해결2 로 보기!! input type(file)을 이용하여 axios 를 통해 전송하려는데 오류가 났다. 아래와 같이 body에 정보들과 선택한 files를 api로 보내는데 데이터는 다 들어갔지만, 통신이 되지 않았던 것이다. (다른분이 했을땐 files의 값이 binary로 뜨고 통신 잘 됐는데 내껀 {}로 나와서 뭔가했었던... 이유가 있었다.) const body = { name: values.name, status: selectedStatus, ... files: showFileImg?.file, }; 이유는 위와 같이 설정한 body를 axios에 body로 post를 보냈는데, 내가 보낸 형식은 json이기 때문에 오류가 났다. file은 formdata로 보내야하기때문에 api보내는 .. [React] 스켈레톤 로딩 구현하기 스켈레톤 화면에 대한 개념 정리글은 이전에 작성한 글 참고 스켈레톤을 구현하려고 한다. api 를 통해 받아온 이미지, 데이터들이 뜨기 전에 회색배경이 나오도록 할 것이다. 예제와 방법은 아래 참고사이트를 통해 진행하였다. 더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기 스켈레톤 컴포넌트가 무엇인지 알고 있는가? 스켈레톤 컴포넌트는 데이터를 가져오는 동안 콘텐츠를 표시하는 컴포넌트이다. 사용자는 콘텐츠를 기다리다가 쉽게 지치고 지루함을 느끼므로 단 ui.toast.com 위 사이트의 SandBox (코드 참고하기!) skeleton (forked) - CodeSandbox skeleton (forked) using axios, react, react-dom, react-scripts code.. [Reat] setTimeout 함수는 Promise반환X, new Promise객체 생성하기 스켈레톤 코딩을 위한 R&D 중 setTimeout함수를 이용하는 코드를 발견했다. 비동기를 이용해서 처음 setTimeout부분이 이루어지면 다음으로 api연결이 되어 데이터를 불러오는 로직이다. 그러던중 왜 new Promise를 사용하는지 궁금해졌다. useEffect(() => { setIsLoading(true); // Intentionally delay the function execution new Promise(res => { setTimeout(() => { res(); }, 3000); }).then(() => { axios.get("https://reqres.in/api/users?page=2").then(res => { setData(res.data.data); setTimeout(.. [React] 스켈레톤 로딩이란? 스켈레톤 로딩(스켈레톤 스크린)이란? 스켈레톤=뼈대 페이지 콘텐츠가 완전히 렌더링되기 전에 나타나는 화면, 최종 콘텐츠가 제자리에 로드되기 전에 페이지 구조의 윤곽을 나타내는 연한 색상의 배경, 선 및 텍스트로 구성 대표적인 사이트: 유튜브 아래 연회색 화면 처럼 썸네일 화면이 뜨기전에 자리잡고 있는 스크린 Q. 무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? 스켈레톤 화면을 다 사용하는 것이 올바를까? 이것에 대한 답은 카카오 에서 찾을 수 있었다. Progress Indicator에 대한 UX 리서치 세계적인 UX 리서치 그룹 닐슨 노먼은 Progress Indicator에 대한 중요성을 강조하며 아래와 같은 주요 지침을 이야기 하였습니다. (Progress Indicator: 로딩 .. 이전 1 2 3 4 5 6 7 ··· 15 다음
