173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Vue.js 시작하기 - Age of Vue.js
하아 너무 답답하네요 레거시나 베타버전 다 설치해봤고, 충돌일까싶어서 한개씩만 설치도 해봤는데 안됩니다... 강의의 반만 따라가는 것 같아서 참 답답합니다... 어떻게 해결방법이 없을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
선생님 강의 5-3) 9분 10초를 보다가 궁금한 것이 있습니다~ generateStaticParams으로 지정했던 id값이 아닌 4번페이지에 접속했을 때 해당 페이지가 실시간으로 다이나믹하게 페이지가 생성되고 풀라우트캐시에 저장된다고 하셨는데요 풀라우트캐시는 static페이지에서만 동작한다고 알고 있고, [id]컴포넌트에서 fetch함수에 캐싱 옵션으로 'force-cache'을 설정한 것도 아닌데 어떻게 풀라우트 캐시가 동작할 수 있나요??
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 종강으로 얻은 타입스크립트 할인 쿠폰인데 입력하니까 이렇게 뜨는데 그럼 못받는건가요 ㅜㅜ
미해결
클린업 JavaScript: 베이스 빌드업!
안녕하세요, 선배님. 저는 현재 서버 개발 경력 1년, 클라이언트 개발 경력 6개월 나머지 유지 보수 경력들을 포함해 약 3년 차에 접어든 주니어 개발자입니다. 지금은 주로 서버 개발자로 활동하고 있지만, 최근 진로와 관련된 고민이 많아 선배님께 조언을 구하고자 이렇게 글을 드립니다. 제 성향은 백엔드 개발이 잘 맞는다고 느끼고 있지만, 프론트엔드 개발에 대한 관심이 점점 커지고 있습니다. 특히 서비스중이신 강의들을 들으면서 프론트엔드를 바라보는 시각이 완전히 달라졌고, 점점 더 매력을 느끼고 있는 상황입니다. 이제는 어느 정도 마음의 결정을 내려야 할 시점이라는 생각이 들어, 전문적으로 어떤 커리어를 선택해야 할지 고민하고 있습니다. 프론트엔드와 백엔드 모두 매력적인 분야이지만, 새로운 도전을 선택하는 것이 맞는지, 아니면 제가 잘 맞고 경험이 더 많은 백엔드에 집중하는 것이 맞는지 아직 명확히 판단하기 어렵습니다. 선배님의 경력을 살펴보니 주로 자바스크립트를 중심으로 다양한 개발 작업을 해오신 것으로 알고 있습니다. 서버 개발도 분명 경험하셨을 것 같고, 저와 비슷한 고민을 해보셨을 것 같아 더욱 궁금해졌습니다. 혹시 선배님께서도 과거에 프론트엔드와 백엔드, 혹은 특정 기술 스택 사이에서 고민하셨던 적이 있으셨나요? 그리고 그러한 고민 끝에 무엇이 선배님을 자바스크립트라는 언어로 전문성을 갖추고 커리어를 쌓게 만든 결정적인 요인이었는지 궁금합니다. 선배님의 선택 과정이나 기준이 저에게도 많은 영감을 줄 수 있을 것 같습니다. 혹시 선배님께서 제가 이런 결정을 내리는 데 참고할 수 있는 조언이나 방향성을 제시해 주실 수 있을까요? 선배님의 경험과 지혜를 조금이라도 나눠주신다면 큰 힘이 될 것 같습니다. 긴 글 읽어주셔서 감사드리고, 좋은 하루 보내시길 바랍니다. 감사합니다!
미해결
Next + React Query로 SNS 서비스 만들기
쌤 하트나 리포스트를 누를 때 마다 가끔씩 TypeError: data.pages.map is not a function 이런 에러 PostRecommend 섹션에 뜨는데 이런 경우가 종종 발생할까요 ?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
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가 아웃풋으로 나와야 하는거 아닌가요??
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 강사님! 항상 좋은 강의 감사합니다:) 강의를 보던 중 강사님 께서는 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 을 함께 첨부해주시면 좋아요!
미해결
코드로 배우는 React 19 with 스프링부트 API서버
상품쪽 moveToList에서 page하고 size추가 안해도 useCustomMove 이쪽에 const page = getNum(queryParams.get('page'), 1) const size = getNum(queryParams.get('size'), 10) 이렇게 되어있어서 따로 moveToList에서 page하고 size를 안넣어도 잘 이동이 되던데 잘못된걸까요??
해결됨
진짜! 자바스크립트(Javascript) - 기초부터 고급까지
배열 생성자로 배열 선언시, undefined로 출력 되는 것이 아니라 empty로 출력이 되는데, empty와 undefined는 다른 것으로 판단됩니다. 결국 비어있는 배열에 접근할 경우 자바스크립트 엔진에서 undefined로 인식하니까 결국 같은 것으로 생각해야 할까요
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
제가 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;
미해결
실무 중심! FE 입문자를 위한 React
https://codesandbox.io/p/sandbox/2-1-29k09?file=%2Fsrc%2Findex.js%3A9%2C1
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
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>
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
특정 요소의 입력검증을 위해 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개 생성해서 엘리먼트별 입력확인을 하는구조로 개발이 되어야 하는건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onChange 이벤트에서 입력값 확인을 console.log에서 확인시 아래와 같이 확인이 되어집니다. input(type=date포함), textarea 궁금한 사항은 select 에서 선택된 값은 어떻게 확인해야 할까요? 실제 target부분에 아래와 같이 표시가 되어집니다. select와 option의 값이 출력이 되고 input의 입력값을 볼수있는 형태가 아닌 select tag에서 정의한 값이 보입니다. 실제 선택한 값을 어디서 확인할 수 있을까요?
미해결
Next + React Query로 SNS 서비스 만들기
재게시를 클릭하면 Reposts 부분과 count부분을 수정하고 unShift함수를 사용해서 pages[0]에 글정보를 추가하게 되는데 재게시를 클릭할 때 마다 pages[0]에 {user:{},Original:{}} 부분이 계속 추가되는게 맞나요 ? 인피니트쿼리는 한 페이지당 최대 10개의 객체를 받아오는 것으로 알고있는데 인피니트 쿼리랑은 상관 없는건가요 ?
해결됨
자바스크립트부터 리액트까지 [PART4/4] 포기없는 리액트로 가는 길
회원가입부터 로그인까지 재생중 오류 30분쯤에서에서 계속 멈춤 왜 그렇까요 확인 부탁 드립니다
해결됨
[React 2부] 고급 주제와 훅
안녕하세요 강사님 수업 잘 듣고 있습니다. OrderableProductItem.jsx에서 컨텍스트의 컨슈머 안에 렌더 프롭을 children으로 만들고 changePath를 이용해서 주문하기 버튼을 누르면 cart로 이동하지 않습니까? 그런데 productItem.jsx에서는 {onClick && ( <Button styleType={"brand"} >주문하기</Button> )} 1. 이렇게 정의되어서 onClick 메서드를 받기만 하고 직접 활용하지 않습니다. 그럼에도 불구하고 Context를 통해 changePath가 작동할 수 있는 이유가 무엇인가요? 코드의 가독성을 위해서는 productItem.jsx에서 onClick ={onClick}을 달아주어야 하지 않나요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
제가 front를 잘 몰라서 질문을 드립니다. 외부모듈에 사용방식이 CJS, ESM 2가지 말씀하셨는데 궁금한 내용은 CJS(Common Js) 방식은 현재 javascript 기반에서도 node.js기반하고 상관없이 사용이 가능한가요? ESM ( ES 모듈 시스템) - node.js 기반하에서 동작되는 외부모듈 사용방식으로 이해해도 되는지 문의드립니다.
미해결
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
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 해줘야하는 걸까요? 제가 이해한게 맞다면, 의존성 측면에서 매우 좋지 않은 것 같아, 의문이 생겨 문의드립니다.
