묻고 답해요

로그인후 바로 뒤로가기, 회원가입 후 홈으로 이동하고 session에 정보 안쌓임

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 선생님. 로그인 후에 새로고침이나 url을 치고 /(메인)으로 가면 홈으로 잘 리다이렉트 되는데 로그인 후 바로 뒤로가기를 누르면 리다이렉트되지 않고 / 페이지로 이동합니다. 이 부분 어떻게 하면 좋을지 문의 드립니다. 회원가입 후 303뜨면서 홈으로 이동하는데, 이 303이 괜찮은건지와 이동 후에 로그아웃버튼에서 session 정보를 가져오지 못하고 있습니다. 새로고침하면 잘 나옵니다. me정보를 가져올때 useEffect로 바꿔야할지 문의 드립니다. 로그를 보면 회원가입 후, 로그인도 잘 되는것 같은데 어떤부분을 확인해야할지 알려주시면 감사하겠습니다. @/app/(beforelogin)/_lib/signup.tsx 'use server'; import { signIn } from '@/auth'; import { redirect } from 'next/navigation'; const onSubmit = async (prevState: any, formData: FormData) => { if (!formData.get('id') || !(formData.get('id') as string).trim()) { return { message: 'no_id' }; } if (!formData.get('name') || !(formData.get('name') as string).trim()) { return { message: 'no_name' }; } if (!formData.get('password') || !(formData.get('password') as string).trim()) { return { message: 'no_password' }; } if (!formData.get('image')) { return { message: 'no_image' }; } let shouldRedirect = false; try { console.log('-------------------------signup start'); const response = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: 'post', body: formData, credentials: 'include', // cookie 전달 위해서 }); // console.log(response); console.log(response.status); if (response.status === 403) { return { message: 'user_exists' }; } const user = await response.json(); console.log(user, '-------------------------signup'); shouldRedirect = true; // 회원가입 성공하고 로그인 시도 await signIn("credentials", { username: formData.get('id'), password: formData.get('password'), redirect: false, }) } catch (error) { console.error(error); return { message: null }; } if (shouldRedirect) { redirect('/home'); // redirect는 try/catch문에서 쓰면 안된다. } } export default onSubmit; @/auth.ts import NextAuth from "next-auth" // import CredentialsProvider from "next-auth/providers/credentials" import Credentials from "next-auth/providers/credentials" export const { // api 라우트 handlers: { GET, POST }, // auth 함수 실행하면 로그인 유무알 수 있다. auth, // 로그인 하는 함수 signIn } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: '/i/flow/signup', }, providers: [ Credentials({ // You can specify which fields should be submitted, by adding keys to the `credentials` object. // e.g. domain, username, password, 2FA token, etc. credentials: { id: {}, password: {}, }, authorize: async (credentials) => { console.log('-------------------------------------------auth.ts'); const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(credentials) }) // console.log('authResponse-----------------------------------', authResponse); // 로그인 실패 if (!authResponse.ok) { return null } // 로그인 성공 const user = await authResponse.json(); console.log('user', user); // return user object with the their profile data return { ...user, name: user.nickname } }, }), ] }) @/app/(beforelogin)/_component/loginmodal.tsx 'use client'; import style from '@/app/(beforeLogin)/_component/login.module.scss'; import { useRouter } from 'next/navigation'; import { SubmitHandler, useForm } from 'react-hook-form'; // import { signIn } from '@/auth'; // 서버환경일 때 import { signIn } from 'next-auth/react'; // 클라이언트일 때 type formProps = { id: string, password: string, } export default function LoginModal() { const { register, handleSubmit, formState: { errors } } = useForm<formProps>(); const router = useRouter(); const onClickClose = () => { router.back(); // TODO: 뒤로가기가 /home이 아니면 /home으로 보내기 }; const onSubmit: SubmitHandler<formProps> = async (data: formProps) => { console.log(data); try { await signIn('credentials', { ...data, redirect: false }); router.replace('/home'); } catch(error) { console.error(error); console.log('아이디와 비밀번호가 일치히자 않습니다.'); } }; return ( <div className={style.modalBackground}> <div className={style.modal}> <div className={style.modalHeader}> <button className={style.closeButton} onClick={onClickClose}> <svg width={24} viewBox='0 0 24 24' aria-hidden='true' className='r-18jsvk2 r-4qtqp9 r-yyyyoo r-z80fyv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-19wmn03'> <g> <path d='M10.59 12L4.54 5.96l1.42-1.42L12 10.59l6.04-6.05 1.42 1.42L13.41 12l6.05 6.04-1.42 1.42L12 13.41l-6.04 6.05-1.42-1.42L10.59 12z'></path> </g> </svg> </button> <div>로그인하세요.</div> </div> <form onSubmit={handleSubmit(onSubmit)}> <div className={style.modalBody}> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor='id'> 아이디 </label> <input id='id' className={style.input} type='text' placeholder='' {...register('id', { required: '아이디를 입력해주세요.' })} /> {errors.id?.message && typeof errors.id.message === 'string' && <p>{errors.id.message}</p>} </div> <div className={style.inputDiv}> <label className={style.inputLabel} htmlFor='password'> 비밀번호 </label> <input id='password' className={style.input} type='password' placeholder='' {...register('password', { required: '비밀번호를 입력해주세요.' })} /> {errors.password?.message && typeof errors.password.message === 'string' && <p>{errors.password.message}</p>} </div> </div> <div className={style.modalFooter}> <button className={style.actionButton}>로그인하기</button> </div> </form> </div> </div> ); } @/app/(beforelogin)/page.tsx import Main from '@/app/(beforeLogin)/_component/Main'; import { auth } from '@/auth'; import { redirect } from 'next/navigation'; export default async function Home() { console.log('--------------before login home'); const session = await auth(); if (session?.user) { redirect('/home'); return null; } return ( <> <Main /> </> ); }

• react
• next.js
• react-query
• next-auth
• msw

tailwind 질문입니다.

미해결

Next + React Query로 SNS 서비스 만들기

테일윈드랑 비교하셨는데욥! tailwind는 결국 프레임워크이고 다른 css 는 직접 작성을 해야하니 목적이 다르다고 생각했는데요. css를 직접 작성하신 이유가있을까요?? 테일윈드를 쓰면 호불호가 있긴 하겠지만 강의특성상 css 를 빠르게 사용할수있다고 생각되어서요

• react
• next.js
• react-query
• next-auth
• msw

localhost:3000/qqq 안됩니다..

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

사이트에 연결할 수 없다라고 나옵니다.. 혹시 몰라 5000/qqq도 해봤는데.. 액세스 거부로 나오구요. 방화벽도 꺼져있습니다..ㅠ

• react
• node.js
• seo
• graphql
• next.js

앱라우터를 쓰면서 컴포넌트 분류가 궁금합니다...

미해결

Next + React Query로 SNS 서비스 만들기

제로초님 강의를 보면서 새롭게 페이지 작업을 하고 있는데 최다 클라이언트 컴포넌트로 작업이 되고 잇어서 고민이 됩니다. 예를들어 쇼핑몰의 상세페이지를 만드는데 좋아요나 판매하기 기타등등 여기에 써야하는 click이벤트 들때문에 서버컴포넌트를 쓰기는 애매해서 클라이언트 컴포넌트로 작업 중인데... 모든 컴포넌트들이 이런 상황입니다ㅠㅠ 혹시 클라이언트 컴포넌트와 서버컴포넌트를 나누는 기준 같은거 알수 잇을까요??

• react
• next.js
• react-query
• next-auth
• msw

서버 실행 실패

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

:: Spring Boot :: (v2.7.6)2024-05-14 22:36:58.248 INFO 26124 --- [ main] c.g.libraryapp.LibraryAppApplication : Starting LibraryAppApplication using Java 17.0.10 on chaenisnotebook with PID 26124 (C:\Users\chaye\Desktop\library-app\library-app\build\classes\java\main started by chaye in C:\Users\chaye\Desktop\library-app)2024-05-14 22:36:58.248 INFO 26124 --- [ main] c.g.libraryapp.LibraryAppApplication : No active profile set, falling back to 1 default profile: "default"2024-05-14 22:36:58.844 INFO 26124 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode.2024-05-14 22:36:58.928 INFO 26124 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 72 ms. Found 1 JPA repository interfaces.2024-05-14 22:36:59.414 INFO 26124 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8080 (http)2024-05-14 22:36:59.422 INFO 26124 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]2024-05-14 22:36:59.422 INFO 26124 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.69]2024-05-14 22:36:59.509 INFO 26124 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext2024-05-14 22:36:59.509 INFO 26124 --- [ main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 1231 ms2024-05-14 22:36:59.627 INFO 26124 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting...2024-05-14 22:36:59.864 INFO 26124 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed.2024-05-14 22:36:59.907 INFO 26124 --- [ main] o.hibernate.jpa.internal.util.LogHelper : HHH000204: Processing PersistenceUnitInfo [name: default]2024-05-14 22:36:59.978 INFO 26124 --- [ main] org.hibernate.Version : HHH000412: Hibernate ORM core version 5.6.14.Final2024-05-14 22:37:00.160 INFO 26124 --- [ main] o.hibernate.annotations.common.Version : HCANN000001: Hibernate Commons Annotations {5.1.2.Final}2024-05-14 22:37:00.248 INFO 26124 --- [ main] org.hibernate.dialect.Dialect : HHH000400: Using dialect: org.hibernate.dialect.MySQL8Dialect2024-05-14 22:37:00.694 INFO 26124 --- [ main] o.h.e.t.j.p.i.JtaPlatformInitiator : HHH000490: Using JtaPlatform implementation: [org.hibernate.engine.transaction.jta.platform.internal.NoJtaPlatform]2024-05-14 22:37:00.701 INFO 26124 --- [ main] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default'2024-05-14 22:37:00.967 WARN 26124 --- [ main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'userServiceV1' defined in file [C:\Users\chaye\Desktop\library-app\library-app\build\classes\java\main\com\group\libraryapp\service\user\UserServiceV1.class]: Unsatisfied dependency expressed through constructor parameter 0; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.group.libraryapp.repository.user.UserJdbcRepository' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {}2024-05-14 22:37:00.967 INFO 26124 --- [ main] j.LocalContainerEntityManagerFactoryBean : Closing JPA EntityManagerFactory for persistence unit 'default'2024-05-14 22:37:00.970 INFO 26124 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Shutdown initiated...2024-05-14 22:37:00.976 INFO 26124 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Shutdown completed.2024-05-14 22:37:00.977 INFO 26124 --- [ main] o.apache.catalina.core.StandardService : Stopping service [Tomcat]2024-05-14 22:37:00.988 INFO 26124 --- [ main] ConditionEvaluationReportLoggingListener : Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.2024-05-14 22:37:01.006 ERROR 26124 --- [ main] o.s.b.d.LoggingFailureAnalysisReporter : ***************************APPLICATION FAILED TO START***************************Description:Parameter 0 of constructor in com.group.libraryapp.service.user.UserServiceV1 required a bean of type 'com.group.libraryapp.repository.user.UserJdbcRepository' that could not be found.Action:Consider defining a bean of type 'com.group.libraryapp.repository.user.UserJdbcRepository' in your configuration.Process finished with exit code 1 계속 서버 실행 실패가 떠서 userConfiguration 클래스를 삭제 했는데도 해결이 안 됩니다 ㅠㅠ

• java
• spring
• aws
• mysql
• spring-boot
• jpa

next.config.js

미해결

Next + React Query로 SNS 서비스 만들기

next.config.js 파일이 아닌 next.config.mjs 파일이 생기는데 import 문을 사용하면 해결이 되는 것 같습니다. 그런데 기본적으로 js -> mjs파일이 셋팅되는 이유와 mjs파일을 그대로 쓰는게 나을지 js 파일로 사용하면 될지 궁금합니다.

• react
• next.js
• react-query
• next-auth
• msw

linkedList는 deque 구현체입니까? 아니면 list 구현체입니까?

미해결

김영한의 실전 자바 - 중급 2편

1. linkedList는 deque 구현체입니까? 아니면 list 구현체입니까? 만일 LIst 구현체인것도 있고 Deque구현체인것도 있으면 new LinkedList<>(); 했을때 부모로 덱과 리스트중 누구를 앞에 내세워야합니까? 강의에서 linkedList보다 ArrayList가 더 빠르다 하셨는데 그럼 LinkedList 를 쓰는 자리에는 ArrayDeque를 쓰는게 일반적입니까?

• java
• 객체지향
• 코딩-테스트
• 알고리즘

msw 실행 방식에 관해서

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 선생님 msw 방식에 대해서 강의해주신것과 다른 질문들을 보다가 궁금한게 생겨서 문의드립니다. 강의에서는 클라리언트 환경에서는 mockServiceWorker.js가 api(요청)를 가로채서, http.ts(서버)로 보낸다. 그리고 handlers.ts가 실행된다. 이렇게 말씀해주셨는데, 다른질문에서 msw express 서버는 next server에서 요청보내는 걸 모킹하는 것이고요. MSWComponent는 브라우저에서 요청을 보내는 걸 모킹하는 것 이런 답변을 보았습니다. 그렇다면 제가 이해하기로는 기본적으로는 아래와 같이 실행이 되는데, 클라리언트 환경에서는 mockServiceWorker.js가 api(요청)를 가로채서, http.ts(서버)로 보낸다. 그리고 handlers.ts가 실행 next server에서 요청받은 것은(ssr) createMiddleware에서 받아서 handlers로 보내고 클라이언트에서 요청받은 것은 MSWComponent에서 받아서, brwoser로 보낸다음에 handlers로 보낸다로 이해하면 될까요?

• react
• next.js
• react-query
• next-auth
• msw

영상이 검정색으로 화면이 안보여요...

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

영상 실행은 되는데 화면이 검정색으로 뜨고 아무것도 안보여용...어제만 해도 별문제 없엇는데 확장프로그램 문제인가 해서 사파리로도 들어갔는데 똑같이 어둡게 나오네요... 혹시 다른 강의도 그런가 하고 다른분 강의 켜봤는데 그분 강의는 잘 화면이 나오고 여기 해당 강의만 어둡게나와요! 근데 아이패드로 접속해서 틀면 제대로 나오는데.. 노트북에서 보고 싶은데 해결방법이 뭘까요... 추가적으로 강력새로고침해서 캐시도 지워보고 시크릿모드에서도 해보고 다해봤는데도 같은 현상입니다. 혹시해서 확장프로그램 삭제하고 노트북도 껏다 켜봤습니닥 ㅠㅠ...

• java
• spring
• aws
• mysql
• spring-boot
• jpa

스프링부트에서 게시글 등록(mp4 파일 포함)시 영상 바로 안보입니다.

미해결

현재 스프링부트에서 게시글을 등록하는 기능을 만들고 detail 페이지에서 등록한 내용을 확인할 수 있도록 설정했습니다. 게시글 제목, 내용, mp4 영상을 받도록 하고 있는데 게시글 등록 후 바로 detail 페이지에 들어가 확인하면 동영상이 보이지 않습니다. 그래서 경로가 잘못됐나 싶어서 페이지 소스 보기를 통해 확인해봤는데 경로도 정확하게 호출되고 있습니다. 그 후 서버 재실행 후 다시 확인해보니 그제서야 동영상이 보이고 있습니다. 이에 대한 해결 방법을 잘 모르겠습니다. 아래는 게시글 등록에 대한 컨트롤러 코드, 서비스 코드, html 코드입니다.

• spring
• spring-boot
• java

7장 스캐너 문제풀이3

미해결

김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음

[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. input.nextLine(); 이거말고 처음에 Scanner scanner = new Scanner( System.in ) 이걸 우연히 while 안에 넣어서 해도 되는걸 확인했는데 이런 방법은 좋은 방법이 아닌가요?

• java
• 객체지향

cropper 오류 문제로 질문드립니다..

미해결

스프링과 JPA 기반 웹 애플리케이션 개발

좋은 강의 덕분에 공부를 열심히 잘 하고 있습니다 선생님 감사드립니다. 다름이아니라 이번 강의 중 cropper 사용에서 똑같이 설치 후 이미지 파일을 불러오면 Uncaught TypeError: $newImage.cropper is not a function at reader.onload 지정된 함수가 아니라고 뜨는데 cropper가 안 먹혀서 그런 걸까요 ㅠㅠ..? 서치하고 코드를 계속 봐도 답이 나오지 않아 이렇게 질문 드립니다..

• java
• spring
• spring-boot
• jpa
• thymeleaf

modal에 intercept route를 사용하는 이유가 새로고침했을때를 위함인가요?

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 선생님. 수업을 듣다 궁금한게 생겨서 문의 드립니다. 모달창만 열려면 intercept를 쓰지 않고 패러렐 라우트에 일반라우트 폴더를 넣어도 작동하더라구요. (beforelogin)/@modal2/i/flow/login 하지만 새로고침때는 그 페이지를 찾을 수 없기에 not-found.tsx를 호출하는걸 확인했습니다. modal에 intercept route를 사용하는 이유가 새로고침했을때를 위함이라고 이해하면 될까요? 혹은 다른 추가적인 이유가 더 있는지 궁금합니다.

• react
• next.js
• react-query
• next-auth
• msw

ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out

미해결

[리뉴얼] React로 NodeBird SNS 만들기

nginx 부분을 따라하다가 실수로 서버에서 나갔다가 다시 들어가려니까 ssh: connect to host zzimzzim-front port 22: Connection timed out 위와같은 에러가나면서 갑자기 들어가지지 않습니다. 검색했는데도 해결되지 않아서 답답해다가 이럴땐 어떤걸 참고하면 좋을지 조언 주시면 감사하겠습니다. ㅠ

• react
• redux
• node.js
• express
• next.js

sudo certbot --nginx 에러

미해결

[리뉴얼] React로 NodeBird SNS 만들기

ubuntu@ip-172-31-37-191:~/react-nodebird/prepare/front$ sudo certbot --nginx Saving debug log to /var/log/letsencrypt/letsencrypt.log Which names would you like to activate HTTPS for? We recommend selecting either all domains, or all domains in a VirtualHost/server block. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: zzimzzim.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate numbers separated by commas and/or spaces, or leave input blank to select all options shown (Enter 'c' to cancel): Requesting a certificate for zzimzzim.com Certbot failed to authenticate some domains (authenticator: nginx). The Certificate Authority reported these problems: Domain: zzimzzim.com Type: connection Detail: 3.37.101.58: Fetching http://zzimzzim.com/.well-known/acme-challenge/SNUl0WTK7OKWJ-oYyHTrIFuh67ww_P11CUJXw2zWRZk: Timeout during connect (likely firewall problem) Hint: The Certificate Authority failed to verify the temporary nginx configuration changes made by Certbot. Ensure the listed domains point to this nginx server and that it is accessible from the internet. Some challenges have failed. Ask for help or search for solutions at https://community.letsencrypt.org. See the logfile /var/log/letsencrypt/letsencrypt.log or re-run Certbot with -v for more details. 위와같은 에러가 발생합니다. 다른 질문들을 보고 제로초님 https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 따라해보았는데 해결되지 않아서 여쭤봅니다.

• react
• redux
• node.js
• express
• next.js

vercel 배포했는데 잘 되다가 안들어가집니다.

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 제로초님 강의 잘 듣고있었는데, 강의 질문이 아니라 다른 질문이라 죄송합니다. 당장 다음주 월요일부터 심사가 시작되는 공모전에 나갈 프로젝트인데 잘 되던게 갑자기 안들어가져서요 ㅠㅠㅠㅠ 약 한달전에 배포 cicd 설정 다 해놓고 어제밤까지만해도 문제없이 잘 들어가졌는데 오늘 갑자기 안들어가지네요.. dns_probe_finished_nxdomain 이라고 뜬대요 근데 제 pc로는 캐시를 다 삭제하고 들어가도 잘 되거든요 근데 모바일에선 안되고 다른 사람은 안들어가진다고 하는데 원인이 뭘까요..? 제 pc에서도 크롬에서만 들어가지고 다른 브라우저는 안됩니다. 메일로 vercel에서 뭐 온것도 없습니다.. vercel 설정에서 domains에 문제도 없구요. 메일로 vercel에서 뭐 온것도 없습니다. 빌드 에러도 없구요 무료플랜이었어서 유료플랜으로 업그레이드 했는데도 똑같습니다.. ㅠㅠ 도메인이름은 공개적으로 못 적지만 개인적으로 알려드리겠습니다. ci/cd 되어있어서 main에 계속 push해봐도 빌드 잘 되는데 들어가지지를 않아요...

• next.js
• vercel
• dns
• domain

Minified React error 콘솔에러 (hydrate)

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 선생님 카카오톡 공유하기 까지 듣고 화면을 테스트해보고 있는데 Minified React error 이 에러가 떠서 질문드립니다. 메인화면, 상세보기에서 게시글이 있을때 나옵니다. Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at lg (framework-ecc4130bc7a58a64.js:9:46457) at i (framework-ecc4130bc7a58a64.js:9:121052) at oO (framework-ecc4130bc7a58a64.js:9:99019) at framework-ecc4130bc7a58a64.js:9:98886 at oF (framework-ecc4130bc7a58a64.js:9:98893) at oS (framework-ecc4130bc7a58a64.js:9:93932) at x (framework-ecc4130bc7a58a64.js:33:1364) at MessagePort.T (framework-ecc4130bc7a58a64.js:33:1894) 검색해봤더니 hydrate 쪽 이슈더라구요. 혼자서 풀어보다가 잘 풀리지 않아서 여쭤봅니다. 혹시 제로초님은 저런 에러가 나지 않으시는지 난다면 어느 로직을 확인해야할지 조언 부탁드립니다. /pages/post/[id].js import axios from 'axios'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useSelector } from 'react-redux'; import AppLayout from '../../components/AppLayout'; import PostCard from '../../components/PostCard'; import { loadPost } from '../../reducers/post'; import { loadMyInfo } from '../../reducers/user'; import wrapper from '../../store/configurStore'; const Post = () => { const router = useRouter(); const { id } = router.query; const { singlePost } = useSelector((state) => state.post); return ( <AppLayout> {singlePost ? ( <> <Head> <title> {singlePost?.User.nickname} 님의 글 </title> <meta name="description" content={singlePost.content} /> <meta property="og:title" content={`${singlePost.User.nickname}님의 게시글`} /> <meta property="og:description" content={singlePost.content} /> <meta property="og:image" content={ singlePost.Images[0] ? singlePost.Images[0].src : 'https://nodebird.com/favicon.ico' } /> <meta property="og:url" content={`https://nodebird.com/post/${id}`} /> </Head> <PostCard post={singlePost}>{id}번 게시글</PostCard> </> ) : ( <div>존재하지 않는 게시물입니다.</div> )} </AppLayout> ); }; export const getServerSideProps = wrapper.getServerSideProps( (store) => async ({ req, params }) => { const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; // 쿠키가 브라우저에 있는경우만 넣어서 실행 // (주의, 아래 조건이 없다면 다른 사람으로 로그인 될 수도 있음) if (req && cookie) { axios.defaults.headers.Cookie = cookie; } await store.dispatch(loadMyInfo()); await store.dispatch(loadPost(params.id)); }, ); export default Post; /components/PostCard.js import { RetweetOutlined, HeartOutlined, HeartTwoTone, MessageOutlined, EllipsisOutlined, } from '@ant-design/icons'; import { Card, Popover, Button, Avatar, List } from 'antd'; import dayjs from 'dayjs'; import Link from 'next/link'; import PropTypes from 'prop-types'; import { useState, useCallback, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import CommentForm from './CommentForm'; import Followbutton from './FollowButton'; import PostCardContent from './PostCardContent'; import PostImages from './PostImages'; import { removePostRequestAction, likePostRequestAction, unLikePostRequestAction, retweetRequestAction, } from '../reducers/post'; dayjs.locale('ko'); const PostCard = ({ post }) => { // const { me: {id} } = useSelector((state) => state.user); // const id = me && me.id; // const id = me?.id; // 옵셔널 체이닝 연산자 const { removePostLoading } = useSelector((state) => state.post); const dispatch = useDispatch(); const [commentFormOpend, setCommentFormOpend] = useState(false); const id = useSelector((state) => state.user.me?.id); const liked = post.Likers.find((d) => d.id === id); const onLike = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(likePostRequestAction(post.id)); }, [id]); const onUnLike = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(unLikePostRequestAction(post.id)); }, [id]); const onToggleComment = useCallback(() => { setCommentFormOpend((prev) => !prev); }, []); const onRemovePost = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(removePostRequestAction({ id: post.id })); }, [id]); const onRetweet = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(retweetRequestAction(post.id)); }, [id]); return ( <div style={{ marginTop: 10 }}> <Card cover={post.Images[0] && <PostImages images={post.Images} />} actions={[ // 배열안에 들어가는 것들은 다 key를 넣어줘야 한다. <RetweetOutlined key="retweet" onClick={onRetweet} />, liked ? ( <HeartTwoTone key="heart" twoToneColor="#eb2f96" onClick={onUnLike} /> ) : ( <HeartOutlined key="heart" onClick={onLike} /> ), <MessageOutlined key="comment" onClick={onToggleComment} />, <Popover key="more" content={ <Button.Group> {id && post.User?.id === id ? ( <> <Button type="primary" key="modify"> 수정 </Button> <Button type="danger" key="delete" onClick={onRemovePost} loading={removePostLoading} > 삭제 </Button> </> ) : ( <Button type="dashed" key="report"> 신고 </Button> )} </Button.Group> } > <EllipsisOutlined /> </Popover>, ]} extra={id && <Followbutton post={post} />} title={ post.RetweetId ? `${post.User.nickname}님이 리트윗하셨습니다.` : null } > {post.RetweetId && post.Retweet ? ( <Card cover={ post.Retweet.Images[0] && ( <PostImages images={post.Retweet.Images} /> ) } > <div style={{ float: 'right' }}> {dayjs(post.createdAt).format('YYYY.MM.DD')} </div> <Card.Meta avatar={ <Link href={`/user/${post.Retweet.User.id}`}> <Avatar>{post.Retweet.User?.nickname[0]}</Avatar> </Link> } title={post.Retweet.User?.nickname} description={<PostCardContent postData={post.Retweet.content} />} /> </Card> ) : ( <> <div style={{ float: 'right' }}> {dayjs(post.createdAt).format('YYYY.MM.DD')} </div> <Card.Meta avatar={ <Link href={`/user/${post.User.id}`}> <Avatar>{post.User?.nickname[0]}</Avatar> </Link> } title={post.User?.nickname} description={<PostCardContent postData={post.content} />} /> </> )} </Card> {commentFormOpend && ( <div> {/* 게시글의 아이디 위해서 post 넘겨줌 */} <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( <List.Item key={item.id}> <List.Item.Meta title={item.User.nickname} avatar={ <Link href={`/user/${item.User.id}`}> <Avatar>{item.User.nickname[0]}</Avatar> </Link> } description={item.content} /> </List.Item> )} /> </div> )} </div> ); }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.string, Comments: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), Likers: PropTypes.arrayOf(PropTypes.object), RetweetId: PropTypes.number, Retweet: PropTypes.objectOf(PropTypes.any), }).isRequired, }; export default PostCard; 여유되실때 한번 봐주시면 감사하겠습니다

• react
• redux
• node.js
• express
• next.js

카카오 공유했을 때 이전에 작성했던 글이 나오는 버그

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 선생님 보너스 강의 전까지 보고 카카오 공유하기 까지 테스트하고 있는데 버그를 발견한것 같아서 어떻게 해결할지 여쭤보려 올립니다. 위처럼 post/5의 게시글을 작성하고 카카오톡에 공유를 하면 이전에 썼던 (로컬에서 썼었던) 내용이 보여집니다. 혹시 기존 데이터베이스를 리셋하거나 추가적인 작업이 필요한건지 궁금합니다.

• react
• redux
• node.js
• express
• next.js

MVC와 API의 차이점

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

안녕하세요 강사님!! 다름이 아니라 공부를 하다가 MVC와 API의 차이점(?)에 대해 알아보게 되었습니다! 그래서 내린 결론이 Spring MVC구조의 @Controller는 컨트롤러의 리턴값이 ViewResolver에 의해 해석되어서 특정 View가 html응답으로 전송된다. 반면 REST API구조의 @RestController에 의한 호출은 View를 리턴하는 것이 목적이 아닌, 데이터를 전송하는 것을 목적으로 응답이 전송되어 진다. 라고 내렸습니다. 첫번째로, 위에서 제가 내린 결론이 맞는 말인지와 두번째로, 그럼 MVC를 쓰는 경우와 API를 쓰는 경우가 언제인지가 궁금합니다. 제가 아직 개념이 부족해서 그런건지는 몰라도 MVC를 쓰면 프론트엔드의 역할이 없어지는게(?) 아닌가 하는 착각이 들어서... 답변 부탁드리겠습니다!!

• java
• spring
• aws
• mysql
• spring-boot
• jpa

검색어 입력 후 초기화하는 방법 궁금합니다!

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

안녕하세요. 강의 수강 중에 추가적으로 구현하고 싶은 기능이 있는데 어떻게 해야할지 모르겠어서.. 질문 남깁니다. 검색창에 검색어를 입력하면 SearchPage에 관련 영화 포스터들이 나오고 그 중에 하나를 클릭해서 영화 상세 페이지(DetailPage)로 이동했을 때 검색창을 초기화하고 싶은데 어떻게 해야 하는지 궁금합니다.

• react
• redux
• tdd
• typescript
• next.js
• 소프트웨어-테스트