묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
콜백함수 호출시 인자 개수 체크
안녕하세요. 강사님.콜백함수 챕터에서 repeat 함수에서 호출하는 Callback 함수에 인수를 하나로 넣어주고 있는데 callback 함수가 어떤 함수 인지 모르는 상태에서 인수가 여러개인 함수를 넣어 준다면 오류가 발생하지 않을까요?callback 함수로 들어오는 인자가 잘못된 경우 안에서 타입 체크등을 하기도 하는지 궁금합니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
컴포넌트 리렌더링 관련 질문
안녕하세요! 강의 잘 듣고 있습니다ㅎㅎ이번 강의에서 React dev tools의 'Highlight updates when components render' 옵션을 통해서 컴포넌트가 언제 리렌더링 되는지 감지하는 방법을 알려주셔서 해당 내용 학습 중에 궁금한게 생겨 질문 드립니다. 해당 옵션을 켜고, 이번 강의의 실습 내용 중에서 input 영역을 input component로 분리하면 다른 component와 어떠한 영향도 주고 받지 않으니까 input을 작성할 때 input 영역만 highlight가 될 거라 예상했는데요,실제로는 형제 컴포넌트도 다 같이 리렌더링 되는 것처럼 보이더라구요. 이 현상이 제 코드의 문제인건지, 다른 이유가 있는건지 궁금합니다. input component를 분리한 App.jsx와 Input.jsx를 아래에 코드로 첨부했습니다.[App.jsx]import { useState, useEffect, useRef } from 'react' import "./App.css" import Viewer from './components/Viewer' import Controller from './components/Controller' import Even from './components/Even' import Input from './components/Input' function App() { const [count ,setCount] = useState(0); const handleClickCount = (addValue) => { setCount(count + addValue) } return ( <div className="App"> <h1>Simple Counter</h1> <section> <Input /> </section> <section> <Viewer count={count} /> {count % 2 === 0 ? <Even /> : null} </section> <section> <Controller onCount={handleClickCount}/> </section> </div> ) } export default App[Input.jsx]import { useState } from "react"; const Input = () => { const [input, setInput] = useState(""); return ( <input value={input} onChange={(e) => { setInput(e.target.value) }} /> ) } export default Input;
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
배포관련 질문드립니다.
저는 vercel과 cloudtype 을 이용해 배포를 했습니다.gitlinkfront-linkbackend-link업무게시판등 backend연동이 잘 되지만, admin에서 문제가 있습니다. 수업에 진행한 아이디와 패스워드로, 진행했고, 오류가 나는 부분들을 계속 수정해 보았으나, 로그인연동이 안되서 문의 드립니다. 데이터는 git에 업로드된 내용으로 확인해 주시면 좋겠습니다.
-
미해결레디스의 모든 것 (feat. Node.js)
맥 환경에서 redisJson 사용하는 방법이 궁금합니다
현재 로컬에서 redis 설치해서 학습 진행 중입니다!맥 환경에서 도커 없이 로컬에 설치된 redis에 redisJson 붙여서 사용하는 방법이 궁금합니다!
-
미해결레디스의 모든 것 (feat. Node.js)
redis insight 관련 질문입니다
redis insight 를 현업에서 모니터링 툴로 많이 사용을 하는 지 궁금합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React 컴포넌트 생성 시 속성 할당 필요 문제
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
완벽한 프론트엔드
안녕하세요.저는 현재 고농축 프론트엔드와 백엔드 강의를 모두 수강 중인데요,최근에 ‘완벽한 프론트엔드’ 강의가 새로 생긴 걸 알게 됐습니다.이미 고농축 강의를 수강 중인데도, 완벽한 프론트엔드 강의도 수강하는 게 도움이 될까요?그리고 ‘고농축 프론트엔드’와 ‘완벽한 프론트엔드’의 가장 큰 차이점이 궁금합니다.혹시 고농축 강의를 수강한 사람 입장에서 완벽한 프론트에서 꼭 들어야 하는 파트가 있다면 추천도 부탁드립니다!그리고 혹시 ‘완벽한 프론트엔드’ 강의에 대해 쿠폰을 받을 수 있는지도 문의드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
"Create-투두 추가하기" 강의에서 onKeyDown에 관련된 질문
"Create-투두 추가하기" 강의 11분쯤에 나오는 엔터로도 버튼 실행하기에 관해 질문이 있습니다. onKeyDown 함수를 추가하기전엔 input박스에서 한버튼을 꾹 누르고있으면 연속해서 값이 입력 되었었는데,강의와 같이 onKeyDown 함수를 추가하고 나면 한가지 키를 꾹 누르고 있어도 하나만 입력 됩니다.(ex. E버튼을 꾹 누르는 경우,"EEEEEEEEEEEEE" 이렇게 입력 되었었는데,onKeyDown을 추가하면 "E" 이렇게 하나만 입력됩니다.) 엔터로 버튼을 실행하면서한가지 키를 꾹 눌러서 연속적으로 값도 입력할 수 있는 방법이 있는지 궁금합니다. 감사합니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
5.8) State로 사용자 입력 관리하기 1
강의 6분쯤에 "" 으로 공백이었던 useState의 초깃값을 "이름"으로 바꿔주면서 value={name} 구문을 추가해주셨는데요, 공백일 때에는 같은 문자열임에도 해당 구문 없이도 잘 작동했는데 "이름"으로 설정했을 때에는 해당 구문이 필요한 이유는 무엇인가요? 지피티에 물어보니 Uncontrolled와 controlled input이라는 새로운 개념을 언급하길래 잘 이해가 안 되어 여쭤봅니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm init이 안됩니다 ㅠ
해당 오류 발생하여 아래와 같이 power shell에서 RemoteSigned 으로 변경하였습니다..다른 방법이 있을까요 ㅠ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
안녕하세요!섹션3에서 나만의 쇼핑몰 샘플 페이지 접속 시 404에러가 발생해 확인 부탁드립니다.(https://jooeun-k.github.io/css_my_shop)더 이상 접속을 할 수 없는 걸까요? 미리 답변 감사드립니다.
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
mongdb 스키마 공식 문서와 형태가 다른 이유 궁금합니다.
수업에서 보여주신 코드와 nest.js 공식 문서에서 제공하는 스키마 파일의 구조가 살짝 다른 이유가 궁금합니다.1. xtyatDocument = HydratedDocument<Cat>; 수업 코드에서는 이 부분이 없습니다. 무슨 차이인가요?export class Cat { 공식 문서 제공 파일에서는 아무것도 extends하지 않는데, 수업에서는 다릅니다. 무슨 차이인가요?[공식 문서 제공 코드]```import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';import { HydratedDocument } from 'mongoose';export type CatDocument = HydratedDocument<Cat>;@Schema()export class Cat { @Prop() name: string; @Prop() age: number; @Prop() breed: string;}export const CatSchema = SchemaFactory.createForClass(Cat);```
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm run build 시 search 쪽에서 에러로 인해 build가 안됩니다.
git : https://github.com/ture403/next_appRoute 입니다.현재버전 :에러:이건 search/page.tsx 입니다.import BookItem from "@/components/book-item"; import BookListSeletion from "@/components/skeleton/book-list-seletion"; import { BookData } from "@/types"; import { delay } from "@/util/delay"; import { Suspense } from "react"; async function SearchResult({ q }: { q: string }) { await delay(1500); const res = await fetch(`${process.env.NEXT_PUBLIC_API_SEVER_URL}/book/search?q=${q}`); if (!res.ok) { return <div>오류가 발생했습니다.</div>; } const searchDatas: BookData[] = await res.json(); console.log(searchDatas); return ( <div> {searchDatas.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } export default async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) { const params = await searchParams; // searchParams Promise를 await 합니다. const query = params.q || ""; // q 값을 추출하고, 없으면 빈 문자열을 사용합니다. return ( <Suspense key={query} fallback={<BookListSeletion count={3} />}> <SearchResult q={query} /> </Suspense> ); } 봐주시면 감사겠습니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vercel 터미널 설치 문제
터미널에 vercel을 설치하려는데자꾸 이렇게 뜨고제가 맥os를 사용중이라 sudo npm i -g vercel 이것도 넣어봤더니 패스워드 입력하라고 뜨는데 입력이 아예 안 되네요.. 그냥 엔터 누르면 다시 시도하라고 뜨는데어떻게 해야 설치 가능한가요?ㅜㅜ
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
사용자 입력값으로 input 수정시 문자열을 date객체로 바꾸는 이유
const getStringedDate = (targetDate) => { 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}`; };초기값 설정 할 때 input 태그가 date 객체를 해석하지 못해서 위의 getStringedDate() 함수로 문자열로 변환하여 value 속성으로 넣어줘야 한다고 하셨는데요,사용자 입력값을 넣을 때는 input을 수정하면 문자열로 들어가기 때문에 다시 date 객체로 바꿔주는 함수를 새로 사용해야 하던데<input name="createdDate" onChange={onChangeInput} value={getStringedDate(input.createdDate)} type="date" />이미 여기서 getStringedDate()로 객체에서 문자열 변환하는 함수를 사용해서 값을 나타내야하기 때문에 onChangeInput() 함수를 사용해야 하는건가요?이 흐름이 맞는 거 같긴한데 왠지 좀 번거로운거 같아서 제가 이해한게 맞는지 궁금해서요 참고로 섹션13 12.14)강의의10:22 부분을 듣고 생긴 질문입니다!
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
PUT, DELETE 등의 http 메소드 질문있습니다.
안녕하세요. 오늘도 좋은강의 정말 감사히 듣고 있습니다.제가 웹개발자가 아니라서 정확하게는 잘 모르긴 합니다.6-3에서 문의글 상태변경, 삭제할때 PUT, DELETE 인 http메소드를 사용하시던데제가 알기로는 PUT, DELETE는 보안에 취약한것으로 알고 있는데 사용해도 상관은 없는지 궁금합니다.만약 사용하지 않는다면 상태변경, 삭제할때 GET과 POST방식만으로 어떤식으로 사용해야할지 로직정도만 알려주시면 감사하겠습니다.
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
앱 빌드 문의드립니다.
앱 빌드 중에 문제가 생겨 문의드립니다.아래 알려주신 명령어를 입력하면 로컬이 아니라 expo.dev 사이트에서 앱이 빌드 되는 것을 확인 했습니다. 무료 계정 기준으로 빌드 시간이 30분~1시간 소요됩니다...npx eas build --platfo rm android --profile development 바쁘시겠지만 로컬에서 빌드하고 AVD에 설치하는 과정을 알려주시면 감사하겠습니다. 저와 같은 문제가 발생하시는 분들은 npm run android 또는 npm run ios 를 입력하시면 앱이 설치가 됩니다.이게 정석인지는 잘 모르겠습니다..
-
미해결Do it! Node.js 프로그래밍 입문
이 강의 들으려면 JS할 줄 알아야 하나요
제목 그대로입니다
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
들여쓰기 정리되는거 확장프로그램인가요?
강의 보다보면 저장했을 때 들여쓰기가 다 정리되던데 단축키 인가요 확장프로그램인가요??
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
안녕하세요 선생님 특정 IP만 접속 가능한 기능 강의 예정 있으실까요??
CH5-1에서 언급해주신 특정 IP만 접속 가능한 화이트리스트, 블랙리스트 기능 혹시 강의 예정 있으실까요?? 막상 언급하시니 궁금해서요...