176만명의 커뮤니티!! 함께 토론해봐요.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
다른 유저와 공통적으로 팔로잉을 하고 있는 유저 숫자를 구하고 싶은데 혹시 api를 어떤 방식으로 코딩하면 될까요? 항상 좋은강의 감사합니다
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
강의에서 포트가 남아있을경우 killall -9 node명령어를 사용하라고 하셨는데요.. 포트가 남아있다는게 무슨 뜻인지 모르겠습니다.. 저는 vscode로 진행중이며, npm run bulid 후에 npm run dev로 서버를 다시 시작하고 코드가 변경될때마다 Ctrl + c로 껏다가 다시 재시작 하여 반복 하는데요. 강사님께서는 killall -9 node를 사용하시는데 이걸 왜 쓰는지 모르겠어요.. 그리고 killall node 사이의 -9 는 무슨뜻인가요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
포스트정보를 가져올 때 이렇게 좋아요를 가져오는데 좋아요에 대한 건 중간 테이블에서 가져오는게 아닌가요? as Likers는 단순히 user테이블의 이름만 바꾼다고 생각을 했습니다.. 좋아요 테이블은 따로 find로 접근을 할 수 없나요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초쌤 유저의 게시글을 [id]로 받아오는건 잘 되는데 유저의 게시글을 동적라우팅을 할때 유저의 닉네임을 넣어서 받아올려고 합니다! 하지만 백엔드의 post.js의 column 형태가 아래와 같이 되어있어서 nickname을 받아오게 하기 위해서 Posts DB안에 있던 게시글을 전부 지운뒤 models 의 post.js 안에 nickname관련 설정을 따로 넣었습니다. 근데 저렇게 작성하면 백엔드에서는 nickname관련한 필드리스트를 찾을 수 없다고 해서 에러가 나더라구요 혹시 post.js의 설정 중에서 어떤걸 건드려야 게시글 작성자의 nickname을 들어가게 할 수 있나요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
이런 이유로 렌더링이 안된는것 같은데 검색을 해보면 웹팩이나 버전에 대한 설명이 있는것 같은데 잘 모르겠네요 . 아시는 분 답변 부탁드려용.~~ㅜ.ㅜ
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 선생님. 제 프로젝트에서는 리트윗 기능이 일반 게시글과 분리되어 관리되거든요.(리트윗만 모아서 보여주고 게시글과 한꺼번에 렌더링해서 보여주지 않습니다) 그래서 처음에는 그냥 for문으로 리트윗 내용일 땐 렌더링 하지 않는 식으로 처리했다가 제 프로젝트에서 mainPosts로 map함수를 쓰는 컴포넌트가 몇 개 돼서 그냥 리트윗 테이블을 따로 만들어서 관리할까 하는데 이럴 때 post와의 관계성은db.Post .hasMany(db.Retweet); 이런 식으로 잡아주면 되나요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
export default class User extends BaseEntity{ ... @Index() @Column({ unique: true}) email:string; ... } 여기에서 다루는 이 코드와 @Unique(['email']) export default class User extends BaseEntity{ ... @Column() email:string; ... } 두가지가 어떤 차이가 있는걸까요...? 너무 궁금 합니다!
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
선생님이랑 똑같이 작성했는데 왜 그럴까요...??
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
최초 접속시 10초가 넘는 로딩시간이 걸립니다. 왜 그런지 알 수 있을까요? 그 이후로는 빠르게 동작합니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강의를 보면서 잘 오다가 npm i next@9로 해야하는걸 아래 질문에서 13을 써도 된다고 하셔서 @13 이라고 했는데 저렇게 에러 3줄이 next@9을 할 때 도 저렇게 뜨고 13으로 해도 저렇게 뜹니다 package.json 뜨는 것 까진 잘 됐어요 어떻게 해야할까요? PS C:\Users\USER\Desktop\1080\react1> cd prepare PS C:\Users\USER\Desktop\1080\react1\prepare> cd front PS C:\Users\USER\Desktop\1080\react1\prepare\front> node -v v18.14.0 PS C:\Users\USER\Desktop\1080\react1\prepare\front> npm -v 6.9.0 PS C:\Users\USER\Desktop\1080\react1\prepare\front> npm init npm WARN npm npm does not support Node.js v18.14.0 npm WARN npm You should probably upgrade to a newer version of node as we npm WARN npm can't make any promises that npm will work with this version. npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12. npm WARN npm You can find the latest version at https://nodejs.org/ This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See npm help json for definitive documentation on these fields and exactly what they do. Use npm install <pkg> afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (front) react-nodebird-front version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to C:\Users\USER\Desktop\1080\react1\prepare\front\package.json: { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) yes PS C:\Users\USER\Desktop\1080\react1\prepare\front> npm i next@13 npm WARN npm npm does not support Node.js v18.14.0 npm WARN npm You should probably upgrade to a newer version of node as we npm WARN npm can't make any promises that npm will work with this version. npm WARN npm Supported releases of Node.js are the latest release of 6, 8, 9, 10, 11, 12. npm WARN npm You can find the latest version at https://nodejs.org/ npm ERR! cb.apply is not a function npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\USER\AppData\Roaming\npm-cache\_logs\2023-02-14T14_50_16_126Z-debug.log PS C:\Users\USER\Desktop\1080\react1\prepare\front>
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
node -v 쳤을 시 버전이 v18.14.0 으로 뜨는데 그대로 진행해도 괜찮은 건가요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의는 hydration 들으면서 실습하던중으로, 게시글 등록시 해당 에러가 발생하는데, 토큰 만료는 어느 부분을 놓친지 모르겠습니다. 짐작건데, accessToken store쪽을 잘못저장해놨나 싶어서 캡쳐해봤습니다.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
해당 챕터에서 빌드 시 문제가 발생했습니다. 1. getStaticProps 사용 시 발생한 에러입니다. FetchError: request to http://localhost:3000/api/stores failed, reason: connect ECONNREFUSED 127.0.0.1:3000 구글 검색해보니 getStaticProps 말고 getServerSideProps를 사용하라 하네요?? 아마 로컬 서버에 접근을 못해서 그런듯 하구요 getServerSideProps를 사용하니 TypeError: fetch failed 에러로 빌드 실패 Axios로 교체 후 시도해도 역시 실패 Node 18에서 위와 같은 문제가 발생한다는걸 발견함 Node 16으로 교체하니 빌드 성공 결론: 노드 LTS버전 말고 16버전 사용하면 이유는 모르겠지만 해결이 되긴 한다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입이나 로그인 후 주소가 http://localhost:3000/login ? 이나 http://localhost:3000/signUp ? 으로 이동해지며, url 뒤에 물음표가 붙습니다. 가끔 Failed to fetch 메시지가 뜨는것은 너무 많이 요청을 보내서 그런것같습니다만, 그것과 무관하게 아래의 이슈가 사라지지 않습니다. 지금 학습단계에서 임시로 사용하기로한 로컬스토리지때문에 발생한 이슈일까요? import React, { useEffect } from 'react'; import { ApolloLink, ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'; import { createUploadLink } from 'apollo-upload-client' import { useRecoilState } from 'recoil'; import { accessTokenState } from '@/src/commons/store'; interface Props { children: JSX.Element; } const GLOBAL_STATE = new InMemoryCache() const ApolloSetting = (props: Props) => { const [accessToken, setAccessToken] = useRecoilState(accessTokenState) useEffect(() => { if (localStorage.getItem("accessToken")) { setAccessToken(localStorage.getItem("accessToken") ?? "") } }, []) const uplodLink = createUploadLink({ uri: "http://backendonline.codebootcamp.co.kr/graphql", headers: { Authorization: `Bearer ${accessToken}` } }) const client = new ApolloClient({ link: ApolloLink.from([uplodLink as unknown as ApolloLink]), cache: GLOBAL_STATE }); return <ApolloProvider client={client}>{props.children}</ApolloProvider>; }; export default ApolloSetting; import { Title } from '@/src/commons/styles/emotion' import * as S from './Login_styles' import React, { useEffect, useState } from 'react' import { useMutation } from '@apollo/client' import { type IMutation, type IMutationLoginUserArgs } from '@/src/commons/types/generated/types' import { LOGIN_USER } from './Login_query' import { Modal } from 'antd' import { useRouter } from 'next/router' import { useRecoilState } from 'recoil' import { accessTokenState } from '@/src/commons/store' const Login_presenter = () => { const [accessToken, setAccessToken] = useRecoilState(accessTokenState) const router = useRouter() const [input, setInput] = useState({ email: '', password: '', }) const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => { setInput({ ...input, [e.currentTarget.id]: e.currentTarget.value }) } const [loginUser] = useMutation<Pick<IMutation, 'loginUser'>, IMutationLoginUserArgs>(LOGIN_USER); const onSubmitSignUp = async () => { if (!input.email.includes("@") || !input.email.includes(".")) { Modal.error({ content: "이메일이 유효하지 않습니다." }); return } if (input.email && input.password) { try { const result = await loginUser({ variables: { email: input.email, password: input.password } }); if (!result.data) { Modal.error({ content: "로그인에 실패하였습니다." }); return } const accessToken = result.data?.loginUser.accessToken if (setAccessToken) { setAccessToken(accessToken || "") // 3. 로그인 성공페이지로 이동하기 void router.push('/') localStorage.setItem("accessToken", accessToken) // 임시로 사용 나중에 지울예정 } } catch (error) { if (error instanceof Error) { alert(error.message) } } } } return ( <S.LoginForm> <Title style={{ color: '#fff', "textAlign": "center", "marginBottom": "20px" }}>로그인</Title> <S.InputContainer> <S.Label htmlFor='email'>이메일</S.Label> <S.Input id='email' placeholder='이메일을 입력해주세요.' onChange={onChangeInput} /> </S.InputContainer> <S.InputContainer> <S.Label htmlFor='password'>비밀번호</S.Label> <S.Input id='password' placeholder='비밀번호를 입력해주세요.' onChange={onChangeInput} autoComplete="on" type='password' /> </S.InputContainer> <S.SubmitButton onClick={onSubmitSignUp}>로그인</S.SubmitButton> </S.LoginForm> ) } export default Login_presenter import { accessTokenState } from '@/src/commons/store'; import { type IQuery } from '@/src/commons/types/generated/types'; import { gql, useQuery } from '@apollo/client'; import * as S from './Header_style' import { useRouter } from 'next/router'; import { useRecoilState } from 'recoil'; import { useEffect, useState } from 'react'; const FETCH_USER_LOGGED_IN = gql` query fetchUserLoggedIn { fetchUserLoggedIn{_id picture email name} } `; const Header = () => { const [accessToken] = useRecoilState(accessTokenState) const [isMounted, setIsMounted] = useState(false) const router = useRouter(); useEffect(() => { setIsMounted(true) }, []) const { data } = useQuery<Pick<IQuery, 'fetchUserLoggedIn'>>(FETCH_USER_LOGGED_IN); const onClickLogout = () => { if (localStorage) { localStorage.removeItem("accessToken") router.reload() } } return ( <S.Header> <S.Logo onClick={async () => await router.push(`/boards`)}> 🚢 FREE BOARD </S.Logo> {isMounted && <S.HeaderButtons> {!accessToken && <S.Login onClick={() => { void router.push(`/login`) }}>로그인</S.Login>} {!accessToken && <S.Signup onClick={async () => await router.push(`/signUp`)}>회원가입</S.Signup>} {accessToken && <S.Login onClick={onClickLogout}>로그아웃</S.Login>} {accessToken && <div>{data?.fetchUserLoggedIn.name}</div>} {accessToken && <div>{data?.fetchUserLoggedIn.email}</div>} {data?.fetchUserLoggedIn.picture && <img src={data?.fetchUserLoggedIn.picture}></img>} </S.HeaderButtons>} </S.Header> ); }; export default Header;
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
안녕하세요 따라하며 배우는 리액트 A-Z 섹션2 6번째 강의를 수강하던 중 button 태그에 스타일을 줄 때 float가 undefined 된다는 오류가 잘 해결 되지 않아 방법을 여쭙니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
PostHashtag(Post와 Hashtag 중간 테이블)에서 findAll을 해서 hashtag이름 까지 가지고 오는 방법이 있을 까요? 지금은 해쉬태그 Id까지밖에 가지고 오지 못해서요
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
vs code로 작업해도 상관없을까요? 그리고 npm 말고 yarn을 사용하시는 이유가 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
해당강의 찾아봐도 셋팅하는 부분은 안나오고 그냥 설치시 버전 오류가 발생합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위의 사진은 section2 quiz입니다. section별 quiz 정답을 못찾겟네요!! 고난도는 답이 따로 없다고는 기억 하고있는데 고난도를 제외한 문제들의 정답들은 어디있나요? ㅎㅎ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
boardCommentWrite.container 댓글 작성 컨테이너 안에서 작동된 업데이트 함수의 refetchQueries 가 어떻게 다른 폴더의 boardCommentList.presenter 댓글 리스트 프리젠터 부분을 정확히 리페치 시켜주는지 원리를 잘 모르겠습니다. isEdit = true, false 같은 경우에는 댓글 수정화면 또는 리스트 화면으로 변경되는건 setIsEdit 함수를 자식 컴포넌트에 props drilling 했기에 바꿔줄 수 있다는 부분은 이해가 됐습니다. 그런데 아무리 부모 자식 관계라도 아예 다른 경로에 존재하고 뭔가 setIsEdit 같은 직접적인 매개체도 없는데 어떻게 부모 컴포넌트의 댓글 리스트의 존재와 위치를 알고 그 부분을 정확히 refetchQueries 를 시켜준건지 원리가 궁금합니다.
