리액트 종강으로 얻은 타입스크립트 할인 쿠폰인데 입력하니까 이렇게 뜨는데 그럼 못받는건가요 ㅜㅜ

안녕하세요, 선배님. 저는 현재 서버 개발 경력 1년, 클라이언트 개발 경력 6개월 나머지 유지 보수 경력들을 포함해 약 3년 차에 접어든 주니어 개발자입니다. 지금은 주로 서버 개발자로 활동하고 있지만,최근 진로와 관련된 고민이 많아 선배님께 조언을 구하고자 이렇게 글을 드립니다.제 성향은 백엔드 개발이 잘 맞는다고 느끼고 있지만, 프론트엔드 개발에 대한 관심이 점점 커지고 있습니다. 특히 서비스중이신 강의들을 들으면서 프론트엔드를 바라보는 시각이 완전히 달라졌고, 점점 더 매력을 느끼고 있는 상황입니다. 이제는 어느 정도 마음의 결정을 내려야 할 시점이라는 생각이 들어,전문적으로 어떤 커리어를 선택해야 할지 고민하고 있습니다.프론트엔드와 백엔드 모두 매력적인 분야이지만, 새로운 도전을 선택하는 것이 맞는지, 아니면 제가 잘 맞고 경험이 더 많은 백엔드에 집중하는 것이 맞는지 아직 명확히 판단하기 어렵습니다.선배님의 경력을 살펴보니 주로 자바스크립트를 중심으로 다양한 개발 작업을 해오신 것으로 알고 있습니다. 서버 개발도 분명 경험하셨을 것 같고, 저와 비슷한 고민을 해보셨을 것 같아 더욱 궁금해졌습니다.혹시 선배님께서도 과거에 프론트엔드와 백엔드, 혹은 특정 기술 스택 사이에서 고민하셨던 적이 있으셨나요?  그리고 그러한 고민 끝에 무엇이 선배님을 자바스크립트라는 언어로 전문성을 갖추고 커리어를 쌓게 만든 결정적인 요인이었는지 궁금합니다.  선배님의 선택 과정이나 기준이 저에게도 많은 영감을 줄 수 있을 것 같습니다.혹시 선배님께서 제가 이런 결정을 내리는 데 참고할 수 있는 조언이나 방향성을 제시해 주실 수 있을까요? 선배님의 경험과 지혜를 조금이라도 나눠주신다면 큰 힘이 될 것 같습니다.긴 글 읽어주셔서 감사드리고, 좋은 하루 보내시길 바랍니다. 감사합니다!

const workA = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workA`); }, 5000); }); }; const workB = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workB`); }, 3000); }); }; const workC = () => { return new Promise((resolve) => { setTimeout(() => { resolve(`workC`); }, 10000); }); }; const start = async () => { try { let results = await Promise.all([workA(), workB(), workC()]); console.log(results); results.forEach((res) => console.log(res)); } catch (err) { console.log(err); } };[10:01] 강의 내용 보면 workA가 5초 workB가 3초, workC가 10초인데, 결국 출력 되는 값을 보면 동시에 출력이 됩니다.그리고 순서도 A, B, C 순입니다.let resultA = await workA(); let resultB = await workB(); let resultC = await workC(); console.log(resultA); console.log(resultB); console.log(resultC);물론 실행시간의 차이는 있지만, 실직적으로 프로그램에 표기 되는 값은 바로 위에 있는 코드예제에서 보여주신 A, B, C랑 같은데, 병령처리라면 시간이 짧은 B가 실행되고 그 다음에 A, 그 다음 C가 아웃풋으로 나와야 하는거 아닌가요??

안녕하세요 강사님! 항상 좋은 강의 감사합니다:)강의를 보던 중 강사님 께서는 update 단계에서 useEffect의 두번째 인수 deps를 생략하라고 하셨는데 아래와 같이 deps에 state값들(count, input)을 주고 변화 시켜도 콘솔에 생략했을 때와 똑같이 update가 출력되는 것을 확인했는데 무슨 차이인지 궁금합니다! <deps 생략 코드> useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }); <deps 추가 코드>useEffect(() => { if (!isMount.current) { isMount.current = true; return; } console.log("update"); }, [count, input]);

질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 =>vue 설치 수강 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지=> terminal에 npm~을 입력했는데 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오 라고 표기됨 작성하신 코드 및 오류 스크린샷 npm i -g @vue/cli 을 함께 첨부해주시면 좋아요!

배열 생성자로 배열 선언시, undefined로 출력 되는 것이 아니라 empty로 출력이 되는데, empty와 undefined는 다른 것으로 판단됩니다. 결국 비어있는 배열에 접근할 경우 자바스크립트 엔진에서 undefined로 인식하니까 결국 같은 것으로 생각해야 할까요

제가 1번 일기 수정을 누르고 수정 페이지에 들어가면1번일기의 오늘의 일기 기본값으로 "1번 일기 내용"(원본 content) 있어야 하잖아요? 근데 content 표기는 안되고 placeholder만 보입니다.. 아래는 코드입니다import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import Button from "./Button"; import "./Editor.css"; import EmotionItem from "./EmotionItem"; const emotionList = [ { emotionId: 1, emotionName: "완전 좋음" }, { emotionId: 2, emotionName: "좋음" }, { emotionId: 3, emotionName: "그럭저럭" }, { emotionId: 4, emotionName: "나쁨" }, { emotionId: 5, emotionName: "끔찍함" }, ]; const getStringedDate = (targetDate) => { // 날짜 -> YYYY-MM-DD let year = targetDate.getFullYear(); let month = targetDate.getMonth() + 1; let date = targetDate.getDate(); if (month < 10) { month = `0${month}`; } if (date < 10) { date = `0${date}`; } return `${year}-${month}-${date}`; }; const Editor = ({ initData, onSubmit }) => { const [input, setInput] = useState({ createdDate: new Date(), emotionId: 3, content: "", }); const nav = useNavigate(); useEffect(() => { if (initData) { setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, []); const onChangeInput = (e) => { let name = e.target.name; let value = e.target.value; if (name === "createdDate") { value = new Date(value); } setInput({ ...input, [name]: value, }); }; const onClickSubmitButton = () => { onSubmit(input); }; return ( <div className="Editor"> <section className="date_section"> <h4>오늘의 날짜</h4> <input name="createdDate" onChange={onChangeInput} value={getStringedDate(input.createdDate)} type="date" /> </section> <section className="emotion_section"> <h4>오늘의 감정</h4> <div className="emotion_list_wrapper"> {emotionList.map((item) => ( <EmotionItem onClick={() => onChangeInput({ target: { name: "emotionId", value: item.emotionId, }, }) } key={item.emotionId} {...item} isSelected={item.emotionId === input.emotionId} /> ))} </div> </section> <section className="content_section"> <h4>오늘의 일기</h4> <textarea name="content" value={input.content} onChange={onChangeInput} placeholder="오늘은 어땠나요?" ></textarea> </section> <section className="button_section"> <Button onClick={() => nav(-1)} text={"취소하기"} /> <Button onClick={onClickSubmitButton} text={"작성완료"} type={"POSITIVE"} /> </section> </div> ); }; export default Editor;

const onSubmit = () => { if (input.name === "") { // 이름을 입력하는 DOM 요소에 포커스 inputRef.current.focus(); } };위 코드는 강사님께서 알려주신 onSubmit함수인데 콘솔에 하나하나 찍어가면서 공부하다 보니까 inputRef.current가 가리키는 것이 input 태그여서 아래와 같이 조건문의 조건을 바꿔서 돌려봐도 잘 나오는데 input.name과 inputRef.current.value가 같은 것을 가리켜서 그런건지 궁금합니다!  const onSubmit = () => { if (inputRef.current.value === "") { // 이름을 입력하는 DOM 요소에 포커스 inputRef.current.focus(); } }; 혹시 몰라서 input태그도 올립니다!<div> <input ref={inputRef} name="name" value={input.name} onChange={onChange} placeholder="이름" /> </div>

특정 요소의 입력검증을 위해 useRef()를 생성하고해당 element tag에 ref={inputRef}를 생성한 이후에onSubmit()에서 강의대로 입력확인 처리를 하였습니다.const onSubmit = (e) => { console.log(input.name, input.birth) if(input.name === "") { console.log(inputRef.current) inputRef.current.focus() return } if(input.birth === "") { console.log(birthRef.current) birthRef.current.focus() return } }질문의 bith에 대한 입력검증을 하고자 하면신규로 birthRef = useRef()를 생성하고element tag에 ref={birthRef}를 추가 /onSubmit에서 해당 로직을 적용해야 하는 건가요? 총 4개 입력항목(이름, 생년월일, 국가, 자소개)이면useRef()를 4개 생성해서 엘리먼트별 입력확인을하는구조로 개발이 되어야 하는건가요?

onChange 이벤트에서 입력값 확인을 console.log에서확인시 아래와 같이 확인이 되어집니다.input(type=date포함), textarea 궁금한 사항은 select 에서 선택된 값은 어떻게 확인해야할까요? 실제 target부분에 아래와 같이 표시가 되어집니다.select와 option의 값이 출력이 되고input의 입력값을 볼수있는 형태가 아닌select tag에서 정의한 값이 보입니다.실제 선택한 값을 어디서 확인할 수 있을까요?  

회원가입부터 로그인까지 재생중 오류 30분쯤에서에서 계속 멈춤 왜 그렇까요 확인 부탁 드립니다

제가 front를 잘 몰라서 질문을 드립니다.외부모듈에 사용방식이 CJS, ESM 2가지 말씀하셨는데궁금한 내용은CJS(Common Js) 방식은 현재 javascript 기반에서도  node.js기반하고 상관없이 사용이 가능한가요?ESM ( ES 모듈 시스템) - node.js 기반하에서 동작되는  외부모듈 사용방식으로 이해해도 되는지 문의드립니다.     

AuthModule과 UserModule을 PostModule에 추가하면 Dependency 에러가 해결되는 것은 이해가 됐습니다.다른 질문이 생겼는데요.그러면 해당 Guard를 사용하는 모든 Module에 해당 Guard가 DI 받아서 사용하는 (여기서는 AuthService와 UserService) 모듈 (AuthModule, UserModule)을 import 해주어야 하는 건가요?만약 AccessTokenGuard 를 모든 controller에서 사용한다면, 모든 모듈에 AuthModule, UserModule을 import 해주어야 하는 걸까요?그리고 만약 Guard에 DI 가 새로 추가된다면, (예를 들면 NewModule의 NewService를 Guard가 필요로 한다면)다시 원래 Guard가 사용되고 있던 모듈들 전부에 NewModule을 import 해줘야하는 걸까요?제가 이해한게 맞다면, 의존성 측면에서 매우 좋지 않은 것 같아, 의문이 생겨 문의드립니다.

<!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" /> <title>맛집지도</title> <meta name="author" content="동네코딩" /> <meta name="description" content="맛집지도 서비스" /> <meta name="keywords" content="동네코딩, 맛집지도, 유튜버맛집, 맛집유튜버" /> <link rel="stylesheet" href="style.css" /> </head> <body> <nav> <div class="inner"> <div class="nav-container"> <h1 class="nav-title">맛집지도</h1> <button class="nav-contact">Contact</button> </div> </div> </nav> <main> <section id="category"> <div class="inner"> <div class="category-container"> <h2 class="category-title">맛집지도 카테고리를 선택해보세요</h2> <div class="category-list"> <button class="category-item">한식</button ><button class="category-item">중식</button ><button class="category-item">일식</button ><button class="category-item">양식</button ><button class="category-item">분식</button ><button class="category-item">구이</button ><button class="category-item">회/초밥</button ><button class="category-item">기타</button> </div> </div> </div> </section> <!-- 카테고리 --> <div id="map" class="inner"></div> <!-- 카카오지도 --> </main> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=da893e5911fb51d60018677ccb00c7be" ></script> <script src="script.js"></script> </body> </html> var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스 var options = { //지도를 생성할 때 필요한 기본 옵션 center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표. level: 3 //지도의 레벨(확대, 축소 정도) }; var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴@font-face { font-family: "KyoboHandwriting2020A"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff") format("woff"); font-weight: normal; font-style: normal; } * { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 10px; font-family: "KyoboHandwriting2020A"; } nav { /* background-color: #e69a06; */ } .nav-container { padding: 1rem 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .nav-title { font-size: 3rem; } .nav-contact { font-size: 2.5rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .category-title { font-size: 3.5rem; } .category-item { width: 25%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: #e69a06; cursor: pointer; } .inner { padding: 0 1.5rem; } @media all and (min-width: 1024px) { .inner { max-width: 1024px; margin: 0 auto; } } /* 카카오맵 CSS */ body { height: 100vh; } nav { height: 59px; } main { padding-top: 1.5rem; height: calc(100% - 59px); display: flex; flex-direction: column; } #map { flex-grow: 1; width: 100%; height: 100%; }이렇게 작성하였습니다. 자꾸 에러가 나서 자료 그대로 복붙한 후 appkey만 수정해주었습니다! 자꾸 위와 같은 에러가 뜹니다. 사이트 도메인도위와 같이 설정하였고 앱키도위와 같이 설정하였는데 자꾸 에러가 뜨는 이유는 뭔가요..

안녕하세요 강사님의 인강을 보고 또 혼자 조금씩 코드를 작성하면서 공부하고 있습니다. 공부를 하면서 질문이 있는데 함수부분에서 함수가 비슷한 작업을 할때 이 코드를 묶어서 사용하고 또 재사용도 가능하다라고 문법으로는 알고 있습니다. 하지만 아직 초보여서 그런지 혼자 코드를 작성해보면서 이런상황에서 함수를 사용해야되나? 아니면 함수 생각조차 나지 않을 때가 있는데 혼자 코드를 작성하면서 이럴땐 함수를 이렇게 사용하면 되겠구나라고 스스로 생각이 나게 하려면 어떻게 해야 좋을까요?

 .left_body_header_line{ border-top: 1px dotted black; background-color: aqua; }  left_body_header의 자식(left_body_header_line)border-top이잖아요 그러면 제가 밑줄 친 곳에 점선이 들어가야 하는거 아닌가요?? border의 top이면 상단부분이잖아요

모듈마다 provider를 설정해줘야 되는 장점이 몰까요? 예를 들어 post.service 를 post.controller 에도 쓸수있지만 user.service 에도 post.service를 주입해도 쓸수있는데 그럼 user.module에 또 provider로 post.service를 추가 해야되는건가요? 그냥 IoC에서 등록만하면 되게 하지않았을까요?

강의에서는 4가지 뿐인데 vite가 현재일자 기준으로 업데이트가 되었는지 5번째 칸에 React Router v7이 생겼습니다. 혹시 React Router v7를 선택하면 수강하는데에 문제가 있을까요?

안녕하세요 책과 강의를 병행하고 있습니다!4장 리액트 앱 만들기, 5장 실습부분을 진행하고 있는데요책에서는 create-react-app 으로 리액트 앱을 만들고, 강의는 vite로 앱을 만들고 있습니다. 또한 책에서는 main.jsx대신 index.js와 bundle.js가 생성된다고 하는데 강의를 따라가면 되는걸까요 ??분명 책과 강의의 차이점에 대해 어딘가에 정리되어있을 것 같은데.. 찾을 수가 없어서 질문드립니다!

크롬 확장 프로그램 vue devtools 이 안되서 강의 듣는데 좀 답답하네요 ㅠㅠ<app-content v-bind:propsnum="message"></app-content>이렇게 적으면 hi가 나오고<app-content v-bind:propsnum="num"></app-content>이렇게 적으면 10이 나오고근데 '<h1> {{propsnum}} {{propsdata}}</h1>',이렇게 두개는 안나오고...어렵습니당..직접 데이터 확인해보면 좋은데 왜 확장프로그램이 안될까요....ㅠㅠㅠ 레거시로 깔았는데도 개발자도구에서 vue탭이 안보여요,.. <app-content v-bind:propsnum="message"></app-content> </div> let appContent={ template : '<h1> {{propsnum}} {{propsdata}}</h1>', props:['propsnum','propsdata'] } new Vue({ el: '#app', components:{ 'app-header' : appHeader, 'app-content' : appContent }, data:{ message : 'hi', num:10 } })