묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
페이지가 화면에 꽉 채워지는 이유 질문
제 프로젝트강사님의 프로젝트 제 프로젝트는 스크롤이 무조건 안되고 일기장 화면이 꽉 찹니다.aspect-ratio도 둘 다 auto로 되어있고 개발자 도구로 확인해보았는데 해결되지 않아 질문 드립니다. 기본 설정에서 빼먹은 게 있을까요?
-
미해결Do it! Node.js 프로그래밍 입문
function1, 2에 대한 질문
안녕하세요 자바 개발만 하다가 노드에 관심이 있어 공부하러 온 학생입니다.영상을 보다가 궁금한 점이 있어 질문 드리는데요.case 1 : function greeting(name){ console.log(`${name}님 안녕하세요.`);}case 2 : let greeting = function(name){ console.log(`${name}님 안녕하세요.`);}두 방법 동일하게 동작하는 것은 알겠는데case 1이 아닌 2번을 굳이 사용하는 이유를 잘 모르겠습니다.결국 선언된 함수의 호출은 동일하게 하는데let으로 함수를 선언하는 이유가 궁급합니다!!
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useEffect의 dependency array에 빈 배열
안녕하세요.10분 30초 쯤에useEffect(() => { }, [originData, isEdit]);여기서 만약 dependency array에 빈 배열을 전달해주면 구체적으로 어떤 문제가 생기나요?home에서 일기 수정하기 버튼이나 새로 만들기 버튼을 누를 때마다 DiaryEditor가 mount 된다고 생각하여 빈 배열을 넣어줘도 된다고 생각했는데, 그게 아니라 리렌더가 되는 건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
섹션3 로그인기능 구현 - react hook form
안녕하세요 수강중인데요지금까지 수강 마치고 항상 프로그램 실행이 정상적으로 돌아갓는데이번 reac hook form 강의에서 코드 실행해보면register 화면에서 유효성 검사 기능이 동작하질 않습니다강의 참고하여 vs로 필요한 install 전부 설치하엿고 에러도 없엇습니다이상해서 react hook 관련 구글링을 통해 다른 방법으로도 적용해보앗지만 여전히 동작을 안합니다원인을 모르겟네요 import React from 'react' import { useForm } from 'react-hook-form' import { useDispatch } from 'react-redux' //import { registerUser } from '../../store/thunkFunctions' const RegisterPage = () => { const { register, handleSubmit, formState: { errors }, reset } = useForm({ mode: 'onChange' }) //const dispatch = useDispatch(); const onSubmit = ({ email, password, name }) => { // dispatch(registerUser(body)); reset(); } const userEmail = register("email",{ required: { value : true, message : "필수 필드입니다."}, }); const userName = { required: "필수 필드입니다." } const userPassword = { required: '필수 필드입니다.', minLength: { value: 6, message: "최소 6자입니다." } } return ( <section className='flex flex-col justify-center mt-20 max-w-[400px] m-auto'> <div className='p-6 bg-white rounded-md shadow-md'> <h1 className='text-3xl font-semibold text-center'> 회원가입 </h1> <form className='mt-6' onSubmit={handleSubmit(onSubmit)}> <div className='mb-2'> <label htmlFor='email' className='text-sm font-semibold text-gray-800' >Email</label> <input type='email' id="email" className='w-full px-4 py-2 mt-2 bg-white border rounded-md' {...register('email', userEmail)} /> { errors?.email && <div> <span className='text-red-500'> {errors.email.message} </span> </div> } </div> <div className='mb-2'> <label htmlFor='name' className='text-sm font-semibold text-gray-800' >Name</label> <input type='text' id="name" className='w-full px-4 py-2 mt-2 bg-white border rounded-md' // {...register('name', userName)} /> {/* { errors?.name && <div> <span className='text-red-500'> {errors.name.message} </span> </div> } */} </div> <div className='mb-2'> <label htmlFor='password' className='text-sm font-semibold text-gray-800' >Password</label> <input type='password' id="password" className='w-full px-4 py-2 mt-2 bg-white border rounded-md' {...register('password', userPassword)} /> { errors?.password && <div> <span className='text-red-500'> {errors.password.message} </span> </div> } </div> <div className='mt-6'> <button type='submit' className='w-full px-4 py-2 text-white duration-200 bg-black rounded-md hover:bg-gray-700'> 회원가입 </button> </div> <p className='mt-8 text-xs font-light text-center text-gray-700'> 아이디가 있다면?{" "} <a href='/login' className='font-medium hover:underline' > 로그인 </a> </p> </form> </div> </section> ) } export default RegisterPage
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
조회수 증가 관련 질문 있습니다.
제가 블로그를 만들어 보고 잇는데 해당 게시물을 보면 조회수가 증가하는데 같은 ip일경우에는 30분을 기준으로 조회수가 증가하게 작업을 하려고 합니다.이때 제가 게시물 조회시 ip와 해당 게시물의 id를 저장하는 테이블을 만들어서 작업을 해보려는데 이때 ip만 db상에서 암호화 한다면 보안상으로 안전할까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이미지 업로드 질문
ex) pages/section19/19-04-image-with-board/index.tsx// ... export default function ImageUploadPage(): JSX.Element { // ... const onChangeFile = async ( e: ChangeEvent<HTMLInputElement>, ): Promise<void> => { const file = e.target.files?.[0]; console.log(file); const isValid = checkValidationFile(file); if (!isValid) return; const result = await uploadFile({ variables: { file, }, }); console.log(result.data?.uploadFile.url); setImgUrl(result.data?.uploadFile.url ?? ""); }; // ... }이렇게 이미지를 선택하기만 해도 uploadFile 함수로 인해 storage에 이미지파일이 저장되어 주소를 받아오 것으로 이해하고 있는데 이 상태에서 새로고침을 하거나 사이트 꺼버리면 storage에 이미지파일은 그대로 저장된 채로 유기되어 용량이 낭비되는 것이 아닌가 하는 의문이 들었습니다. 그렇지 않다면 상관없지만 이렇게 선택만하고 중단할 경우 이미 storage에 저장된 이미지가 자동으로 삭제되지는 않을 것 같고 useEffect의 return 안에 입력정보가 DB에 저장되지 않은 채로 사이트가 꺼지거나 새로고침되면 storage에 선택만 했던 이미지를 지우도록 조건문으로 코드를 작성해주면 storage의 용량이 낭비되는 문제를 해결할 수 있지 않을까요?? 혹은 더 옳바른 방법이 있는지, 제가 잘못 이해하고 있는지, 그리고 제가 말한 방법대로 또는 강사님이 생각하시는 더 옳바른 방법으로 코드를 작성하게 됐을 때의 예시 코드를 보여주시면 감사드리겠습니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 환불관련 문의드립니다.
안녕하세요. 선생님 제가 해당 강의를 유데미에서 수강중인 것을 모르고 실수로 또 구매를 했습니다. 현재 환불 기간이 지나 환불이 불가능한 것으로 확인되어 혹시 해당 강의를 한입 크기로 잘라먹는 타입 스크립트로 변경이 가능한지 문의드립니다. 해당 강의는 아직 수강하지 않았습니다. 제가 아마 할인 기간에 여러 강의 신청할때 같이 신청한거 같은데, 지금 보니 유데미에도 동일 강의를 신청했었네요. 필요시 유데미 강의 결제한 내역 인증도 가능합니다. 동일한 강의를 듣기에는 좀 부담이 있어서 혹시 넓으신 아량으로 강의 변경 또는 환불이 가능한지 문의드리겠습니다.환불이 될 경우 다시 한입 크기 타입 스크립트 강의를 신청하겠습니다.감사합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
expo-cil 설치
안녕하세요. 문의남깁니다.맥에서 expo-cil 설치가 안됩니다." zsh: command not found: npm " 요런 메세지가 나오는데 어떤 방법으로 진행해야하나요?
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
에러없이 png안뜨시는 분들
webpack-cli3, webpack4, loader는 @2로 install 하시면 강의와 같이 잘 나옵니다. 저는 참고로 모든 웹팩, 로더 버전 최신으로 깔았다가 png가 안나왔네요.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
도표 강의 자료 오픈 관련 질문입니다!
강사님께서 올려주신 도표 강의 자료 5개 파일이 모두 확장자가 없어서 이걸 혹시 어떻게 열어볼 수 있을까요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
참조 테이블 생성시 카멜케이스 형태로 , 테이블이 생성이 됬는데 상관없을까요?
참조 테이블 : Follow , PostHashtag 관계를 맺을때 throught 테이블에 카멜 케이스로 테이블을 작성해서 그런거 같은데 , git 소스 원본에도 해당 내용으로 작성되어 있습니다. 영상 가의 마지막 31:53에 테이블이 소문자로 작성된 내용을 보고 질문드립니다 .
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
app.js 데이터 베이스 연결시 질문 있습니다 ( sync 옵션 )
[제로초 강좌 질문 필독 사항입니다]app.js 에서 데이터 베이스 연결시 sync에 ({force:false} ) 를 안붙였는 데도 테이블이 새로 생성이 안되더라구요 기본값이 아무것도 입력안하면 기본값이 false 로 생각하면 되나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
animation sample 질문드립니다!
샘플자료에서 보면fontawesome에서 가져온 아이콘들을.heart svg { width: 42px; height: 42px; color: rgb(224, 0, 52);}이런식으로 크기 색상을 변경해줬는데제가 svg를 적용하려니 안됩니다.<div class="heart"> <i class="fa-solid fa-heart"></i></div> 뒤에 fa-nx를 붙여 크기지정하는 방법말고 px로 크기를 조절하려면 어떻게 해야하나요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
14-04 Redis에서 cacheModule을 위한 @nestjs/common버전 업데이트
다른분이 질문주셨던 'app.module.ts에서 redis연결하는데 @nestjs/common에 CacheModule이 없습니다' 에 대한 답변대로 "@nestjs/common": "^9.0.0" 버전으로 업데이트해서 node_modules도 yarn install 해서 설치했습니다. yarn.lock 확인했는데 버전이 바뀌지 않아 "@nestjs/common": "9.0.0" 로 바꿔서 다시 yarn install 했구요.그런데 @nestjs/common 버전을 9.0으로 바꾸면 계속 mybackend-1(백엔드컴퓨터)에서 오류가 생깁니다. 기존버전 10.0.0이었을 때는 오류가 발생하지 않았었습니다. 실은 강의를 들으며 코드를 따라 치다 마지막에 docker-compose build후 up 했을 때 어디서 오류가 발생하는지 모르겠어서 처음부터 yarn add로 redis랑 cache-manager라이브러리 설치하는 것 부터 docker-compose build,up 하면서 확인을 해봤었는데 @nestjs/common 버전을 9.0으로 바꿨을 때 위 사진처럼 오류가 발생했습니다. package.json파일도 올려보내드립니다.@nestjs/common 버전을 바꿔야 될까요? 아님 다른 오류 원인이 있을까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import할 때 export default로 되있는 페이지들은 중괄호 없이 import하여야 에러가 안납니다.
이걸 몰라서 오류 메시지를 계속 보고 있었네요. 같이 학습하시는분들 참고하셔용.
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import에서 확장자 질문
[ React에서 배열 사용하기1 - 리스트 렌더링(조회) ] 사소한 질문이라 죄송한데, import DiaryEditor from './DiaryEdittor'는 확장자 .js를 붙이지 않고, 왜 import DiaryList from './DiaryList.js'는 확장자 .js를 붙이나요? .js를 없애보니까 오류가 나더라고요...서치를 해보니 그 이유가 나오진 않아서 질문해봅니다. 만약 답을 찾으면 이 질문은 지우도록 하겠습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Redux middleware
안녕하세요.리덕스 미들웨어 강의를 듣는 중 이런 에러 메시지가 떴습니다.구글링 해보니 매개변수 타입 문제인거 같은데 어떻게 해결해야 할지 모르겠어서 질문 드립니다.
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
start:dev-backup으로 돌리면 핫 리로딩이 되요 정상인가요?
"start:dev-backup": "nest start --watch", "start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js",npm run start:dev로 실행 하였을떈 console.log을 바꾸면 작동하지 않는데 start:dev-backup으로 실행할땐 랏 리로딩이 됍니다. 정상인가요?`webpack-hmr.config.js`이 a-nest 파일 안에 있는게 맞겠죠? 영상에선 구분이 잘 가지 않아서const nodeExternals = require('webpack-node-externals'); const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin'); module.exports = function (options, webpack) { return { ...options, entry: ['webpack/hot/poll?100', options.entry], externals: [ nodeExternals({ allowlist: ['webpack/hot/poll?100'], }), ], plugins: [ ...options.plugins, new webpack.HotModuleReplacementPlugin(), new webpack.WatchIgnorePlugin({ paths: [/\.js$/, /\.d\.ts$/], }), new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }), ], }; };처음엔 실행이 안되길래 공식 문서에서 npm i --save-dev webpack-node-externals run-script-webpack-plugin webpack으로 설치 해주었습니다.
-
미해결Node.js 노드 빠르게 훑어보기: 서버부터 DB까지
nunjucks를 사용하는 부분에서 진행이 안됩니다.
섹션3 부분에서 진행이 안됩니다.코드를 아무리 봐도 다른 점이 없는데,서버를 실행하고 127.0.0.1:3000/write 페이지로 접속을하면 흰 화면만 뜹니다. 오류가 뜨는 것도 아닙니다. Server is running 잘 뜹니다... (127.0.0.1:3000 페이지는 정상으로 작동합니다.) 한가지 의심점이라면{%%}로 작성하는 코드에서 저는 색상이 안뜨고, %입력시 자동으로 %로 닫히지도 않아 수동으로 두번 입력을 해야합니다.무슨 이유인지는 모르겠으나 유일하게 찾아낸 차이점이라 그 부분이 문제인것같습니다.검색을 해봐도 답을 알아 낼 수 없어 질문글 올립니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Register 페이지 질문이요
const onSubmit = ({email, password, name}) => { const body = { email, password, name, image : `https://via.placeholder.com/600x400?text=no+user+image` }; 생략 <form className="mt-6" onSubmit={handleSubmit(onSubmit)}> <div className="mb-2"> <label htmlFor="email" className="text-sm font-semibold text-gray-800" >Email</label> <input type="email" id="email" className="w-full px-4 py-2 mt-2 bg-white border rounded-md" {...register("email", userEmail)} /> { errors?.email && <div> <span className="text-red-500"> {errors.email.message} </span> </div> } </div> <div className="mb-2"> <label htmlFor="name" className="text-sm font-semibold text-gray-800" >Name</label> <input type="text" id="name" className="w-full px-4 py-2 mt-2 bg-white border rounded-md" {...register("name", userName)} /> { errors?.name && <div> <span className="text-red-500"> {errors.name.message} </span> </div> } </div> <div className="mb-2"> <label htmlFor="password" className="text-sm font-semibold text-gray-800" >Password</label> <input type="password" id="password" className="w-full px-4 py-2 mt-2 bg-white border rounded-md" {...register("password", userPassword)} /> { errors?.password && <div> <span className="text-red-500"> {errors.password.message} </span> </div> } </div> <div className="mt-6"> <button type="submit" className="w-full bg-black text-white px-4 py-2 rounded-md hover:bg-gray-700 duration-200"> 회원가입 </button> </div> <p className="mt-8 text-xs font-light text-center text-gray-700"> 아이디가 있다면? {" "} <a href="/login" className="font-medium hover:underline" > 로그인 </a> </p> </form> 여기서 onSubmit 함수안에 있는 Body 에 email name password는 어떻게 가져오는건가요? htmlFor 로 알고 가져오는건가요? 이부분이 좀 헷갈려서요 가져와서 Thunk로 넘어가는건 알겠는데 저 함수에서 어떻게 body로 담는지를 모르겠어요 ㅠ