월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
포트폴리오 질문
선생님 혹시 인스타그램이나 타사이트 클론코딩 한것도 회사나 프리랜서하면서 포트폴리오로 제출할수있나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
emotion 리랜더링?
styled-component 말고 emotion을 사용할시에 에제 css를 주입하는데 혹시 emotion을 사용해도 리랜더링 되나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
cors 문제 질문 드립니다.
강의에선 app에 cors 미들웨어를 붙여서 /user에 post하는 경우도 한번에 해결되었는데, 제가 개인적으로 연습할 때는 app이 아닌 요청의 대상이 되는 router 각각에 use(cors())를 붙여줘야 정상적으로 작동하더구요.proxy로 시도해보아도 app에 직접하는 것은 안되던데 이유가 뭔지 알 수 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run build
안녕하세요. 아래와 같은 에러가 발생하는데 이유를 모르겠습니다... 참고로 .next 폴더는 원래 있었습니다 ㅠㅠ (제가 언젠가 build 명령어를 친 건지 그냥 왜 있는지 잘 모르겠습니다.) ------------------------------------------------------------------------------------ (base) ~/profiler2/front master ±✚ npm run build > front@1.0.0 build > ANALYZE=true NODE_ENV=production next bulid > No such directory exists as the project root: /Users/jeonsiwon/profiler2/front/bulid ---------------------------------------------------------------------------------------------- front/package.json "scripts": { "dev": "next -p 3060", "build": "ANALYZE=true NODE_ENV=production next bulid"},
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
쿠키 전송 문제
안녕하세요 제로초님 이 강의를 듣고 ssr 말고 먼저 csr 을 구현해보고자 구현중입니다. ssr 부분 제외하고는 강의에서 알려주신 바탕에 조금씩 응용을 해서 react는 netlify에 nodejs-express는 heroku에 배포하였습니다. 아래는 각각의 주소입니다. front - https://app.netlify.com/sites/tre-jhsk/overview back - https://treback.herokuapp.com/ 로컬에서 각각 서버를 켜서 테스트 할때는 로그인 시 쿠키가 전송이 되어서 새로고침 시에도 로그인이 유지가 되는데 배포를 하면 쿠키가 전송이 안되어서 로그인 했을 때 새로고침 시 바로 로그인이 풀려버리고 개발자 도구에도 쿠기가 아예 전송이 안되는 것 같습니다.. 아래 세션 설정 및 프론트 saga index.js 파일에서 axios base url 설정 코드 입니다. 따로 추가해줘야 하는 부분이 있는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Hashtag 가져오기
안녕하세요. 아래는 제가 만든 프로젝트 코드 내용과 강의 내용인데요 (Profile = Post 동일한 모델이라고 생각하시면 됩니다.) 저는 데이터를 가져올 때 해당 해시태그만 가져와지는데 뭐가 문제일까요 .. 예를들어 노드를 검색하면 노드를 포함한 포스트(프로필) 전체가 가져와지잖아요 #노드#익스프레스 또는 #노드#리액트 이렇게요. 근데 제가 짠 코드에는 그 포스트(프로필)에 #노드만 따라오네요 ㅠㅠ const allProfiles = await Profile.findAll({ // where, // limit : 8, order: [['createdAt', 'DESC']], include: [ { model: Image, attributes: { exclude: ['createdAt', 'updatedAt'], }, }, { model: Hashtag, where: { name: decodeURIComponent(req.params.hashtag) }, attributes: { exclude: ['createdAt', 'updatedAt', 'ProfileTag'], }, }, ],}); model/hashtag.js db.Hashtag.belongsToMany(db.Profile, { through: 'ProfileTag' }); model/profile.js db.Profile.belongsToMany(db.Hashtag, { through: 'ProfileTag' }); router.get('/:tag', async (req, res, next) => { try { const where = {}; if (parseInt(req.query.lastId, 10)) { // 초기 로딩이 아닐 때 where.id = { [Op.lt]: parseInt(req.query.lastId, 10)} } // 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1 const posts = await Post.findAll({ where, limit: 10, include: [ { model: Hashtag, where: { name: decodeURIComponent(req.params.tag) }, }, ...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
강의를 들으며 redux에 대한 궁금증이 생겼습니다.
다름이 아니라 현재 강의를 redux 부분까지 들었는데, 현재까지 배운바에 따르면 redux를 중앙저장소로 하여 더미데이터를 생성하고 이를 각 컴포넌트에 뿌려주며 사용하고 있는 것으로 보입니다! 그런데 만약 백엔드 쪽을 공부해서 알고 있다면 굳이 더미데이터를 생성할 필요성이 없으니 redux가 필요하지 않나요? 아니면 백엔드, DB 분야를 알고 있다하더라도 빠른 프론트의 개발을 위해 Redux로 더미데이터를 생성해놓고 개발하는 편인가요? Redux와 백엔드 사이에 약간의 혼선이 생겨 질문드립니다!
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
styled-components 적용안될 때가 있습니다.
로그인 폼에 ButtonWrapper, FormWrapper에 styled-components를 사용해서 마진 또는 패딩을 줬는데 페이지를 이탈 하거나 새로고침을 하면 styled-components가 적용이 안되는 문제가 있습니다. * 적용될 때 사진 * 적용 안될 때 사진
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드시 오류에 대한 질문이있습니다.
안녕하세요 제로초님 이미지 업로드를 위한 multer / express.static 미들웨어 강의를 듣고 이미지를 업로드했을때 아래와같은 에러가 나옵니다. Error: Failed to parse src "http://localhost:30652021-07-291.13.16_1627577645507.png" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://) 이러한 에러가 뜨고 제 파일이름이 2021-07-291.13.16_1627577645507.png 입니다.Next.js 버전은 11버전 쓰고있습니다.개인적인 견해로는 앞에 주소로 해당부분이 들어가서 생기는 오류가 아닐까 생각되는데 localhost:3065 검색으로 해결이 안돼서 질문드립니다. 좋은강의 항상 감사합니다! DB에 생성은 됩니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
analyze 질문이여
저는 antd이게 이만한데 왜케크죠???ㅋㅋ.. 혹시 이거 정상인가여? 아님 제가뭐 잘못한건가요??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
db 가져오는 순서
안녕하세요. 해시태그를 가져올 때 순서가 자동으로 정렬되어서 질문드립니다. 예를들어 1번 사용자가 #가#나#다#라 라고 등록을 하고 2번 사용자가 #라#다#나#가 라고 등록을 하면 2번 사용자의 해시태그를 다시 불러올 때 자동으로 #가#나#다#라 라고 나오는데 이 부분을 해결하려면 어떤 부분을 공부해야할까요?..
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
post 등록 오류 질문드립니다
안녕하세요 . 강사님께서 req.user가 deserializedUser가 실행되면서 생성된다고 강의에서 말씀하셨는데, 게시글 등록 요청을 보내면, req.user가 undefined가 로그에 찍혀서 강사님 깃헙에 들어가 passport 관련 부분 긁어왔는데도 deserializeUser가 실행이 되지 않아 질문드립니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
aws s3에 관련 질문좀 드리겠습니다
s3에 이미지 업로드 까지 성공을 하엿습니다. 근데 궁금한 점이 하나 생겼습니다. 이 사진은 s3가 아닌 그냥 백엔드 서버 폴더에다가 업로드를 한 사진이고 해당 이미지의 url 을 가져와 주소창에 넣어보면 이런식으로 브라우저에서 이미지가 보입니다. 허나.. 이번에는 s3에 업로드한 이미지 url을 가져다가 주소창에 넣어보니 이미지가 안나오고 해당 이미지가 그냥 다운받아집니다. s3에서 첫번째 사진처럼 url을 입력했는데 이미지가 브라우저창에서 보이도록 할 수 있는게 가능할까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
CSR vs SSR
SSR이 로딩을 없애기에 적합하다고 하셨는데, 브라우저와 백엔드 사이에서 데이터 교환을 통해 페이지를 구성하는 CSR은 로딩이 있고, 프론트엔드와 백엔드서버 사이에서 데이터 교환을 해서 브라우저에 가공된 페이지를 전달하는 SSR은 없는 이유가 궁금한데요. 둘다 데이터 교환이 이루어지고 페이지를 구성한다는 점에서 시간이 걸릴텐데 왜 SSR은 없고 CSR은 있는거죠??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Next.js 동작과정 추가 질문
이전 질문에서 첫 렌더링만 서버사이드 렌더링이라고 하셨는데 첫 렌더링이라는게 http://localhost.com 또는 http://localhost.com/login 과 같이 url을 통한 첫 접속만을 이야기하시는걸까요? 아니면 예를 들어 http://localhost.com 에서 로그인 페이지로 이동하는 버튼을 클릭하였을때 즉, <Link> 태그를 이용하였을때도 서버사이드 렌더링이 되는건가요? 첫 렌더링이 유저가 처음으로 브라우저를 통해 클라이언트에 접속했을때를 이야기하는 것인지 아니면 각각의 페이지를 첫 렌더링이라고 부르는지 궁금합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
리렌더링 질문
- useCallback은 캐싱이니까 이전 컴포넌트랑 지금 컴포넌트랑 [ ] 부분이 바뀌지 않는 이상 똑같은걸로 친다. - return () 안 부분에서는 실제화면에서 바뀐 부분만 다시 그린다. 라고 하셨는데, 아이디나 비밀번호 Input 부분 onChange 에 의해서 value 에 있는 id 와 password가 바뀌면 return () 안에 Input 의 리렌더링을 방지하나요? 아니면 리렌더링이 되나요? 이 부분이 약간 헷갈립니다!!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
Next.js의 동작과정에 대해서
서버사이드 렌더링을 가능케하는 Next.js가 브라우저 <-> 프론트서버 <-> 백엔드서버 이처럼 동작한다고 하셨는데 첫 렌더링시에 백엔드에서 데이터를 가져와 이를 가공해서 프론트서버에서 HTML을 만들어 브라우저로 넘겨주는거로 알고 있는데 여기서 궁금한 점은, Next.js가 React.js 기반이자나요. 그럼 첫 렌더링만 저렇게 만들어서 가져오고, 이후 해당 페이지에서 이루어지는 동작은 React.js처럼 브라우저와 백엔드서버로 데이터 교환을 통해 이루어지나요?? 1. React.js의 경우 하나의 HTML을 던져주고 백엔드와 데이터 교환을 하면서 페이지를 구성하는데 그렇다면 Next.js의 경우는, 로그인 페이지에 접근하면 Login.html 어드민 페이지에 접속하면 Admin.html을 프론트서버에서 만들어서 던져주는 건가요? 2. HTML을 만들어서 던져주고 해당 페이지 안에서는 CSR처럼 백엔드와의 데이터교환을 통해 변화된 부분만을 갈아끼우는건가요? 3. 그게 아니라면 아예 페이지에 접속할때 모든 페이지에 대한 정보를 담아 HTML을 던져주고 이후의 동작은 CSR처럼 동작하는건가요? 4. SSR이 로딩을 없애기에 적합하다고 하셨는데, 브라우저와 백엔드 사이에서 데이터 교환을 통해 페이지를 구성하는 CSR은 로딩이 있고, 프론트엔드와 백엔드서버 사이에서 데이터 교환을 해서 브라우저에 가공된 페이지를 전달하는 SSR은 없는 이유가 궁금한데요. 둘다 데이터 교환이 이루어지고 페이지를 구성한다는 점에서 시간이 걸릴텐데 왜 SSR은 없고 CSR은 있는거죠??
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
SSR적용했을때 router.replace 한박자 늦게돼서 오류
아래는 프로필페이지 ssr적용한 코드입니다. const ProfilePage = () => { const dispatch = useDispatch(); const {loadedProfile} = useSelector(state=>state.user); useEffect(()=>{ dispatch(indexSlice.actions.changeMenu('user')); },[]) return( <div> <Header currentLocate="user"/> <ProfileLayout profileUser={loadedProfile} /> </div> ) } export const getServerSideProps = wrapper.getServerSideProps((store)=>async({req,params})=>{ const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; if(req && cookie){ axios.defaults.headers.Cookie = cookie; } await store.dispatch(loadUser()); await store.dispatch(loadProfile(params.profile)); }) export default ProfilePage; loadProfile()은 프로필정보 받아오는 액션입니다. 로그아웃시에는 loadUser.rejected 로 me도 null, loadProfile도 rejected 돼서 loadedProfile도 null이 되게 설정해놨습니다. 아래는 <Header /> 컴포넌트에 에 들어간 로그아웃함수입니다. const onClickLogout = useCallback(()=>{ dispatch(logoutAction()); router.replace('/') },[]); 여기서 문제가 ssr로 인해 화면을 만들어준뒤에 router가 실행되는것같아서 데이터가 필요한 코드에 에러가뜨며 "'~~~' 는 null에서 가져올수 없다" 같은 에러가 뜨며 url을 보면 '/'로 이동을 하긴했지만 에러화면이 떠있습니다. 그래서 데이터가 필요한 화면에서도 로그아웃을 누르면 에러화면없이 '/'로 이동하게하고싶은데 방법이 없을까요. wrapper.getServerSideProps 함수에 router을 넣어보니 router는 오직 csr에서만 사용가능하다는 에러화면이뜹니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
useEffect 에러 문의드립니다.
안녕하세요 제로초님. 강의 마지막 부분에서 문제가 생겼습니다. useEffect(() => { if (signUpError) { alert(signUpError); } }, [signUpError]); 이 부분을 적용하고, 중복 가입 시도시 경고창 출력까진 성공하였습니다. 이후 인덱스 페이지 클릭 후 다시 회원가입 페이지로 이동하면 해당 경고창이 계속해서 다시 발생합니다. 첫번째 중복 가입 시도 이후 signUpError 변수가 활성화되어서 그런 것 같습니다. 제로초님 깃헙 코드를 보아도 경고창 출력 이후 signUpError 변수를 다시 비활성화 시켜주는 부분이 없는 것 같은데 어떻게 해결하면 좋을까요?? ps) 저는 뎁스에 signUpError 변수를 넣었기 때문에 첫 출력 이후 다시 회원가입 페이지에 들어갔을때는 경고창이 발생하지 않을것이라 예상했는데 아니더라구요. 페이지 단위로 접속하면 useEffect가 한번은 무조건 실행되는 건가요?? 항상 강의 잘 듣고 있습니다. 귀한 시간 내주셔서 감사합니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
선생님 타입 에러가 납니다.. ㅠㅡㅠ
삭제된 글입니다