묻고 답해요
147만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
git push -> git pull 후에 build 문의
안녕하세요~ backUrl을 수정하여 소스코드가 변동되었으니 github에 commit push를 한 뒤, 우분투 서버에 접속하여 front에서 다시 git pull을 할 경우, 우분투 서버 front에서 build를 또 진행 해야하나요?그리고, 이전에 강의에서 vim으로 .env를 만든것들도 다시 만들어야할까요?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
프론트 ip로 들어갈때 연결이 안됩니다....
지금 빌드까지 마친 상황이고 sudo npx pm2 start npm -- start 이후 sudo npx pm2 monit을 하엿는데 이러한 에러가 나옵니다.https://github.com/jinhwansong/blog 다른 분들의 이야기를 보면 비슷한 에러가 나는거 같기는 한데 답을 모르겟어요 ㅠㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
제로초님 프론트서버를 배포하려는데 문제가....
지금 계속 프론트서버에서 npm run build를 하려는데 왠지는 모르겟는데 빌드가 되다가 멈추는 현상이 생깁니다. 여기서 멈추고 30분째 가만히 있는데 이유가 따로 있을까요? 우분투 서버는 Ubuntu Server 22.04 LTS (HVM), SSD Volume Type 이거를 사용했고 인스턴스 유형은 t2.micro입니다..
-
미해결처음 만난 리덕스(Redux)
실습코드를 발을수 있는 곳이 있나요?
실습코드 부분이 빠르게 지나가는데,실습코드를 따로 받을수 있는 곳이 있을까요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
마이너스버튼 테스트
test("Prevent the -,+ button from being pressed when the on/off button is clicked",()=>{ render(<App />); const onOffButtonElement = screen.getByTestId("on/off-button"); // click onOffButtonElement button fireEvent.click(onOffButtonElement); const plusButtonElement = screen.getByTestId("plus-button"); expect(plusButtonElement).toBeDisabled(); })on/off버튼을 통해 플러스와 마이너스 버튼의 클릭시 disable속성을 추가하는 과정에서 app.test.js에 테스트항목에 마이너스에 대한 내용을 안적어도 무관한가요?플러스가 잘작동하면 마이너스도 잘 작동할 것이기 때문인가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
https 적용 후 다른 포트 사용이 가능한가요?
안녕하세요.강의보고 따라하니 https 적용이 잘 됐습니다. 저는 https를 적용하기 전에 3050번 포트에 프론트,3060번 포트에 백,3000번 포트에 관리자 페이지를 각각 배포해놓았습니다. ec2의 한 인스턴스에 이 3개를 배포하는 방법은 있을까요?예를 들어 도메인이 domain.com 일때,프론트는 domain.com에 배포하고관리자는 domain.com:3000에 배포하고백은 domain.com:3060에 배포하는 방법이 있을까요?
-
미해결처음 만난 리덕스(Redux)
첫강의에 팝업 뜬 내용 못읽고 꺼버렸는데 무슨 내용이었는지 아시는 분
첫강의에 팝업 뜬 내용 못읽고 꺼버렸는데 무슨 내용이었는지 아시는 분 있으신가요ㅠㅠ최초 1회만 뜨는 거라 그런지 재접속 해봐도 안뜨네요 ㅠ
-
해결됨따라하며 배우는 리액트 A-Z[19버전 반영]
리액트 서버 실행 오류
리액트 설치 npx create-react-app ./ 이후리액트 최초 시작 시 npm run start가 작동하지 않습니다.위와 같은 오류가 발생하여, 아래와 같은 해결 방법들을 실행해보았습니다. 하지만, 위의 코드를 모두 실행했음에도 동일한 오류가 계속해서 발생합니다. node.js와 npm의 버전은 이러합니다. 폴더는 현재 강의자료 코드 폴더 내에 study라는 새로운 폴더를 만들어, 그 안에 리액트를 설치했습니다.프로젝트를 3번 정도 삭제하고 다시 설치했음에도 동일한 오류가 발생합니다. 어떻게 하면 좋을까요? 🥲 VSCode를 재시작하니 서버가 실행되었는데, App.js의 수정사항이 반영되지 않아 다시 VSCode를 재시작했더니 또 동일한 오류가 납니다...
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
해시태그 검색관련 질문있습니다.
자주 질문을 드려 죄송합니다. ㅠㅠ 모르는게 많아서 ㅠㅠ그 해시태그 부분을 작업 하고 있는데 제가 해시태그를 클릭하게 되면 예를 들러 123123을 클릭을 한다 라고 하면 기존 아래에서 검색이 될시 이런식으로 해시태그가 123123만 나오고 나머지 것들은 안나오는 현상이 나오고 있습니다. 코드 같은 경우는 알려주신데로 router.get("/:hashtag", async (req, res, next) => { try { const users = req.user ? req.user.id : null; const offset = (parseInt(req.query.page) - 1) * 10 || 0 const { count, rows: post } = await Post.findAndCountAll({ offset: offset, limit: 10, // DESC 최신순 ASC 오래된순 order: [ ["createdAt", "DESC"] ], include: [ { model: Hashtag, where: { hashtag: req.params.hashtag }, attributes: ["hashtag"], through: { attributes: [] }, }, { model: Image, attributes: ["src"], },{ model: User, attributes: ["nickName"], }], attributes: [ "id", "title", "createdAt", "view", "content", // 좋아요 수 [Sequelize.literal("(SELECT COUNT(*) FROM `Like` WHERE `Like`.`postId` = `Post`.`id`)"), "count"], // 좋아요 여부 [Sequelize.literal("IF((SELECT `postId` FROM `Like` WHERE `Like`.`postId` = `Post`.`id` AND `Like`.`userId` = " + users + "), 1, 0)"), "like"], ], }) const posts = post.map((post) => { const format = post.toJSON() format.hashtag = format.Hashtags.map((tag)=>tag.hashtag) format.src = format.Images.map((img) => img.src).join("") format.nickname = format.User.nickName format.content = format.content.replace(/<[^>]+>|<img.*?>/g, ""); delete format.Images; delete format.User; delete format.Hashtags; return format; }) res.status(201).json({ count, posts }) } catch (error) { console.error(error) next(error) } })이렇게 작성을 하였는데 찾아 보니 where: { hashtag: req.params.hashtag },이렇게 작성을 하게 되면 해당 해시태그에 해당하는 게시물이 불러와 지기는 하는데 검색된 해시태그만 뽑아서 나타나지게 되니 where: { hashtag: { [Op.contains]: [`${req.params.hashtag}`] } },이런식으로 작성을 하면 된다고 해서 써봣는데 "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''asd' LEFT OUTER JOIN Images AS Images ON Post.`id` = Images.`PostId` LE' at line 1", sql: "SELECT count(`Post`.`id`) AS count FROM Posts AS Post INNER JOIN ( PostHashtag AS Hashtags->PostHashtag INNER JOIN Hashtags AS Hashtags ON Hashtags.`id` = Hashtags->PostHashtag.`HashtagId`) ON Post.`id` = Hashtags->PostHashtag.`PostId` AND Hashtags.`hashtag` <@ 'asd' LEFT OUTER JOIN Images AS Images ON Post.`id` = Images.`PostId` LEFT OUTER JOIN Users AS User ON Post.`UserId` = User.`id`;",이런 에러가 나더라구요... 왜 images에 관련된 문구가 나오는지는 모르겟지만.... 혹시 mysql에서 contains메소드가 사라진건지 아닌지 혹시 고칠수 잇는건지 궁금합니다.제 sequelize 버전은 6.35.2 입니다. ㅠㅠ
-
미해결처음 만난 리덕스(Redux)
강의자료문의
ppt 강의 자료는 어디서 받을 수 있나요?
-
미해결처음 만난 리덕스(Redux)
기존 Storage API를 사용하지 않고 redux-persist를 사용하는 이유가 궁금합니다
안녕하세요 소플님, 강의 정말 잘 보고 있습니다!항상 이해하기 쉽게 질 높은 강의를 제공해주셔서 감사드립니다.아래와 같은 점이 궁금해 질문을 드립니다. 제목에서처럼 브라우저에서 제공하는 Storage API를 사용하지 않고 redux-persist를 사용하는 이유가 궁금합니다. 브라우저 Storage API를 사용하는 것과 비교해 어떤 이점을 갖고 있는지 여쭤보고 싶습니다.브라우저 Storage API를 react에서 사용했을 때 react에서 제공하는 기능을 사용할 수 없게 되는 제약 같은 것이 있는지 궁금합니다. 만약 그렇다면 가상 DOM환경과 관련이 있는지도 궁금합니다. 예를 들어 localStorage에 저장되어 있는 데이터를 useMemo로 의존성을 갖게 하여 데이터를 관리할 수 있는지와 같은 것입니다. React를 배운지 얼마 안되어서, React에 대해 잘 파악하지 못하고 하는 질문일 수도 있는 점 양해를 구하고 싶습니다 ㅜㅜ,, 감사합니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
섹션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상에서 암호화 한다면 보안상으로 안전할까요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
도표 강의 자료 오픈 관련 질문입니다!
강사님께서 올려주신 도표 강의 자료 5개 파일이 모두 확장자가 없어서 이걸 혹시 어떻게 열어볼 수 있을까요?
-
미해결프로젝트로 배우는 React.js
블로그 낫 파운드 ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 이렇게 하면, 블로그 낫 파운드가 뜹니다. ㅠㅠ_order : 'desc' 가 없으면 블로그가 잘 떠요 axios.get(`http://localhost:3001/posts`, { params : { _page: page, _limit: 5, _sort: 'id', _order: 'desc', }
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Redux middleware
안녕하세요.리덕스 미들웨어 강의를 듣는 중 이런 에러 메시지가 떴습니다.구글링 해보니 매개변수 타입 문제인거 같은데 어떻게 해결해야 할지 모르겠어서 질문 드립니다.
-
미해결프로젝트로 배우는 React.js
return (<div></div>)
return <LoadingSpinner />어떤 경우에는 () 괄호를 치고 return 을 하고,어떤 경우에는 < /> 태그만 치고 return 을 하는데 그 차이가 뭔가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
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로 담는지를 모르겠어요 ㅠ
-
미해결프로젝트로 배우는 React.js
useState 에 대해
3:20모델 값이 갱신이 안되서 그런건가요?모델이 원웨이로 돼어있나요?useState 를 쓰면 모델이 투웨이로 바뀌는건가요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
해시태그 가공해보고 싶습니다 ㅠ
해시태그를 가져오려 include: [{ model: Hashtag, attributes: ["hashtag"], through: { attributes: [] } }],이런식으로 코드를 짯는데 프론트로 데이터를 보내는게Hashtags: [1:{hashtag: "ㅁㄴㄴ"}2: {hashtag: "ㅇㅇㅇ"}3: {hashtag: "ㅂㅂㅂ"}4: {hashtag: "ㅁㅁㅋㅋ"}]이런식으로 데이터가 가더라구요 여기서 hashtag 라는 이름 없이Hashtags: [ 1 : "ㅁㄴㄴ"2:"ㅇㅇㅇ"3:"ㅂㅂㅂ"]이런식으로 보내고 싶은데 방법 없을까요...
주간 인기글
순위 정보를
불러오고 있어요