묻고 답해요
147만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
미해결Javascript ES6+ 제대로 알아보기 - 초급
프로토타입 체이닝에 대해서
프로토타입 체이닝에 대해서 보면서 느끼는건, 마치 객체지향의 오버라이딩과 같은 느낌이 들어서요!둘의 차이가 궁금합니다.
-
해결됨Javascript ES6+ 제대로 알아보기 - 초급
react 사용할 때 destructuring assignment라고 하는거 진짜 많이 사용 했는데 신기합니다.
const { name : name, age : age } = { name: '재남', age: 30 } console.log(name, age) 원래 이게 정석이었는데, shorthand properties 덕분에 축약 해서 사용 할 수 있게 된건지 몰랐네요. 감사합니다!
-
해결됨Javascript ES6+ 제대로 알아보기 - 초급
2023-10-30일 기준 Object Rest/Spread Properties 적용 됬나봐요. 짱신기
그냥 크롬 개발자 도구 켜서 해봤는데 됩니다!
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
state 와 v-model에 대해서 질문이 있습니다.
강의 내용 TodoInput.vue 파일 중<input type="text" v-model="newTodoItem" v-on:keyup.enter="addTodo">부분에 v-model="newTodoItem" 을 사용하였습니다.이는 data 속성에 사용되었는데<input v-model="newTodoItem">computed:{ ...mapState(['newTodoItem'])}다음과 같은 느낌으로 v-model은 왜 state를 사용하지 않는 이유가 따로 있는지 궁금합니다!개인적으로 실험해봤을 때는 readonly로만 사용하라고 되어있는데 스택오버플로에선 사용한 사람도 있는 것 같기도 하고 무엇이 맞는지 궁금해용
-
미해결타입스크립트 입문 - 기초부터 실전까지
파일이 다른데 식별자가 중복되었다고 뜹니다.
파일이 다른데 식별자가 중복되었다고 뜹니다.강의에서는 똑같은 Person을 쓰셔도 문제 없던데 제가 뭔가 세팅을 빠뜨린 걸까요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
todoItem.item이 왜 key가 될까요?
안녕하세요 강사님!어플리케이션 탭을 보면 엄연히 key, value가 있고 value 안에 completed, item이 있는 건데...todoItem.item이 어떻게 키값이 되는건지 궁금합니다.처음 설정할 때 key값과 todoItem.item을 같게(?) 해놓으면 todoItem.item을 key 값으로 접근할 수 있나요?만약 key(id값)으로 접근하려면 어떻게 해야 하나요?초보라 질문이 많습니다 ㅠㅠ 시간되실 때 답변해주시면 감사드리겠습니다 :)
-
미해결타입스크립트 입문 - 기초부터 실전까지
빨간줄 에러 질문드립니다
노트북으로 할땐 빨간줄이 안떳는데 데스크탑으로 오니, 빨간줄이 많이 떠서 2가지 질문드립니다. 1. 엔터친 빈 공간에 저렇게 빨간줄이 뜨는데 어떻게 없앨 수 있을까요? 이것도 노트북에선 문제없이 강의듣고 넘어갔는데 데스크탑으로 켜니 이렇게 뜨네요. 어떻게해야할까요..?
-
미해결입문자를 위한, ES6+ 최신 자바스크립트 입문
[계산기 CSS Markup]output 창의 높이관련
안녕하세요. output 창의 높이가 강사님 화면처럼 고정되지가 않고, previous 와 current.textContent 값이 있으면 높이가 조금 높아졌다가, 값이 없으면 작아집니다. 계산기의 style.css 를 그대로 따라 했고요.안되서 강의 파일을 그대로 복사했어도 동일합니다.당췌 이유를 모르겠습니다. ㅡㅡ; ( 참고로 강의 파일에는 right 로 되어 있어서 botton 으로 수정해서 적용했습니다. )body { height: 100vh; background: linear-gradient(to right, #00aaff, #0f4c81); } [index.html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <script src="main.js" defer></script> <title>계산기</title> </head> <body> <div class="calculator-grid"> <div class="output"> <div class="previous-operand" data-previous-operand></div> <div class="current-operand" data-current-operand></div> </div> <button class="span-two" data-all-clear>AC</button> <button data-delete>DEL</button> <button data-operation>÷</button> <button data-number>1</button> <button data-number>2</button> <button data-number>3</button> <button data-operation>×</button> <button data-number>4</button> <button data-number>5</button> <button data-number>6</button> <button data-operation>+</button> <button data-number>7</button> <button data-number>8</button> <button data-number>9</button> <button data-operation>-</button> <button data-number>.</button> <button data-number>0</button> <button class="span-two" data-equals>=</button> </div> </body> </html> [style.css]* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: linear-gradient(to bottom, #00aaff, #0f4c81); } .calculator-grid { display: grid; justify-content: center; align-content: center; min-height: 100vh; grid-template-columns: repeat(4, 100px); grid-template-rows: minmax(120px, auto) repeat(5, 100px); } .calculator-grid > button { cursor: pointer; font-size: 2rem; border: 1px solid #fff; outline: none; background-color: rgba(255, 255, 255, 0.75); } .calculator-grid > button:hover { background-color: rgba(255, 255, 255, 0.9); } .span-two { grid-column: span 2; } .output { grid-column: 1/-1; background-color: rgba(0, 0, 0, 0.75); display: flex; align-items: flex-end; justify-content: space-around; flex-direction: column; padding: 10px; word-wrap: break-word; word-break: break-all; } .output .previous-operand { color: rgba(255, 255, 255, 0.75); font-size: 1.5rem; } .output .current-operand { color: #fff; font-size: 2.5rem; }
-
미해결입문자를 위한, ES6+ 최신 자바스크립트 입문
[계산기]소수점 이하 '0' 버튼 입력시 상단표시 관련
안녕하세요.계산기 코드에서, 소수점선택이랑, 0 을 선택하는 경우,floatNumber 는 해당값 인식이 안되어, 상단 currentDisplay에 표시가 안되고,이후 다른 숫자를 누르면 소수점 및 0을 포함하여 floatNumber 값이 인식이 되어 상단에 함께 표시가 되던데요. 소수점은 아니더라도 소수점 이하 0을 눌렀을 때에 상단화면에 0까지를 바로 표시가 되도록 하려면 if 문으로 추가 코딩을 해야 하는 거겠죠??
-
미해결타입스크립트 입문 - 기초부터 실전까지
마우스 갖다대면 리턴값 설명 나오는 거 질문드려요
마우스 갖다대면 리턴값 없다고 떠야하는데 뜨지않네요. 어디를 설정해야할까요? 아래 캡쳐(강의모습)처럼 떠야하는데 그렇게 안뜨네요 ㅠ
-
미해결타입스크립트 입문 - 기초부터 실전까지
js에서 @ts-check 적어도 체크하지 못하는 문제입니다
12줄에 @ts-check 적어서 25줄에 넘버타입 아니라고 알려주어야 하는데 안뜨네요 어떤 게 문제인가요?
-
미해결타입스크립트 입문 - 기초부터 실전까지
index.html에서 타입스크립트 콘솔 찍는 법 질문드립니다
같은 폴더 안에 sample.js, sample.ts가 있는데요index.html에 <script> sample.js 추가했고 콘솔 찍어보면서 강의듣고 있었는데 sample.ts는 콘솔에 안 나오더라구요 어떻게 하면 연결할 수 있을까요? 회사 컴퓨터라 이미 타입스크립트 쓰고 있어서 컴파일은 깔려있을 것 같습니다
-
미해결타입스크립트 입문 - 기초부터 실전까지
섹션 1-3 추론 질문드립니다
2. 영상에서 설치하라는 것 다 똑같이 따라했는데 이부분 영상에서처럼 상자모양?별모양?으로 나오지 않습니다. 어떻게 해야할까요? 두번째 사진에 city도 나오지 않습니다 ㅠ 스크립트 전문입니다 // api url var url = "https://jsonplaceholder.typicode.com/users/1"; // dom var username = document.querySelector("#username"); var email = document.querySelector("#email"); var address = document.querySelector("#address"); // user data var user = {}; function fetchUser() { return axios.get(url); } /** * @typedef {object} Address * @property {string} street * @property {string} city */ /** * @typedef {object} User * @property {string} name * @property {string} email * @property {Address} address */ /** * @returns {Promise<User>} */ fetchUser().then(function (response) { response.address; }); function startApp() { // axios // .get(url) fetchUser() .then(function (response) { // console.log(response); user = response.data; // TODO: 이름, 이메일, 주소 표시하기 console.log(user); username.innerText = user[0].name; email.innerHTML = user[0].email; // 그냥 문자열이 아니라 객체였음(키:밸류 값) address.innerHTML = user[0].address.street; }) .catch(function (error) { console.log(error); }); } startApp(); // /** // *@param {number} a // *@param {number} b // * // */ // function sum(a, b){ // return a+b; // } // SubmitEvent(10,20)
-
해결됨Javascript ES6+ 제대로 알아보기 - 초급
제가 이해한 부분이 혹시 맞는지 알 수 있을까요?
var로 생성 했을때 block스코프 생성 되지 않음var funcs = []; for (var i = 0; i < 10; i++) { funcs.push(function () { console.log(i); }); } funcs.forEach(function (f) { f(); }); let으로 생성 했을 때 block스코프인해 변수의 유효범위가 생김.즉, for문의 { } 블록 스코프로 변수의 유효범위로 인해서funcs.push(function(){console.log(i)})에서 i가 for문의 i를 가져올 수 있게 됨.let funcs = []; for (let i = 0; i < 10; i++) { funcs.push(function () { console.log(i); }); } funcs.forEach(function (f) { f(); }); 마찬가지로 var를 사용시 똑같은 코드지만 var는 블록스코프로 인해 유효범위가 없기 때문에 for문의 i의 변수의 유효범위로 console.log(i)에 영향을 가지지 못함.
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
slot 적용 안되는 것 해결법
vue3 부터 slot 태그를 지원하지 않는 것 같습니다.아래와 같이 v-slot으로 작성해주셔야 합니다. 또한 v-slot은 template 태그에서만 동작 합니다. TodoInput Component<Modal v-if="showModal" @close="showModal = false"> <template v-slot:header> <i class="closeModalBtn fas fa-times-circle" v-on:click="showModal = false">경고!</i> </template> <template v-slot:body>아무것도 입력하지 않았습니다.</template> </Modal> 감사합니다.
-
해결됨Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vue에서 Dependency Injection이 없나요?
안녕하세요~!프론트에 관심이 생겨서재미있게 강의를 듣고 있는 백엔드 개발자 입니다. 강의를 듣다보니 js는 component를 작성할 때 클래스를 만드는 것보다는 함수를 만들어서 해결하는 것 같은데요. 컴포넌트 클래스를 생성하고 spring framework 처럼 IoC를 사용하여 각 컴포넌트간에 DI를 사용할 수는 없는 건가요?감사합니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
background-position 관련 질문합니다.
본 강좌 <모던 HTML/CSS로 상용화도 가능한 반응형 모던 웹페이지 만들기5> 강의 7:35 분쯤에서 background-position 값을 center 10% > center 50% 로 바꿨을 때 y축 값이 커졌으므로 그림이 아래로 내려가는게 맞다고 생각하는데 왜 그림이 위로 올라가는 건가요 ?
-
미해결프로젝트로 배우는 React.js
AxiosError: Network Error가 뜹니다
13강에서 DB에 데이터를 저장할때 타이틀과 바디에 글을 쓴 뒤에 포스트 버튼을 누르면콘솔창과 화면에 이렇게 뜹니다..ㅠㅠ왜이럴까요..?
-
미해결iOS/Android 앱 개발을 위한 실전 React Native - Basic
안드로이드 에뮬레이터 에러...
react-native run-android info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.(node:18259) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency(Use node --trace-warnings ... to show where the warning was created)Jetifier found 866 file(s) to forward-jetify. Using 12 workers...info Starting JS server...info Launching emulator...info Successfully launched emulator.info Installing the app...FAILURE: Build failed with an exception.* What went wrong:Could not initialize class org.codehaus.groovy.runtime.InvokerHelper> Exception java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.reflection.ReflectionCache [in thread "Daemon worker"]* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 255mserror Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081FAILURE: Build failed with an exception.* What went wrong:Could not initialize class org.codehaus.groovy.runtime.InvokerHelper> Exception java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.reflection.ReflectionCache [in thread "Daemon worker"]* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.* Get more help at https://help.gradle.orgBUILD FAILED in 255ms at checkExecSyncError (node:child_process:885:11) at execFileSync (node:child_process:921:15) at runOnAllDevices (/Users/heejinroh/Desktop/희진/react-native/my_first_app/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:39) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async Command.handleAction (/Users/heejinroh/Desktop/희진/react-native/my_first_app/node_modules/@react-native-community/cli/build/index.js:182:9)
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
Vuex 관련 질문
안녕하세요~ 캡틴 판교님 수업을 잘 듣고 실무에서도 잘 사용 중입니다. 다만, 사용하다보다가 발생한 궁금증이 있습니다.Vuex의 장점들은 어디서나 쉽게 찾아볼 수 있는데, 단점이라 하면 무엇들이 있을까요? 저희가 props와 event로 component간 데이터를 주고 받는데, component의 depth가 깊어지면 단순 데이터를 내리고 올림에 있어서 복잡도도 증가하고번거로움도 생기잖아요? 그래서 eventbus가 있는데, 이 녀석은 naming rule을 아무리 잘 정해도 많이 사용하다보면서로 호출하는 곳들이 얽히고 나중엔 어디서 사용하는지 모르는 경우가 태반이라 사실상저희는 암묵적으로 금지하고 있는 상황입니다.(사실 얘도 언제 사용해야 가장 powerful하게 사용할 수 있는지 궁금하네요.) 그래서 vuex를 많이 사용하는데, vuex 사용에 있어서도 내부적으로 갑론을박이 있습니다.vuex도 eventbus 처럼 아무데서나 import만 하면 접근할 수 있어서 중구난방으로 접근이 되어서결국 관리가 복잡해진다.(실제도 redux도 처음에 적용했다가 다 걷어내는 프로젝트들이 주변에 점점 생겨나고 있어서요.) 그런데, 검색해보면 vuex는 단점이라고 설명이 되어 있는 것을 찾기가 힘듭니다.또한, 어느정도 선에서 vuex를 적용해야하는지가 애매한데, 기준을 어떤식으로 잡아야 할까요?vuex를 사용하면 .vue 파일 내부 코드나 로직들을 store쪽으로 뺄 수 있어서 많이 간략해지고 깔끔해지는 것으로 한눈에 component 구조들을 파악하기가 쉽긴 한데요.그렇다면 모든 computed나 data에서 관리하는 것들을 다 vuex로 항상 빼는 것이 정답일지알아서 적당히 구분해서 할지... 정말 필요한것만 vuex로 빼야할지 그런것들이 참 어려운 것 같습니다.마치 component를 어느정도 수준으로 세분화해서 설계할지와 같은 고민 같습니다. 제가 front 개발에 대한 지식의 깊이가 미진해서 그런지 관련해서 이야기를 한번 듣고 싶은데,제 주변에서는 마땅하지가 않아서 질문을 남깁니다.
주간 인기글
순위 정보를
불러오고 있어요