묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
이런경우 npm i nodemon -g 로 설치하는게 더 나은게 아닌가요??
제가 알기로 npm의 경우 -g 라는 글로벌 설치 기능이 존재해서현재 위치에 한정되지 않고 사용이 가능한걸로 알고 있습니다. 앞선 강의에서 빠른 속도등의 이유로 yarn을 쓴다고 하셨지만,nodemon 같이 여러 폴더에서 사용하는 경우에는 npm 글로벌 설치를 하는게, 계속 설치를하고 실행문을 설정해주고 하는 번거러움 같은 측면을 따져본다면 더 좋은 방법이지 않나 하는 생각이 듭니다. 이번 강의에서 yarn과 npm을 혼용해서 쓰지 않는게 좋다고 하셨지만, 글로벌 설치를 하는게 유리한 경우는 npm을 써서 글로벌 설치를 하는게 더 나은지, 아니면 그래도 혼용을 해서 쓰면 안되는지, 그렇다면 yarn이 글로벌 설치가 가능한 npm을 안쓰면서 쓸 장점이 속도 말고 다른게 있는지 궁금합니다.
-
미해결조코딩의 코딩 기초와 웹 풀스택 개발
livesurver가 작동이 안돼요.
안녕하세요, 강의를 보던 중 궁금한게 있어서 문의 드립니다. 라이브서버를 다운받고 'open with live surver' 를 눌렀는데 크롬에서 영상처럼 연동이 안되네요. 인터넷 찾아보면서 세팅설정도 바꿔보고 했는데도 안되네요. 뭐가 문제인지 알려주실 수 있으신가요?
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
빌드 파일의 일부 페이지에서 이미지 파일이 제대로 불러와지지 않습니다.
빌드 폴더가 아닌 오리지널 폴더로 npm start로 확인했을 때에는 알맞게 사진이 불러와집니다. 하지만 빌드 후에 serve 명령으로 실행했을 때에 Diary.js , Edit.js에서 사진을 제대로 불러오고 있지 않습니다. 제가 콘솔로 확인했을 때에 이미지의 상대 주소는 잘 찍히고 있는 것 같은데, 어디에서 빌드 후에 문제가 생기는 건지 잘 모르겠습니다. 깃허브 주소 남깁니다.https://github.com/yminjuu/Emotion-Diary
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
코드 리팩토링 이렇게 해도 되나요??
수업 내용 코드는function checkPhone(myphone) { if (myphone.length < 10 || myphone.length > 11) { console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!"); return false; } else { return true; } } function getToken() { let result = String(Math.floor(Math.random() * 100000)).padStart(6, "0"); console.log(result); return result; } function sendTokenToSMS(myphone, result) { console.log(myphone + "번호로 인증번호" + result + "를 전송합니다."); } function createTokenOfPhone(myphone) { const isValid = checkPhone(myphone); if (isValid === false) return; const mytoken = getToken(); sendTokenToSMS(myphone, mytoken); } createTokenOfPhone("01012345678"); // 01012345678: 인자(argument) 이렇게 되어있는데createTokenOfPhone 함수에서 isValid 상수를 꼭 선언해야하나요?? function checkPhone(myphone) { if (myphone.length < 10 || myphone.length > 11) { console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!"); return true; } } function getToken() { let result = String(Math.floor(Math.random() * 100000)).padStart(6, "0"); console.log(result); return result; } function sendTokenToSMS(myphone, result) { console.log(myphone + "번호로 인증번호" + result + "를 전송합니다."); } function createTokenOfPhone(myphone) { if (checkPhone(myphone)) return; const mytoken = getToken(); sendTokenToSMS(myphone, mytoken); } createTokenOfPhone("01012345678"); // 01012345678: 인자(argument) 이렇게 checkPhone()이 문제있을 때만 true를 반환하고,checkPhone()이 true일 경우 return 처리하면 코드가 더 짧아지기는 하는데수업에서 말씀하시는 협업의 가독성을 위해서 isValid라는 상수를 선언해줘야 하는지 아니면 제가 생각한 방식으로 코드를 줄여도 괜찮은건지 궁금합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
Entity에 toJSON 코드 입력 후 404 에러
Entity.ts에 추가한 toJSON() { return instanceToPlain(this); }이 코드가 들어가면 404에러가 뜹니다. 저 코드를 빼면 돌아가긴 합니다만 이미지(아바타)가 안보이고요.. 그리고 이런 에러가 나서 구글링 한 후 config를 이렇게 바꿨는데, 이게 문제인가.. 싶기도 하고요.. 너무 궁금한데 제발 꼭 좀 아시는 분 답변 부탁드려요
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
originData.id 대신 useParams로 받은 id를 사용하여 삭제하면 안되는 이유
LocalStorage 사용 강의의 16분 50초 부근 "삭제하기" 버튼 관련 질문입니다.처음에 혼자 구현을 하려고 할 때 originData.id 대신 id를 onRemove에 파라미터로 전달했을 때 작동이 안됐는데 originData.id로 해야 삭제되더라고요. 콘솔로 찍었을 때 둘 다 일기 데이터의 id로 같은 걸 가리키는 것으로 나오는데 제가 잘못 알고 있는 부분이 있을까요? 안되는 이유가 무엇인가요? const handleDelete = () => { if (window.confirm("정말 삭제하시겠습니까?")) { console.log(id); console.log(originData.id); onRemove(originData.id); navigate("/", { replace: true }); } };
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
[에러 해결] 콜백 관련 오류 나오시는 분들
promise chain 적용하여 코드를 변경했습니다. 참고하시면 좋을 거 같아요! // index.jsapp.post('/api/users/logout', auth, (req, res) => { User.findOneAndUpdate({ _id: req.user._id }, { token: "" }) .then(() => { return res.status(200).json({ logoutSuccess: true }); }) .catch((err) => { return res.status(400).json({ logoutSuccess: false, message: err.message }); }) })// auth.jsfunction auth(req, res, next) { // 쿠키에서 토큰 가져오기 const token = req.cookies.x_auth; console.log("token is ", token); // 토큰 복호화 및 유저 검색 User.findByToken(token) .then((user) => { if (!user) { throw new Error("유효하지 않은 토큰입니다."); } // 토큰과 유저정보를 다음 단계로 전달함. req.token = token; req.user = user; return next(); }) .catch((err) => { return res.status(401).json({ isAuth: false, message: err.message }); }) }// User.jsuserSchema.statics.findByToken = function(token) { const user = this; return util.promisify(jwt.verify)(token, 'secretToken') .then((decoded) => { console.log(decoded); return user.findOne({ "_id": decoded, "token": token }); }) .catch((err) => { console.log(err); throw new Error("유효하지 않은 토큰입니다."); }); }
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
[에러 해결] (function) no longer accepts a callback
이제는 promise chain이나 async await 문으로 콜백함수를 처리해야 하는 것으로 보입니다. 다음과 같이 코드를 수정해서 돌아가는 것을 확인했으니 활용하시면 좋을 것 같아요! // index.jsapp.post('/login', (req, res) => { // 이메일이 DB에 있는지 확인 User.findOne({ email: req.body.email }) .then (async (user) => { if (!user) { throw new Error("제공된 이메일에 해당하는 유저가 없습니다.") } // 비밀번호가 일치하는지 확인 const isMatch = await user.comparePassword(req.body.password); return { isMatch, user }; }) .then(({ isMatch, user }) => { console.log(isMatch); if (!isMatch) { throw new Error("비밀번호가 틀렸습니다.") } // 로그인 완료 return user.generateToken(); }) .then ((user) => { // 토큰 저장 (쿠키, localstorage ...) return res.cookie("x_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id }); }) .catch ((err) => { console.log(err); return res.status(400).json({ loginSuccess: false, message: err.message }); }) }); // User.jsuserSchema.pre('save', function( next ) { // 비밀번호 암호화 const user = this; if(user.isModified('password')) { bcrypt.genSalt(10, function(err, salt) { if (err) { return next(err); } bcrypt.hash(user.password, salt, function(err, hash) { if (err) { return next(err); } user.password = hash; return next(); }); }); } else { return next(); } }); userSchema.methods.comparePassword = function(plainPassword) { // 암호화된 비밀번호와 같은지 체크 const user = this; return bcrypt.compare(plainPassword, this.password) } userSchema.methods.generateToken = function() { // jwt 생성 user = this; const token = jwt.sign(user._id.toJSON(), 'secretToken'); user.token = token; return user.save(); }
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
id도 잘 불러오는데 토큰이 삭제가 안됩니다 .......
index.js app.get('/api/users/logout', auth, (req,res)=>{ // Usermodel에서 id를 찾고 token을 지워줌 User.findOneAndUpdate({ _id: req.user._id }, { token: "" }) console.log(req.user._id) try{ return res.status(200).send({ success: true }) } catch(err){ return res.json({ success: false, err }); } })auth.js let auth = (req, res, next)=> { // 인증 처리를 하는 곳 // client 쿠키에서 토큰을 가져온다. let token= req.cookies.x_auth; // 토큰을 복호화 후 유저를 찾는다. User.findByToken(token, (err,user)=>{ if(err) throw err; if(!user) return res.json({ isAuth: false, error: true}) req.token= token; req.user= user; next(); })User.js userSchema.statics.findByToken= function(token, cb){ var user= this; //토큰 디코드 jwt.verify(token,'secretToken', function(err, decoded){ //유저 아이디를 이용하여 유저를 찾은 후 // 클라이언트에서 가져온 token과 DB에 보관된 TOKEN이 일치하는지 확인 user.findOne({"_id": decoded, "token": token}) .then((user)=>{ cb(null, user); }) .catch((err)=>{ return cb(err); }) }) }index.js / auth.js / User.js 첨부하겠습니다.도저히 왜 토큰이 DB에서 사라지지 않는지 궁금합니다 ㅠㅠ
-
해결됨[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에 테이블이 소문자로 작성된 내용을 보고 질문드립니다 .