React + TypeScript 이용해서 카카오 로그인 구현하기

React + TypeScript를 사용해서 카카오 로그인을 구현해 봤습니다. Next.js를 이용해서 개발을 진행하였습니다. 카카오 로그인 과정 1. 카카오 SDK 자바스크립트 불러오기 2. 카카오 SDK 초기 설정 Kakao.init(JAVASCRIPT_APP_KEY); 3. 로그인 요청 Kakao.Auth.authorize({ redirectUri: "http://localhost:3000/login", }); 로그인이 성공하게 되면 redirectUri에서 설정한 주소로 코드 값이 옵니다. ex) http:/// localhost:3000/login?code=12345 4. 코드 값을 보내서 토큰 받아오기 const response = await fetch("https://kauth.kakao.c..

• format_list_bulleted Develop/React
• · 2023. 9. 7.
• textsms

React vs Vue 장단점 비교 어떤 것을 사용해야 할까?

vs 프론트엔드 개발을 할 때, SPA 프레임워크를 많이 사용합니다. 특히 국내에서는 React와 Vue를 많이 사용합니다. 프로젝트 초기 단계에서 어떤 프레임워크를 사용할까 고민도 많이 하기도 하고, 취업준비 단계에서 어떤 것을 공부할까 고민도 많이 합니다. 그래서 React와 Vue를 비교하면서 장단점이 무엇인지, 각 프레임워크 더 나은점은 무엇인지 한번 정리해 보도록 하겠습니다. React가 더 나은 점 1. Facebook 회사의 지원 리액트의 경우 Facebook 회사에서 만든 라이브러리 입니다. 페이스북이라는 거대한 사이트에서 사용하는 프레임워크입니다. 안정적인 업데이트를 기대할 수 있고, 규모가 큰 프로젝트에서도 잘 동작할 수 있습니다. 하지만, Vue의 경우에는 Evan You라는 개인의 ..

• format_list_bulleted Develop/React
• · 2023. 8. 21.
• textsms

React - useState vs useReducer state 관리 Hooks 비교

리액트에서 상태 관리할 수 있는 훅이 useState, useReducer 두가지가 있습니다. 각각의 훅을 언제 사용하면 좋을까요? 프로그래밍에는 맞고 틀림이 없습니다. 아래 내용을 참고하여 상황에 맞게 적절할게 사용하시면 됩니다. useState vs useReducer 비교 useState useReducer 리액트 메인 상태관리 방법 더욱 강력한 상태 관리 방법 개별 및 간단한 상태 관리할 때 사용 각각의 상태나 데이들이 연관되어 있을때 상태 변경이 쉽거나, 업데이트가 몇 개일 때 사용 상태 변경이 복잡할때 useReducer로 처리 가능한 것이 useState로 처리 가능합니다. 정답은 없으니 본인에게 필요한 훅을 잘 사용하시길 바랍니다.

• format_list_bulleted Develop/React
• · 2023. 4. 7.
• textsms

React - 복잡하고 다양한 state 변경에 사용하는 Hooks useReducer

useReducer 리액트 훅 useRedcuer입니다. useState와 같이 useRedcuer는 상태를 업데이트할 때 사용됩니다. useRedcuer 언제 사용하는 것이 좋을까요? 다양한 state를 이용하거나, 복잡할때 다른 state 기반으로 state를 업데이트 할때 useReducer 사용법 const [state, dispatch] = useReducer(reducer, initialArg, init?) reducer 컴포넌트 외부에서 state 관리할 reducer 함수 initialArg state 초기 값입니다. init 초기 상태를 반환하는 함수입니다. 1. 컴포넌트 내에 useReducer 선언 const [state, dispatch] = React.useReducer(reduc..

• format_list_bulleted Develop/React
• · 2023. 4. 6.
• textsms

React - 특정 작업들을 실행 시키는 훅 useEffect

리액트에서 가장 중요한 Hook useEffect입니다. useEffect는 언제 사용해야 할까? 리액트의 역할은 UI화면을 렌더링 해서 화면에 가져오는 역할을 합니다. state와 props 변경 시에 dom을 변경하기도 합니다. Side Effect란? 리액트에서 제공하는 역할 외 작업들을 사이드 이펙트라고 합니다. 예를 들면 백엔드 서버에서 http 리퀘스트를 보내거나, 브라우저 저장소에 무언가를 저장하거나 하는 행위들입니다. 이러한 Side Effect를 실행할 때, 매번 컴포넌트가 렌더링 될 때마다 실행하게 되면 너무 많은 http 리퀘스트를 요청하거나, http 리퀘스트 이후에 state 변경을 해서 무한 루프에 빠지게 될 수 있습니다. 이러한 작업들을 useEffect를 이용해서 사용하시면 ..

• format_list_bulleted Develop/React
• · 2023. 4. 5.
• textsms

리액트 - createPortal() 사용해서 원하는 위치에 렌더링 하기

리액트 API 중에 createPortal이 있습니다. createPortal createPortal은 원하는 위치에 렌더링 할 수 있습니다. 부모 밖의 위치에 렌더링 할 수 있습니다. 문법 createPortal(children, domNode) 사용법 function App() { return (ReactDOM.createPortal(Hello React, document.body)) } 결과 위와 같이 사용하게 되면 documnet.body 아래에 렌더링 되게 됩니다. Hello React 모달 만들기 샘플 createPortal를 이용하여 모달 샘플입니다. 해당 컴포넌트가 아닌 body 레벨에 모달 컴포넌트가 렌더링 되었습니다. const root = ReactDOM.createRoot(docum..

• format_list_bulleted Develop/React
• · 2023. 3. 22.
• textsms

React - JSX elements must be wrapped in an enclosing tag 해결 방법

리액트 개발하다 보면 아래 오류를 만나게 됩니다. 오류 Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 원인 function App() { return ( Hello React I'm superman ); } 위 오류는 위 같이 h2 태그와 p태그를 하나의 태그에 묶지 않아서 발생하게 됩니다. 이것이 왜 문제가 될까요? return ( React.createElement('h2', {}, 'Hello React'); React.createElement('p', {}, 'superman'); ) 위와 같이 하나의 return 값에 두 가지가 들어가 있어서 오류를 나타나게 됩니다. 해결방법 1..

• format_list_bulleted Develop/React
• · 2023. 3. 21.
• textsms

React - useRef() DOM 요소에 접근할 수 있는 Hook

useRef() useRef는 React Hook API 중의 하나입니다. DOM 요소에 접근하거나, 상태값을 저장할 때 사용하는 API입니다. 내부 current 변수에 저장하게 됩니다. document.getElementById와 비슷한 역할을 하게 됩니다. 1. DOM 요소 가져오기 function Search() { const inputEl = React.useRef(null); function changeHandler() { console.log(inputEl); } return ( Search ) } React.useRef를 선언하고, 아래에 element 태그에 ref에 useRef()를 선언한 변수를 넣어줍니다. input의 change 이벤트와 button의 이벤트에서 동일하게 input..

• format_list_bulleted Develop/React
• · 2023. 2. 5.
• textsms

React - 버튼 클릭 이벤트 등록하기

리액트 컴포넌트에 이벤트 등록을 하는 방법에 대하여 알아보겠습니다. 일반적인 HTML에서 이벤트 등록하는 방법과 비슷하지만 몇가지 차이가 있습니다. 리액트에서는 camelCase를 사용합니다. onClick, onKeyup 이렇게 말이죠 이벤트 위와 같이 이벤트를 등록할 수 있습니다. function clickHandler(e) { alert('click') } 이렇게 clickHandler에 e 파라미터가 넘어오는데 e 매개변수로 preventDefault()와 stopPropagation() 을 사용할 수 있습니다. preventDefault는 이벤트의 기본 동작을 방지하고, stopPropagation은 이벤트가 상위 컴포넌트로 버블링 되는 것을 방지 할 수 있습니다 See the Pen Untit..

• format_list_bulleted Develop/React
• · 2023. 1. 14.
• textsms

React - useState를 이용하여 카운터 만들기

리액트 state에 대하여 알아보려고 합니다. 리액트 컴포넌트를 생성하고 난 뒤에는 state 값이 변경되면 다시 렌더링 됩니다. 상태가 변경되면 자동으로 다시 컴포넌트를 렌더링 되기 때문에 상태 변경만 해주면 됩니다. 1. useState 초기화 const [counter, setCounter] = React.useState(0); 먼저 useState 함수를 이용하여서 초기화를 합니다. useState 안에 들어간 0은 초기화할 때 사용하는 값입니다. 2. 각 버튼 클릭 이벤트에서 setCounter를 이용하여 상태 값을 변경합니다. setCounter 파라미터를 callback 함수로 작성하였는데, 이전의 counter를 가지고 와서 1을 더해주는 방식입니다. setCounter(counter =>..

• format_list_bulleted Develop/React
• · 2023. 1. 13.
• textsms