티스토리

개발길에서 살아남기

검색하기

블로그 홈

개발길에서 살아남기

hg-96.tistory.com/m

이메일: hg_96@naver.com

구독자: 1

방명록 방문하기

주요 글 목록

next auth 를 next api 디렉토리에서 써보자! 이번에 플젝을 next 를 쓰는 플젝을 진행했는데 다른건 그냥 만들면 됐는데 처음 가장 발목잡았던 next auth... 설정다하면 편하기는 편한데 설정이 복잡하다... 우선 next 디렉토리 구소를 api 형식이다. pages 라면 구글링해보면 다른 예제가 많아서 구글링을 추천한다. https://next-auth.js.org/ NextAuth.js Authentication for Next.js next-auth.js.org 여기서 npm install 해주고 폴더구조를 우선 api/auth/[...nextauth]/route.js 를 정한다. ts 안쓰는 이유는 내가 안쓰는거까지도 타입다 지정해야하고 너무 불편하다 구글 애플/ 네이버 카카오 리턴이 다른데 콜백에서 접근할때 없는거니까 접근안된다고 에.. 공감수 0 댓글수 0 2023. 11. 2.
[REACT] - 숫자만 받기 (보완점 많음) 리액트를 배우고 있어서 아주아주 깔끔하지 않지만 숫자만 받는데 type="number" 로만 처리하는데 신경쓰여서 한번 만들어 보자 하고 만들어 보았다 const OnlyNumber = (e, predata) => { const curType = e.nativeEvent.inputType; const curValue = e.nativeEvent.data; if (curValue !== "" && curValue !== null) { const newValue = curValue.replace(/[^0-9]/g, ''); setMovieYear(predata + newValue) } else if (curType === "deleteContentBackward") { const delData = preda.. 공감수 1 댓글수 0 2022. 3. 6.
[React] - 6차 - props 반복 학습 1. JS import './App.css'; import { useState, useEffect } from 'react'; import Data from './components/Data'; // 디렉토리 구조 function App() { const data = [ { title: '이름1', year: 1000 }, { title: '이름2', year: 2000 }, { title: '이름3', year: 3000 }, { title: '이름4', year: 4000 }, ]; const renderData = data.map(adata => { return ( ); }); return ( { renderData } ); } export default App; 2. JS import React .. 공감수 0 댓글수 0 2022. 2. 18.
[React] - 5차 - 조건 렌더링 import './App.css'; import { useState, useEffect } from 'react'; function App() { const [state, setState] = useState(false); const toggle = () => setState(!state); useEffect(() => { console.log(state); }, [state]) const renderState = state ? "1번!!" : "2번!!"; return ( {renderState} 토글글 ); } export default App; 공감수 0 댓글수 0 2022. 2. 18.
[React] - 4차 -겹치는 코드 뭉쳐서 관리 1. import './App.css'; import { useState, useEffect } from 'react'; import Counter from './components/Counter'; // 디렉토리 구조 function App() { const [name1, setName1] = useState("클릭!!"); const clickBtn = () => { setName1("클릭변경함!"); } return ( 두번째 버튼 변경! ); } export default App; 2. import React from "react"; import { useState, useEffect } from 'react'; const Counter = (props) => { const [num1, setNu.. 공감수 0 댓글수 0 2022. 2. 18.
[React] - 3차 - useEffect 사용 예 import './App.css'; import { useState, useEffect } from 'react'; function App() { const [num1, setNum1] = useState(0); const [num2, setNum2] = useState(0); useEffect(() => { console.log("num1 변경: "+num1) }, [num1]) useEffect(() => { console.log("num2 변경: "+num2) }, [num2]) useEffect(() => { console.log("num1 OR num2 변경: "+num1,num2) }, [num1, num2]) useEffect(() => { console.log("처음 한번만 실행") }, .. 공감수 0 댓글수 0 2022. 2. 18.
[React] - 2차 - useState 사용 예 import './App.css'; import { useState } from 'react'; function App() { const [text, setText] = useState("몰라일단"); const updateText = () => { setText("업데이트!!"); {/* 연결할 명칭사용 예 */} console.log(text); } return ( {text} {/* 사용할 명칭사용 예 */} 업데이트 ); } export default App; 여기서 좀 신기한게 useState 선언하고 값을 조절하는건 익숙하지만 useState로 값을 조절하는게 신기했다 몇가지 테스트를 해보니 const [ 사용할 명칭, 연결할 명칭 ] = useState("텍스트 값"); 이런느낌이었다 사용할.. 공감수 0 댓글수 0 2022. 2. 18.
[React] - 1차 import './App.css'; function App() { const onSubmit = () => { alert("클릭함수 실행"); } const onKeyUp = (event) => { if (event.keyCode === 13) { console.log("키 업!!"); onSubmit(); } } return ( alert("클릭성공") }>전송1 전송2 ); } export default App; 조금 다른게 { ( ) => } 이런 부분이랑 { } 이걸로 다루는 것 함수에서는 = ( ) => { } 이부분 그동안 ( ) { } 이렇게 써왔는데 어색하다 공감수 0 댓글수 0 2022. 2. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.