안녕하세요, 자바 코드로 스프링 빈 등록하기 강좌에서 질문이 있는데요! 세 가지 질문이 있습니다.   1. @Bean public MemberService memberService() { return new MemberService(MemberRepository()); }   이 뜻은 MemberService와 MemberRepository형의 객체가 의존 관계를 맺고 있다는 뜻이고, 따라서 당연히 MemberService에 가면 MemberRepository형의 멤버변수가 선언되어 있는 걸 볼 수 있는데, 스프링 설정 클래스에서 위와같이 의존관계를 넣어줬으니 MemberService에서는 더이상 @Autowired 어노테이션이 생성자에 필요가 없는 거라고 이해하면 될까요?   조금 더 종합적으로 살펴봤을 때, 컴포넌트 스캔 방식일때는 해당 클래스에서 @Autowired 로 주입받는 객체와의 의존관계를 명시하고 주입해줘야 하는 방법 밖에 없고,   이와 같이 직접 자바 코드로 설정파일 이용해 빈을 등록하는 방식에서는   방법 1 : 수업과 같이 설정클래스에서 위에 작성된 코드로 의존주입한다, 단 저런 방식으로 주입할 경우 MemberService에는 생성자에 @Autowired가 필요없어짐   방법 2 : @Bean public MemberService memberService() { return new MemberService(); } 로 작성하고 MemberService 클래스에서 필드나 생성자에 @Autowired로 MemberRespository 빈 객체 주입 명시   이렇게 두 가지 방법이 있는 것으로 이해하면 될까요?   2. 잠깐 지나가는 말씀으로 세터 메서드에 @Autowired가 붙는 방법을 알려 주셨는데, 세터 메서드는 개발자가 직접 호출하지 않아도 스프링이 알아서 호출해주나요? @Autowired가 붙은 생성자를 저희가 직접 호출해준적은 없는 거 같은데, 세터도 동일한지 궁금합니다. 즉 @Autowired를 멤버변수 필드나 세터나 생성자에 붙이면 개발자가 호출할 필요 없이 알아서 스프링이 자동호출도 해주고 의존객체도 연결해주는 것으로 이해해도 되는지요?   3. 의존 주입을 하는 객체(A)와, 주입을 받는 객체(B)는 모두 빈으로 등록되어야 하는지 궁금합니다. 주입되는 인자(A)는 꼭 빈으로 등록된 객체여야 오류가 안 난다는 것은 수업에서도 알려주셔서 명확히 기억이 나는데, 주입을 받는 객체(B)도 항상 빈으로 등록된 객체여야 하나요?   질문이 많고 긴데 읽어주셔서 감사합니다!  

7.5강 2:15부에 함수의 반환에 있어서  array의 내용이 매번 복사가 된다면이라는 말씀을 하시는데 c계열 언어에서는 단순히 array의 주소값만 이용해서 다뤄지기 때문에 array 데이터의 전체적인 복사가 일어나지 않는다고 모 커뮤니티 사이트에서 봤습니다. 혹시 함수의 반환 같은 경우 뿐만 아니라 array의 전체적인 복사가 일어나는 부분이 있다면 알려주실 수 있을실까요? 감사합니다.  

강의 영상과 동일하게 진행했으나 오류가 발견되어 문의드립니다. 1. 폴더 생성 (crawler) 2. npm init 실행 및 설정 3. 해당 폴더에 npm i csv-parse 실행 4. index.js 파일에 동일한 형태로 코드 진행 5. npm start 실행 > crawler@1.0.0 start > node index node:internal/modules/cjs/loader:488 throw e; ^ Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/sync' is not defined by "exports" in /Users/imjake/Desktop/node/crawler/node_modules/csv-parse/package.json at new NodeError (node:internal/errors:371:5) at throwExportsNotFound (node:internal/modules/esm/resolve:440:9) at packageExportsResolve (node:internal/modules/esm/resolve:692:3) at resolveExports (node:internal/modules/cjs/loader:482:36) at Function.Module._findPath (node:internal/modules/cjs/loader:522:31) at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (/Users/imjake/Desktop/node/crawler/index.js:1:15) { code: 'ERR_PACKAGE_PATH_NOT_EXPORTED' } 위와 같이 오류가 발생했습니다.  이런 저런 방법을 찾으려고 했으나 잘 모르겠네요. (버전이슈일까요?) 각 버전은 다음과 같습니다. node - v16.13.1 csv-parse - v5.0.4

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용] em.flush와 em.clear를 하지 않았을 경우에 db에는 persist한 데이터가 저장되긴 하지만 iterator로 리스트를 출력했을때 내용이 나오지 않아서 그 이유를 제가 올바르게 이해한건지 궁금합니다! em.fluch(); 로 영속성 컨텍스트에 있는 쿼리를 db로 날린 후 em.clear(); 하여 영속성 컨텍스트를 비우면 em.find()로 조회했을 때 1차캐시가 아닌 db에서 값을 찾아오기 때문에 findMember에 해당하는 팀의 회원리스트를 받아 올 수 있다. Team team = new Team(); team.setName("TeamA"); em.persist(team); Member member1 = new Member(); member1.setName("member1"); member1.setTeam(team); em.persist(member1); Member member2 = new Member(); member2.setName("member2"); member2.setTeam(team); em.persist(member2); em.flush(); // 영속성 컨텍스트에 있는 쿼리를 db로 날림 em.clear(); // 영속성 컨텍스트를 비움 Member findMember = em.find(Member.class, member1.getId()); // db에서 값을 가져온다. System.out.println("Team = " + findMember.getTeam().getName()); List<Member> members = findMember.getTeam().getMembers(); //양방향 연관관계 for (Member m : members) { System.out.println("m = : " + m.getName()); }

좋은 강의 잘 듣고 있습니다!! 현재 아래의 에러때문에 이틀째 진도를 나가지 못하고 있습니다. 조언 좀 부탁드립니다. 상황: user의 posts 를 다이나믹 라우팅으로 불러오는 과정에서 에러가 발생합니다. 브라우저   post_saga.js   user/[id].js의 SSR 부분   post_action.js   서버 로그   1. 서버의 로그를 보면 데이터는 스토어에 UserInfo와 mainPosts에 데이터는 채워지는 것 같은데 user/[id].jsx의 id에 타입에러가 발생해서 렌더링이 완료되지 못하는 것 같습니다. 찾아봐도 id에 큰 문제가 없어보이는데 어떤 문제인지 조언 주실 수 있나요?   2. Error: "MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead. 위 에러는 SSR 과정에서 문제가 생기면 대부분 위의 에러로그가 발생하는데 이 로그가 내부적으로 뭘 의미하는 지 궁금합니다.   3. 추가로 SSR을 적용한 후부터 서버로그에 의존할 수 밖에 없어서 디버깅이 좀 힘들어지는데 이 부분도 조언 부탁드립니다!    관련된 코드가 많아서 모두 캡쳐하지는 못해서 필요하시다면 아래의 깃허브 주소로 참고 해주시면 감사하겠습니다. https://github.com/Leo-Xee/react-nodeBird    

수강신청을 했는데, 목록이 한 눈에 안보이네요... 내 폴더에도 추가했고 따로 수강신청 버튼도 클릭했는데, 왜 신청내역이 안보이는 걸까요?

안녕하세요. 강의를 듣다가 궁금한 것이 있어 질문을 드립니다. v-for를 사용하실 때 v-bind:key는 어떨 때 사용이 되나요? 딱히 사용하는 곳은 없지만, 필수로 지정해야 하기 때문에 그런 건가요?   그리고, 만약에 사용되는 경우가 있다면 v-bind:key="todoItem.item"일 때와, v-bind:key="index"일 때의 차이점이 있나요??   감사합니다.  

강의 잘 듣고있습니다! 이번 강의 내용에서 궁금한게 생겼는데 interface 를 설명해주시기 이전에 type 별칭 사용하는걸 보여주셨는데요. 이 둘의 차이점은 뭔가요??

강의를 잘 듣고 있습니다. 다름이 아니라 "카카오" 검색을 하였더니 아래와 같이 나와서... csv 파일을 보니 Name 컬럼에 회사명이 전부 영문으로 저장이 되어있습니다. 제가 잘못 한것인지 아니면 원래 그런건지를 잘 모르겠네요....

좋은 강의 감사합니다 ! 궁금한점이있습니다. 현재 inline 으로 스타일을 넣으셨는데, 실무에서는 인라인 방법은 쓰지 않고있는것으로 알고있습니다. emotion, styled-components, css module 으로 스타일을 변경시킬때도 이방법을 똑같이 사용하면 될까요? 아니면 이 방식은 inline 전용 테스트 방법일까요?

[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (예/아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)[질문 내용]여기에 질문 내용을 남겨주세요.     안녕하세요. 필드 주입과 관련하여 질문이 있어서 질문드립니다! 섹션7, 의존관계 자동 주입 첫 강의에서 의존 관계 주입 방법 4가지를 배우며 필드 주입을 학습하였습니다.   필드 주입의 특징 2가지로, 코드가 간결해서 많은 개발자들을 유혹하지만 외부에서 변경이 불가능해서 테스트 하기 힘들다는 치명적인 단점이 있다. DI 프레임워크가 없으면 아무것도 할 수 없다. 를 학습하였습니다. 두 번째는 이해가 되었습니다. 생성자 주입은 new 객체(객체, 객체)해서 순수 자바 코드로만 단위 테스트를 할 수 있는데, 필드 주입으로는 테스트를 할 수 없었습니다. 그런데 첫 번째는 이해가 잘 되지 않습니다. '외부에서 변경이 불가능해서 테스트하기 어렵다' 라는 것이 무슨 의미인가요? 생각해보면 constructor도 객체 만들 때 한 번만 부르니까 외부에서 변경이 불가능한 것 아닌가요? 감사합니다!    

안녕하세요 강사님 강의 아주 잘 듣고 있습니다 :)    reduce 매개변수 acc는 무엇의 약자인가요?   

안녕하세요..  서버사이드 랜더링 이후에 데이터가 계서 InitialState로 덮어쓰길래.. 어떤 문제인지 확인해보기위해 로그를 찍어주니  80번 포트를 바라보면서 오류가 나더라구요.. 왠지 api 호출시에 포트번호를 자동으로 80으로 설정해주는 거 같은데...  노드버드는 프록시서버가 아니라 CORS 설정을 벡엔드에서 해주는 경우여서 알기가 어렵네요.. 혹시 이런경우 서버사이드 랜더링 서버포트를 따로 설정해야하나요?  (현재 next start로 개발서버 돌리고 있으며, 3000번 포트) 참고로 axios로 api 서버(8080포트서버) 를 next.config.js 에서  rewrites 로 프록시서버설정을 통해 사용하고 있습니다.

안녕하세요, 강사님   vue-router 옵션 내부적으로 component를 등록할 때, 지역 컴포넌트로 등록된 컴포넌트는 라우팅 되지 않는 걸 확인하였습니다. 해당 사진은 공식문서를 캡쳐한 이미지인데요,  this.appHeader 가 아니더라도 단순히 지역 컴포넌트가 선언된 위치를 찾아내서 연결만 시켜주면 되지 않을까 하는 생각이 있었는데 잘 안되더라구요,  그냥 전역 컴포넌트나 싱글파일 컴포넌트 체계에서 라우팅 가능하다 정도로만 이해하면 될까요? 원하는 답변을 얻지 못해 질문합니다! routes: [ { path: '/header', component: this.appHeader, }, ],     new Vue({ el: '#app', router, components: { appHeader: { template: '<header>app header</header>', }, }, }); 참고한 질문

안녕하세요 스프링 DB 접근 기술에 순수 jdbc 강의중 1:22 쯤에 h2 데이터베이스 클라리언트 설정이 필요하다고 하셔서 'com.h2database:h2' 설정을 하셨는데 이부분이 이해가 안되서요...ㅠ 제 지식으로는 자바와 h2데이터베이스(다른 데이터베이스도 동일하게)를 연동하기 위해서 다음과 같이 1. h2 dbms를 다운받아 실행한다. 2. dbms의 api를 사용하기 위해 자바 jdbc 인터페이스 구현체인 h2의 jdbc driver를 다운로드 한다. 이렇게 되는것으로 알고 있는데 위의 'com.h2database:h2' 설정은 무엇인지 잘 모르겠습니다.

동균님 안녕하세요. 좋은 강의 공유해주셔서 감사합니다 :) 지금 페이지를 로컬에서 띄워보면서 페이지 분석을 하고 있는데요, Items 페이지의 보드들의 이미지가 깨져서 보입니다. 또한 보드 클릭시 이동하는 링크도 현재 존재하지 않아 리다이렉트되는 것 같습니다.  Network탭을 확인해보니 이미지 파일에 대한 Response 가 500 으로 오고 있습니다. land-mfg.com 의 대대적인 홈페이지 개편이 있었던 걸까요..?  참고목적으로 스크린샷 공유드립니다 :) 

messages.properties파일이외에 messages_en.propertiesmessages_ko.propertiesmessages_ja.properties 가 빌드후 파일들이 전부 사라지는 문제가 발생했는데요build파일안에는 전부 안에남아있습니다. 원래 없어지는게 정상인가요? 제 프로젝트가 이상한건가요?

안녕하세요! 좋은 강의 공유해주셔서 감사합니다.   Part1 에 이어 Part2도 즐겁게 수강하고 있습니다 :)   다름이 아니라 3-2) 서비스탐색 및 코드 분석 강의 하단에 있는   소스코드의 링크가 문구와는 다르게 lecture-4 를 가리키고 있습니다.   lecture-3로 변경이 필요할 것 같습니다.   clone하고 나서 순간 좀 당황했네요 ㅎㅎ..

첫번째 선택에서는 1개 값이 증가하고. 두번째선택에서는 2개 값이 증가하고. 3번째 선택에서는 4개값 이렇게 계속적으로 배수로 증가합니다.  그렇다 보니 마지막의 선택한 값이 제일 높고. 결국은 마지막 선택값에 의해서 창이 나옵니다.     그리고 중반부터는 qIdx에 뭔가 값이 변경이 되는지. 퍼센트 바가 . 0으로갔다가 갑자기 차례에 맞는 %로 바뀝니다. qIdx값은 자바스크립트에서 딱히 건들지도 않았는데..       그래서 콘솔로 i값을 확인해보니. 한번 완료되고 0으로 초기화 된 뒤 다시 실행이 되더라구요.. 혹시 이부분에 도움을 주실수 있을까요? . desktop-tutorial/각종 커뮤니티 성향 체크 테스트 at main · Lee-hyeonu/desktop-tutorial (github.com)\ 파일 (깃허브) 커뮤니티 성향 체크하기 (zzxx373014.synology.me) (제작한 웹페이지) /* DC,0 FM,1 ruri,2 nate,3 ppom,4 duku,5 inven,6 clien,7 utde,8 instiz,9 boba,10 coolen,11 순서대로 0,1,2,3,4~~~ DC, FM, 루리웹, 네이트판, 뽐뿌, 더쿠, 인벤, 클리앙, 웃대, 인스티즈, 보배드림, 쿨엔조이, */ const qnaList = [ { q: '1. 나는 게임이나 애니 콘솔,PC에 관해 관심이 많다', a: [ {type: [2, 4, 6, 7, 11]}, {type: [0, 1, 3, 5, 9, 8, 10]}, ] }, { q: '2. 나는 정치색이 많이 드러났으면 좋겠다. ', a: [ {type: [0, 1, 4, 7]}, {type: [5, 11, 3, 2, 8, 6]}, ] }, { q: '3. 나는 익명이 보장되었으면 좋겠다.', a: [ {type: [0, 5, 4, 3, 9]}, {type: [2, 1, 6, 7, 8, 10, 11]}, ] }, { q: '4. 나는 정보를 얻는것보다 유머를 보는것이 좋다.', a: [ {type: [0, 1, 3, 5, 9, 8, 4]}, {type: [2, 6, 7, 10, 11]}, ] }, { q: '5. 나는 주작글이여도 재미만 있으면 상관없다.', a: [ {type: [0, 3, 5, 8, 9]}, {type: [1, 2, 4, 6, 7, 10, 11]}, ] }, { q: '6. 나는 남자다.', a: [ {type: [0, 1, 2, 7, 11]}, {type: [3, 4, 5, 9, 10]}, ] }, { q: '7. 나는 인터넷에서 10원 20원 온라인 폐지줍는걸 즐긴다.', a: [ {type: [4, 7, 11, 1, 4]}, {type: [0, 2, 3, 5, 6, 8, 9, 10]}, ] }, { q: '8. 나는 스포츠가 좋다.', a: [ {type: [1, 0]}, {type: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11]}, ] }, { q: '9. 나는 연예계에 관심이 많다.', a: [ {type: [0, 3, 5, 8, 9]}, {type: [1, 2, 4, 6, 7, 10, 11]}, ] }, { q: '10. 나는 젊다(10대~ 20대) ', a: [ {type: [0, 1, 2, 3, 5, 6, 8, 9]}, {type: [4, 7, 10, 11]}, ] }, { q: '11. 나는 영화, 드라마등 다양한 스트리밍을 즐겨본다. ', a: [ {type: [3, 5, 7, 8, 9]}, {type: [0, 1, 6, 2, 4, 10, 11]}, ] }, { q: '12. 나는 사람과 만나는것 보다는 커뮤니티를 더 좋아한다.', a: [ {type: [0, 2, 3, 8, 10, 11]}, {type: [1, 4, 5, 6, 7, 9]}, ] } ] const infoList = [{ name: '대한민국 최고규모의 익명커뮤니티 DC 인사이드가 적합합니다.', desc: '디시인사이드는 대한민국의 최대 규모 커뮤니티 포털 사이트이다. 운영 주체는 주식회사 디시인사이드이며 본사는 서울특별시 강남구 삼성동에 있다.디지털 카메라 정보를 다루는 사이트로 1999년 출범했으며 2000년대 초반 디지털 카메라 사진을 올리는 용도로 사용되던 게시판인 디시인사이드 갤러리가 큰 인기를 얻게 되자 커뮤니티 서비스로 방향을 선회, 2000년대 후반부터 폭발적인 인기를 얻으며 최대 규모 커뮤니티 포털 사이트로 거듭나게 되었다. 다른 커뮤니티의 게시판 격에 해당되는 디시인사이드 갤러리 서비스를 중심으로, 개인 페이지인 갤로그, 뉴스 페이지인 디시뉴스와 디시미디어, 위키 서비스인 디시위키, 게임 서비스인 디시게임, 데이터 서비스인 익사이팅 디시 등의 부속 서비스를 제공하고 있다.' }, { name: '대한민국 최대규모의 스포츠 커뮤니티 FM 코라아가 적합합니다.', desc: '2008년 10월에 오픈한 대한민국의 인터넷 커뮤니티. 본래는 시뮬레이션 게임인 풋볼 매니저의 정보를 공유하는 커뮤니티였으나 유머갤 등 게임과 상관없는 여러 게시판이 생기고 유입 인원이 늘어났다. 2021년 12월 기준, 대한민국 사이트 접속자 수 8위, 커뮤니티로는 2위 규모의 사이트다 ' }, { name: '대한민국 최대규모의 게임 애니관련 커뮤니티 루리웹이 적합합니다.', desc: '한국의 비디오 게임 전문 사이트 및 커뮤니티. 2021년 12월 기준, 대한민국 인터넷 커뮤니티 접속자수 4위, 전체 18위 규모의 사이트이며, 디시 계통이 아닌 종합커뮤니티 중 가장 규모가 큰 사이트이다. 이름의 유래는 공식적으로는 운영자가 하이텔에서 활동했을때 하이텔 ID를 ONNURI(온누리)로 하려고 했으나 오타가 발생하여 ONRULI라는 애매모호한 단어로 ID가 등록되었고, 나름대로 애착이 생겨 RULI로 변경하여 이 ID를 바탕으로 RULIWEB(루리웹)이라고 명명했음을 주장하고 있으나, 네티즌 사이에서는 실질적으로 기동전함 나데시코의 호시노 루리에서 유래되었다고 여겨지고 있다.' }, { name: '재미난 유머글이 많은 네이트 판이 적합합니다.', desc: '2001년에 개설된 네이트 내에 존재하는 인터넷 커뮤니티이자 여초 커뮤니티.홈, 문화, 뷰티 등등의 여러 카테고리가 있는데, 그 중에서도 유난히 큰 카테고리는 톡톡 카테고리이다.' }, { name: '대한민국 최대규모의 쇼핑몰 정보공유 커뮤니티 뽐뿌가 적합합니다.', desc: '쇼핑몰 정보 공유 사이트로 시작하여, 스마트폰 대중화 이후부터 이동통신기기 거래 관련 최대의 커뮤니티 스마트폰 관련 정보나 쇼핑 정보 및 각종 재테크 관련 글들이 올라온다. ' }, { name: '대한민국 최대 연예인 관련 커뮤니티 더쿠가 적합합니다.', desc: '일본 음악 관련 커뮤니티를 기원으로 하는, 연예인 관련 정보를 비롯한 다양한 주제를 다루는 인터넷 커뮤니티. 게시글 작성에는 아이디가 필요하지만, 회원가입 개방은 비정기적으로 이루어진다는 특징이 있다. 이에 따라 아이디 자체가 희소성을 가져 거래의 대상이 되기도 하며, 이러한 행위는 약관에 위배되어 처분될 수 있다.# 모든 게시물과 댓글의 닉네임은 무명의 더쿠로 통일되며, 실명 인증을 필요로 하는 제한적 익명성[3]을 보장받는다. 수집된 개인정보는 위탁 관리되며 탈퇴 후 3개월에서 최대 5년까지 보관되어 수사기관에 대한 협조를 비롯한 사이트 운영을 위해 이용된다.' }, { name: '대한민국 최대 게임커뮤니티 인벤이 적합합니다.', desc: '대한민국의 주요 게임 웹진이자 커뮤니티. 주식회사 인벤커뮤니케이션즈에서 운영하고 있다.2021년 12월 기준, 대한민국 인터넷 커뮤니티 접속자수 3위, 전체 16위 규모의 사이트이다.' }, { name: '대한민국 최대의 IT 커뮤니티 클리앙이 적합합니다.', desc: '2001년 말 개설된, IT 커뮤니티이다. 사이트 운영자는 cipher(테이스터). 운영회사는 씨엘커뮤니케이션즈(대표:이봉희)다.' }, { name: '대한민국 최대의 유머커뮤니티 웃긴대학이 적합합니다.', desc: '1998년 8월 24일에 설립된 유머 커뮤니티이며 뿌리 깊은 국내 최장수 커뮤니티중 하나이다.현재 웃긴자료, 대기자료 등의 유머게시판 중심으로 운영하며 웃대툰, 공포, 사진 등의 창작게시판과 헬스, 만화, 게임, 요리, 동물, SNS 등의 취미 테마 게시판도 있으며 얼굴인식, 패션 분석 등의 인공지능이 가미된 게시판도 있다.' }, { name: '대한민국의 아이돌 덕질커뮤니티! 인스티즈가 적합합니다.', desc: '2009년 8월 3일에 오픈한 유료 회원제 연예오락 커뮤니티 사이트. 주로 아이돌 덕질을 다루는 여초 사이트 중 하나다.' }, { name: '대한민국 최대의 자동차 커뮤니티 보배드림이 적합합니다.', desc: '중고차 인터넷 쇼핑몰 겸 자동차 관련 인터넷 커뮤니티. 홈페이지시작은 중고차 쇼핑몰로 했으나 현재는 자동차 커뮤니티로 훨씬 유명하며, 보배드림이란 이름은 대표이사 김보배와 회사가 처음 입주한 건물인 드림타워에서 따왔다.' }, { name: '대한민국 PC 커뮤니티 쿨엔조이가 적합합니다.', desc: '쿨엔조이는 원래 2004년에 현재 쿨엔조이대장인 주유환씨의 개인블로그로 시작되었으나, 2006년 3월에 쿨러관련 사이트로 리뉴얼한후 (이때까지는 아직 쿨엔조이가 아닌 Cooling Solution 라는 이름이었다.[2]) 2006년에 이름을 다시지어 쿨링박스, 하드웨어쿨, 쿨링웹 등 다양한 이름이 거론되었지만 결국 쿨엔조이로 결정이 되어 현재까지 이어지고 있다. ' }, ]   <!DOCTYPE html> <html lang="ko" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet"> <link rel="stylesheet" href="./css/main.css"> <link rel="stylesheet" href="./css/default.css"> <link rel="stylesheet" href="./css/qna.css"> <link rel="stylesheet" href="./css/animation.css"> <link rel="stylesheet" href="./css/result.css"> <link rel="stylesheet" href="./css/menu.css"> </head> <body> <div class="mx-auto"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand px-5" href="#">Hueeng</a> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="./index.html">홈 화면</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 내가 만든것들 </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li><a class="dropdown-item" href="./community orientation.html">나에게 맞는 커뮤니티 찾기</a></li> <li><a class="dropdown-item" href="./calculator.html">자바스크립트 계산기</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </li> </ul> </div> </nav> </div> <div class="container"> <section id="main" class="mx-auto mt-5 py-5 px-3"> <h1> 내게 맞는 커뮤니티는? </h1> <div class="col-lg-6 col-md-8 col-sm-10 mx-auto my-5"> <img src="./img/main.png" alt="mainImge" class="img-fluid"> </div> <div class="explain mx-auto py-3 px-3"> <p> 우리나라에는 많은 커뮤니티가 있습니다.<br> 나에게 맞는 커뮤니티를 찾는걸 도와드리겠습니다.<br><br> 재미로 만들어졌으며 과몰입은 추천드리지 않습니다. </p> </div> <button type="button" class="btn btn-outline-primary mt-3" onclick="js:begin()">시작하기</button> </section> <section id="qna"> <div class="status mx-auto mt-5"> <div class="statusBar"> </div> </div> <div class="qBox mx-auto my-5 py-5 px-3"></div> <div class="answerBox mx-auto"> <div class="row row-cols-1 row-cols-md-2 g-2 "> <div class="col"> <div class="card"> <img class="card-img-top leftImage" src="./img/main.png" alt="Card image cap"> </div> </div> <div class="col"> <div class="card"> <img class="card-img-top rightImge" src="./img/main.png" alt="Card image cap"> </div> </div> </div> </div> </section> <section id="result"> <section id="main" class="mx-auto mt-5 py-5 px-3"> <h1> 최적의 커뮤니티를 찾았습니다. </h1> <div class="resultname"> </div> <div id="resultImg" class="col-lg-6 col-md-8 col-sm-10 mx-auto my-5"> </div> <div class="explain mx-auto py-3 px-3"> <div class="resultDesc"> </div> </div> <button type="button" class="btn btn-outline-primary mt-3">다시하기</button> </section> <script src="./js/start.js" charset="utf-8"></script> <script src="./js/data.js" charset="utf-8"></script> </div> </body> </html>   const main = document.querySelector("#main"); const qna = document.querySelector("#qna"); const result = document.querySelector("#result"); const endPoint = 12; const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; function calResult() { var result = select.indexOf(Math.max(...select)); return result; } function setResult(){ let point = calResult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name; var resultImg = document.createElement('img'); const imgDiv = document.querySelector('#resultImg'); var imgURL = 'img/image-' + point + '.png'; resultImg.src = imgURL; resultImg.alt = point; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDesc'); resultDesc.innerHTML = infoList[point].desc; } function goResult(){ qna.style.animation = "fadeOut 1s"; setTimeout(() => { result.style.animation = "fadeIn 1s"; setTimeout(() => { qna.style.display = "none"; result.style.display = "block" }, 450)}) setResult(); } function imgeNext(qIdx, idx) { let leftImage = document.querySelector('.leftImage'); let rightImge = document.querySelector('.rightImge'); leftImage.disabled = true; leftImage.classList.remove('fadeIn'); leftImage.classList.add('fadeOut'); rightImge.disabled = true; rightImge.classList.remove('fadeIn'); rightImge.classList.add('fadeOut'); setTimeout(() => { if (qIdx + 1 === endPoint) { goResult(); return; } else { setTimeout(() => { var target = qnaList[qIdx].a[idx].type; for(let i = 0; i <= target.length; i++){ console.log(select); select[target[i]] += 1; } leftImage.style.display = 'none'; rightImge.style.display = 'none'; goNext(++qIdx); }, 450) } }, 450) } function goNext(qIdx){ var q = document.querySelector('.qBox'); q.innerHTML = qnaList[qIdx].q; var status = document.querySelector('.statusBar'); status.style.width = (100/endPoint) * (qIdx+1) + '%'; status.innerHTML = qIdx+1; let qnaURL = './img/question/0'; let leftURL = qnaURL + '-A.png'; let rightURL = qnaURL + '-B.png'; let leftImage = document.querySelector('.leftImage'); let rightImge = document.querySelector('.rightImge'); leftImage.src = leftURL; rightImge.src = rightURL; leftImage.style.display = 'block'; rightImge.style.display = 'block'; leftImage.classList.remove('fadeOut'); rightImge.classList.remove('fadeOut'); leftImage.classList.add('fadeIn'); rightImge.classList.add('fadeIn'); leftImage.addEventListener("click", function() { imgeNext(qIdx, 0); }, false); rightImge.addEventListener("click", function() { imgeNext(qIdx, 1); }, false); } function begin() { main.style.animation = "fadeOut 1s"; setTimeout(() => { qna.style.animation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block"; }, 450); let qIdx = 0; goNext(qIdx); }, 450); }

    이러한 오류가 계속 뜨고 '1'이 안떠서 해매고있습니다.. ㅠ 어떠한 문제가 있을까요? 환경변수에 key값까지 등록을 했는데 말이조..