안녕하세요 과제 중 해결되지 않는 문제가 있어 문의 드립니다. 인증 확인 버튼을 누를 때'인증이 완료되었습니다' 안내창 띄우기안내창 확인을 누르면, 인증 확인 버튼 텍스트 인증 완료로 변경인증 확인 버튼 비활성화가입하기 버튼 활성화과정을 하고 있습니다.const timer__button = () => { alert("인증이 완료되었습니다.") document.getElementById("timer__button").innerText = "인증 완료" document.getElementById("timer__button").disabled = true document.getElementById("submit").disabled = false }인증 확인 버튼을 누르면,'인증이 완료되었습니다.' 안내창이 뜨고, 인증 확인에서 인증 완료로 텍스트가 변경됩니다.하지만 버튼의 활성화와 비활성화가 되지 않습니다. 타이머가 작동되고 있는 동안 타이머가 활성화되도록 한 코드 때문에 씹히는 걸까요? 혹시 몰라 타이머 부분 코드도 첨부합니다.const randomNumber__button = () => { document.getElementById("randomNumber__button").disabled = true let randomNumber = String(Math.floor( Math.random() * 1000000 )).padStart(6,"0") document.getElementById("randomNumber__number").innerText = randomNumber let time = 7 let timer = true timer = setInterval(function(){ if(time >= 0){ let min = Math.floor(time/60) let sec = String(time%60).padStart(2,"0") document.getElementById("timer__number").innerText = min + ":" + sec time = time - 1 document.getElementById("timer__button").disabled = false } else { document.getElementById("timer__button").disabled = true document.getElementById("randomNumber__number").innerText = "000000" document.getElementById("timer__number").innerText = "3:00" clearInterval(timer) } },1000) } 혹시 이 코드에 영향을 받아 버튼 비활성화가 안 되는 거라면 타이머 숫자를 3:00(기본 세팅 값)으로 바꾸면 될까 했지만 역시 안 됐습니다.const timer__button = () => { document.getElementById("timer__button").innerText = "인증 완료" alert("인증이 완료되었습니다.") document.getElementById("timer__number").innerText = "3:00" // document.getElementById("timer__button").disabled = true // document.getElementById("submit").disabled = false }  여기저기 찾아본 결과 alert 기능은 안내창이 떠 있는 동안 동작을 일시정지 시키고, alert 다음으로 이어지는 동작을 적어줄 땐 첨부 코드와 같이 단순 나열로 가능하다고 합니다. 다른 코드들 찾아봤을 때도 제가 쓴 코드와 유사했고요. 어느 부분이 문제인 건지, 만약 앞서 작성한 타이머 코드 때문에 씹히는 거라면 어떻게 해결해야 좋을지 힌트를 좀 받고 싶습니다.alert button disabled 이 키워드로 해결책을 검색하며 찾아봤는데요, 혹시 더 적절한 검색 키워드가 있다면 그것도 추천 부탁합니다. 검색도 기술인 것 같은데 요령이 없네요.

안녕하세요 선생님 이제 막 들으려는 신참인데섹션 1,2를 들어야할지 고민입니다1. html+css( 빠르게 한시간 요약된것 ) 학습2. Javascript 기본적인 부분만 학습- '변수, 연산자, 반복문, 배열, 객체, 조건문, 함수, 콜백함수, Promise, Async/Await' 이정도 공부를 해둔 상태이고 git이나 git허브에 대한 지식은 전무합니다이경우에 섹션 1과 2부터 시작 해야할까요?뭔가 1.2도 가볍게시작하기 부담스러운 느낌이라..조언 부탁드립니다 .

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 초심자의 입장에서 사실 저러한 기능을 보면 그냥 처음에 만들때는 useCallback, React.memo 를 다 써보고 나중에 문제 생기면 그때 바꿔쓰면 되지 않나? 라는 생각이 듭니다.마치 평소에는 const 로 다 만들고, 해보다가 let 으로 변경이 필요하다 싶으면 let 으로 바꾸는 것처럼요.이걸 어떤 기준을 잡고 사용해야 할까요? 정확한 기준이 있는지도 궁금합니다. 렌더링 되는데 걸리는 시간이 몇 초 이상일시 변경한다거나 하는 기준이 있을까요?

next 13으로 typescript와 함께 개발중입니다어느 순간부터 html태그들과 improt 쪽에 빨간줄이 뜨더니 해결될 생각을 안하더라구요..많이 검색해 본 결과. @types/react, @types/react-dom 을 다운받아야 한다고 해서 다운 받았지만 해결이 안되더라구요...이 외에도 많은 방법들을 시도해 봤지만 효과가 없었습니다. 도와주세요ㅠㅠ 태크에서 나는 에러 : JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)import문에서 나는 에러: Cannot find module 'next/image' or its corresponding type declarations.ts(2307) 

안녕하세요!강의 재밌게 잘 보고 있습니다 :Dscroll-timeline.js 파일은 어디서 가져오신 건가요?세팅부터 혼자서 해보려고 했는데scroll-timeline 저장소여기서 아무리 찾아봐도 안 보이네요..!Usage에 보면 import를 dist 폴더에서 scroll-timeline.js를 가져오는 것 같은데 dist 폴더도 안 보이고 src 폴더에 scroll-timeline-base.js도 아닌 것 같아서 질문 남깁니다..!또, scrollOffsets에 넣는 옵션들은 어떻게 확인하나요? README에는 new CSSUnitValue 이것밖에 안 보이는데 강의에서는 target, edge, threshold 속성들도 쓰셔서 어디서 확인하고 쓰시는지 너무 궁금합니다..!

vue-til-server 때문에 node 버전 10 버전대로 하면 vue cli 가 설치가안됩니다. 그래서 노드 버전을 올려서 vue cli 설치하고 나면 맨위 서버가 스타트가 안됩니다. 이 문제를 도대체 어떻게 해야하나요. 진도를 못나가서 답답하네요.

빈 배열을 선언해서 빈 배열에 (axios 통신을 통해 전달받은) result.data를 대입해서 사용하는 것이 아니라 useState를 사용하는 이유는 무엇인가요?제가 이해한 것은 서버에 새로운 데이터가 업로드되면 그때마다 바로바로 업로드 된 데이터를 화면에 보여주기 위함인 것 같은데(예를 들어 상품이 3개로 보이다가 관리자가 상품을 한 개 추가하면 새로고침을 안해도 4개로 보임), 올바르게 이해한 것이 맞을까요?

jsx강의 에서는 jsx는 내부적으로 html/xml코드를 자바스크립트로 변환하는 과정을 거치게 된다. 그래서 최종적으로는 자바스크립트 코드로 나오게 된다. 이렇게 말씀해주시고 jsx코드를 자바스크립트 코드로 변환하게 해주는 것이 react.createElement라고 하셨는데, 여기 강의 에서는 5분 35초 부근에 react.createElement 내부에 리액트 컴포넌트를 적어도 되고 모든 리액트 컴포넌트는 최종적으로는 html 태그를 사용하게 돼있다라고 하셨습니다. react.createElement를 통해서 최종적으로 자바스크립트가 된다는건가요? 아니면 html 코드가 된다는건가요,,?ㅠㅠ 

안녕하세요 드디어 강의 완강했습니다!!^^ 뒷부분 부터는 퀴즈가 없어서 비교적 빨리 수강했네요.강의 후에 해봐야 할 것들을 생각해보았는데 조언을 듣고 싶어서 질문남깁니다.일단은 지금 것 했던 "나만의 ~~프로젝트"를 리팩토링(성능/안정성/가독성/로직개선)하고 api기능추가, 테스트코드 작성, DB쿼리성능개선등을 해보고자합니다.전부 다 하려면 시간이 오래걸리겠지만(ㅠ) 마지막에 취업준비강의에서 말씀하신 3년차개발자로 생각되기 위해선 해야할게 많은 것 같습니다..ㅎㅎ(3년차 같은 신입을 뽑는다니!!ㅠㅠ)그래서 일단 목표는 실제 현업에서 하는 것처럼 코드를 작성해보고자 하는데요, 막상 하려니 좀 막막하네요.질문은:지금 제 생각은 현업에서 쓰는 좋은 코드를 보고 어떤 식으로 설계했는지 테스트코드는 어떻게 작성했는지 등등 참고하고 분석하고 공부해서 제 나름대로 프로젝트를 리팩토링해보고 싶은 생각입니다. 그게 가장 실력도 늘 것 같구요. 그래서 혹시 관련 코드나 책이나 자료등이 있으면 추천해주시면 감사하겠습니다.아! 그리고 백엔드 심화강의에서 마이크로큐와 await의 관계를 굉장히 감명깊게 들었습니다. 비동기과정이 정말 헷갈렸는데 속이 시원해졌습니다.ㅎㅎ 혹시 이런 자바스크립트 원리나 cs관련내용도 추천해주실만한 책이나 자료 있으면 알려주시면 감사하겠습니다.일단 방향은 이렇게 잡았는데 조언해주시면 참고하겠습니다!!끝으로 제가 지금것 들었던 개발강의중 가장 자세하고 친절하고 이해도 잘되고 재밌는 강의였습니다!!퀴즈 할때나 버그나 에러날때 힘들긴 했지만, 그래도 개발이 점점 더 재밌어지고 더 잘하고 싶네요. 궁금한 것있으면 또 질문해도 되겠죠?^^;;; 감사합니다!!  

혹시 강의내용과 같은 페이지를 쉽게 만드는 라이브러리 같은게 있을까요? 저런 스크롤 애니메이션 페이지를 만들 때 바닐라 자바스크립트가 아닌 더 쉽게 만들 수 있게 해주는게 혹시 있나 궁금합니다

해당 폴더가 없어서 여기저기 뒤져봤는데https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=nateen7248&logNo=220684958878이 방법으로도 안되더라구요2번에 javascript 보면 자동으로 체크되어있어서 체크 해제하고 적용하고체크 한다음에 다시 적용하고 이클립스 껐다 켜봐도 안나타나요이클립스는 2020-06버전이고 eclipse IDE for enterprise hava developers 로 받았는데뭐가 문제인걸까요

안녕하세요?코드캠프 강의로 열심히 공부 중입니다.좋은 커리큘럼 제공해 주셔서 감사해요.제가 훈훈한 자바스크립트 강의를 복습중인데요.노션에 있는 Javascript Exercise Problem을 풀고 있어요. 그런데 막히는 부분이 생겼어요.01_variable,function,type > 06_addnumberfunction addNumber() { let result; // 숫자 9와 숫자 7을 더했을 때의 결과값을 result에 할당하세요. // 여기에 코드를 작성하세요. result = 9 + 7; return result; } addNumber();이 문제를 풀고 있는데output이 14가 나와야 정답이라고 써있는데요.아무리 해도 답이 16으로 나와요.아직 애송이라 제가 놓친 게 있는지 해서요 ㅠㅠ 

Concurrency Reduce와 Strict Reduce의 동작 차이 정리_.reduce 와 C.reduce의 차이는 [...iter]로 제너레이터를 한번에 돌려 프로미스들을 동시에 평가 ( 프로미스의 평가 == 프로미스 객체 반환, 콜백함수 즉시실행 ) 하는데에 있다. _.reduce만약 [... ]형태로 전개하지 않는다면 reduce의 while문에서 next()를 하여 yield 로 반환하는 값을 하나씩 빼 올 것이고,이 과정에서 프로미스는 뽑힌다면 (=평가된다면) 뽑히는 과정에서 비로소 콜백을 실행 할 것이다. 그러나 전개하지 않은 상태에서는 이런 뽑히는 과정이 순차적이므로, '프로미스를 뽑아서 콜백을 실행 시켜준 후, reduce 자체를 return 하여 콜백이 완료될 때 까지 기다리고 다시 recur 재귀함수를 통해 이어서 진행하는 과정' 을 프로미스가 뽑힐 때마다 해주어야 하는 것이다.C.Reduce반면에 [...] 형태로 전개하여 사용하면, yield로 반환될 모든 값이 배열에 담긴다. 이 과정에서 뽑힌 프로미스는 콜백이 바로 실행될 것이고, 만약 제너레이터에 여러 프로미스들이 존재한다면 제너레이터의 next()가 연속적으로 동작함에 따라 콜백도 주르륵 병렬되게 실행 될 것이다.이런 프로미스를 포함한 배열을 받은 reduce는 then()을 통해서 reduce를 종료하고 프로미스를 반환한다. 콜백이 완료되면 then(recur)에 의해 재 실행된다. 여러 프로미스들이 거의 동시에 자신의 콜백을 실행시켰기 때문에, reduce 입장에서는 전체 시간이 가장 오래걸리는 놈 만큼만 소요다는 것이다. 마치 Promise.all() 이 동작하는것 처럼 말이다

안녕하세요 !! 다름이 아니라 현재 제가 일반 브라우저가 아닌 C#기반으로 돌아가는 웹을 작업중인데요input 태그에 한글 작성시 '마지막 글자 밀림'오류와 '문자열 마무리'오류가 발생되어 혹시 해결 방법을 아시는 분이 있을까 하여 글 남깁니다..! 제발 도와주세요 감사합니다 !

강의부분에const weatherDataActive = function({location, weather}){ const locationNameTag = document.querySelector('#location-name-tag'); locationNameTag.textContent = location; console.log(weather); document.body.style.backgroundImage = `url('./images/${weather}.jpg')` };이 부분을 제가 똑같이 따라했는데요 노션에 있는 사진 자료 그대로 다운받았고선생님이 말씀하신 경로에 똑같이 담았는데document.body.style.backgroundImage = `url('./images/${weather}.jpg')`이걸 치니까 직전에 선생님이랑 같이 적용했던 css 백그라운드 이미지(햇빛)도 안나오고 404오류가 떠요ㅠㅠ왜일까요?

마지막 Array(9).fill(0).map 을 return 하셨을때,야구게임에 적용하려면 number 에 담으면 되는게 맞나요?const numbers = []; Array(9).fill(0).map((element, idx) => { return numbers.push(idx + 1); })이런식으로 number 배열에 넘겨주면 되는게 맞나요?작동은 되는것 같은데, 이런식으로 하면 되는건지 알수 있을까 해 질문드립니다! 

디데이 강의를 보고 있는데요.저는 아래와 같이 점표기법으로 짜봤는데 안되더라구여?  for(let i = 0; i < timeKeys.length; i++){ console.log(documentObj.docKeys[i]); }그래서 찾아보니 []표기법을 쓰라고해서  for(let i = 0; i < timeKeys.length; i++){ console.log(documentObj[docKeys[i]]); }이렇게 써서 작동이 됐긴 하는데 왜 여기서점 표기법은 안되고 []표기법만 되는 이유를 알고 싶습니다.

 안녕하세요. 마지막 강의까지 잘 듣고 있습니다.강의 중 조건문에서 savedWeatherData 사용하셨는데, 그 전에 변수로 선언해준적이 없어서 에러가 나고 있어요어디부분에 선언을 하면 되는건지 궁금합니다.

안녕하세요. 11분 15초 쯤부터 Javascript의 람다식을 사용하면 된다고 말씀해주셨습니다. $(document).ready(function() { $("#regBtn").click(()=> { location.href="<c:out value='/register.do'/>"; }); });이클립스에서 ES6 문법 사용이 가능한가요???람다식은 ES6부터 나온 기능으로 알고 있습니다. 이와 같은 버전에 나온 백틱(`)을 사용하려고 했는데, 이클립스에서 에러 표시를 내서 사용을 안 하고 있었습니다.19년 3월 버전의 이클립스 환경에서 보면, Legacy 프로젝트를 생성했는데 ECMA 3 Browser Support Library라고 되어있길래 ES6은 지원이 안 되나 싶었습니다.(다시 보니 ECMA Script가 아니라 ECMA 3 Browser네요 ㅎㅎ; 제가 잘못 예측한 것일 수도 있겠네요)이클립스에서 ES6 버전의 JS를 쓰면 Ajax 결과로 나오는 흔한 JSON 데이터를 편하게 불러올 수 있을텐데 말이죠 ㅠㅠ항상 친절한 답변 감사합니다. 강의 잘 보고 있습니다.

안녕하세요채팅을 구현하기위해 socket.io를 썼는데 통신이 안되는 것같습니다 io에 주소를 제대로 넣었고 서버 on 마다 클라이언트에서 emit으로 작성했는데 작동하지 않습니다 이유가 무엇일까요? // server 파일의 코드입니다 require('dotenv').config(); const { createApp } = require('./app'); const { appDataSource } = require('./models/index'); const startServer = async () => { const app = createApp(); const PORT = process.env.PORT; await appDataSource .initialize() .then(() => { const server = app.listen(PORT, () => { console.log(`🟢server is listening on ${PORT}🟢`); }); const io = require('socket.io')(server, { cors: { origin: true, credentials: true, }, }); const { socketMessage } = require('./middlewares/socket.io'); socketMessage(io); }) .catch((err) => { console.log(`❌Failed server connect❌`); appDataSource.destroy(); }); }; startServer(); // server의 socket 파일의 코드입니다 const jwt = require('jsonwebtoken'); const chatDao = require('../models/chatDao'); const { catchAsync } = require('../utils/error'); const socketMessage = (io) => { io.use((socket, next) => { const token = socket.handshake.headers.authorization; if (!token) { return next(new Error('Authentication error')); } jwt.verify(token, process.env.SECRET_KEY, async (err, decoded) => { if (err) { return next(new Error('Authentication error')); } userId = decoded.userId; next(); }); }); io.on('connection', (socket) => { console.log('A User Connected.'); socket.on( 'create_room', catchAsync(async (postId, callback) => { const room = await chatDao.createRoom(userId, postId); socket.join(room.raw.insertId); callback(room.raw.insertId); }) ); socket.on( 'enter_room', catchAsync(async (roomId, callback) => { socket.join(roomId); callback(roomId); }) ); socket.on('new_text', async (content, roomId, callback) => { await chatDao.createChat(userId, content, roomId); socket.to(roomId).emit('new_text', content); callback(content); }); socket.on('disconnect', () => { console.log('접속이 해제되었습니다', socket.id); clearInterval(socket.interval); }); socket.on('error', (error) => { console.error(error); }); ​ socket.on('send', (data) => { console.log(data); socket.emit('reply', { data, }); }); socket.interval = setInterval(() => { socket.emit('news', 'Hello Socket.IO'); }, process.env.SOCKET_INTERVAL || 1000); }); }; module.exports = { socketMessage }; ​  // client 코드입니다import React, { useState, useContext } from 'react'; import io from 'socket.io-client'; import './chat.css'; import { MenuContext } from '../../components/Nav/MenuProvider'; const Token = localStorage.getItem('accessToken'); const socket = io.connect('http://192.168.0.194:4000', { withCredentials: true, extraHeaders: {Authorization: `Bearer ${Token}` } appDataSource.destroy(); }), }); socket.on('connection', () => { console.log('Connected to server'); }); const Chat = () => { const [roomId, setRoomId] = useState([]); const [searchData, setSearchData] = useContext(MenuContext); const handleCreateRoom = event => { event.preventDefault(); socket.emit('create_room', searchData, ({ searchData, roomId }) => { console.log(`Joined room ${roomId}`); setRoomId(roomId); }); }; const handleJoinRoom = roomId => { socket.emit('enter_room', roomId, roomId => { console.log(`Joined room ${roomId}`); setRoomId(roomId); }); }; const handleNewText = content => { socket.emit('new_text', content, roomId, content => { console.log(`Sent message: ${content}`); }); }; const handleNewText = content => { socket.emit('new_text', content, roomId, content => { console.log(`Sent message: ${content}`); }); }; const onCheckEnter = e => {if (e.key === 'Enter') { handleNewText(); } }; return ( <div className="h-screen pt-36"> <button onClick={handleCreateRoom}>테스트</button> <button onClick={() => handleJoinRoom(roomId)}>테스트2</button> <input id="input-text" type="text" onKeyDown={onCheckEnter} /> <button onClick={handleCreateRoom}>제출</button> </div> ); }; export default Chat;