안녕하세요!React 와 Next 의 component 선언 방식에 대한 convention 이 궁금하여 질문드립니다.Arrow Function vs Regular FunctionComponent 는 사실 하나의 함수입니다. 그리고 JavaScript 에서는 2가지 방식으로 함수를 선언할 수 있습니다. 하나는 화살표 함수이고 또 다른 하나는 function keyword 를 사용하는 것입니다.이 두 함수 선언 방식의 차이에는 크게 hoisting 과 this keyword 가 있습니다. 궁금하신 분들은 Arrow Functions vs Regular Functions in JavaScript – What's the Difference? (freecodecamp.org) 를 읽어보시면 좋을 것 같습니다. 이번 질문은 기능상의 차이 보다는 "일반적으로" 무엇을 사용하느냐 에 대한 질문입니다.Q. React 에서는 component 를 선언할 때 arrow function 을 일반적(많은 개발자들이 사용)으로 사용하는 것으로 알고 있습니다. Next 는 arrow function 를 일반적으로 사용하나요 아니면 regular function 을 사용하나요?Arrow Function Componentinterface ComponentProps { ... } const Component = ({ ... }: ComponentProps) => { ... } export default Component;Regular Function Componentinterface ComponentProps { ... } export default function Component({ ... }: ComponentProps) { ... }제가 생각했을 때는 export default 를 한번에 사용하기 위해서 regular function 으로 공식 문서나 강의 자료가 작성되어 있는 것으로 생각이 되어지는데, 더 일반적인 선언 방식은 무엇일까요? 물론 convention 이라는 게 없을 수도 있고 사실 프로젝트마다 다르게 정할 수는 있겠지만, 더 일반적인 방식이 무엇인지 궁금하여 질문드립니다.

[질문 템플릿]1. 강의 내용과 관련된 질문인가요? 예2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예[질문 내용]안녕하세요.강의 내용중 궁금증이 있어 질문 올립니다.만약 @Component로 자동 빈 등록시 빈으로 등록될 class에 생성자가 2개인 경우생성자를 선택하여 Bean을 생성할 수 있나요?예를 들면 아래와 같습니다.@Componentpublic class MemberServiceImpl implements MemberService {private final MemberRepository memberRepository;@Autowiredpublic MemberServiceImpl(MemberRepository memberRepository) {this.memberRepository = memberRepository;}/* MemberRepository 객체를 인자로 2개 받는 생성자를 호출 가능한지? */@Autowiredpublic MemberServiceImpl(MemberRepository memberRepository1, MemberRepository memberRepository2) {this.memberRepository = memberRepository;}} getBean 으로 빈 조회를 할때MemberServiceImpl memberService = ac.getBean("memberService", MemberServiceImpl.class); MemberServiceImpl 클래스의 두번째 생성자(인자값 두개)를 호출하여 생성하는 방법이 있나요?@Bean 메서드를 만들어서 강제로 new MemberServiceImpl(MemberRepository memberRepository1, MemberRepository memberRepository2);위 방식으로 하면 될것 같은데 혹시 @Bean을 사용하지 않고 생성하는 다른 방법이 있을까요? 

강의에서 알려주신 것처럼 OOP적인 관점에서 상속을 통해 몬스터-플레이어에 대한 내부 속성(체력, 속도 등등)의 정의와 그에 따른 변화를 함수(데미지처리, UI처리 등등)로 구현하다보면 때때로 모호한 경우가 생겨 고민에 빠진적이 종종 있었습니다.참고하기 위해 인터넷을 통해 다른사람 코드를 보다, 내부 속성들 조차 클래스로 정의 및 컴포넌트화하여 활용하는 것을 보았습니다. 예를들면, OOP에선 플레이어 클래스안에 존재해야하는 것들이 Health, Stamina 등등 클래스로 만들어 붙이는 것을 보았습니다.이런 방식이 처음엔 좀 이질적이었는데, 몇번 보다 보니 정리하기는 좀 난잡해보이지만 의외로 논리적으로 처리하는데 편리하게 느껴졌습니다. 그러다 문득 어떤 방식이 좀더 선호되는지, 해당 방식을 쓰는게 좋을지 궁금하여 질문 올립니다또한, 최근 유니티쪽에서 언급되는 DOTS 같은 경우에 대해 어떻게 생각하시는지, 위의 컴포넌트 방식의 극대화하여 최적화를 추구하는 방식으로 이해하면 되는 것인지 궁금합니다. 

안녕하세요! 재미있게 수강 중인 학생입니다 ㅎㅎ.   제가 코드 작성 시에 new Vue() Vue.component()  순서로 작성하니까 오류가 뜨더라구요,   vue.js:634 [Vue warn]: Unknown custom element: <app-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in <Root>)   위의 내용은 콘솔창에 뜬 오류내용입니다.   컴포넌트 생성 시의 순서가 궁금합니다!      

안녕하세요  component에 template 항목으로 화면을 구성하는데   vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 이런 오류가 발생했습니다.  한 화면에 팝업창을 하나 띄우려고하는데 큰 기능이 없어서 단순 template으로만 구성하려고 했습니다.  화면 자체 코드는 아래와 같습니다.  <template> <!-- 위쪽에는 일반적인 화면 구성 --> <h4>환불 신청 및 처리 내역</h4> <div class="pay_history"> <!-- 중략 --> </div> <!-- 팝업--> <popupStatus v-if="isModal" > </popupStatus> <!-- 팝업--> </template> <scripte> var mHtml = ` <div class="pop_body"> <table></table> </div>` export default { name: 'RefundHistory', components : { 'popupStatus' : { template : mHtml } , data() { return{ isModal : true, } }, } } </script>   스택오버플로우를 살펴보니 config.js에서 runtimeCompiler: true  로 바꾸면 된다고 하는데요..  제가 사용하려던 템플릿이 non-precompiled Vue templates. 이라고 하는데요..  왜 이런 오류가 발생하는건가요?? 컴포넌트의 템플릿을 procompile 시키는 방법이 따로 있는걸까요? (그게 뷰 config 를 수정하는 방식인건지?),  컨피그 파일 수정 없이 procompile 된 템플릿을 사용하는 방법이 따로 있는지도 궁금합니다 .    

nuxt의 layout, page, component 이해가 잘되게 설명해주셔서 감사합니다!   layout은 화면의 공통적인 부분 및 error화면  page는 보여질 화면 component는 page에 들어갈 컴포넌트 이렇게 이해했습니다.   그런데 nuxt.js가 업데이트 되면서 layout이라는 폴더가 없어졌습니다.. 이러한 경우 layout은 아예 없어진 건지 어디로 흡수된건지 등 어떻게 사용할 수 있는 지 궁금합니다!  

안녕하세요, 캡틴판교님의 vue와 nuxt강의를 잘 수강하고 있는 초급 개발자입니다. 먼저 관련 내용을 찾기가 힘들어 첫번째 강의에 글을 남깁니다. nuxt 프레임워크를 사용해 시스템을 개발중인데요. 로컬에서 시스템을 띄웠을때는 특정 화면에 대한 refresh(새로고침)을 했을때 다시 reload가 되는데, 서버에 배포를 한 후 특정 페이지를 Refresh하면 ERROR  render function or template not defined in component: anonymous  ERROR  window is not defined 등등   라는 에러 로그와 함께 페이지가 로드되지 않습니다.   공통적으로는 vue-apex-charts 들어간 화면이 문제인듯하여 구글링을 통해 vue-apex-charts 태그를 감싸는 no-ssr, client-only 태그도 달아보았고, import를 동적으로 선언해보거나, nuxt.config.js에서 plugin을 ssr:false로도 줘봤으나 해결되지 않았습니다.   특정 컴포넌트에 대해서만 refresh오류가 납니다. (vueapexchart 사용 시 인듯합니다)     혹시 제가 미처 생각치 못한 내용이 있을까요? 시간 나실때 조언 주시면 감사하겠습니다.

실행시 아래와 같은 오류가 발생합니다. 아무리 구글링해봐도 안보이네요. [에러내용]  

ㅇ강의 내용대로 다 따라하고 '안녕하세요 ~ ' 가 뜨는것도 확인 하였는데 그 위에 에러창이 떠 있어서 질문 드립니다. 제 코드인데요 선생님 코드와 같이 잘 따라 적었다고 생각하는데 혹시 에러가 뜬 이유를 알 수 있을까요?

컴포넌트 설계를 할때.. 기준을 어떻게 잡아야 할지 헷갈립니다. 1. 특히 list item 처럼 작은 단위를  컴포넌트로 만들어서 해야하는지 아니면 li태그를 써서 하는지 감이 안잡히는데 제가 이해하기로는 단순히 텍스트?만 뿌려주는거면 li태그를 사용하고 다른 로직들 기능들이 있는경우에 컴포넌트로 만들어서 관리해야한다라고 이해하고 있습니다. 2. 컴포넌트가 딱 1번만 사용되어도 ( 재사용성 X)  모두 컴포넌트로 만들어서 관리를 해야하는지 그렇다면 한 페이지에 컴포넌트만 엄청 많아질거같은데 어떻게 관리해야하는지 궁금합니다. 

예를 들어 게시판 프론트 개발을 해야됩니다. 컴포넌트를 나누는 기준을 어떻게 해야될지 고민이 됩니다. 1. A 개발자 컴포넌트 기준을  - 목록 페이지      - 페이징 네비게이션 - 글작성 폼 - 읽기 폼      - 댓글 쓰기폼      - 댓글 목록 이런식으로 페이지 또는 서비스 기준으로 나누었고 2. B 개발자는  - 목록     - 검색 영역     - 버튼 영역(쓰기, 삭제 등)     - 리스트 표시(테이블)         - 단일 항목 표시(row)     - 페이지 네비게이션 - 글작성 폼     .... - 읽기 폼     ... 이처럼 최대한 영역을 잘게 쪼개서 컴포넌트를 만듭니다. B 개발자 처럼 하면 컴포넌트 깊이가 깊어지고, 불필요한 데이터 전달이 많아져 오히려 코드가 복잡해 질 것 같습니다. 실무에서는 어떤 기준으로 컴포넌트를 나누는지 궁금합니다.

toc에 data라는 props를 만들어준게 없는데 어떻게 사용할 수 있는거죠? 이전 강의에서 props는 {this.props.이름} 이런식으로 props를 만드는거라고 하셨었는데 해당 강의에서는 안보여서요

제가 예전에 리덕스를 공부할 때 리덕스의 로직순서를 배웠었는데요  이러한 흐름으로 실행이 된다고 배웠습니다 그런데 노드버드 프로젝트에는 컴포넌트의 AppLayout에서 LoginForm 컨테이너를 가져와서 실행하는데, 컨테이너에서 props로 전달하거나, 이 반대로 전달하는 거는프로젝트를 만드는 사람에 따라 다 다른건가요?