안녕하세요. 강의 너무 재밌게 잘 보고 있습니다. 두가지 질문이 있어서 문의글 남깁니다.   질문 1. 테스트코드에서 async, await 가 필요없어 보이는 곳에도 꼭 붙이는 이유가 있나요? 예를들면, 아래 1번 코드에서 async await 이 반드시 필요한 이유가 있는건가요? 저는 2번처럼 async-await을 제거해도 테스트가 정상 통과 되어서요. 특별한 목적이 있어서 붙여야 하는건지 궁금합니다. !  1) it('총 상품 금액은 "$500.00"로 노출된다', async () => { await render(<TestPayment />); expect(screen.getByText('500.00')).toBeInTheDocument(); }); 2)it('총 상품 금액은 "$500.00"로 노출된다', () => { render(<TestPayment />); expect(screen.getByText('500.00')).toBeInTheDocument(); });  질문 2. render 함수를 util 로 만들어서 사용하시는데, userEvent.setup의 user 도 함께 들어있는 이유가 궁금합니다. userEvent를 쓰지 않는 테스트코드도 있는데, 꼭 함께 들어있어야하나 하는 생각이 들어서요 ㅎㅎ userEvent를 더 편리하게 사용하기 위함인가요? export default async (component, options = {}) => { const { routerProps } = options; const user = userEvent.setup(); return { user, ...render( <QueryClientProvider client={queryClient}> <MemoryRouter {...routerProps}>{component}</MemoryRouter> <Toaster /> </QueryClientProvider>, ), }; }; 감사합니다!

function solution(arr) { const strArry = arr.split(""); let answer = []; let i = 0; while (i < strArry.length) { if (strArry[i] === "(") { answer.push(strArry[i]); } else { answer.pop(strArry[i]); } i++; } return answer.length === 0 ? "YES" : "NO"; } //console.log(solution("(()(()))(()")); console.log(solution("(((())))"));

function solution(sum, arr) { let left = 0; let right = 0; let add = 0; let count = 0; while (right < arr.length) { if (add >= sum) { add -= arr[left ++]; } else { add += arr[++right]; } if (add === sum) count++; } return count; } console.log(solution(6, [1, 2, 1, 3, 1, 1, 1, 2]));

안녕하세요! 강의 너무 잘 듣고 있습니다. 별건 아니고 혹시 db 컬럼을 평소에도 camel로 쓰시는건가요??보통 db컬럼은 스네이크로 많이들 쓰는걸로 알고 있어서 여쭤봅니다!

안녕하세요! nestjs 수강생 입니다!docker 부분에서 질문이 있어서 문의 드리게 되었습니다. 현재 local 과 docker postgres image 가 이렇게 연결되어 있습니다. 알고 있는 점(1) docker-compose up 을 실행하면 두 폴더가 연결되며 docker postgres 의 데이터 폴더를 로컬 폴더와 매핑한다.(2) docker postgres 에서 데이터 손실 시 로컬에서 관리하는 postgres-data 폴더 덕분에 문제 없음(3) 로컬 폴더를 날리고 docker-compose up을 재 실행하면 모든 데이터 날라감. 궁금한 점(1) 개발자는 자신의 로컬 폴더에 있는 데이터만 CRUD 하고 그 결과가 docker postgres 에 반영되는 건가요? 그래서 로컬폴더를 삭제하고 docker-compose up 을 재 실행하면 데이터가 모두 날라가는 건가요?(2) docker-compost up 을 실행하면 처음에는 로컬에서 docker postgres 에 데이터를 가져오는데 그럼 ./postgres-data 폴더가 있을때와 없을때가 다르게 동작하는 건가요? 예를들어 있을때는 로컬에서 docker postgres 로 전송, 없을때는 docker postgres에서 로컬로 전송. 아래는 제가 이해하고 있는 점인데 어떤 부분이 맞고 틀린 지를 알 수 없어서 쭉 적어봤습니다!!처음 docker-compose up 을 실행하면 ./postgres-data 폴더가 없어서 docker postgres의 폴더를 복사해서 가져와 매핑합니다. 매핑 되어있는 폴더 덕분에 우리는 로컬 폴더와 TypeORM 을 사용해서 데이터에 변화를 주고 이러한 CRUD 는 docker postgres 에 반영됩니다.이러한 매핑 덕분에 docker 가 문제가 되어 docker postgres 의 데이터가 삭제되어도 로컬에서 저장된 데이터를 매핑할 수 있어 데이터를 보존할 수 있습니다.로컬에서 ./postgres-data 를 삭제하고 docker-compose up 을 실행하면 docker postgres 는 로컬의 CRUD 중 Delete 상황을 docker postgres 에 반영하여 데이터를 모두 삭제하고 폴더가 없어졌으니 다시 받아오는 작업을 한다. 혹시 잘못된 개념 부분이 있을까요?

안녕하세요. 선생님께 잘 배워서 웹사이트를 만들었습니다. timelessflash.com 아직 테스트중이고요. 조금 더 손봐야 합니다만 본기능은 사용할 수 있습니다. 마지막 관문이 남았습니다. 광고넣기입니다. vue3에서 작은 콤포넌트에 구글 애드센스 적용하고 싶은데 관련 강의클립이 제작된 것이 있나요? <vue.js 끝장내기>까지 소유하고 있는데 광고 삽입 관련 강의는 없는 것 같아요.추가 강의를 부탁드립니다. 감사합니다.

해당 코드 그대로 따라 쳤는데 안 되네요. 판교님 블로그에서도 예제 있어서 복붙 했는데, 마찬가지로 안 되요.흠... 혹시 막힌건지.. 다른 동일한 질문글이 있어서 수정해봤지만 역시 value가 undefined라 동작이 안 되네요 ㅜㅜ~

안녕하세요.수강생입니다. 강의 잘보고 있습니다.한가지 질문이 있습니다. class validation 과 class transformer 도 일종의 pipe 인가요? context를 알고 validation 과 transformer 를 수행하는거 같아서요..

처음 강의를 시작하고 터미널을 열어 npx create-react-app emotion-diary 생성하고 npm install react-router-dom@6을 실행했는데 영상처럼 emotion-diary에 같이 적용이 안되고 따로 다른 파일형식으로 적용이 되는것 같은데 제가 하는 방식이 맞는지 확인 부탁드립니다

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. function solution(s, arr) { const cache = Array.from({ length: s }).fill(0); for (let i = 0; i < arr.length; i++) { // cache miss if (!cache.includes(arr[i])) { cache.unshift(arr[i]); cache.pop(); } // cache hit else { const idx = cache.indexOf(arr[i]); const temp = cache[idx]; let j; for (j = idx - 1; j >= 0; j--) { cache[j + 1] = cache[j]; } cache[j + 1] = temp; } } return cache; } let arr = [1, 2, 3, 2, 6, 2, 3, 5, 7]; console.log(solution(5, arr)); // 7 5 3 2 6 최악의 경우 O(N^2)인 거 같은데 맞나요 ?

TodoList.vue에서 removeBtn으로 removeTodo함수를 호출하면서 부모창으로 emit을 요청했지만app.vue에서 콘솔로그를 출력해봤을때 해당 함수를 호출이 안되는데, 원인이 뭔지를 모르겠습니다.강의 내용대로 입력했는데, 해당 기능이 수행되지 않고 있습니다. localhost:8080 으로 접속했을 때 아래와 같은 오류가 뜹니다.app.vue소스에서 methods 영역에 아래와 같이 선언했는데 못찾는 이유가 무엇인가요?removeOneItem: function(todoItem){에러메시지 -main.js:4 [Vue warn]: Property "removeOneItem" was accessed during render but is not defined on instance. at <App>  TodoList.vue<template> <div> <ul> <li v-for="(todoItem , index) in propsdata" v-bind:key="todoItem.item" class="shadow"> <i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i> <span v-blind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span> <span class="removeBtn" v-on:click="removeTodo(todoItem, index)"> <i class="fa-solid fa-trash"></i> </span> </li> </ul> </div> </template> <script> export default { props:['propsdata'], methods: { removeTodo : function(todoItem, index){ this.$emit('removeItem', todoItem, index); }, toggleComplete: function(todoItem, index){ console.log(todoItem.item + " " + index); todoItem.completed = !todoItem.completed; localStorage.removeItem(todoItem.item); localStorage.setItem(todoItem, JSON.stringify(todoItem)); } } } </script>app.vue<template> <div ip="app"> <TodoHeader></TodoHeader> <TodoInput v-on:addTodoItem="addOneItem"></TodoInput> <!-- <TodoInput v-on:하위 컴포넌트에서 발생시킨 이벤트 이름="현재 컴포넌트 매소드명"></TodoInput> --> <TodoList v-bind:propsdata="todoItems" v-on:removeItem="removeOneItem"></TodoList> <!-- <TodoList v-bind:propsdata="todoItems"></TodoList> --> <!-- <TodoList v-bind:내려보낼 프롭스 속성 이름="현재 위치의 컴포넌트 데이터 속성"></TodoList> --> <TodoFooter></TodoFooter> </div> </template> <script> import TodoHeader from './components/TodoHeader.vue' import TodoInput from './components/TodoInput.vue' import TodoList from './components/TodoList.vue' import TodoFooter from './components/TodoFooter.vue' export default { data: function(){ return { todoItems:[] } }, methods:{ addOneItem: function(todoItem){ console.log("addOneItem:[" + todoItem + "]"); var obj = { completed : false, item: todoItem }; // console.log(this.newTodoItem); //저장하는 로직 localStorage.setItem(todoItem,JSON.stringify(obj)); this.todoItems.push(obj); } }, removeOneItem: function(todoItem){ // console.log("removeOneItem app remove items:[" + index + "]:" + todoItem.item); console.log("removeOneItem app remove items:[:" + todoItem.item); localStorage.removeItem(todoItem.item); // this.todoItems.splice(index, 1); },

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. function solution(arr) { for (let i = 1; i < arr.length; i++) { for (let j = i; j > 0; j--) { if (arr[j] < arr[j - 1]) { [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]]; } } } return arr; } let arr = [11, 7, 5, 6, 10, 9]; console.log(solution(arr));

context api 강의는 있는데 리덕스가 안보여서 질문올립니다.

안녕하세요 디버그가 잘 안되어서 문의 드립니다. { // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요. // 기존 특성에 대한 설명을 보려면 가리킵니다. // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요. "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Debug NestJS", "runtimeExecutable": "yarn", "runtimeArgs": [ "start:debug" ], "console": "integratedTerminal", "restart": true, "port": 9229, "autoAttachChildProcesses": true } ] }위와 같이 설정을 하고, 실행을 하였는데, 아래 메세지가 뜨면서 실패합니다. source /Users/ik/workspace/full-gpt/venv/bin/activate➜ workspace source /Users/ik/workspace/full-gpt/venv/bin/activate(venv) ➜ workspace /usr/bin/env 'NODE_OPTIONS= --require "/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/ms-vscode.js-debug/src/bootloader.js" --inspect-publish-uid=http' 'VSCODE_INSPECTOR_OPTIONS=:::{"inspectorIpc":"/var/folders/tz/c_vc4l0n1y5fhzwqv7rphrxm0000gn/T/node-cdp.28589-f5f66828-7.sock","deferredMode":false,"waitForDebugger":"","execPath":"/Users/ik/.nvm/versions/node/v20.10.0/bin/node","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"/var/folders/tz/c_vc4l0n1y5fhzwqv7rphrxm0000gn/T/node-debug-callback-8c26c617c10dd13b"}' /Users/ik/.nvm/versions/node/v20.10.0/bin/yarn start:debug Debugger attached.yarn run v1.22.21error Couldn't find a package.json file in "/Users/ik/workspace"info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.Waiting for the debugger to disconnect...(venv) ➜ workspace  왜 그런지 알 수 있을까요?

const [sortType, setSortType] = useState("latest");강사님 하고 똑같이 useState 초기값을 latest로 했는데새로고침 하거나 페이지 이동하고 돌아오면 저는 5번부터 정렬되는데 왜 강사님은 1번부터 정렬되나요?latest니까 5번부터 정렬돼야 하는거 아닌가요?

2:05초에서는 created()에서 getNewsList();함수 호출 하나로 axios.then.catch 코드를 줄일수 있다고 하셨는데,12:00 초에서는 import 후에 fetchNewsList() 호출 후 , then.catch그대로 있어서 결과론적으로 얻는 이점이 뭔지 모르겠습니다! 

강사님 안녕하세요! 유튜브에서 보고 인프런까지 따라와서 강의 잘 듣고 있습니다! 실전사이트A 영상1시간19분쯤에서 유효성검사 엄청 편하게 하시던데 어떤 툴을 사용하면 되나요?  

accept connections 까지 확인 후에도 data 폴더 안에 아무것도 생성되지 않아서요! 질문드립니다!!

후반부 create-react-app 사용을 알려주시면서 components 디렉터리 생성하는 걸 언급해주셨는데요. 모범사례라 할 수 있는 디렉터리 구조가 궁금해서 알려주시면 감사할 것 같아요. 예를 들어 서버로부터 API를 통해 고양이 이미지를 불러오는 함수의 경우 useEffect 함수 및 Form 컴포넌트에서 사용을 위해 재사용 되었는데 이러한 코드 스니펫을 어떤 디렉터리를 생성해서 보관하면 좋을지 궁금하더라고요. 문자열 내 한글이 포함되었는지 파악하는 유틸 개념의 함수도 마찬가지고요. 이러한 디렉터리 구조를 보고 배울 프로젝트를 몇 가지 공유주시면 감사할 것 같습니다! 좋은 강의 감사히 잘 들었습니다.

/src/.env 파일에 VITE_SOME_KEY = 123이렇게 설정하고, App.jsx에 function App() { return(<>{import.meta.env.VITE_SOME_KEY} <Counter/> </> )}export default App;이렇게 설정했습니다. 근데 왜 화면엔 123이 출력이 안되는 걸 까요 ㅠ? 오류 메시지도 없고..강의랑 똑같이 했는데 왜 안나올끼요 ..