초기 접속 요청을 할 때, Next.js에서는 서버 컴포넌트와 클라이언트 컴포넌트 모두 사전 렌더링을 한 후에 html을 제공하고 이후 Hydration 과정이 이루어지는 것으로 알고 있습니다. 만약 클라이언트 컴포넌트에서 useState 와 같은 훅을 호출해서 사용하는 경우, 서버에서 이런 컴포넌트를 어떻게 렌더링하는지 궁금합니다. 최상위 page 컴포넌트가 아래와 같이 있고, // page.tsx import Client from "@/components/client"; export default function Home() { return ( <div> initial html <div> <Client /> </div> </div> ); } page 컴포넌트에서 불러오는 클라이언트 컴포넌트가 아래와 같을 때 "use client"; import { useState } from "react"; export default function Client() { const [count, setCount] = useState(0); const handleClickPlusButton = () => { setCount(count + 1); }; const handleClickMinusButton = () => { setCount(count - 1); }; return ( <div> I am Client Component <div>count: {count}</div> <div> <button onClick={handleClickPlusButton}>+</button> <button onClick={handleClickMinusButton}>-</button> </div> </div> ); } 서버에서 클라이언트 컴포넌트를 렌더링 할 때, useState 와 같은 훅을 무시하고 렌더링을 진행한다고 생각하여 count에 값이 없을 것이라고 예상을 했지만, 서버에서 초기에 응답해준 html 파일을 보면 count가 0이 되어있었습니다. 서버에서 클라이언트 컴포넌트를 렌더링 할 때 이런 훅을 어떻게 처리하는지, 또 만약 브라우저의 window 객체에 접근하게 될 때는 어떻게 처리하는지 궁금합니다!
사전 렌더링 시 처음에 서버 측에서 리액트 앱을 실행해서 모든 리액트 컴포넌트들을 HTML로 변환한다고 하셨는데 저는 거기에 인터렉션 코드를 포함한 모든 리액트 코드가 들어있는 걸로 이해를 했었습니다. 근데 그 후에 인터렉션 코드를 추가로 보내야 된다고 해서 좀 헷갈렸는데요 그럼 처음에 서버에서 HTML로 변환한 JS 파일에는 인터렉션 코드를 제외한 모든 리액트 코드가 들어있는 걸까요?
현재 signoz를 https://signoz.io/docs/install/docker/ 해당 환경으로 구성하여 사용중입니다. 그런데 계속해서 사용하다보면 메모리 및 스왑 메모리 사용량이 증가하여 서버가 죽는 현상이 발생하고 있습니다. 이를 해결하기 위해서 불필요한 데이터 수집 및 로그 저장이 되지 않도록 설정하고 싶은데 어디 부분을 만져야 할까요?
선생님 안녕하세요. 오늘 재접수 했습니다. 열기가 대단한 지 두시간 반만에 집근처는 모두 마감이라 한시간 내외의 거리로 접수했어요 지난번에 요청드렸었던 내용으로 재 요청 드립니다. 영상에서 사용하신 문제를 다시 풀어볼 수가 없어서요(종이로 써가면서..) 영상 캡쳐도 안되더라고요 문제 모음집 파일 요청 드립니다.
안녕하세요, 강의 중, 모든 쓰레드는 직접적으로 만들 수 없고 메인쓰레드에 의해서 생성이 된다고 하셨던 부분에 대해서 궁금한 점이 있어서 질문을 남깁니다. 자바 말고 스프링의 경우에도 1개의 메인쓰레드가 N개의 요청에 따른 스레드를 생성해주는 구조일까요? 요청당 1개의 스레드를 차지하는데 이 경우에는 어떻게 되는지 궁금합니다 ~
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 자바 예외 처리 하면서 본 주석이 궁금해 져서 질문을 남깁니다. 영한님이 throws을 보여주려고, 마우스에 callThrow() 된 것을 보고 (사진 참조) 다른것은 어떻게 될까 해서 그래서 다른 것도 마우스에 되보니, 사진처럼 되엇습니다. 보니까 초록색 주석이 이런 역할을 하더라고요. 그래서 궁금해진 점이 초록색 주석 처럼, 이런 식의 주석이 또 있나요? 그리고 영상을 보니까 단축키를 안쓰고, 타이핑을 하던데, 혹 단축키 같은 게 있을까요? 추가1 : 너무 유용해 보여서요. 추가2 : 글이 좀 너무 이상해서(도둑놈 심보..여서) 수정 하였 습니다. 답변 부탁 드립니다.
중급, 활용편 #1 DevOps : Infrastructure as Code with AWS and 테라폼
안녕하세요. Bastion Host 대신 SSM을 사용하여 private subnet, isolated private subnet(no nat)에 있는 EC2 instance에 SSH 대신 연결하기 위해 다음과 같이 코드를 작성했습니다. 그런데 다음과 같은 오류가 발생하였습니다. 동일 AWS Service에 대한 VPC Endpoint가 AZ 당 반드시 하나만 존재하도록 강제하고 있는 것 같습니다. 그래서 현재 vpc 디렉토리 내에 강사님이 구조를 모방하여 module, dev_apnortheast2, stag_apnortheast2, prod_apnortheast2 총 4개의 모듈이 존재하도록 작성했는데, 어떻게 해결할 지 간단하게 생각해봤습니다. shared_apnortheast2라는 새로운 디렉토리를 만들어서 SSM을 위한 리소스들을 전부 여기에 저장하고, data나 remote_state 같은 블록을 통해 각 모듈에서 가져다 쓰는 것 -> 관리 포인트가 늘어나는 단점 + 다른 환경 끼리 같은 리소스를 써서 헷갈리는 단점, 여기다 전부 만들면 되서 env 마다 충돌 안 나게 할 필요 없는 장점 dev, stag, prod에서 각각 하나의 az에만 SSM을 위한 리소스, VPC Endpoint를 만드는 것 -> 각 모듈 내의 SSM, VPC Endpoint 만들 때 실수로 겹치지 않도록 az를 신경 써줘야 함 + 운 나쁘게 하나의 az가 다운되었는데 그것이 prod 환경의 SSM, VPC Endpoint면 수동 조치 필요 + 환경 별 불일치 발생 3. ssm 자체를 VPC Endpoint가 아닌 다른 방법, 강사님이 언급하신 Transit Gateway 등을 사용하는 것 대략 이 정도로 생각을 해보았습니다. 아직 SSM, VPC Endpoint에 대한 개념이 완전히 정립되지 않아서 제가 생각한 방법 중 절대 사용해서는 안 되는 치명적인 함정이 있는지, 위 방법들 중 실제로 쓰이는 방법이 있는지, 강사님은 어떤 방법을 선호 하시는지가 궁금합니다. --- 앞 부분을 여러 번 돌려보고 직접 작성하면서 진행하느라 굉장히 느리게 진행하고 있는데 확실히 직접 몇 번 만들어 보고 다시 돌려보니 이해도가 늘어나는 것이 느껴집니다. 테라폼을 처음 접했을 때 하위 디렉토리 무시하고 현재 디렉토리 단위로만 모듈이 되는 것과 책 등에서는 어떻게 구조화 하는지를 알려주지 않았는데, 강사님 강의를 통해 조금씩 어떻게 사용하는지 느낌을 잡아갈 수 있었습니다. (리뷰에 써야하는 내용인데 아직도 앞부분 돌려보고 있어서 다 듣고 다시 쓰겠습니다.ㅋㅋ) 강의 반복해서 듣고 혼자 구조 짜고 실습을 해보니 이 사용자를 어떻게 관리하는지 부분이 상당히 방법이 많고 난해하더라구요. IAM User, Group, Role, Policy 여기까지는 그래도 엄청 어려운 개념은 없고 테라폼으로 리소스 생성도 가능한데 이거를 수백명 단위라고 생각하면 어떻게 자동으로 생성하고 관리하고 권한을 조절하는지가 상상이 잘 안 되더라구요. 그리고 요즘은 SSH->SSM으로 넘어갔듯 Organization과 SSO(이름이 Identity Center?로 바뀐 것 같습니다.)를 조합해서 사용하는 최신 방식도 많이 사용하고 있다는 것으로 알고 있는데, 테라폼을 처음 접했을 때처럼 이 중에서 어떤 것을 골라서 쓰고, 어떤 것을 안 써야하는지, 어떻게 자동화, 권한 조절을 하는지... 함정은 무엇인지 등이 감이 잘 안오는 상태입니다. 이런 부분을 실전 느낌으로 체계적으로 다루는 강의는 찾기 어려울 것 같아서 후속 강의를 계속 내시게 되면 IAM, Organization, SSO 등의 사용자 리소스 관리 및 자동화, 베스트 프랙티스도 꼭 보고 싶네요. 아 그리고 지금까지 테라폼 구조화 방식을 workspace, module + softlink, terragrunt 3가지 정도를 접했는데 workspace는 강사님과 Terraform 모듈 만드시는 분이 이미 겪어보고 module + softlink 방식이 낫다고 말씀해주셔서 깊게 보지 않았는데, terragrunt는 어떻게 생각하시는지, 어떤 단점이 있는지도 궁금합니다. 아래 예제 레포가 있는데 좀 방대해서 제대로 이해하고 해석하려면 시간이 걸리겠더라구요. https://github.com/cogini/multi-env-deploy 언제나 강의 잘 듣고 있습니다. 다음 강의들도 기대하겠습니다. 감사합니다.
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 커뮤니티 보면서 같은오류들 따라해봤는데 잘 안되네요 오류코드: No matching tests found in any candidate test task. Requested tests: Test pattern jpabook.jpashop.MemberRepositoryTest.testMember in task :test * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. > Get more help at https://help.gradle.org. Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0. You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins. For more on this, please refer to https://docs.gradle.org/8.10/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation. BUILD FAILED in 12s 4 actionable tasks: 1 executed, 3 up-to-date
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 안녕하세요! 영한님 강의를 잘 듣고 있습니다. 의존관계 주입 설명해주실때 문득 궁금점이 생겨서 질문드립니다. 의존관계 주입은 추상적인 것을 의존하게 하고, 나중에 실제 구체적인것을 넣어주는 부분인데 이는 같은 기능을 수행하는 List(Array, Linked)의 경우라고 한다면 처음에는 한가지 기능만 수행하다가, 필요에 의해서 다른 기능을 만들었고 이걸 공통화가 가능하다면 인터페이스로 만들어주는 작업을 진행하면 되는 걸까요? 실무에서 인터페이스는 처음부터 설계를 잡고 들어가는 경우가 많은지, 혹은 필요에 의해 중간에 만드는 경우도 있는지 궁금합니다! 중간에 필요하긴한데 기능이 다 같진 않은 경우에는 어떻게 하는지도 궁금하네요ㅠ
안녕하세요. 면접준비에 도움이 될 거 같고 개념적으로도 궁금해서 질문드립니다. 장바구니에서 삭제를 하면 갱신되는데에 동작원리에서 처음엔 router.replace(router.asPath) 때문에 url이 변경되진 않아도 단순하게 /cart 로 이동이란 동작을 해서 페이지를 다시 그린다고 생각했습니다. CartList 는 CartPage 의 자식 컴포넌트이다. CartPage 는 getServerSideProps 로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList 에게 전달해주고 있다. CartList 는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다. 장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제하고 router.replace 를 통해( router.push 도 동일) 현재 페이지(asPath)인 /cart 로 이동한다. /cart 페이지(즉, CartPage.jsx )가 리렌더링된다. 리액트는 리렌더링되면 컴포넌트의 모든 코드를 다시 실행하게 된다.(고 알고 있습니다.) 그로 인해 getServerSideProps 가 다시 실행되고 갱신된(장바구니에서 상품을 삭제한) 데이터를 다시 CartPage 에게 프롭스로 내려주게 된다. 프롭스가 변경됐으니 자식 컴포넌트인 CartList 도 리렌더링되어 모든 코드가 다시 실행된다. 바뀐 장바구니 데이터로 보여지게 된다. 라고 생각했는데요. https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props#behavior 공식문서를 살펴보니 사용자가 Link 컴포넌트 또는 router를 통해 페이지를 방문할 때 , Next.js는 서버에 API 요청을 보내 getServerSideProps를 실행 합니다. 라고 되어있습니다. 이러면, 현재 CartList 는 CartPage 의 자식 컴포넌트이다. CartPage 는 getServerSideProps 로 서버에서 받아온 데이터를 프롭스(carts)로 받으며, 그 프롭스를 CartList 에게 전달해주고 있다. CartList 는 부모컴포넌트에게 받은 carts 프롭스를 통해 장바구니 목록을 보여주고 있다. 장바구니에서 상품을 삭제하면, 선택한 상품을 서버에서 삭제한다. router.replace 를 통해( router.push 도 동일) 현재 페이지(asPath)인 /cart 로 이동한다. router를 통해 페이지를 방문했으므로 CartPage 의 getServerSideProps 가 다시 실행되고 갱신된 데이터를 CartPage 에게 프롭스로 내려주게 된다. 프롭스가 변경됐으니 자식 컴포넌트인 CartList 도 리렌더링되어 모든 코드가 다시 실행된다. 바뀐 장바구니 데이터로 보여지게 된다. 이렇게 이해하면 될까요? 그리고, getServerSideProps 가 있는 페이지 컴포넌트는 getServerSideProps 가 재실행되면 자동으로 리렌더링되게 되는 구조인가요? 설명해주셨는데 제가 놓친거면 죄송합니다.
public class ThreadStopMainV2 { public static void main(String[] args) throws InterruptedException { Job job = new Job(); Thread thread = new Thread(job); thread.start(); Thread.sleep(4000); log("작업 중단 지시 interrupt"); thread.interrupt(); log("main 스레드 끝"); } static class Job implements Runnable { @Override public void run() { while (true) { try { log("스레드 실행"); Thread.sleep(2000); } catch (InterruptedException e) { log("예외 발생"); break; } } log("작업 끝"); } } } 위 코드의 실행 결과는 아래와 같습니다. 궁금한 부분은 로그에서 작업 중단 지시 interrupt 이후에 대해 궁금한점이 있습니다. 작업 중단 지시 interrupt 를 로그로 찍고 thread.interrupt();를 호출 했습니다. 그러면 생선한 스레드에 interrupt 신호를 보내고 Thread.sleep(2000); 부분에서 예외가 발생해 catch 문으로 빠지는것도 이해했습니다. 하지만 catch 문으로 빠지기전 log("스레드 실행"); 가 실행되지 않나 라는 생각이 듭니다. 그래서 최종 결과는 아래와 같이 catch 로 빠지기전에 스레드 실행이 한번 더 찍혀야 하지 않나 라는 생각이 듭니다. 23:08:15.622 [ Thread-0] 스레드 실행 23:08:17.629 [ Thread-0] 스레드 실행 23:08:19.613 [ main] 작업 중단 지시 interrupt 23:08:19.613 [ Thread-0] 스레드 실행 23:08:19.614 [ main] main 스레드 끝 23:08:19.614 [ Thread-0] 예외 발생 23:08:19.616 [ Thread-0] 작업 끝
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 자바 16부터는 instanceof 를 사용하면서 동시에 변수를 선언할 수 있다고 하셨는데 그럼 if(parent instanceof Child child){child.childMethod()} 여기서 child.childMethod() 는 어떻게 작동이되는건가요? Child child 를 선언하긴했지만 instance 주소값을 대입하지않아서 작동이 되지 않는거 아닌가요?
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 영상 에서 try-catch문과 throws으로, 예외를 잡는 것과, 던지는 것을 보았습니다. 현실적 으로는, 이 두 가지 사항이 잘 이해가 가는데, ex) 들수 있는 물건 - try-catch 무거운 물건을 들때 도움을 요청 - throws try-catch : 사람의 힘이나 기계의 힘으로 충분이 해결 가능 throws : 사람의 힘으로 안됨- > 기계의 힘으로도 안됨 -> 포기 코드적 으로는 어떨 때에는 try-cath로 잡고, 어떨 때에는 throws로 던져야 하는지 모르겠습니다. 혹 자바 예외 처리 실습 부분에서 이런 부분을 가르쳐 주시나요? 아니라면 어떨 때 던지고, 어떨 때 던져야 하는지 가르쳐 주시면 감사하겠습니다. 답변 부탁 드립니다.