인프런 아이디 : skswngusslab@gmail.com인프런 이메일 : skswngusslab@gmail.com깃헙 아이디: skswngussla@naver.com깃헙 Username : lyd1040

import { useParams } from "react-router-dom"; const ShowPage = () =>{ const {id} = useParams(); console.log(id); return <div>Show Page</div>; }; export default ShowPage;

.eslintrc.js, package.json 같은 파일들은 직접 작성한건가요? 아니면 관련 커맨드 쳐서 생성되는 건가요?만약 직접 작성하신거면, 저희가 직접 프로젝트 만들 때는 공식문서를 보면서 어떤걸 적어야 하는지 따로 공부해야 하나요? 꽤나 복잡해보이네요

좋은 강의 감사드립니다 강사님~^^ 강의를 처음 따라오다가 보니 자동 완성이 되는 부분이 있고 안되는 부분이 있네요. 타입스크립트의 장점을 이해하는데는 무리가 없었지만 혹여나 이 부분에 대해 관심 있으신 분들은 아래 스샷을 참고하시길 바라겠습니다^^(전)(후)

TodoList.vue코드<template><div><ul><!-- <li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem.item" class="shadow">{{todoItem}}<i class="checkBtn fa-solid fa-check" v-bind:class="{checkBtnCompleted: todoItem.completed}" v-on:click="toggleComplete(todoItem, index)"></i>v-bind:class="{A:a}" A클래스의 a속성이 false면 안나타남, true면 나타남 --><!-- <span v-bind:class="{textCompleted: todoItem.completed}">{{ todoItem.item }}</span><span class="removeBtn" v-on:click="removeTodo(todoItem, index)"><i class="fa-solid fa-trash-can"></i></span></li>> --><li v-for="(todoItem, index) in todoItems" v-bind:key="todoItem" class="shadow"><i class="checkBtn fa-solid fa-check" v-bind:class="{ checkBtnCompleted: todoItem.completed }" v-on:click="toggleComplete(todoItem, index)"></i>{{ todoItem.item }} {{ index }}<!-- //v-bind:class="{A:a}" A클래스의 a속성이 false면 안나타남, true면 나타남 --><span v-bind:class="{ textCompleted: todoItem.completed }">{{ todoItem}}</span><span class="removeBtn" v-on:click="removeTodo"><i class="fa-solid fa-trash-can"></i></span></li></ul></div></template> <script>export default {data: function () {return {todoItems: []}},methods: {removeTodo: function (todoItem, index) {console.log('remove items');console.log(todoItem, index);localStorage.removeItem(todoItem);this.todoItems.splice(index, 1);},toggleComplete: function (todoItem, index) {todoItem.completed = !todoItem.completed;console.log(index);console.log(todoItem.item);//로컬스토리지 갱신localStorage.removeItem(todoItem.item);localStorage.setItem(todoItem.item, JSON.stringify(todoItem));}},created: function () {if (localStorage.length > 0) {for (var i = 0; i < localStorage.length; i++) {if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {console.log(JSON.parse(localStorage.getItem(localStorage.key(i))));this.todoItems.push(localStorage.key(i));}}}}}</script> <style scoped>ul {list-style-type: none;padding-left: 0px;margin-top: 0;text-align: left;}li {display: flex;min-height: 50px;height: 50px;line-height: 50px;margin: 0.5rem 0;padding: 0 0.9rem;background: white;border-radius: 5px;}.removeBtn {margin-left: auto;color: #de4343;}.checkBtn {line-height: 45px;color: #62acde;margin-right: 5px;}.checkBtnCompleted {color: #b3adad;}.textCompleted {text-decoration: line-through;color: #b3adad;}</style> TodoInput.vue코드<template> <div class="inputBox shadow"> <input type= "text" v-model="todoItems" v-on:keyup.enter="addTodo"> <span class="addContainer" v-on:click="addTodo"> <i class="fas fa-plus addBBtn"></i> </span> </div> </template> <script> export default { data: function(){ return{ todoItems: "" } }, methods:{ addTodo: function(){ if(this.todoItems !== ''){ //저장하는 로직 //localStorage.setItem(key, value); //localStorage.setItem(this.newTodoItem, this.newTodoItem); var obj = {completed: false, item: this.todoItems}; //localStorage.setItem(this.newTodoItem,obj); localStorage.setItem(this.todoItems, JSON.stringify(obj)); //obj 객체 > string화 this.clearInput(); } }, clearInput: function(){ this.todoItems = ''; } } } </script> <style scoped> input:focus{ outline: none; } .inputBox { background: white; height: 50px; line-height: 50px; border-radius: 5px; } .inputBox input { border-style: none; font-size: 0.9rem; } .addContainer { float: right; background: linear-gradient(to right, #6478FB, #8763FB); display: block; width: 3rem; border-radius: 0 5px 5px 0; } .addBtn { color: white; vertical-align: middle; } </style>

BlogList.js까지는 강의와 동일하게 에러처리가 되었으나 ShowPage.js에서 에러 처리 후 확인을 하면글 수정후 => DB끄고 => edit버튼을 누른 상태입니다. 깃 허브에서 ShowPage.js파일 소스를 그대로 복사 붙이기 해도 그렇습니다. 제가 어느 부분을 놓쳐서 이런건지? 어디가 잘못된 것인지? ... 잘 모르겠습니다.^^ ㅠㅠ

유니온 타입에서 | : 교집합& : 합집합으로 이해하면 되겠네요. ^^

강의를 보면서 적용을 했는데toast가 2개씩 뜨고 2개씩 사라집니다..이 경우 어떻게 해야할까요?? .then(() => { addToast({ type: "success", text: "Successfully created", }); history.push("/admin"); }) .catch((e) => { addToast({ text: "We could not create blog", type: "danger", }); });

// 딕셔너리 패턴 interface StringRegexDictionary { // 규칙 // 왼쪽에 오는 것은 문자열 속성 + 값은 정규표현식이 와야 함 [key: string]: RegExp; } var obj: StringRegexDictionary = { cssFile: /\.css$/, jsFile: /\.js$/, } 위의 코드에서 질문있습니다! 위의 코드는, 해당 강의에서 입력한 코드의 일부분입니다.강사님께서 인터페이스대로라면, key값이 string으로 되어있어야 한다고 했는데, 그러면 cssFile, jsFile이 아니라, "cssFile", "jsFile"이어야 하는거 아닌가요?답변해주시면 감사하겠습니다.

약 두 달 전 Total Recovered의 값이 0으로 들어온다는 글을 봤는데, 지금은 아무런 데이터가 오지 않고 있습니다.Access to XMLHttpRequest at 'https://api.covid19api.com/summary' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.GET https://api.covid19api.com/summary net::ERR_FAILED 404해당 링크를 인터넷 주소창에 입력했을 때 404 Not Found가 나오는 걸 보면 API 지원이 종료된 게 아닐까 싶은데 혹시 해결 방안이 있을까요?

인프런 아이디 : @tkfkdgoll인프런 이메일 : ttkfkdgolll@naver.com깃헙 아이디 : ttkfkdgolll@naver.com깃헙 Username : ryuwonhui

- 인프런 아이디: secondwarren@gmail.com- 인프런 이메일: secondwarren@gmail.com- 깃허브 아이디: secondwarren@gmail.com- 깃허브 username: weritas247

예제로 사용했던 위의 내용에서 오류가 없고실제로도 값이 10 이 나오던데요.궁금한게 logTextLength({length : 10}); 는 logTextLength의 generic 부분이 없는데도 왜 오류가 발생 하지 않나요?generic 은 선언대로 따르지 않아도 되는 건가요?

예제로 든 이 함수에서는 현재 길이는 알 수 없는 건가요? 그림에서 처럼 빨간 라인 오류를 표시 하고 있는데요.   

name과 address 값에 계속 빨간 줄이 나오는데 어떤 오류인지 모르겠어요resolve에도 빨간 줄이 나와요. 그래서 아래와 같이 반환 값 타입을 지정해줬더니 괜찮아져요 이유가 뭘까요?

섹션1-3 강의명 [자바스크립트에 타입이 있을 때의 첫 번째 장점] 중 why-ts의 app.js에서 axios.get(url)의 response 를 User type으로 정의하였습니다. Promise<User>이때, response가 아닌 response.data가 User type이므로 자동완성을 따라가면 undefined 문제가 발생합니다.이미 많은 질문이 나왔고 답변으로도 말씀하셨듯 필요성을 인지하기엔 충분하므로 수강하시는 분들은 단순 참고 바랍니다.🙏

안녕하세요.커뮤니티 질문글 보니 저와 비슷하게 오류난 부분이 있었던데, 해결된 답글은 없는것같아서 혹시나해서 문의드립니다.알려주신대로 오류메시지 구글링해서 위와 같이 해결한긴했는데요.. 이게 맞는건지 모르겠어서요 ㅎ;위와 같이 태그 엘리먼트에 대한 형변환을 안해주면,해당 변수에 innnerText접근하는곳에서 오류가 발생합니다. 위와 같이 처리하는게 맞는지 질문드립니다~!@

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.============================// 2번 // 이중배열의 내용을 오름차순 정렬 후 foreach를 사용하여 전부 출력 var arr = [[2,5,1,3,4],[6,9,7,10,8],[11,15,14,12,13]]; for(i=0; i<arr.length; i++){ var arrSort = arr[i].sort(function(left, right){ return left - right; }); } arr.forEach(function(arr){ console.warn(arr); })위와 같이 풀었는데 코드리뷰 부탁드립니다.

인프런 아이디 : dongju.shin@wezon.com 인프런 이메일 : dongju.shin@wezon.com 깃헙 아이디 : ehdwn0528@gmail.com 깃헙 Username : dongju.shin

interface DropdownItems<T> { value: T; selected: boolean; } const emails: DropdownItems<string>[] = [ { value: "naver.com", selected: true }, { value: "gmail.com", selected: false }, { value: "hanmail.net", selected: false }, ]; const numberOfProducts: DropdownItems<number>[] = [ { value: 1, selected: true }, { value: 2, selected: false }, { value: 3, selected: false }, ]; // 아래 createDropdownItem 함수 부분 질문입니다. function createDropdownItem(item: DropdownItems<string | number>) { const option = document.createElement("option"); option.value = item.value.toString(); option.innerText = item.value.toString(); option.selected = item.selected; return option; }  강의에서는 createDropdownItem함수의 매개변수 자리에 item: DropdownItem<string> | DropdownItem<number> 로 작성을 해주셨는데위 코드처럼 item: DropdownItems<string | number> 으로 작성을 해도 오류가 발생하지 않더라구요.각 방식이 서로 차이가 있을까요? 만일 차이가 있다면 어떠한 것인지 궁금합니다.