return (<div></div>)
미해결
프로젝트로 배우는 React.js
return <LoadingSpinner /> 어떤 경우에는 () 괄호를 치고 return 을 하고, 어떤 경우에는 < /> 태그만 치고 return 을 하는데 그 차이가 뭔 가요?
- react
- redux
- es6
bigger
댓글 2
좋아요 0
조회수 455
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
addTodo Helper 함수 적용
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요. 강의 중에는 TodoInput.vue addTodo()를 ...mapMutation로 변경하는 내용이 없습니다. git 에도 $store.commit이 적용된 소스만 있고요. addTodo()는 helper로 대체할 수 없는 건가요? 감사합니다.
- javascript
- vue.js
- es6
- vuex
개발자
댓글 1
좋아요 1
조회수 267
vuex 헬퍼 전역 설정
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요. 강사님의 명쾌한 강의 덕분에 vuex에 대한 이해도가 높아졌습니다. 실무에서는 Todo app 보다 더 복잡한 컴포넌트를 다루기 때문에 vuex 헬퍼를 왠만한 컴포넌트에 다 import할텐데요. 이렇게요. import {mapGetters, mapMutation 등등} from "vuex"; 이럴 경우에 한 번만 import해서 전역적으로 사용할 수 있는 방법이 궁금합니다. 감사합니다.
- javascript
- vue.js
- es6
- vuex
개발자
댓글 2
좋아요 1
조회수 302
useState 에 대해
미해결
프로젝트로 배우는 React.js
3:20 모델 값이 갱신이 안되서 그런건가요? 모델이 원웨이로 돼어있나요? useState 를 쓰면 모델이 투웨이로 바뀌는건가요?
- react
- redux
- es6
bigger
댓글 1
좋아요 0
조회수 230
github 권한요청드립니다.
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
인프런 아이디 : 카카오톡(010-8570-0292) 깃헙 : luna7698@gmail.com 좋은 강의 감사합니다.
- javascript
- vue.js
- es6
- vuex
진정근
댓글 2
좋아요 1
조회수 288
이벤트 위치에 대한 궁금증 입니다.
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
리스트에서 실행하는 함수를 App으로 빼는 이유가 궁금합니다. 그외에 이벤트 같은 경우 다른 자식 컴포넌트에 영향도가 있기때문에 App으로 이동시키는거는 이해가 되나, 토글 이벤트 같은 경우는 다른 자식 컴포넌트에 영향도가 없을것 같은데 App으로 이동하는 이유가 궁금합니다. 해당 방식으로 컴포넌트를 설계하면 결합도가 높아 다른곳에서 사용이 불가능하거나 확장성이 낮지 않나요?
- javascript
- vue.js
- es6
- vuex
jwjeong
댓글 2
좋아요 1
조회수 254
구조 차이에 대한 문의
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요. vue cli (@vue/cli 5.0.8)로 프로젝트를 생성하니 강의 구조와 다르게 /public/ 에 index.html이 생성되며, <script src="dist/build.js"> 도 없습니다. 어떻게 main.js intex.html에 붙는 건지 궁금합니다. 감사합니다.
- javascript
- vue.js
- es6
- vuex
개발자
댓글 2
좋아요 1
조회수 369
TSLint 확장 프로그램은 현재 지원하지 않는다고 합니다.
미해결
타입스크립트 입문 - 기초부터 실전까지
TSLint 확장 프로그램 설치를 해야할까요? 2024-02-08 현재 deprecated된 확장이라 우선 설치를 안하긴 했습니다.
- javascript
- typescript
- es6
송민규
댓글 2
좋아요 1
조회수 538
TodoList.vue에서 삭제 처리를 위한 emit이 작동하지 않습니다.
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
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); },
- javascript
- vue.js
- es6
- vuex
닉네임_한글 가능
댓글 2
좋아요 1
조회수 581
vue3 모달창 트랜지션
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
<template> <transition appear name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <!-- Modal Header --> <div class="modal-header"> <slot name="header"> default header </slot> </div> <!-- Modal Body --> <div class="modal-body"> <slot name="body"> default body </slot> </div> <!-- Modal footer --> <!-- <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> --> </div> </div> </div> </transition> </template> <style scoped> .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } .modal-container { width: 300px; margin: 0px auto; padding: 20px 30px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33); transition: all 0.3s ease; font-family: Helvetica, Arial, sans-serif; } .modal-header { margin-top: 0; color: #42b983; } .modal-body { margin: 20px 0; } .modal-default-button { float: right; } .modal-enter-from { opacity: 0; } .modal-leave-active { opacity: 0; } .modal-enter-from .modal-container, .modal-leave-active .modal-container { -webkit-transform: scale(1.1); transform: scale(1.1); } </style> vue3인데 모달창 띄울 때 애니매이션 효과가 잘 작동하는데 왜 닫을 때는 작동을 안하는 지 잘 모르겠어요 <AlertModal v-if="showModal" @close="showModal = false"> <!-- you can use custom content here to overwrite default content --> <template v-slot:header> <h3>경고! <span class="closeModalBtn" @click="showModal = false">x</span></h3> </template> <template v-slot:body> 아무것도 입력하지 않으셨습니다. </template> <!-- <template v-slot:footer> copy right </template> --> </AlertModal> 참고로 vue3에서는 slot을 template 태그 안에 v-slot으로 적어야 한다해서 이렇게 작성했어요
- javascript
- vue.js
- es6
- vuex
wooyeop Lee
댓글 2
좋아요 1
조회수 644
깃헙 권한 요청드립니다.
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
- 인프런 아이디: sju02135@hanmail.net - 인프런 이메일: sju02135@hanmail.net - 깃허브 아이디: sju02135@hanmail.net - 깃허브 username: minsung1129
- javascript
- vue.js
- es6
- vuex
김민성
댓글 2
좋아요 1
조회수 234
2:46 created 가... init() 메소드와 상관관계..?
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
최초 한번만 실행되는 메소드처럼 보이는데... 맞습니까?
- javascript
- vue.js
- es6
- vuex
bigger
댓글 2
좋아요 1
조회수 189
인터넷 익스플로러 호환성
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지만들기 11(9:37) 내용중 인터넷 익스플로러 호환성을 위해 width:240px 대신 max-width:240px를 사용하고 flex-shrink:0;을 설정하셨는데 인터넷 익스플로러가 사용되지 않는 현 시점에서 <link rel="short icon" type="image/x-icon" href="img/fun-coding.ico" /> 이와 같이 익스플로러의 호환성을 고려하는 행위가 현업에서 필요한지 궁금합니다!
- HTML/CSS
- javascript
- es6
phj970701
댓글 1
좋아요 0
조회수 244
구조 가상 클래스 셀렉터에대해서 질문있습니다
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
모던 웹을 위한 상세한 모던 CSS Selector 정리3[2:49]에서 셀렉터에 따른 css적용 모습을 보여주셨는데, css가 아래와 같이 작성된 상태에서 p:first-child { color: red; } p:last-child { color: blue; } p:nth-child(2) { color: green; } p:nth-last-child(2) { color: purple; } <body> <div> <p>1번</p> <p>2번</p> <p>3번</p> <p>4번</p> <p>5번</p> </div> </body> 의 결과값은 <body> <p>1번</p> <p>2번</p> <p>3번</p> <p>4번</p> <p>5번</p> </body> 의 결과값은 이렇게 나오는데, 왜 이런 차이가 발생하는 것인가요? 제 생각엔, <div>태그가 없더라도 <body>태그를 기준으로 하면 last-child가 적용되는 자식 요소의 순서는 똑같아야 할 것 같은데 그 이유가 궁금합니다
- HTML/CSS
- javascript
- es6
phj970701
댓글 2
좋아요 0
조회수 318
vuejs 중급 깃허브 권한 요청
해결됨
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
인프런 아이디: tastybusango@gmail.com 인프런 이메일: tastybusango@gmail.com 깃허브 아이디: sonyeonghwa@gmail.com 깃허브 username: sonyeonghwa
- javascript
- vue.js
- es6
- vuex
hand
댓글 2
좋아요 1
조회수 407
강의 내용처럼 노란 밑줄이 작동하지 않아서 유사 질문들을 실행해보았는데요
해결됨
타입스크립트 입문 - 기초부터 실전까지
현재 .eslintre.js 가 오류로 범벅되고 밑줄에 커서를 대보면 Delete `` eslint(prettier/prettier) 이 뜹니다.. module.exports = { root: true, env: { browser: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', ], plugins: ['prettier', '@typescript-eslint'], rules: { 'prettier/prettier': [ 'error', { singleQuote: true, semi: true, useTabs: false, tabWidth: 2, printWidth: 80, bracketSpacing: true, arrowParens: 'avoid', }, ], }, parserOptions: { parser: '@typescript-eslint/parser', }, }; 를 정상적으로 복사 붙여넣기 했고 어느 부분에서 오류가 생긴건지 모르겠어 가지고 질문을 올립니다 ㅠㅠ 혹시 몰라 package.json 입니다. { "devDependencies": { "@babel/core": "^7.23.7", "@babel/preset-env": "^7.23.7", "@babel/preset-typescript": "^7.23.3", "@typescript-eslint/eslint-plugin": "^6.18.0", "@typescript-eslint/parser": "^6.18.0", "eslint": "^8.56.0", "eslint-plugin-prettier": "^5.1.2", "eslint-plugin-react": "^7.33.2", "prettier": "^3.1.1", "typescript": "^5.3.3" } }
- javascript
- typescript
- es6
진상우
댓글 1
좋아요 1
조회수 565
클로저 스코프와 블록 스코프 질문드립니다.
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
const test1 = () => { let count = 0; const inner = () => { console.log(count); // closure }; inner(); }; test1(); const test2 = (initialValue = 0) => { let count = initialValue; const inner = () => { console.log(count); // block }; inner(); }; test2(); test1의 inner에서는 count가 클로저 스코프를 갖는데, test2의 inner에서는 블록 스코프를 갖는 이유가 뭔가요?
- javascript
- es6
- 객체지향
- es5
튜브
댓글 1
좋아요 2
조회수 720
import 시 뜨는 에러 (타입스크립트 파일에서만 사용할 수 있습니다.)
미해결
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
안녕하세요! 강의 잘 보고 있습니다 ㅎㅎ 다름이 아니라, import * as getters from './getters' 를 했는데 'import ... ='는 TypeScript 파일에서만 사용할 수 있습니다. ts(8002)라며 에러가 나네요 ㅠㅠ 저는 뷰 3를 이용하고 있습니다!
- javascript
- vue.js
- es6
- vuex
lsb9938
댓글 2
좋아요 1
조회수 932
모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기10 / 5분20초
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기10 / 5분20초 div태그 사이에 span태그를 넣었는데 span태그가 인라인 태그인건 알겠는데 div태그는 블럭 태그라 원래 줄바꿈이 일어나는거 아닌가용 ? 어떻게 줄바꿈이 안되고 한줄에 표시되는지 궁금합니다.
- HTML/CSS
- javascript
- es6
예림
댓글 1
좋아요 0
조회수 539
코드샌드박스 관련 질문
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
코드샌드박스가 많이 바뀐것 같아요. create 샌드박스 눌러도 바닐라 자바스크립트가 뜨질 않습니다. 그리고 js 파일에서 console.log('test) 쓰고 실행은 어떻게하고 콘솔창은 어디에 있는건지 궁금해요.
- HTML/CSS
- javascript
- es6
sung jin kim
댓글 1
좋아요 2
조회수 925
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🧘♀️ [운동공간] 기획자/디자이너/앱 개발자를 찾습니다 띄띄