안녕하세요~ 설명해주신 CSR, SSR 렌더링 강의보고 CSR, SSR 렌더링 방식에 대해 궁금한점 두가지 남겨봅니다! (유사한 질문이 있는지 찾아봤는데 글이 많아서 찾질 못해서 중복 감안하고 올려봅니다🙏🏻) 질문1 CSR은 bundle js 다운로드 레이턴시 만큼 FCP가 느리고 반대로 SSR은 bundle js 다운로드 레이턴시만큼 CSR보다 FCP가 빠르다고 이해했는데요. TTI 기준으로 보면 결국 CSR, SSR모두 차이가 없는게 맞을까요? (gzip압축 해제, js parse, hydration등의 처리에서 드는 비용의 차이가 있겠지만 이런 부분들은 크게 영향을 주진 않을거라고 생각하여 문의드립니다. 혹시 두 방식에 영향을 미치는 큰 요소가 있다면 그 부분도 고려해서 알려주시면 감사하겠습니다.) 질문2 CSR의 장점으로 초기 렌더링이 느리고 이후에 페이지 이동시 빠르게 화면을 그릴 수 있다고 하셨는데요, CSR에서 초기 렌더링의 속도를 높이기 위해 코드 스플리팅 전략을 취할 수 있을거 같습니다. 이렇게 CSR에서 코드 스플리팅 방식을 취한 경우 페이지 이동시 결국 bundle js 다운르드 레이턴시가 또 발생할거 같은데요. prefetch, preload같은 전략을 취하지 않고 코드스플리팅만 적용한 CSR방식은 단점만 남는 렌더링 전략이 맞을까요? 유일한 장점은 CSR이지만 코드 스플리팅을 했기 때문에 초기 FCP가 조금 빠르다정도일거 같은데 이해한게 맞는지 문의드려봅니다.
백엔드 취준생인데 프론트를 좀 할 일이 있어서 강의 듣고 있는데 Next-Auth 부분이 이해가 쉽지 않네요... 몇 가지 질문 드리고자 합니다. 1. session 객체에 어떤게 담기는건지 잘 모르겠습니다. export default async function Home() { const session = await auth() if (session?.user) { redirect('/home') return null } return ( <Main/> ); } export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ // 개발자가 직접 만든 화면에서 로그인 하도록 진행 pages: { signIn: '/i/flow/login', // 로그인 newUser: '/i/flow/signup' // 회원가입 }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: 'POST', headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.usename, password: credentials.password, }) }) if (!authResponse.ok) { return null } const user = await authResponse.json() return { email: user.id, name: user.nickname, image: user.image, ...user } } }) ], }) Home 에서 auth() 를 통해 불러온 session 객체에 CredentialsProvider 가 리턴한 객체가 담기는건가요? 그런데 그렇다고 하기엔 객체에 user 라는 속성이 없어서 아닌 것 같기도 해서 아닌 거 같다는 생각도 듭니다. export default function Login() { const router = useRouter() const { data: session } = useSession(); if (session?.user) { router.replace('/home') return null } router.replace("/i/flow/login") return ( <Main /> ) } 마찬가지로 여기서도 session 에 어떤게 담기는지 잘 모르겠습니다 ㅠㅠ auth() 로 리턴한 세션과 같은 객체가 담기는 것 같긴 한데 도대체 session 에 뭐가 담기는지 파악이 쉽지 않네요 ㅋㅋㅋ 그래서 session 객체의 user 를 클릭해서 들어가보니 다음과 같은 interface 가 나오네요. export interface DefaultSession { user?: User expires: ISODateString } auth/core 에 있는 인터페이스인 것 같은데 이 인터페이스가 어느 시점에 등장(?) 하는 건지 잘 모르겠습니다. 2. 지금 진행하는 로그인 방식은 백엔드에 로그인 관련 API 가 있다고 가정하고 진행하는 것으로 저는 이해를 했는데요 export const handlers = [ http.post(`${baseUrl}/api/login`, () => { console.log('로그인'); return HttpResponse.json(User[1], { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' }, }) }), http.post(`${baseUrl}/api/logout`, () => { console.log('로그아웃'); return new HttpResponse(null, { headers: { 'Set-Cookie': 'connect.sid=;HttpOnly;Path=/;Max-Age=0' } }) }), http.post(`${baseUrl}/api/users`, async ({ request }) => { console.log('회원가입'); // return HttpResponse.text(JSON.stringify('user_exists'), { // status: 403 // }) return HttpResponse.text(JSON.stringify('ok'), { headers: { 'Set-Cookie': 'connect.sid=msw-cookie;HttpOnly;Path=/' }, }); }) ]; 이게 지금 api 를 mocking 한 건데 여기에 요청을 보내고 있으니까요. 그러면 이 API 에서 리턴한 유저(User[1]) 가 세션에 담기는 것인지 궁금하네요. (이것도 1번 질문하고 좀 연관이 되네요) 그러면 만약에 백엔드 API 가 로그인 성공했을 때 http body 에 별도의 객체를 리턴하지 않으면 어떻게 되나? 이런 궁금증도 생깁니다. 3. 그리고 로그아웃을 할 때는 왜 로그아웃 API 에 따로 요청을 보내지 않고 signOut 함수만 사용하는지 궁금합니다. 이것만 사용해도 쿠키가 삭제가 돼서 그런 것인가요? 그러면 백엔드 서버에 별도의 로그아웃 API 를 만들지 않아도 되는 것인지 궁금합니다. 장문의 질문글이 된 거 같은데, 뭔가 Next-Auth 를 처음 접하다보니 사용법이 좀 익숙치가 않네요. AI 에 물어보거나 구글링을 해 봐도 좀 파악이 쉽지 않아 여기에 질문 남겨봅니다. 감사합니다.
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요.
ES Lint 설정 안녕하세요. 현재 Next.js 15.1 버전에서 ESLint가 9버전으로 업데이트 되면서 형식이 많이 바뀌었는데 기존의 8 버전에서는 { "extends": ["next/core-web-vitals", "next/typescript"], "rules": { "@typescript-eslint/no-unused-vars": "warn", "@typescript-eslint/no-explicit-any": "off" } } 하지만 9 버전에서는 형식이 많이 바뀌었는데 no-unused-vars나 on-explicit-any 같은 설정은 어떻게 해야 하나요? 일단은 이렇게 코드를 쓰기는 했는데 적용이 잘 안되는 것 같습니다.(eslint.config.mjs) import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslintrc"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, }); export default [ ...compat.extends("next/core-web-vitals", "next/typescript"), { files: ["**/*.ts", "**/*.tsx"], rules: { "@typescript-eslint/no-unused-vars": "off", "@typescript-eslint/no-explicit-any": "warn", // 경고로 설정 }, }, ];
커서 및 vscode 설치 방법 다운로드를 받지 않으신 분들은 차분히 다운로드를 받으신 다음 아래의 Node.JS를 설치 해주세요 해당 노드 링크 클릭하면 The page you are looking for cannot be found! Please ask the owner of the page for an updated link. 로 나옵니다!
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] https://www.inflearn.com/questions/137740/orphanremoval%EA%B3%BC-cascade%EC%9D%98-%EA%B4%80%EA%B3%84 위 질문을 바탕으로 정리하자면 부모 엔티티에 있는 자식 엔티티 컬렉션에서 자식 객체를 제거하면 고아객체가 되므로 원래 JPA 스펙상 JPA 스펙상 원칙적으로 CascadeType.PERSIST이 없어도 orphanRemoval만으로 자식 삭제하는 DELETE SQL이 동작하지만 Hibernate 구현체 버그(?)로 인해 동작을 안하는 거다. 라고 정리하면 될까요? 자문자답 ============= 2024년 12월 기준으로 하이버네이트 버전을 최신으로 바꿔서 실행했는데 orphanRemoval=true만 적용해도 DELETE SQL가 정상 동작하는 것으로 보입니다. Hibernate: /* insert for hellojpa.Parent */insert into Parent (name, id) values (?, ?) Hibernate: /* insert for hellojpa.Child */insert into Child (name, parent_id, id) values (?, ?, ?) Hibernate: /* insert for hellojpa.Child */insert into Child (name, parent_id, id) values (?, ?, ?) Hibernate: select p1_0.id, p1_0.name from Parent p1_0 where p1_0.id=? Hibernate: select cl1_0.parent_id, cl1_0.id, cl1_0.name from Child cl1_0 where cl1_0.parent_id=? Hibernate: /* delete for hellojpa.Child */delete from Child where id=? ============= 수정된 pom.xml <!-- JPA 하이버네이트 --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>6.6.3.Final</version> </dependency> 수정하고 Maven reload 버튼을 눌러야합니다!
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문 전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 인터럽트 시작1 부분 강사님 설명 예제중에서 갑자기 궁금해서 질문드립니다.. 제가 궁금한부분은 public class ThreadStopMainV1 { public static void main(String[] args){ MyTask task = new MyTask(); Thread thread = new Thread(task, "work"); thread.start(); } static class MyTask implements Runnable { ...................................... } } 여기서 질문 왜 정적내부클래스 MyTask()에 new를 써서 만드나요?? 정적 내부 클래스는 외부 클래스의 정적 멤버처럼 동작하기 때문에, 외부 클래스의 이름을 통해 접근해야 하는거 아닌가요?. 따라서 new ThreadStopMainV1.MyTask() 형태로 생성해야하는거 아닌가요?? 정적내부클래스도 바로 다이렉트로 new MyTask() 로 생성해도 되는건가요 ?? 너무궁금합니다..
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 안녕하세요 영한님! 강의 잘 듣고 있습니다. JPA 더티 체킹 관련해서 질문이 있습니다., 현재 매일 외부로부터 몇천~몇만 건의 데이터를 받아서 인터페이스 테이블에 해당 데이터의 키 값에 해당하는 데이터가 없으면 삽입, 이미 있으면, 키 값을 제외한 해당 데이터와 인터페이스 테이블에 있는 데이터의 컬럼들을 비교해서 update 치는 로직으로 구현했습니다. (해당 정보는 변경될 일이 거의 없기 때문에 매일 테이블을 delete insert 하는 방식보다는 효율적인 방식이라고 생각되어 채택하였습니다.) 로직은 간략하게 다음과 비슷합니다. (실제 컬럼 수는 훨씬 많습니다.) List<UserInfoRequest> users = objectMapper.readValue(decryptedData, objectMapper.getTypeFactory().constructCollectionType(List.class,UserInfoRequest.class)); List<UserInterfaceEntity> existingUsers = UserInterfaceRepository.findAll(); List<UserInterfaceEntity> userListToAdd = new ArrayList<>(); for (UserInfoRequest request : users) { UserInterfaceEntity existingUser = existingUsers.stream() .filter(user -> user.getEmail().equals(request.getEmail())) .findFirst() .orElse(null); /** 기존 인터페이스 테이블에 존재하지 않는 사용자 정보이면 */ if (existingUser == null) { UserInterfaceEntity newUser = UserInterfaceEntity.builder() .email(request.getEmail()) -- PK .name(request.getName()) .address(request.getAddress)) UserInterfaceRepository.save(newUser) } else { existingUser.updateUserInfo(request); } } // 엔티티 클래스 public void updateUserInfo(UserInfoRequest request){ this.name = request.getName(); this.address = request.getAddress(); '''실제로는 컬럼수가 더 많습니다''' } 저는 이러한 상황에서 existingUser가 존재하면 request로 들어오는 데이터가 아예 변경이 되지 않았을 수도 있고, 데이터의 어떤 컬럼 값이 변경됐을 지 모르기 때문에 일일이 if문으로 비교하는 것보다는 모든 컬럼을 update 하는 방식을 취했고, 제가 기대했던 결과는 같은 값이 들어오면 DB에 update 쿼리가 나가지 않는 것을 기대했습니다. 그런데, 실제로 existingUser가 존재하고, request의 모든 필드값과 exsitingUser 의 모든 필드 값이 다 같은 건에 대해서도 update 쿼리가 DB에 나가더라구요. JPA 더티체킹의 경우 최초 조회한 시점에 스냅샷을 떠두고, 커밋 시점에 변경된 엔티티에 대해서만 UPDATE 쿼리가 나가는 것으로 알고 있는데, 왜 필드 값이 실제로는 변경되지 않았음에도 UPDATE 쿼리가 나가는 것일까요? 이 부분에서 실제로 필드 값이 변경된 경우에만 update 쿼리를 실행하고 변경되지 않은 경우에는 update 쿼리를 막으려면 if문을 일일이 필드마다 비교해야하는 로직을 추가하는 것 말고는 다른 좋은 방법이 없을까해서 질문 남깁니다..
안녕하세요, 우선 강의 너무 잘 들었습니다. 사전 렌더링에 대한 부분에서 궁금중이 있어 문의를 남깁니다. 클라이언트 컴포넌트 또한 서버에서 JS 실행을 통해 서버 측에서 사전 렌더링이 된다는 것을 알고 있습니다. 다만, 서버에서 실행되는 사전 사이드 렌더링의 경우 useEffect, useState 등과 같은 훅은 어떤 식으로 실행이 되는지 궁금 합니다. 왜냐하면 서버 클라이언트에서는 훅 사용이 불가능한 것으로 알고 있는데, 이는 곧 서버에서 훅을 사용하지 못한다는 뜻으로 이해하고 있어서요. 만약 해당 훅 들이 서버에서 실행되지 않고, 컴포넌트에 마운트 된 이후에 실행 되는 것이라면, 컴포넌트 return 문 안에 있는 State나 로직들은 undefined 인 상태에서 렌더링 되어 Client에 HTML 형태로 전달 되는 것일까요? 또한 비슷한 질문인데, 사전 렌더링에서 local storage, DOM 조작 등과 같이 Client에서만 접근 가능한 API에서는 어떤 식으로 사전 렌더링이 진행 되는지, 그리고 초기 HTML을 그릴 때는 해당 값들을 어떻게 처리 하는 지 궁금합니다. 좋은 강의 감사합니다!
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. JAVA로 COS Pro 2급을 따고 싶은데 이 입문강의를 들으면 가능할까요? C언어랑 python은 좀 다뤄봤습니다.
안녕하세요. 지금까지 서버 액션을 트리거 하실때 form 태그를 이용해서, 제출형식으로 트리거 하셨는데, next 에서 서버 액션을 트리거 할때 단순한 작업이라면 form태그가 아닌 버튼형식으로 하는것도 괜찮은지 궁금해서 여쭤봅니다. 버튼으로 하는것도 가능은 하지만 권장되지 않는 방식인것인가요? 이를테면 각각의 북페이지에 유저가 좋아요와 싫어요를 누를 수 있는 기능이 있다고 가정했을때, 좋아요와 싫어요는 단순한 기능이라고 생각이 되는데, 이런 경우에는 버튼으로 서버 액션을 트리거하는 방법도 괜찮은것인지 궁금합니다!. 감사합니다.
공부 진행에 전혀 문제는 없지만 자그마한 도움이 되고 싶어 말씀드려요 9. 채팅 프로그램.pdf CommandManagerV2 수정 필요한 부분 : public static final String DELIMITER = " | "; 수정 후 : private static final String DELIMITER = " \\| "; CommandManagerV3, CommandManagerV4 수정 필요한 부분 : public static final String DELIMITER = "\\|"; 수정 후 : private static final String DELIMITER = "\\|"; 11. HTTP 서버 만들기.pdf HttpResponse 수정 필요한 부분 : public void setStatus (int statusCode) { this.statusCode = statusCode; } 수정 후 : public void setStatusCode (int statusCode) { this.statusCode = statusCode; } HttpRequestHandlerV4 수정 필요한 부분 : private static void notFound(HttpResponse response) { response. setStatus (404); response.writeBody("<h1>404 페이지를 찾을 수 없습니다.</h1>"); } 수정 후 : private static void notFound(HttpResponse response) { response. setStatusCode (404); response.writeBody("<h1>404 페이지를 찾을 수 없습니다.</h1>"); } pdf 파일에서 setStatus 로 쓰다가 뒤의 커맨드 패턴 NotFoundServlet, InternalErrorServlet 에서는 setStatusCode로 메서드 이름을 사용하고 있어서 강의 내용과 동일하게 setStatusCode로 이름 통일을 시켜봤습니다 ServerMainV5 임포트 추가 import was.v5.servlet.HomeServlet; import was.v5.servlet.SearchServlet; import was.v5.servlet.Site1Servlet; import was.v5.servlet.Site2Servlet;
지금 강의에서 보여주신게 아직 업데이트가 안 된 것인지 궁금합니다! Auth.js 홈페이지에 있는 문서와 코드가 조금 다른 것 같아서요. next.js 15 버전으로 강의 따라가고 있고 auth.js 설치할 때 auth@5 하니까 설치가 안 돼서 auth@beta 이렇게 설치하고 진행 중 입니다! 제가 본 페이지는 다음과 같습니다. https://authjs.dev/getting-started/authentication/credentials 추가 일단 제로초님이 하신 방법으로 CredentialsProvider 직접 import 하니까 되는 것 같습니다!
<input value={name} onChange={onChangeButton} placeholder={"이름"} /> 안녕하세요! 이번 강의 내용에서 return되는 부분에서 텍스트 박스를 형성하는 부분에 있는 위에 코드 부분에 대한 질문입니다! value={name}이 들어가는 이유는 무엇인가요?? 이 부분이 없어도 지장이 없는 것 같아 여쭤봅니다!
