// index.css 에 추가 html, body, #root { width:100%; height:100%; }
전체 글
What 비동기 처리란? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. Why 왜 비동기 처리 특성을 갖는가? 클라이언트에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 응답을 줄 때까지 다른 코드를 실행 안 하고 계속 기다릴 수는 없기 때문이다. 예로 만약 클라이언트에서 서버에 보내는 요청이 100개일 경우에 비동기 처리가 아니고 동기 처리 방식이라면 데이터 요청과 응답 대기를 반복하여 실행 속도가 느려질 것이다. How 어떻게 해결하는가? async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이 있다. 이는 기존의 비동기 처리 방식인 콜백..
https://velog.io/@lire_eruel/Objects-are-not-valid-as-a-React-child-found-object-Promise-%EC%97%90%EB%9F%AC-%EC%9B%90%EC%9D%B8-%EB%B0%8F-%ED%95%B4%EA%B2%B0 Objects are not valid as a React child (found: [object Promise]) 에러 원인 및 해결 평화롭게 React를 하던 개발자 A.... 뜻밖의 에러를 맞닥뜨린다....! Objects are not valid as a React child (found: [object Promise]) 에러를 만드는 코드의 예시는 다음과 같다. (회사 코드라 첨부할 수 velog.io
import React from "react"; const Main = () => { const arr = ['사과', '배', '오렌지', '복숭아'] // map을 통한 컴포넌트 렌더링 함수 // 매개변수로 전달된 배열의 요소를 하나씩 꺼내어 컴포넌트로 변환해 리턴한다. const PracticeMap = (arr) => { return ( {articles.map((item, index) => { // map 내부에서 변수 선언, 함수 호출 가능 return ( {index}번째 과일은 {item}입니다. ); })} ); }; return ( {PracticeMap(arr)} ); }; export default Main; https://goddaehee.tistory.com/303 [React]..
https://velog.io/@gin2808/React-useNavigate%EB%A1%9C-state-%EB%84%98%EA%B8%B0%EA%B8%B0 [React] useNavigate로 state 넘기기 리액트에서 화면이동을 위해서는 두가지 방법이 있다.Link와 useNavigate가 있는데 오늘은 useNavigate를 이용해 스테이트를 넘기는 걸 해보려한다.npm install react-router-dom --savenavigate("/이동할주소",{replac velog.io 예시 ////////// 프롭스 전달하기 예시 import { useNavigate } from "react-router"; const SignIn = () => { const navigate = useNavigat..
https://velog.io/@rmaomina/react-env React에서 .env 환경변수 사용하기 외부 api에 접근하기 위해 token 등이 필요한 경우, 배포하지 않고 개발환경에만 적용할 수 있도록 환경 변수를 설정해야 한다. .env 파일을 가지고 process.env로 가져오는데, null값이라 나서 헤맸다. velog.io
문제 발생 필자는 카카오 로그인 API 기능을 사용하기 위해 위 사진처럼 index.html에 javascript SDK 를 추가하였다. https://developers.kakao.com/docs/latest/ko/javascript/getting-started 공식 API 문서를 살펴보니 카카오 로그인 API는 Kakao 객체로 접근하는 것을 알게되었다. 하지만 필자는 SDK 스크립트를 불러온 index.html 파일이 아닌 Main.jsx에서 API 기능을 사용하고 싶었다. 이에 Main.jsx에서 Kakao.init()으로 접근하니 오류가 발생했다. 해결 방법 index.html에 있는 SDK 스크립트를 Main.jsx에서 접근하려면 어떻게 해야할까? 위 궁금증을 해소하기 위해서는 window 객..
1. 앱 만들기https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com내 애플리케이션 > 애플리케이션 추가하기 2. 플랫폼 설정방금 만든 앱 클릭 > 플랫폼 > web > 플랫폼 등록 > 도메인 주소 입력만약 로컬 환경에서 테스트 작업이라면 로컬 서버를 실행시킨 후 주소 복사 붙여넣기Redirect URI은 카카오 로그인 완료 후 이동할 페이지 주소(선택 사항) 3. 키 복사하기앱 > 앱 키 > JavaScript 키 값 복사 4. SDK 설치index.js에 아래 코드 복사 붙여넣기 htt..