// const { chars } = new SplitText('.stage h1', { type: 'chars' }); function splitTextChars(elem) { const textElem = document.querySelector(elem); const letters = textElem.textContent.split(''); let newHTML = ''; letters.forEach(letter => { newHTML += /* HTML */ ` <div style="position:relative; display:inline-block">${letter}</div>`; }); textElem.innerHTML = newHTML; return [...document.querySelectorAll(`${elem} div`)]; } const chars = splitTextChars('.stage h1');복습중에 유료플러그인이나 라이브러리 없이 써보고싶어서 만들어봤습니다 ! 맞는 코드인지는 모르겠지만 혹시 참고하실분이 계실까 싶어 남겨둘게요 !ㅎㅎ

안녕하세요 할당문이 표현식이 아닌문이라고 하셨는데할당문은 표현식인문이라서 표현식이 아닌가요??그 자체로 값을 갖으니까 책에서는 표현식인문이라고 해서 헷갈려서 질문드립니다.또한 선언문은 표현식인문이 아니라하셨는데책58p 그림5-4부분 var foo =10;부분 변수 선언문이면서 할당되는데 그러면 foo가 10이라는 값을 갖으니까이부분도 표현식인문인 표현식이 아닌가요? ㅠㅠ설명 부탁드려도될까요 ㅠ.ㅠ

자바스크립트를 이 강의로 처음 공부하고 있어요.끝말잇기에 이어 쿵쿵따를 순서도 그려보며 코딩하는 중인데이틀 간 생각해보면서 구글에 검색해보면서 짠 코드가 <div><span id="order">1</span>번째 참가자</div> <div>제시어: <span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = parseInt(prompt('몇 명이 참가하나요?'), 10); const $order = document.querySelector('order'); const $word = document.querySelector('word'); let word; // 제시어 let newWord; //새 단어 if (!$word) { //제시어가 없을 때 word = newWord; $word.textContent = newWord; const order = Number($order.textContent); order ++; if (word.length == 3) { } else { } } else { //제시어가 있을 때 $word.textContent = newWord; order ++; }여기까지인데 처음이라 그런 건지 제가 머리가 안 좋은 건지 제가 어떤 걸 모르는지를 모르겠어서 진행이 안되는 상황이에요. 강의를 보는 게 맞을까요 아니면 계속 도전해봐야 될까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.node.js 설치를 완료했는데 버전이 안나오는데 왜 그런건가요?

강사님 안녕하세요변수 스코프에 대해 질문드립니다.자바스크립트는 변수를 참조할 때 현재 블록 부터 시작해 상위 블록으로 올라가며 변수를 찾는다고 이해하고 있습니다.그래서 아래의1번째 코드는 이해가 됩니다.const b=10; 함수(a=>({ a: b //b는 10입니다. }));여기서 2번째 b는 상위 블록으로 올라가며 const b =10 을 찾습니다.그래서 a: 10이 됩니다. 그러나 2번째 코드의 경우 이해가 어려웠습니다.const b=10; 함수(b=>({ //b는 undefined 입니다. a: 11 }));이때는 콜백함수의 매개변수 b에 10이 아닌 undefined가 들어갑니다.여기서 이해가 어려웠습니다.자바스크립트는 변수를 참조할 때 현재 블록 부터 시작해 상위 블록으로 올라가며 변수를 찾습니다. 그렇다면 1번째 코드처럼 2번째 코드에서도 파라미터 b에 10이 들어간다고 생각했는데, 제가 잘못 생각한 부분을 가르쳐주시면 감사하겠습니다.

해당 에러 구글링해도 제가 아직 배움이 짧은지 이해를 못하겠습니다.

1. 배포에 관한 부분은 아직 없는 것 같은데 업데이트 중인가요? 아니면 Part2로 나눠서 나올까요?2. 강의 구매 인증을 하면 우선 답변을 받을 수 있는 채널로 초대하신다고 했는데 어디서 구매 인증을 해야 할까요?

안녕하세요?혹시 프론트, 백엔드 코스 구매하면앞부분에 강의가 겹치는지 문의드려요

안녕하세요, 강의를 잘 수강하고 실무에서도 잘 사용하고 있습니다. 다름이 아니라 몇가지 질문들이 있어서 드립니다. 1) action에서 반드시 mutation을 호출할 필요는 없는 것이죠? view에서 action을 통하여 api를 호출하여 비동기로 데이터를 받은 다음, action을 호출한 method에서 데이터를 처리하고 mutation을 다시 호출하여 state에 넣어도 되는 것이죠? 2) 1번 질문의 연장 질문입니다. action에서 비동기로 받은 데이터를 return을 받는 방법은 일반적인 method에서 return 시키는 방법처럼은 없는 것인가요? 검색해보면 전부 promise를 사용하는 방식인거 같아서요. 3) 제가 이해하기론 view에서는 getter를 이용해서 state의 데이터를 받는 것이라고 이해했습니다.그렇다면 우리가 어떤 컴포넌트의 v-model에 getter를 직접 연결해도 괜찮은가요?실제로 vuex에는 데이터가 잘 반영이 되는데, 이렇게 되면 getter가 mutation의 역할도 같이 해버리는 것 같아서요.찾아보면 value=mapState + @input을 통하여 method에서 mutation을 호출하여 분리하여 처리하라고 하는거 같은데, view에서 바로 state를 붙게되면 또 getter의 의미가 퇴색되는거 같아서 그렇습니다. 4) 특정 메뉴의 컴포넌트의 depth도 깊고 child도 많은 상황이라 vuex를 사용하려합니다. 그런데, 버튼을 클릭하면 특정 컴포넌트를 추가하고 또 삭제도 가능한 상황입니다. v-for를 통하여 vuex에 있는 list에 해당 컴포넌트의 데이터를 추가하고 삭제하면서 관리를 합니다. 다만, 특정 컴포넌트에서 vuex에 있는 데이터에 바로 접근하려면 항상 본인의 index를 props로 내려받아서 list[this.index].object 이런식으로 접근해야하는데, v-for와 vuex를 동시에 사용하는 상황에서 효과적으로 컴포넌트를 설계하는 방식이 있을까요? 5) action과 mutation의 동작 범위action과 mutation은 각각 비동기/동기로 데이터를 처리하는 것으로 이해하고 있습니다.그렇다면 우리가 action과 mutation에도 많은 녀석들이 생성될 텐데요.action과 mutation안에서 단순히 api로 데이터를 비동기로 호출하거나 또는 동기로 state에 데이터를 저장하는 그런 동작 외에 어떤 데이터를 처리하거나 하는 Logic단같은 코드나 함수를 추가해도 되는 것일까요?아니면 그런 코드들은 view에서 생성하고 거기서만 처리하고 action과 mutation에는 단순 데이터를 호출하고 저장하고 하는 그런 코드만 작성하여 최소한으로 해두어야하는 것일까요? 6) 현재 저희는 typescript로 넘어가지 않고 아직 javascript를 사용하고 있습니다.간간히 javascript의 class를 사용하고 간단한 디자인 패턴도 넣어서 같이 구현하곤 하는데요.혹시 다른 객체지향언어(C#, Java)와 같이 class와 상속/조합 과 같은 설계를 많이 사용하시나요?아니면 그런걸 지원하긴 하지만 거의 안쓰시나요?또한, 전략/팩토리/옵저버 등과 같은 간단한 디자인패턴도 사용하시는지? 아니면 브릿지 등과 같은 고급 패턴도 typescript/javascript에서 구현을 해서 사용을 하는 경우도 있는지 이런 부분이 생기면 최대한 backend단으로 넘겨서 처리시키시는지 front에서의 처리를 어느정도로 하는지 궁금합니다. 말솜씨가 안좋아서 저의 질문이 잘 전달되었는지는 모르겠습니다.혹시나 확인하시고 여유가 되신다면 답변을 부탁드립니다 :)

nodemon : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\~~~~~\AppData\Roaming\npm\nodemon.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.위치 줄:1 문자:1+ nodemon+ ~~~~~~~+ CategoryInfo : 보안 오류: (:) [], PSSecurityException+ FullyQualifiedErrorId : UnauthorizedAccess 이런거 뜨면https://velog.io/@kimy/VS-CODE-supervisor-nodemon-%EC%98%A4%EB%A5%98-ps1-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%A1%9C%EB%93%9C%ED%95%A0-%EC%88%98-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4이 방법대로 참조하세요 혹시 안되시는분들

저 강의에서는 vpm init 등등을 활용해 노드js 기타등등을생성하셨는데 이번강의에선 깃허브에서 다운을 통해 선생님께서 이미 준비하신 node.js파일들을 제공받았는데..만약 제가 스스로 혼자서 셋팅하고 만들어보고 싶은 경우에는 어찌해야 할까요...? 아니면 그냥 선생님이 만들어주신 저 다운패키지들을 활용해도 별 문제 없을까요...? 

 안녕하세요예를 들어 MockUserRepository를 만들고 그 안에 mydb라는 데이터가 있습니다.만약 기존 User 테이블이 Post 테이블과 관계가 맺어져 있다면 Post까지 mydb에 담아야 하나요?mydb = [{ id= '', name:='', password= '' }] 이렇게 해야 하는 건지아니면 mydb = [{ id: '', name:'', password: '', post: { id: '', title: ''}] 이렇게 작성해야 하는 건지 궁금합니다!! 그리고 userService에서 postService를 사용하는 로직이 있는데 userService 테스트시 MockPost 테이블까지 같이 구현해야 하는 건지..아니면 다른 방법이 있는 건지ㅜㅜ 궁금하네요 하나만 더 여쭤보자면.. ㅜㅜ 제가 이해가 잘 안가서 그러는데 controller.ts를 테스트할 때는 service를 mock하고, service.ts를 테스트할 때는 데이터베이스를 mock해서 사용하는 건가요??

function showError(){ alert('에러가 발생했습니다'); } const result = showError(); console.log(result);여기서 showError() 함수만 실행했을 때와 다르게 result에 입력해서 실행하고 나서 undefined 가 나오는 출력되는 이유는 무엇인가요?제가 추측하기엔 변수가 함수와 인자까지 같이 실행시켜야하는데 인자가 존재하지않아 undefined 가 나오는 것이라고 추측하고 있습니다만,정확하게 모르겠습니다

포스트맨에서 요청하려는데 어느 부분이 문제여서 에러가 난걸까요?일단 어느부분을 보셔야 해결해주실 수 있으실지 모르겠어서 캡처를 2개 했습니다.

module.exports = { jwtsecret : "jwt_secret_key_9312", host : "3.38.61.157", user : "root", port : "3306", password : "~~~", detabase : "enrolment", };이렇게 하고 index.js를 해줬는데선생님처럼 aws아이피는 안 뜨고 그냥PS C:\Users\YOONJUNHO\Documents\Test\Node-Template-For-Food-Map-main> node index.js2023-11-15 02:38:07 info: undefined - API Server Start At Port 3000이것만 뜨는데 이것도 연결된건가요?  

열심히 풀었습니다! function solution(array) { let answer = 0; for (let i = 0; i < array.length; i++) { for (let j = 0; j < array[i].length; j++) { const result = []; const target = array[i][j]; const left = array[i][j - 1] ?? 0; const right = array[i][j + 1] ?? 0; const top = i > 0 ? array[i - 1][j] : 0; const bottom = i < array.length - 1 ? array[i + 1][j] : 0; result.push(target); result.push(left); result.push(right); result.push(top); result.push(bottom); if (target === result.sort((a, b) => b - a)[0]) answer++; } } return answer; } console.log( solution([ [5, 3, 7, 2, 3], [3, 7, 1, 6, 1], [7, 2, 5, 3, 4], [4, 3, 6, 4, 1], [8, 7, 3, 5, 2], ]) );

강사님 안녕하세요항상 상세한 답변을 주시는 점 감사드립니다.아래의 코드를 보고 질문을 받아주시면 감사하겠습니다.import './App.css'; import Counter from './Counter'; import Container from './Container'; import {useEffect, useState} from "react"; import MyHeader from './MyHeader.js' export default function App() { const [state, setState] = useState({ a: 0, b: 0 }); const onClick = () => { const c=10; setState(c=>({ a: c + 1 })); }; return ( <div className="App"> <div>a : {state.a}</div> <button onClick={onClick}>증가</button> </div> ); }1번째 경우원래는 아래의 코드처럼 setState의 콜백함수의 인자에 state를 넣는 게 맞습니다.const c=10; setState(state=>({ a: c + 1 // 이 줄의 c는 1번째 줄의 c를 가리키므로 a: 10 + 1 과 같습니다. }));이때는 a:c+1에서의 c가 함수 밖에 선언된 맨위의 const c= 10의 c를 가리킵니다. 2번째 경우 일부러 setState의 콜백함수의 인자를 state가 아닌 c로 적어봤습니다.const c=10; setState(c=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. }));그러자 a: c + 1 에서의 c는 1번째 줄의 c가 아닌, 콜백함수 인자로 들어간 2번째 줄의 c를 가리킵니다.그래서 변수의 스코프를 공부하고 싶어서 조언을 구하고 싶습니다. 1번째 질문을 드립니다.변수가 const, let, var 인지에 따라서 스코프가 다른 것으로 아는데콜백함수의 인자로 들어간 변수는 const인지 let인지, var 인지 질문드리고 싶습니다. 2번째 질문을 드립니다.이 부분에 대해 학습하면 좋을 자료 링크를 추천해주시면 감사하겠습니다.저도 현재 변수 스코프에 대해 다시 공부하는 중입니다.3번째 질문을 드립니다.const c=10; setState(c=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. })); 에서2번째 줄의 콜백함수 인자의 c는 1번째 줄의 c를 가리키지 못하는 이유에 대해 질문드리고 싶습니다.4번째 질문을 드립니다.const c=10; setState(state=>({ //이 부분 변경 state 를 지우고 c로 a: c + 1 // 이 줄에서의 c는 1번째 줄의 c를 가리키지 않습니다. }));3번째 줄의 c는 1번째 줄의 c를 가리킬 수 있는 이유에 대해 질문드리고 싶습니다감사합니다.

희안하게 set에서는 forEach를 사용 할 수 있는데, map이랑 filter, reduce등은 안되더라고요. forEach만 되는 이유가 혹시 따로 있는건가요?

샘 직접 만들어 봣습니다 며칠 고민하면서 근데 공지에는 코드전체를 올리지말라햇는데 피드백을 받으려면 올릴수박에 없어서요 만든게 어떤지 평가나 피드백좀주실수잇나여  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 쿵쿵따 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명인지 입력을 받는다:')); const $input = document.querySelector('input'); // 인풋울 자스로 기능을 넣어야 하기떄문이다 const $button = document.querySelector('button'); // 버튼 을 자스기능으로 넣어야 하기떄문 const $order = document.querySelector('#order'); // 몇번쨰인지 자스기능으로 값을 조절해야하기떄문 이다 const $word = document.querySelector('#word'); // 제시어의 저장및 잇는지 확인 하기 위해 자스기능으로 넣어야 하기떄문이다; let word; let newWord; // 인풋에 적혓을떄 세글자인지 판단한다 // 그와반대로 버튼에 눌럿을떄 이벤트가 발생되면 // 제시어값이 잇는채로 버튼이 눌리면 #word와 끝자리가 맞는지도 확인 작업을 해야하고 // const onClick = () => //버튼을 눌럿을떄 { if(newWord.length===3) // 버튼을 누르고 세글자 일떄 { if(!word) // 세글자이면서 제시어가 비어잇다 첫사람이다 { //제시어를 입력한 상태로 그값을 저장 해주어야 한다 word=newWord; $word.textContent = word; // word 변수에 담긴 내용이 $word라는 HTML 요소의 텍스트 내용으로 들어가게 될 거예요. // 그래서 워드 안에 입력된 뉴월드 단어값이 $word. 에 저장이 되서 제시어가 저장이 되는원리이다 $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else //세글자이면서 제시어가 잇는 즉 이미 한명이 시작한단계 { if(word[word.length-1]===newWord[0]) // 세글자이면서 제시어가 잇으며 마지막 단어와 시작단어가 같을떄 //둘다 값이 같을떄 제시어를 받는다 { word=newWord; /// 워드에 인풋 입력값을 저장해놈 단어를 저장 해둠 $word.textContent = word; // 이 해석을 연구해봐야 한다; $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else // 자리수 값이 다를떄 올바르지 않는단어임을 알려준다 { alert('입력을 다시하십시오 올바르지않는단어입니다'); } } } // 세글자 일떄 실행 else // 버튼을 눌럿을대 세글자가 아닐떄 들어가지지도 못하게 하면된다 { alert('세글자가 아니므로 다시 세글자를 입력해주세요'); } } const writing =(event) => // 인풋 글자입력란 이벤트 리스너와 연결된 함수 { newWord= event.target.value; // 인풋의 값이입력되면 저장 할껏 뉴월드에 ; } $input.addEventListener('input',writing); // 인푹에 이벤트 발생됫을떄 함수로 연결해서 단어를 저장한다; $button.addEventListener('click',onClick); // 버튼 이벤트 </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div><span id="order">1</span>번쨰 쿵쿵따 참가자</div> <div>제시어:<span id="word"></span></div> <input type="text"> <button>입력</button> <script> const number = Number(prompt('몇명인지 입력을 받는다:')); const $input = document.querySelector('input'); // 인풋울 자스로 기능을 넣어야 하기떄문이다 const $button = document.querySelector('button'); // 버튼 을 자스기능으로 넣어야 하기떄문 const $order = document.querySelector('#order'); // 몇번쨰인지 자스기능으로 값을 조절해야하기떄문 이다 const $word = document.querySelector('#word'); // 제시어의 저장및 잇는지 확인 하기 위해 자스기능으로 넣어야 하기떄문이다; let word; let newWord; // 인풋에 적혓을떄 세글자인지 판단한다 // 그와반대로 버튼에 눌럿을떄 이벤트가 발생되면 // 제시어값이 잇는채로 버튼이 눌리면 #word와 끝자리가 맞는지도 확인 작업을 해야하고 // const onClick = () => //버튼을 눌럿을떄 { if(newWord.length===3) // 버튼을 누르고 세글자 일떄 { if(!word) // 세글자이면서 제시어가 비어잇다 첫사람이다 { //제시어를 입력한 상태로 그값을 저장 해주어야 한다 word=newWord; $word.textContent = word; // word 변수에 담긴 내용이 $word라는 HTML 요소의 텍스트 내용으로 들어가게 될 거예요. // 그래서 워드 안에 입력된 뉴월드 단어값이 $word. 에 저장이 되서 제시어가 저장이 되는원리이다 $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else //세글자이면서 제시어가 잇는 즉 이미 한명이 시작한단계 { if(word[word.length-1]===newWord[0]) // 세글자이면서 제시어가 잇으며 마지막 단어와 시작단어가 같을떄 //둘다 값이 같을떄 제시어를 받는다 { word=newWord; /// 워드에 인풋 입력값을 저장해놈 단어를 저장 해둠 $word.textContent = word; // 이 해석을 연구해봐야 한다; $input.value =''; const order= Number($order.textContent); if(order + 1 >number) // 세글자이면서 제시어가 비어잇으면서 전체보다 크면 // 크면 1로초기화 시켜야 하고 { $order.textContent=1; } else // 세글자이면서 제시어가 비어잇으면서 전체보다 작으면 ; { $order.textContent=order+1; } } else // 자리수 값이 다를떄 올바르지 않는단어임을 알려준다 { alert('입력을 다시하십시오 올바르지않는단어입니다'); } } } // 세글자 일떄 실행 else // 버튼을 눌럿을대 세글자가 아닐떄 들어가지지도 못하게 하면된다 { alert('세글자가 아니므로 다시 세글자를 입력해주세요'); } } const writing =(event) => // 인풋 글자입력란 이벤트 리스너와 연결된 함수 { newWord= event.target.value; // 인풋의 값이입력되면 저장 할껏 뉴월드에 ; } $input.addEventListener('input',writing); // 인푹에 이벤트 발생됫을떄 함수로 연결해서 단어를 저장한다; $button.addEventListener('click',onClick); // 버튼 이벤트 </script> </body> </html> 

강의 보면서 f12에 개발자 도구 켜서 const str = "이 _ 문자열을 _ 이렇게 _ 나누어주었으면 _ 좋겠어."; String.prototype[Symbol.split] = function (string) { let result = ""; let residue = string; let index = 0; do { index = residue.indexOf(this); if (index <= -1) { break; } result += residue.substr(0, index) + "/"; residue = residue.substr(index + this.length); } while (true); result += residue; return result; }; console.log(str.split(" _ "));해당 코드 실행 시키면 인프런 팅깁니다. 조심하세요 ㅋㅋ