172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
제목과 같이 componets 들에 Sidebar , Header 등은 tsx 로 하지않고 jsx 로 하신 이유가 있나요 ?? ㅎ
해결됨
Next + React Query로 SNS 서비스 만들기
getFollowingPosts 호출 시 내 게시글들이 불러와집니다. credentials: 'include' 제대로 넣어줬는데 원인을 모르겠습니다. 무한스크롤은 적용했고 팔로잉은 아직 없는 상태입니다. getFollowingPosts type Props = { pageParam?: number; }; export async function getFollowingPosts({ pageParam }: Props) { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/followings?cursor=${pageParam}`, { next: { tags: ['posts', 'followings'], }, credentials: 'include', cache: 'no-store', }, ); if (!response.ok) { throw new Error('Failed to fetch data'); } return response.json(); } FollowingPosts 'use client'; import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query'; import { getFollowingPosts } from '../_lib/getFollowingPosts'; import Post from '../../_components/post'; import type { Post as IPost } from '@/model/post'; import { useInView } from 'react-intersection-observer'; import { Fragment, useEffect } from 'react'; export default function FollowingPosts() { const { data, fetchNextPage, hasNextPage, isFetching } = useInfiniteQuery< IPost[], Object, InfiniteData<IPost[]>, [_1: string, _2: string], number >({ queryKey: ['posts', 'followings'], queryFn: getFollowingPosts, initialPageParam: 0, // required getNextPageParam: (lastPage) => lastPage.at(-1)?.postId, // required staleTime: 60 * 1000, gcTime: 300 * 1000, }); const { ref, inView } = useInView({ threshold: 0, delay: 0, }); useEffect(() => { //. inView: ref가 화면에 보일 때 //. !isFetching: 패칭상태 아닐때 (중복 패칭 방지) //. hasNextPage: 다음 페이지가 있을 때 console.log('useEffect', { inView, isFetching, hasNextPage }); if (inView && !isFetching && hasNextPage) { fetchNextPage(); } }, [inView, isFetching, hasNextPage, fetchNextPage]); return data?.pages.map((page, index) => ( <Fragment key={`posts-followings-page-${index}`}> {page.map((post) => ( <Post key={post.postId} post={post} /> ))} {!isFetching && <div ref={ref} style={{ height: 50 }}></div>} {isFetching && <div style={{ height: 50 }}></div>} </Fragment> )); } response에는 내 게시글들이 담겨옵니다 서버쪽 PostsService findAll 콘솔 찍어보면 유저정보 제대로 받아옵니다 { cursor: 0, type: 'followings', user: { id: 'asdf', nickname: '슈퍼맨', image: '/upload/dummy1719568724038.png' } }
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. Hibernate: drop table if exists member Hibernate: create table member ( id bigint not null auto_increment, username varchar(255), primary key (id) ) engine=InnoDB Hibernate: insert into member (username) values (?) insert시에 id 값이 보이지 않는 이유가 무엇일까요 ㅠㅠ 파라미터는 id, username 2개가 나와야 하는데 1개만 나와서 질문 드립니다. spring.jpa.properties.hibernate.show_sql=true spring.jpa.properties.hibernate.format_sql=true spring.jpa.properties.hibernate.type=trace p6spy도 똑같이 하나만 나오더라구요
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 선생님강의 따라서 로그인을 구현했습니다. auth에서 관리해주는 세션으로는 프론트용, 로그인 후 내려주는 connect.id 세션으로는 백엔드용, 으로 사용했습니다. 그런데 궁금한게 로그인을 하고 기간이 지나거나 그런 경우를 대비해서 엑세스토큰, 리프레시 토큰을 많이 사용하는 것을 보았는데 선생님은 넥스트에서 어떤 방식을 사용하시는지, 어떤방식을 추천하시는지 궁금합니다. 검색해보니까 엑세스토큰이 아닌 쿠키세션으로 사용할때에는 일정시간 inter시켜주고 특정시간지나면 쿠키시간을 업데이트해주기도 하더라구요. 선생님 조언이 궁금합니다. 감사합니다.
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
정답이랑은 크게 상관없지만...
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 왜 에러가 나는 걸 까요? 그리고 강사님과 창이 다르게 뜨는데 어떻게 설정해야하나요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위와 같이 작성하여 요청하였을 때 이러한 에러가 나타납니다 무엇이 문제일까요?
해결됨
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. [질문 내용] 오류 내용 application.yml Member MemberRepository MemberRepositoryTest Mysql 접속으로 변경 ddl-auto: create @GeneratedValue 위와 같은 조건으로 수행했는데 usermember_seq 테이블을 생성하지 못하고 존재 하지 않는 다는 오류가 발생합니다. 고민고민 하다 도저히 찾을수 없어 질문 드립니다.
해결됨
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
제가 배웠던 JPA는 Member를 예로 들면 public interface MemberRepository extends JpaRepository<Member, Long> 이런 식으로 JpaRepository를 상속받아서 쓰는 것이었는데, 영한님 강의 초반부 수강 중인데 이런 내용이 없더라구요..! 강의 뒷부분에 이런 내용이 나오나요? 아니면 이 방식은 사용하지 않으시나요?
미해결
자바(Java) 알고리즘 문제풀이 입문: 코딩테스트 대비
우선 설명해주신 방법을 이해하였는데 강의를 듣기전 혼자 풀어본 방법으로는 주어진 알파벳의 위치를 담는 list를 만들어 넣어 놓고 이후에 문자에서 해당 알파벳이 아니면 그 문자의 위치가 리스트의 위치에 해당하는 값과의 차를 구하여 절대값을 씌워 구하게 하였습니다. 문제는 채점중 2번 문제가 런타임 에러가 나오는데 어느 부분에서 문제가 되는지 알고 싶습니다! import java.util.*; public class Main { public static void main(String[] args) { Scanner in=new Scanner(System.in); String word = in.next(); Character standard = in.next().charAt(0); List<Integer> position = new ArrayList<>(); for (int i=0; i<word.length(); i++){ if(word.charAt(i) == standard) position.add(i); } int lf = 0; String result = ""; int check = 0; for(int i=0; i<word.length(); i++){ if(word.charAt(i) == standard) { result += "0"; if(check != 0) lf++; check = 1; } else{ int left = Math.abs(position.get(lf)-i); int right = Math.abs(position.get(lf+1)-i); if(left>right) result += right; else result += left; } if(i == word.length()-1) break; else result += " "; } System.out.println(result); } }
해결됨
자바 개발자를 위한 코틀린 입문(Java to Kotlin Starter Guide)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 먼저, 좋은 강의를 만들어주셔서 감사합니다. 잘 이해가 되지 않는 부분이 있습니다. Accessing non-final property number in constructor가 발생하는 이유를 다음과 같이 정리해보았는데 맞을까요?? 하위 클래스(Derived)를 인스턴스화하면서 상속받고 있는 상위 클래스(Base)가 먼저 생성 된다. init 블럭이 생성자보다 먼저 호출 되므로, init 블럭에서 프로퍼티에 접근하면 초기화되지 않은 기본값을 갖는다. init 블럭이 호출되고 하위 클래스에서 전달한 값이 상위 클래스 생성자에 있는 프로퍼티 값으로 초기화된다. 하위 클래스의 init 블럭이 호출될 때, number 프로퍼티 값은 상위 클래스가 갖는 number 프로퍼티 값을 출력 한다. "Accessing non-final property number in constructor 가 경고창이 드는 이유는 init 블럭에서 초기화되지 않은 number 프로퍼티에 접근했기 때문이다." 라고 정리하면 될까요?! 감사합니다. open class Base( open val number: Int = 100 ) { init { println("Base Class") /** * 호출 순서 : init 블럭 -> 생성자 * 따라서 init 블럭에서 number 프로퍼티에 접근하면 초기화되지 않은 초기값인 0을 갖게 된다. */ println("Base Class number ${number}") } } class Derived( override val number: Int ): Base(number) { init { println("Derived Class") println("Derived Class number : ${number}") } }
해결됨
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
안녕하세요 엔티티 연관관계에대해 공부하던 중 질문이 생겨 글 남깁니다! Order에서 주문이 들어가면 Item에있는 stockQueantity가 하나씩 줄어든다고 했는데 OrderItem->Item의 단방향 연관관계이면 Item에서는 어떤게 주문이 들어갔는지 어떻게 알고 하나씩 줄어드나요??
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] getName()이 왜 에러가 뜨는 것일까요? 아무리 찾아봐도 모르겠어요... 요
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
플러그인이나 단축키가 따로 있는지 기존에 작성하신 코드 복사 붙여넣기인지 궁금합니다.
해결됨
실전! 스프링 데이터 JPA
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 아니오 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 아니오 [질문 내용] implementation, compileOnly, runtimeOnly 등 각각이 어떻게 작동하는지와 어떤 경우에 어떤 라이브러리를 어떤 방식으로 등록하는지에 대한 설명이 없는것 같아서 조금 아쉬운 마음입니다. 혹시 새로운 강의에서는 좀 더 디테일한 설명이 있었으면 좋겠다는 의견 드립니다. 감사합니다.
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
해당 파일 업로드 부탁드립니다.
미해결
토비의 스프링 6 - 이해와 원리
제 개인적인 문제인지는 모르겠습니다만, 수업 자료를 다운로드 하는 버튼을 클릭 시 다운로드 된 압축 폴더(zip) 내에 아무것도 들어가 있지 않고, 압축 풀기시에도 오류가 발생하고 있는데, 어떻게 해결할 수 있는 방법이 있을까요?
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
안녕하세요, Springboot 관련 프로젝트 진행 중 계속 해결되지 않는 문제가 있어 연락드립니다. 문제가 되는 클래스는 아래와 같은 추상클래스입니다. @Getter @Setter public abstract class A implements B { @Autowired private String proxyUrl; } @Configuration public class proxyUrlConfig { @Value("${environment_variable_name}") String proxyAddress; @Bean public String proxyUrl() { return proxyAddress; } } 해당 추상클래스에서는 위와 같이 @Configuration으로 스프링 컨테이너에 bean으로 등록된 url을 필드 주입으로 관리하도록 구현이 되어 있습니다. IntelliJ IDE에서도 해당 변수 옆에 bean 모양이 생겨 일단 스프링 컨테이너에서 인식은 되고 있는 상황인데, A 클래스에서 proxyUrl을 출력하면 null값이 나옵니다. 다른 클래스에서도 동일한 방식으로 필드주입으로 url을 사용하고 있는데, 다른 클래스에서는 문제없이 환경 변수에 입력된 url이 정상 출력됩니다. 혹시 A 클래스에서 추가적으로 작업해야 할 부분이 있을까요?? (@Service 어노테이션도 추가해보았지만 문제는 해결되지 않았습니다)
미해결
김영한의 실전 자바 - 기본편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 여기에 질문 내용을 남겨주세요. 안녕하세요. 강의를 듣다가 궁금한 점이 생겼습니다. 인터페이스는 구현 메서드를 가능한 지양해야하므로 default 메서드는 하위 호환 등의 특별한 예외에서 사용해야한다는 말씀에 깊이 공감하고 있습니다. 다만 이런 경우는 어떤 접근 방식이 좋을까요? 프로젝트내 특정 이늄 클래스들 혹은 레코드들에 대해서 공통화된 메서드 처리를 하고 싶을 때 디폴트 메서드가 있는 인터페이스를 상속받아서 공통 기능을 사용하고 있습니다. 이늄과 레코드는 클래스 상속이 안되어서 생긴 편법? 같은 느낌이 드는데요. 이에 대한 정석적인 접근 방식이 있을까요? .. 또한 이늄과 레코드는 상속을 못하게한 객체지향적인? 이유가 있을 것 같은데 혹시 어떻게 이해를 하면 좋을지.. 궁금합니다..!
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요 선생님 강의를 보고 참고해서 채팅 기능을 만들었습니다. 그런데 a,b가 채팅화면에 들어왔을때 소켓 연결이 안되거나, 늦게 되거나 하는 경우가 있어서 제가 로직을 잘못짠건지 어딜 확인해야하는건지 조언을 들을수 있을까해서 문의 남깁니다. 먼저 서버에서 이렇게 socket.io 를 설정해주고 /app.js const app = express(); const httpServer = new createServer(app); const io = new Server(httpServer, { cors: { origin: 'https://zzimzzim.com', credentials: true, }, }); /utils/io.js module.exports = function (io, db) { const userSockets = {}; const nsp = io.of('/messages'); nsp.on('connection', (socket) => { console.log('soket connected'); socket.on('disconnect', () => { console.log('-----------------user disconnected'); }); socket.on('login', (user) => { userSockets[user.id] = socket.id; console.log(userSockets, '-------------------------------userSockets'); console.log(`User ${user.id} connected with socket id ${socket.id} --------- 유저입장`); }) socket.on('sendMessage', async (data) => { try { const roomId = data.room.split('-').sort().join('-'); console.log(roomId, '---------------------------------roomId'); console.log(data, '---------------------------------data'); console.log(userSockets, '---------------------------------userSockets'); let room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }); if (room) { room = await room.update({ content: data.content }); } else { const roomCreated = await db.Room.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }) console.log(roomCreated, '------------------------------roomCreated') room = await db.Room.findOne({ where: { room: roomId }, include: [ { model: db.User, as: 'RoomSender', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}], }, { model: db.User, as: 'RoomReceiver', attributes: ['id', 'email', 'gender', 'mbti'], include: [{model: db.Image}] }, ] }) } const savedMessage = await db.Message.create({ SenderId: data.senderId, ReceiverId: data.receiverId, content: data.content, room: roomId, }); // console.log(savedMessage, '------------------------Message saved'); console.log(room, '------------------------room saved'); const receiverSocketId = userSockets[data.receiverId]; if (receiverSocketId) { socket.to(receiverSocketId).emit('receiveMessage', savedMessage); socket.to(receiverSocketId).emit('receiveRoom', room); } else { console.log(`User ${data.receiverId} is not connected`); } } catch (error) { console.error('Error saving message:', error); } }); }) } 클라이언트에서는 선생님이 useSocket만든것과는 다르게 useContext를 이용해서 /src/app/(afterLogin)/messages/_component/SocketProvider.tsx 'use client'; import { useSession } from 'next-auth/react'; import { ReactNode, createContext, useCallback, useEffect, useMemo, useState } from 'react'; import { io, Socket } from 'socket.io-client'; type Props = { children: ReactNode }; type SocketContextType = { socket: Socket | null; isConnected: boolean; disconnect: Function; goDown: boolean; setGoDown: Function; } export const SocketContext = createContext<SocketContextType>({ socket: null, isConnected: false, disconnect: () => { }, goDown: false, setGoDown: () => {}, }) export default function SocketProvider({ children }: Props) { const { data: session } = useSession(); const [socket, setSocket] = useState<any | null>(null); const [isConnected, setIsConnected] = useState(false); const [goDown, setGoDown] = useState(false); const disconnect = useCallback(() => { socket?.disconnect(); setSocket(null); }, [socket]); const value = useMemo(() => { return { socket, isConnected, disconnect, goDown, setGoDown } }, [socket, isConnected, disconnect, goDown]); useEffect(() => { console.log(socket, '-----------------------------------------socket???'); if (!socket) { const socketInstance = io(`${process.env.NEXT_PUBLIC_BASE_URL}/messages`, { withCredentials: true, }); socketInstance.on('connect', async () => { setIsConnected(true); console.log("소켓연결 성공!!!", socketInstance.id); // console.log(socketInstance, '--------------------socketInstance'); }) setSocket(socketInstance); } }, [socket]); useEffect(() => { if (socket?.connected && session?.user?.id) { console.log('--------------------------------------------socket emit login') socket?.emit('login', { id: session?.user?.id }); } }, [session, socket]); return ( <SocketContext.Provider value={value}> {children} </SocketContext.Provider> ) } 이런식으로 만들고 /src/app/(afterLogin)/messages/layout.tsx import { ReactNode } from 'react'; import SocketProvider from './_component/SocketProvider'; type Props = { children: ReactNode }; export default function Layout({ children }: Props) { return ( <SocketProvider> {children} </SocketProvider> ) } 레이에다가 적용해주었습니다. 이런식으로 해주면 소켓연결을 한번만 하고 원할때 메세지를 주고 받을 수 있을거라고 생각해서 적용한건데 혹시 소켓 연결 관련해서 더 확인해야하거나 수정할 부분이 있을지 궁금합니다. 감사합니다!
