묻고 답해요

prefetch를 꼭 써서 환경을 만들어야하나요?

미해결

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

prefetch를 꼭 써야하는 건가요? 써야할 때와 안써도 될 때가 있는건가요??

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

react-query ssr설정

미해결

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

react-query ssr 설정하기인데 어느 부분이 ssr 설정인지 잘모르겠습니다 어느부분인가요?? export async function getPostRecommends({ pageParam }: Props) { const res = await fetch( `http://localhost:9090/api/postRecommends?cursor=${pageParam}`, { next: { tags: ["posts", "recommends"], }, } ); // The return value is *not* serialized // You can return Date, Map, Set, etc. if (!res.ok) { // This will activate the closest `error.js` Error Boundary throw new Error("Failed to fetch data"); } return res.json(); }

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

JAVA Scanner

미해결

package bufferTest; import java.util.Scanner; public class BufferTest { public static void main(String[] args) { Scanner scan = new Scanner(System.in); String a = scan.next(); String[] arr1 = {"a"}; System.out.println(System.identityHashCode(a)); System.out.println(System.identityHashCode(arr1[0])); } } 왜 arr[0]과 a의 주소 값이 다른가요..??? 답변 주시면 정말 감사하겠습니다!

• java
• scanner

7분 45초쯤에 쿼리키 잘 짜는 법 관련하여 문의합니다.

해결됨

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

조금 있다가 잘 짜는법에 대해 설명한다 하였는데, 제가 놓친것인지 다음강의에 나오는 내용인지 못들은 기분입니다. 일단 다음 강의 보다가 까먹고 놓치지 않기 위해 문의합니다. 우선 앞에 ""으로 표기한것은 함수 이름 설정하듯이 자기가 의도한대로 넣을 수 있고 몇개를 입력하든 상관 없는 것인가요? params 같은 경우는 마지막에 한번만 객체나 특정 타입 형식으로 넣을 수 있는 것인가요? 추가적으로 export default function SearchResult({searchParams}:Props){ ... 에서 searchParams가 객체로 한번 더 묶여서 정의되어 들어가는 이유는 그냥 편의상 그런 것일까요? type SearchParams= { q: .....} 로 정의하고 export default function SearchResult(searchParams:SearchParams){ ... 같은 식으로 넣어도 문제 없이 진행할 수 있는지, 아니면 {}객체로 한번 더 묶는 이유가 있는 것인지 궁금합니다.

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

4분50초 쯤부터 5분대에서

해결됨

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

강의이기 때문에 react-queary, zustand, context.API 세가지를 보여주지만 실제로는 하나만 쓰면 된다하여서 처음 강의에 나오던 context.API로만으로 코드를 짜려고 다른 것들은 대충 넘겨 들었는데요. 어느정도 코드 짜보다가 react-query 부분을 다시 듣고나서보니 react-query는 또 느낌이 다른것 같네요. 그런데 혹시 서버액션 쪽에서 첫번째 동작 이후에 쓰로틀이 들어가게 코드를 짜두면 context내의 서버 데이터 갱신할 때도 react-queary의 stale 같은 기능을 만들 수 있는 거겠죠? 해당 기능은 그렇게 구현한다고 하여도, 지금 앞뒤로 강의 다시 들어보니 캐싱 관리같은건 또 다른 차원이거 같아서 결국에 react-queary를 병행해야만 하는건가 싶네요. 다른 질문 답변을 보니 강사님도 react-queary는 데이터 패칭용으로 다른 상태관리 라이브러리와 병행해서 쓰시는것 같고요.

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

api

해결됨

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

api란 개념을 잘 모르겠습니다. 그냥 controller에서 mapping하는 것이 api 인가요? 1편에서 만들었던 @GetMapping("/members/new") public String createForm(Model model) {...} 이런 코드들도 각각 api라 하는 것인가요?

• java
• spring
• spring-boot
• jpa

Entity에 toJSON 코드 입력 후 404 에러

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

Entity.ts에 추가한 toJSON() { return instanceToPlain(this); } 이 코드가 들어가면 404에러가 뜹니다. 저 코드를 빼면 돌아가긴 합니다만 이미지(아바타)가 안보이고요.. 그리고 이런 에러가 나서 구글링 한 후 config를 이렇게 바꿨는데, 이게 문제인가.. 싶기도 하고요.. 너무 궁금한데 제발 꼭 좀 아시는 분 답변 부탁드려요

• react
• node.js
• postgresql
• docker
• typescript
• 클론코딩
• next.js

라이브러리 질문드립니다.

미해결

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

안녕하세요 선생님 강좌를 듣다가 궁금한게 생겨서 질문드립니다. 사진을 첨부했는데요, 사진처럼 현재 작성하지도 않은 타입을 회색글씨로 미리 보여주는? 라이브러리 같은데 이름을 알고싶습니다. 수업 내용에 관한 질문이 아니라 죄송합니다.

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

[인피니트 스크롤링 강좌] prefetchInfiniteQuery에 전달되는 queryFn과 useInfiniteQuery에 전달되는 queryFn을 항상 똑같이 설정해야 되나요??

해결됨

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

안녕하세요 ! 강의를 보다가 궁금한 부분이 생겨서 질문 드립니다 ! 상위 QueryProvider를 만들 때 ReactQueryStreamedHydration로 미리 감싸면 강의에서 소개 해준 dehydrate(queryClient)로 감싸는 작업을 하지 않아도 되나요? <QueryClientProvider client={client}> <ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration> </QueryClientProvider> dehydrate와 HydrateBoundary가 정확히 어떤 역활을 하는지 궁금합니다 const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <MoreListView keyword={keyword} /> </HydrationBoundary> ); prefetchInfiniteQuery의 queryFn과 useInfiniteQuery의 queryFn은 똑같이 작성해야 하나요?? 만약 이렇게 하면 안된다면 전달하고자 하는 매개변수를 client component에서 전달하고자 할 때 어떻게 해야할 지 고민이 됩니다. (전달하는 상태 값은 useContext로 만든 상태 값입니다..) // prefetch 부분 const queryClient = new QueryClient(); await queryClient.prefetchInfiniteQuery({ queryFn: fetchMoreList, }); // client component 부분 useInfiniteQuery<Dummy[], Object, InfiniteData<Dummy[]>, [_1: string, _2: string], number>({ queryFn: ({ pageParam, queryKey }) => fetchMoreList({ pageParam, queryKey, sort }), });

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

css.ts 파일은 어디에 만드는게 좋아요?

미해결

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

style 폴더를 따로 만들어서 관리해도 되나요?

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

not-found.tsx로 이동을 하지 않는문제

해결됨

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

안녕하세요 src>app>not-found.tsx에 만들었는데, 잘못된주소로 갈 경우 커스터한 NotFound가 렌더링되지않는 문제가 있습니다.. 혹시 따로 경로설정을 해야하는것일까요??

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

api에 대해서

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

지난 강의 JPA 활용 1편을 듣고왔는데요, API를 개발하는 이유와 의미가 무엇인가요?

• java
• spring
• spring-boot
• jpa

styles.container 적용이 되지 않습니다.

미해결

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

page.tsx에서 Fragment를 사용해서 left와 right를 감싸주셨는데 이 때, page.module.css의 .container 스타일이 자동으로 적용이 되는 건가요 ?? export default function Main() { return ( <> <div className={styles.left}> {/* Image -> 넥스트가 알아서 이미지 최적화 시켜줌 */} <Image src={zLogo} alt="logo" /> </div> <div className={styles.right}> <h1>지금 일어나고 있는 일</h1> <h2>지금 가입하세요.</h2> {/* a 태그 대신 Link 사용 -> 페이지가 새로고침 되어 넘어감, 리액트나 넥스트에서는 새로고침 되는 행동 X*/} <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기 </Link> </div> </> ); } 저는 코드를 똑같이 작성 했는데도 이렇게 다른 스타일이 적용되어 column 형식으로 나누어져 보입니다. 그래서 직접적으로 스타일을 적용시키기 위해 export default function Main() { return ( <div className={styles.container}> <div className={styles.left}> {/* Image -> 넥스트가 알아서 이미지 최적화 시켜줌 */} <Image src={zLogo} alt="logo" /> </div> <div className={styles.right}> <h1>지금 일어나고 있는 일</h1> <h2>지금 가입하세요.</h2> {/* a 태그 대신 Link 사용 -> 페이지가 새로고침 되어 넘어감, 리액트나 넥스트에서는 새로고침 되는 행동 X*/} <Link href="/i/flow/signup" className={styles.signup}> 계정 만들기 </Link> </div> </div> ); } 이렇게 최상위 div에 className으로 container를 지정해주었는데 구조가 이런식으로 변경이 되었고, right의 내용이 다 나타나지 않아서 적용이 잘 된 것 같진 않는데 어떻게 해결하면 될까요 ?

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

백엔드 토큰 저장 위치

미해결

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

안녕하세요 제로초님! 1) 백엔드에 데이터 요청 시 필요한 쿠키(로그인 후 발급되는 액세스토큰)을 브라우저에 저장해서 사용해야한다고 하셨고, 저 또한 이전에 리액트로만 개발했을 때 그렇게 진행했었는데요, next.js가 아직 서툴고 next-auth의 역할이 완전이 이해가 되지 않아서 조금 헷갈리는 부분이 있습니다. 저는 백엔드에서 발급해준 액세스토큰을 auth.ts jwt callbacks를 통해 user값에서 가져와 token에 저장한 뒤, session callbacks에서 이 token을 session에 저장해 놓았고 만료된 토큰 갱신하는 로직까지 callbacks에서 설정해놓았는데요. 이렇게 구현을 해도 되는 건가요? 보안에 문제가 있을까요? 만약 쿠키에 저장해서 사용하는 방식으로 바꿔야한다면 만료된 토큰의 갱신처리 즉 refreshToken요청 코드는 어디에 작성을 해야하나요..? (리액트에서는 axios를 사용해서 axios.interceptor.response에서 401 jwt만료 에러가 발생시에 refreshtoken을 요청하는 방식으로 구현했었습니다.) 2) 그리고 회원가입과 같은 POST 요청시에 form action을 이용해 server action을 사용하는 것과 form onsubmit으로 post 요청하는 것과 어떤 차이가 있는 건가요..? server action으로 post 요청시 넘겨주는 formData를 찍어보면 JSON형식이 아니라 백엔드에서 type오류가 넘어오는데 server action을 사용하려면 백엔드도 같이 설정을 해줘야하나요?

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

로그인시에 response의 성공 유무를 떠나 await되는 이유

해결됨

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

안녕하세요 제로초님 강의 수강중에 질문이 있어서요 강의에 10분08초를 확인해보시면 response가 성공 실패 유무를 떠나서 await되버려서 catch로 넘어가지 않는 이유는 무엇일까요 ? 로그인모달은 클라이언트에서 처리하고 회원가입은 서버액션으로 처리한다는 설명을 영상 후반부에 해주셨는데 이러한 경우와 연관이 있는 걸까요 ? 구글링해도 잘 확인이 안되어서요! 항상 감사합니다.

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

refresh token rotation 오류

미해결

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

안녕하세요 제로초님! 로그인 관련하여 질문드립니다! 1) 백엔드에서 response로 넘겨주는 access token이 있어서 이걸 session에 넣어 api 요청할 때마다 헤더에 담아 인증 하려고 하는데요, 로그인 후 next-auth signIn함수를 통해 자동으로 authjs.session-token이 생성되는데 그럼 이 토큰은 언제 쓰이는 건가요? 백엔드에서 넘겨주는 토큰이 있어도 next-auth를 사용해도 되는 건가요? 2) 로그인 기능과 관련해서 https://next-auth.js.org/v3/tutorials/refresh-token-rotation 를 참고해 토큰 갱신 로직을 jwt callbacks 안에 구현을 해보았습니다. client 에서 session을 호출할 때마다 jwt callback이 실행되기 때문에 로그인 시 저장해 놓은 토큰(accesstoken)이 만료되었는지를 확인할 수 있다고 생각했고 위처럼 구현했습니다. 토큰이 만료가 되면 retun token대신 refreshAccessToken(token) 함수를 호출해 새로운 토큰을 return 해주었고, response도 정상적으로 옵니다. 다만 jwt callback이 동시간대에 한번만 실행되는 것이 아니라 여러번 실행이 되고 있고, session callback에서도 업데이트된 token이 확인될거라 생각했지만, session callback에서는 예전 토큰이 조회가 되는 상황입니다. next-auth callbacks가 jwt -> session 순으로 호출되는 것으로 알고 있어서 jwt에서 업데이트된 token을 리턴해주면 session에서 이를 받을 거라고 생각했는데.. 왜 업데이트가 되지 않는 건지 궁금합니다.

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

버튼 클릭 시 페이지가 로드되지 않는 문제 해결 방법 질문

미해결

개요 로그인 성공 후 인덱스 페이지로 넘어갑니다. 인덱스 페이지에는 "테스트 버튼" 이라는 버튼을 클릭하면, test 로드하는 api 를 호출하도록 했습니다. 그러나 api 요청만 진행되고, 페이지는 바뀌지 않습니다. 개발자도구 메시지에 해당 페이지의 html 코드만 출력됩니다. 참고자료 index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>인덱스 페이지</title> <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> </head> <body> <h1>환영합니다!</h1> <p>성공적으로 로그인하셨습니다.</p> <button id="logoutButton">로그아웃</button> <button id="testButton">테스트 버튼</button> <script> $(document).ready(function() { // 로그아웃 버튼 이벤트 $('#logoutButton').click(function() { // 로컬 스토리지에서 토큰 제거 localStorage.removeItem('accessToken'); // 로그인 페이지로 리다이렉션 window.location.href = '/login'; }); // 테스트 버튼 이벤트 $('#testButton').click(function() { // 로컬 스토리지에서 토큰 가져오기 const token = localStorage.getItem('accessToken'); if (token) { $.ajax({ url: '/api/test', // 요청할 서버의 URL type: 'GET', // HTTP 메서드 beforeSend: function(xhr) { // 요청 헤더에 토큰 추가 xhr.setRequestHeader('Authorization', token); }, success: function(data) { // 요청 성공 시 로직 console.log("테스트 요청 성공:", data); alert("테스트 요청 성공"); }, error: function(xhr, status, error) { // 요청 실패 시 로직 console.error("테스트 요청 실패:", xhr.responseText); alert("테스트 요청 실패"); } }); } else { alert("토큰이 없습니다. 다시 로그인해주세요."); } }); }); </script> </body> </html> 보이는 것처럼 로컬 스토리지에서 토큰을 가져온 후 요청 헤더에 다시 담아서 전송합니다. JwtAuthorizationFilter @Override protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain filterChain) throws ServletException, IOException { // 헤더에서 토큰 추출 log.info("헤더에서 토큰 추출"); String tokenValue = jwtUtil.getJwtFromHeader(req); log.info("토큰 : " + tokenValue); if (StringUtils.hasText(tokenValue)) { // 토큰 유효성 검사 if (!jwtUtil.validateToken(tokenValue)) { log.info("Token Error"); return; } Claims info = jwtUtil.getUserInfoFromToken(tokenValue); try { setAuthentication(info.getSubject()); } catch (Exception e) { log.error(e.getMessage()); return; } } else { log.info("토큰이 없습니다."); } filterChain.doFilter(req, res); } // 인증 처리 public void setAuthentication(String loginId) { log.info("인증 성공"); SecurityContext context = SecurityContextHolder.createEmptyContext(); Authentication authentication = createAuthentication(loginId); context.setAuthentication(authentication); SecurityContextHolder.setContext(context); } // 인증 객체 생성 private Authentication createAuthentication(String loginId) { log.info("인증 객체 생성"); UserDetails userDetails = userDetailsService.loadUserByUsername(loginId); return new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities()); } 이렇게 JwtAuthorizationFilter 가 있을 때 헤더에서 토큰이 추출되는 거까지 로그에 다 출력되고, 인증 객체까지 생성되는 걸 확인했습니다. Console 2024-02-26T14:31:24.699+09:00 INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가 : 토큰 : eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0ZXN0NiIsImF1dGgiOiJPV05FUiIsImlhdCI6MTcwODkyNDY0NiwiZXhwIjoxNzA4OTI4MjQ2fQ.TLjHCc1_ZtTbzGb-2c0ueLmxgCyxQf1rUQs4DkqMv_c 2024-02-26T14:31:24.706+09:00 INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가 : 인증 성공 2024-02-26T14:31:24.706+09:00 INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가 : 인증 객체 생성 Hibernate: /* <criteria> */ select u1_0.id, u1_0.email, u1_0.login_id, u1_0.password, u1_0.role from users u1_0 where u1_0.login_id=? 2024-02-26T14:31:24.722+09:00 INFO 59767 --- [nio-8081-exec-3] TestController : test controller 로그를 보면 test controller 를 호출하는 거까지 확인할 수 있었습니다. 그러나 페이지는 로드되지 않고, 메시지에 html 코드만 출력이 됩니다. 자료 Test.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> <title>Test Page</title> </head> <body> <h1>This is a test page.</h1> </body> </html> 정리 로그인 성공 후 인덱스 페이지로 넘어감 해당 인덱스 페이지에서 test 페이지로 넘어가고자 함 인가 필터 모두 거치고, 토큰 값이 전달되는 거까지 확인했음 test controller 까지 요청되지만, 정작 페이지는 불러와지지 않음 대체 제가 뭘 놓친 걸까요 ㅠㅠㅠㅠ 이거때문에 며칠 동안 머리 싸매고 있습니다,,, 제발 도와주세요,,,

• java
• spring
• jwt
• secuity
• javascript
• mvc

조회수 증가 관련 질문 있습니다.

미해결

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

제가 블로그를 만들어 보고 잇는데 해당 게시물을 보면 조회수가 증가하는데 같은 ip일경우에는 30분을 기준으로 조회수가 증가하게 작업을 하려고 합니다. 이때 제가 게시물 조회시 ip와 해당 게시물의 id를 저장하는 테이블을 만들어서 작업을 해보려는데 이때 ip만 db상에서 암호화 한다면 보안상으로 안전할까요??

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

자바 스프링부트 버전 선택

미해결

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

스프링부트 버전이 2.7x 버전은 없는데 무엇으로 선택해야 하나요?

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

이미지 업로드 질문

해결됨

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

ex) pages/section19/19-04-image-with-board/index.tsx // ... export default function ImageUploadPage(): JSX.Element { // ... const onChangeFile = async ( e: ChangeEvent<HTMLInputElement>, ): Promise<void> => { const file = e.target.files?.[0]; console.log(file); const isValid = checkValidationFile(file); if (!isValid) return; const result = await uploadFile({ variables: { file, }, }); console.log(result.data?.uploadFile.url); setImgUrl(result.data?.uploadFile.url ?? ""); }; // ... } 이렇게 이미지를 선택하기만 해도 uploadFile 함수로 인해 storage에 이미지파일이 저장되어 주소를 받아오 것으로 이해하고 있는데 이 상태에서 새로고침을 하거나 사이트 꺼버리면 storage에 이미지파일은 그대로 저장된 채로 유기되어 용량이 낭비되는 것이 아닌가 하는 의문이 들었습니다. 그렇지 않다면 상관없지만 이렇게 선택만하고 중단할 경우 이미 storage에 저장된 이미지가 자동으로 삭제되지는 않을 것 같고 useEffect의 return 안에 입력정보가 DB에 저장되지 않은 채로 사이트가 꺼지거나 새로고침되면 storage에 선택만 했던 이미지를 지우도록 조건문으로 코드를 작성해주면 storage의 용량이 낭비되는 문제를 해결할 수 있지 않을까요?? 혹은 더 옳바른 방법이 있는지, 제가 잘못 이해하고 있는지, 그리고 제가 말한 방법대로 또는 강사님이 생각하시는 더 옳바른 방법으로 코드를 작성하게 됐을 때의 예시 코드를 보여주시면 감사드리겠습니다.

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