44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
_app 폴더가 하는일이 궁금합니다
index는 기본페이지 라고 알고있는데_app는 하는일이 궁금합니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강사님 타입스크립트 질문있습니다.
subs.ts 코드부분에 const {username}:string = jwt.verify(token,process.env.JWT_SECRET);이런식으로 타입으로 stinrg을 주면'string | JwtPayload' 형식은 'string' 형식에 할당할 수 없습니다.'JwtPayload' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322)'String' 형식에 'username' 속성이 없습니다.ts(2339)라는 에러문구가 뜨는데요 User엔티티에 타입을 string으로 줘서 저는 string으로 줬는데 에러가나오네요 제가 잘못생각한걸까요? 참고로 강사님은 string타입을 안주시고 any을 주셨습니다도움이필요해요 !! ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
useState 자동완성이 안되면 어떤거를 만져봐야할까요?
익스텐션을 깔아줘야하는게있을까요?rafce 이런거는 잘되는데..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
로그인이 안된 사람이 커뮤니티 생성 페이지 접근 금지 부분에서 getServerSideProps 부분에 코드가 들어가는 이유를 알고자 합니다
강의 잘 듣고 있습니다대체로 강좌 맘에 듭니다만 getServerSideProps 에 대한 설명이 부족한듯 하여 아쉽네요.로그인이 안된 사람이 커뮤니티 생성 페이지 접근 금지하는 코드 부분이 왜 getServerSideProps 에 들어가는지에 대한 설명이 별로 없어서 그 이유를 알고자 합니다. 답변 기다리겠습니다감사합니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
routes/subs.ts_topSubs 쿼리빌더 관련 질문 있습니다.
useSWR을 이용한 커뮤니티 리스트 가져오기 강의에서routes/subs.ts의 topSubs 함수를const topSubs = async (req: Request, res: Response) => { try { const imageUrlExp = `COALESCE('s."imageUrn",'https://www.gravatar.com/avatar?d=mp&f=y')`; const subs = await AppDataSource.createQueryBuilder() .select( `s.title, s.name, ${imageUrlExp} as "imageUrl", count(p.id) as "postCount"` ) .from(Sub, "s") .leftJoin(Post, "p", `s.name = p."subName"`) .groupBy('s.title, s.name, "imageUrl"') .orderBy(`"postCount"`, "DESC") .limit(5) .execute(); return res.json(subs); } catch (error) { console.log(error); return res.status(500).json({ error: "문제가 발생했습니다." }); } };으로 강사님이 작성해주셨는데, 저는 아래와 같이 해야 동작하더라구요.const topSubs = async (req: Request, res: Response) => { try { const imageUrlExp = `COALESCE(s.imageUrn, 'https://www.gravatar.com/avatar?d=mp&f=y')`; const subs = await AppDataSource.createQueryBuilder() .select(`s.name, s.title, ${imageUrlExp} as "imageUrl", count(p.id) as "postCount"`) .from(Sub, 's') .leftJoin(Post, 'p', `s.name = p.subName`) .groupBy('s.name, s.title, "imageUrl"') .orderBy(`"postCount"`, 'DESC') .limit(5) .execute(); return res.json(subs); } catch (error) { console.log(error); return res.status(500).json({ error: '문제가 발생했습니다.' }); } };제가 postgresql이 아닌 mariadb를 사용하고 있는데, db가 달라서 생기는 차이가 맞나요? 아니면 다른 이유가 있는지 궁급합니다!
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
CSR 단점 질문
안녕하세요 강사님!부록의 NextJS란을 듣고 궁금증이 생겨서 질문 남깁니다.CSR 방식 설명을 제가 이런식으로 정리해보았습니다.서버의 response를 브라우저에서 자바스크립트 파일 다운로드하고 리액트를 실행하고 이런 과정을 화면에서 보여주지 않고 로딩하는 것만 보여줌. 때문에 크롤링을 할 수 없음 = 검색엔진 최적화 X그렇다면 로딩이 모두 끝난 후 완료된 화면을 크롤링 하면 되는 거 아닌가요(첨부한 파일 4번 이후)? 이렇게 한다면 속도 문제 때문에 사용하지 않는 것(SSR방식은 첨부한 파일에 2번에서 크롤링 한다고 제가 인지하고 있습니다)인지 아니면 제가 말씀드린 방법(4번 이후 시점에서 크롤링)은 사용할 수 없는 방법인지 호기심 차원에서 질문 남깁니다. 강의 잘 듣고 있습니다 답변 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
로그인 시도시 타입에러 나는데요 혹시 코드좀 봐주실수있을까요?
ㄱ깃허브 코드꼼꼼히 살펴본다고 살피고있는데 .. 제 눈으로는 에러잡아내기가 힘드네요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강사님 혹시 실례가안된다면
리듀서를 말고 useState를 사용할시 복잡해지고 번거로워진다고 말씀하셨는데 예시를 들면 어떤게있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
리듀서 작성할때 에러 질문있습니다.
사진처럼 작성해주면 에러가 발생했는데 에러내용을봐도 도무지 뭐때문에 그런건지 모르겠습니다ㅠㅠ선생님 강의처럼 따라치면 에러가 사라집니다 이런식으로요default: throw new Error(`Unknown action type:${type}`);어떤 원리때문인지 궁금합니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
context 질문있습니다.
import '../styles/globals.css'; import type { AppProps } from 'next/app'; import { AuthProvider } from '../context/auth'; import Axios from 'axios'; export default function App({ Component, pageProps }: AppProps) { Axios.defaults.baseURL = process.env.NEXT_PUBLIC_SERVER_BASE_URL + '/api'; return ( <AuthProvider> <Component {...pageProps} />; </AuthProvider> ); } 위의 코드와같이 <AuthProvider>로 감싸주셧는데 만약 제가 임의로 음.. <UserProvider>를 만들었다면 app에 이런식으로 겹치게 놓으면되는걸까요?? return ( <UserProvider> <AuthProvider> <Component {...pageProps} />; </AuthProvider> </UserProvider> );추가로 강사님 혹시 db가 pstgresql 이고 도커가 db와 서버 프론트를 연결시켜주는 구심점이라고 이해했는데요 지금 현재 회원가입된 데이터들은 어디서 보고 어디서 삭제할 수 있을까요?
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강사님 혹시 회원가입할때
const salt = await bcrypt.genSalt(10); user.password = await bcrypt.hash(password, salt);이런식으로 회원가입할때 db에 저장되는 비밀번호를 암호화해주지 않은 이유를 여쭤봐도될까요?그리고 꼭 쿠키에 담아야하는걸까요? 세션,쿠키,로컬스토리지 방법중에 쿠키로 선택하신 이유가있다면 궁금해요!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강사님 질문 네개있어요!!
import axios from 'axios'; import Link from 'next/link'; import { useRouter } from 'next/router'; import React, { FormEvent, useState } from 'react'; import InputGroup from '../components/InputGrout'; // 1. 타입 명시안해줘도 괜찮은걸까요? // InputGrout.tsx에는 const InputGroup: React.FC<InputGroupProps> .. 이런식으로 명시해주셨는데 // 여기에는 타입 들어갈 만한게 없어서 작성을안해주신걸까요? // 있는게 불편하지않다 싶으면 const Register:React.FC = ()=> {} 이정도로만 해줘도 괜찮을까요? const Register = () => { // email,username,password의 useState도 타입명시를 해줘도되고 안해줘도될까요? const [email, setEmail] = useState(''); const [userName, setUserName] = useState(''); const [password, setPassword] = useState(''); const [errors, setErrors] = useState<any>({}); // 3. const 대신 let을 사용해주신 이유가 궁금합니다! let router = useRouter(); // 4. 코드가 몇줄 안되서 handleSubmit함수에서 비동기통신을해주고 사용해주시는데 이부분을 그냥 모듈(?)처럼 따로 빼서 사용해도될까요? // 강사님은 어떤 방식을 추천하시는지 궁금합니다. const handleSubmit = async (e: FormEvent) => { e.preventDefault(); try { // 4번질문의 코드부분 const res = await axios.post('/auth/register', { email, userName, password, }); console.log('res', res); router.push('/login'); } catch (error: any) { console.log('error', error); setErrors(error.response.data || {}); } }; return ( <div className='bg-white'> <div className='flex flex-col items-center justify-center h-screen p-6'> <div className='w-10/12 mx-auto md:w-96'> <h1 className='mb-2 text-lg font-medium'>회원가입</h1> <form onSubmit={handleSubmit}> <InputGroup placeholder='Email' value={email} setValue={setEmail} error={errors.email} /> <InputGroup placeholder='Username' value={userName} setValue={setUserName} error={errors.email} /> <InputGroup placeholder='Password' value={password} setValue={setPassword} error={errors.email} /> <button className='w-full py-2 mb-1 text-xs font-bold text-white uppercase bg-gray-400 border-gray-400 rounded' > 회원 가입 </button> </form> <small> 이미 가입하셨나요? <Link href='/login' legacyBehavior> <a className='ml-1 text-blue-500 uppercase'>로그인</a> </Link> </small> </div> </div> </div> ); }; export default Register; 강사님 질문이 네개있는데 코드랑 같이 질문드리고싶어서 주석으로 질문 드렸습니다!타입스크립트 기초지식이 없어서 좀 버벅이네요!ㅠㅠ항상 친절하게 설명해주셔서 정말 감사합니다..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
프론트준비생에게 노드익스프레스 필수 사항 인가요?
server 폴더 부분 익스프레스로 만드시는거프론트준비생에게도 필수 사항 일까요?궁금합니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
@Column 데코레이터의 type 옵션 및 기타 질문입니다..
안녕하세요 선생님 강의 수강 중 질문이 3가지 있어서 질문드려요 ! Post Entity 생성에서 body 컬럼을 이렇게 만드는데요.@Column({nullable: true, type:"text"})body: string;Q. body는 string 이란것을 명시했는데 type:"text"를 따로 입력한 이유가 뭔가요 선생님~? 그리고 궁금한게 또 있습니다.@Column() @ManyToOne(()=> Post)post: Post;Q. Vote Entity 생성에서 post 컬럼을 만들 때 ManyToOne 데코레이터를 쓸 때 왜 타입만 명시하는건가요?Post Entity 에서는 @ManyToOne(() => User, (user) => user.posts) 이렇게 사용하는데요 ㅠ 마지막 질문 입니다. Comment Entity 속 코드 인데요 reduce메소드에서 || 연산자가 어떻게 동작하는 지 궁금합니다. || or 연산자니까 (curObject.value || 0) 는 true or false 인데 Q. 왜 curObject.value 만 쓰지 않고 curObject.value || 0 을 더했는 지 궁금합니다 ㅠㅠ @Expose() get voteScore(): number { const initalValue = 0return this.votes?.reduce((prevValue, curObject) => prevValue + (curObject.value || 0), initalValue) }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
이런건 어떻게 해결해야할까요?
사진과 같이 빨간 밑줄같은게 뜨는데.. 뭐 실행하는데 문제는 발생안하지만 좀 거시기한거같아서 해결해보려고하는데 어떻게 접근해야할까요?또, 깃에 코드를 올리려고하는데 깃이그노어에 적어야할 파일명들이 따로있을까요?data 폴더는 깃에 올리면 안되는거죵..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
강사님 제가 이해한부분이 맞을까요?
이미지가 좀 작네요 죄송합니다.저렇게 화살표로 가르키는게 맞을까요?만약 맞다면 @JoinColumn을 굳이 써야하나요?다대일로 User를 불러왔으니까 User의 모든 정보를 Sub에서 접근할 수 있는거 아닌가요? 어리석은 저를 구제해주세요 ㅠ0ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
깃에 코드올릴때 질문있습니다.
강사님.. 질문충이라 죄송합니다.data 폴더가 있는데 이것도 깃이그노어에 적어서 올리지말아야할까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
docker-compose up 명령어는
처음 docker-compose.yml 파일을 생성후 내용을 작성하고나서 한번만 쳐주면되는건가요?아니면 프론트,서버,가동과 같이 도커 -컴포즈 업 명령어를 쳐줘야하는건가요? 도커-컴포즈 업 명령어를 치는 이유가 프론트,서버를 도커컨테이너가 통합적으로 관리해준다? 뭐 환경이런걸 관리해주는거라고 이해헀는데 맞을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS) 수강중에 있는데 질문있습니다.
현재 리액트에 대한 지식이 하나도 없이 해당 강의를 수강중에 있는데 리액트를 모르더라도 강의 듣는데 문제가 되지 않는지요?또한 리액트를 먼저 공부하지 않고 nextjs 공부를 진행해도 되는지 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
@Column({nullable:true}) postId:number; 이부분 질문있습니다.
import { Column, Entity, JoinColumn, ManyToMany, ManyToOne } from "typeorm"; import BaseEntity from './Entity'; import Post from "./Post"; import { User } from "./User"; @Entity('votes') export default class Vote extends BaseEntity { @Column() value: number; @ManyToOne(()=>User) @JoinColumn({name:'username',referencedColumnName:'username'}) user:User @Column() username:string; @Column({nullable:true}) postId:number; @ManyToMany(()=>Post) post:Post; @Column({nullable:true}) commentId:number @ManyToOne(()=>Comment) comment: Comment }위의 코드에서 @Column({nullable:true}) postId:number;이 부분에서 처음에 추천을 누르면 postId는 1이되고추천눌렀던 게시글을 비추천누르면 postId는 다시 0이되고, 혹은 0에서 -1이 될 수 도 있으니까 null값을 허용해준건가요?