도록

이전 글:  https://reeny404.tistory.com/120  [next/react] google 로그인 구현하기 (2) : 액세스 토큰 받기액세스 토큰을 받기 위해 oauth client id를 이전에 발급받았다. (link) [next/react] google 로그인 구현하기 (1) : oauth client id 발급 받기구글 로그인을 구현하기 위해 설정부터 해보자 1. 사용자 인증 정보reeny404.tistory.com  이전에 액세스 토큰까지 무사히 잘 받아왔다면, 이제 받은 토큰을 이용해서 google 로그인 정보를 가져오자! 로그인 정보?: 내가 개발하는 사이트에 저장할 email이나 nickname 정보를 말한다.구현중인 서비스의 소셜 회원가입/로그인 정책 상 필요한 데이터들 ..

페이지 방문 순서를 history stack에 저장한다.  내장 함수push : 새로운 URL 추가replace : 현재 URL을 새로운 URL로 교체back : 뒤로가기 reload : 새로고침 (히스토리 스택에 영향 없음) router.replace의 사용 예시 로그인 페이지에서 사용자가 정상적으로 로그인을 완료했을 때, router.push 가 아니라 router.replace를 쓰곤한다.뒤로 가기 버튼으로 다시 로그인 페이지에 다시 접근하는 것을 막기 위함이다. history stack 의 데이터에 접근하는 방법은? 없다. stack 자체를 조회할 수 없기에 각각의 페이지 이동 시 push가 맞는지 replace가 맞는지 적절히 잘 쓰는 것이 좋다.로그인 페이지가 n개의 단계로 페이지 이동하면서 ..

Next Client Component = React const { name } = useParams(); Next Server componenttype PageProps = {  params: { slug: string }  searchParams: { [key: string]: string | string[] | undefined }};export default function Page({  params,  searchParams } : PageProps ) {  return My Page}  Next app router 1. GETimport { type NextRequest } from 'next/server'   export function GET(request: NextRequest) {   ..

결론 : Server Components가 Client Component에게 전달 할 수 있는 값은 한정되어 있다. 에러메세지Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.   {Icon: function y, onClick: undefined} 해결책문제가 생긴 Server Component 상단에 "use client" 를 붙여준다.or 해당 props를 넘겨주지 않도록 구조를 바꾼다. 상황요약: Server..

필수 자바스크립트구조분해할당배열 구조 분해 할당const array = [1, 2, 3, 4]; const [a, , , b] = array;                     // a=1, b=4const [c, ...rest] = array;                  // c=1, rest=[2, 3, 4] const [d, e=10, , , f =20] = array;    // d=1, e=2, f=20 객체 구조 분해 할당const obj = { a: 1, b: 2, c: 3 };const {a, rest} = obj;                       // a=1, rest={b:2, c:3}const {a: first, b : num} = obj;         // first=..

불필요한 렌더링을 줄이기 위해 사용하는 방법들- React.memo : 컴포넌트 캐싱- useCallback : 함수캐싱- useMemo : 값 캐싱 React.memofunction Box () {     return 박스; }export default React.memo(Box);  ❗함수도 function도 참조형 변수이기에, 만약 아래 예시와 같이 함수를 props로 전달하게 된다면 Parent가 리렌더링될 때 React.memo로 지정한 Box 컴포넌트도 리렌더링이 된다. -> useCallback을 사용하면 렌더링하지 하지 않도록 변경할 수 있다.function Parent () {     const [count, setCount] = useState(5);     const initCount..