176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
넥스트 서버사이드렌더링 까지 다한상태인데 getStaticProps는 정말 빨리 넘어갑니다 하지만 getServerSideProps으로 만든 페이지는 정말 3초? 이상 걸립니다. 서버도 다 한국으로 시작했고 GCP 쓰고 있습니다 서버속도 문제가 아니라면 속도를 줄일수있는방법이 머가있을까요.. ㅜㅜ build 시에 페이지 용량도 높지 않습니다. 정적페이지랑 차이도 별루 없구요 ㅜㅠ 2.back 에서 데이터를 가져올 때 시간이 많이 걸리는거 같은데 페이지 이동이라도 빠르게 진행하고 그다음 데이터를 불러오는 방법을 어떻게 깔삼하게 구현할 수 있을까요..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
혹시 강의 중에 git clone 말씀하시는데, git 주소를 좀 알수 있을까요?
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
userInfo가 받아와지지 않아서 계속 "사용자를 찾을 수 없습니다'페이지가 뜹니다. 현재 아래와 같이 계속 뜹니다, 강의를 다시보기 해보아도 문제가 발생합니다. 어디를 확인해봐야할까요...?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요!! 수업 잘듣고있습니다. jsx내에서 div태그 속에 여러 css-in-js 변수들을 입력하려면 어떻게 해야하나요?? 아래와 같이 className 방식을 사용했는데 기존 css 방식이어서 안먹히는건가요...? <ProfileLink> <div className={clsx[styles.Click, styles.LinkLight].join(" ")}> <img src="/ic_link.png" /> </div> <Click> <img src="/ic_location.png" /> </Click> </ProfileLink>
해결됨
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
제가 코드를 한 번에 입력하지 않고 나눠서 강의를 봐서 놓친 것일 수도 있는데.. @Entity("votes")를 입력하면 제일 위쪽에 자동으로 import {Entity} from "typeorm" 등의 코드가 강의에서는 생기던데 혹시 import 코드가 자동으로 생성되지 않는 이유는 무엇일까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
선생님이 설명하신 것처럼 따라서 했는데 저장할 시 저절로 2칸 tab되는 기능이 안되는데 어디서 잘못된 지 알려주시면 감사하겠습니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
console.log로 action과 post를 찍어봤는데 post의 값이 이상합니다 redux dev tools도 확인해보면 제가 지금 넣은 데이터의 형식이 content만 들어가 있습니다 어떻게 해야하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playgroud 에서 회원을 생성 이후 login 페이지에서 로그인을 성공적으로 하였으나 login success 페이지에서 fetchuserloggedin 이 성공적으로 이루어 지지 않는거 같습니다. 회원가입을 여러번 해서 다른 계정으로 시도해도 name 부분이 표시가 되지 않네요. 혹시 뭐가 문제일까요? import { useState } from "react"; import { gql, useMutation } from "@apollo/client"; import { IMutation, IMutationLoginUserArgs, } from "../../../src/commons/types/generated/types"; import { accessTokenState } from "../../../src/commons/stores"; import { useRecoilState } from "recoil"; import { useRouter } from "next/router"; const LOGIN_USER = gql` mutation loginUser($email: String!, $password: String!) { loginUser(email: $email, password: $password) { accessToken } } `; export default function LoginPage() { const router = useRouter(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loginUser] = useMutation< Pick<IMutation, "loginUser">, IMutationLoginUserArgs >(LOGIN_USER); const [, setAccessToken] = useRecoilState(accessTokenState); const onChangneEmail = (event) => { setEmail(event.currentTarget.value); }; const onChangnePassword = (event) => { setPassword(event.currentTarget.value); }; const onClickLogin = async () => { try { //1.로그인 뮤테이션 날려서 accessToken 받아오기 const result = await loginUser({ variables: { email, password, }, }); const accessToken = result.data?.loginUser.accessToken; console.log(accessToken); //받아온 accessToken 을 글로벌 스테이트에 저장해야지 모든 애들이 쓸수 있음 if (accessToken === undefined) { alert("로그인에 실패했습니다: 다시 시도해주세요"); return; } setAccessToken(accessToken); // 3. 로그인 성공 페지이로 이동하기 void router.push("/section23/23-01-login-success"); } catch (error) { if (error instanceof Error) alert(error.message); } }; return ( <> 이메일:{" "} <input onClick={onChangneEmail} type="text" placeholder="이메일 입력" /> 비밀번호:{" "} <input onClick={onChangnePassword} type="password" placeholder="비밀번호 입력" /> <button onClick={onClickLogin}>로그인</button> </> ); } import { useQuery, gql } from "@apollo/client"; import type { IQuery } from "../../../src/commons/types/generated/types"; const FETCH_USER_LOGGED_IN = gql` query { fetchUserLoggedIn { email name } } `; export default function LoginPage() { const { data } = useQuery<Pick<IQuery, "fetchUserLoggedIn">>(FETCH_USER_LOGGED_IN); return <>{data?.fetchUserLoggedIn.name}님 환영합니다!</>; }
미해결
[리뉴얼] React로 NodeBird SNS 만들기
프로필 탭 들어갈 시 Button is not defined 이라는 오류가 뜹니다 제 코드는 import React from "react"; import PropTypes from "prop-types"; import { List } from "antd"; import Item from "antd/lib/list/Item"; import { StopOutlined } from "@ant-design/icons"; import { isStyledComponent, keyframes } from "styled-components"; const FollowList = ({ header, data }) => { return ( <List style={{ marginBottom: 20 }} grid={{ gutter: 4, xs: 2, md: 3 }} size="small" header={<div>{header}</div>} loadMore={ <div style={{ textAlign: "center", margin: "10px 0" }}> <Button>더 보기</Button> </div> } bordered dataSource={data} renderItem={(Item) => ( <List.Item style={{ marginTop: 20 }}> <Card actions={[<StopOutlined key="stop" />]}> <Card.Meta description={Item.Nickname} /> </Card> </List.Item> )} /> ); }; FollowList.propTypes = { header: PropTypes.string.isRequired, data: PropTypes.array.isRequired, }; export default FollowList; 입니다 무엇이 문제 일까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
router.get("/", async (req, res, next) => { try { if (req.user) { // findOne에서 에러가 생기는 거는 try catch문으로 처리가 안된 const user = await User.findOne({ where: { id: req.user.id }, }); res.status(200).json(user); } else { res.status(200).json(null); } } catch (error) { console.error(error); next(error); } }); 이부분에서 아직 로그인을 하지 않아서 유저 정보가 없을때 User.findOne 에서 에러가 나기 때문에 if 문으로 감싸서 아직 유저정보가 없을 때를 예외 처리 해주셨는데 어차피 User.findOne 에서 에러가 나면 catch 문으로 이동해서 에러가 처리가 되는데 굳이 if else 로 예외 처리 하신 이유가 있나요?
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
안녕하세요, 강의를 따라하던 중 사용자를 찾을 수 없다는 페이지가 떠서 어디서 오류가 났는지 확인을 못하겠어서 질문드립니다. 혹시몰라 이 강의 까지 커밋한 깃허브 주소 올려봅니다,, https://github.com/cccodus313/Blah-Blah/tree/start import { ServiceLayout } from '@/components/service_layout'; import { useAuth } from '@/contexts/auth_user.context'; import { InAuthUser } from '@/models/in_auth_user'; import { Avatar, Box, Button, Flex, FormControl, FormLabel, Switch, Text, Textarea, useToast, VStack, } from '@chakra-ui/react'; import { GetServerSideProps, NextPage } from 'next'; import { useState, useEffect } from 'react'; import ResizeTextarea from 'react-textarea-autosize'; import axios, { AxiosResponse } from 'axios'; import MessageItem from '@/components/message_item'; import { InMessage } from '@/models/message/in_message'; interface Props { userInfo: InAuthUser | null; } async function postMessage({ message, uid, author, }: { message: string; uid: string; author?: { displayName: string; photoURL?: string; }; }) { if (message.length <= 0) { return { result: false, message: '내용을 입력해주세요', }; } try { await fetch(`/api/message.add`, { method: 'post', headers: { 'content-type': 'application/json', }, body: JSON.stringify({ uid, message, author, }), }); return { result: true, }; } catch (err) { console.error(err); return { result: false, message: '등록 실패', }; } } const UserHomePage: NextPage<Props> = function ({ userInfo }) { const [message, setMessage] = useState(''); const [isAnonymous, setAnonymous] = useState(true); const [messageList, setMessageList] = useState<InMessage[]>([]); const toast = useToast(); const { authUser } = useAuth(); async function fetchMessageList(uid: string) { try { const resp = await fetch(`/api/message.list?uid=${uid}`); if (resp.status === 200) { const data = await resp.json(); setMessageList(data); } } catch (err) { console.log(err); } } useEffect(() => { if (userInfo === null) return; fetchMessageList(userInfo.uid); }, [userInfo]); if (userInfo === null) { return <p>사용자를 찾을 수 없습니다.</p>; } const isOwner = authUser !== null && authUser.uid === userInfo.uid; return ( <ServiceLayout title={`${userInfo.displayName}의 홈`} minH="100vh" backgroundColor="gray.50"> <Box maxW="md" mx="auto" pt="6"> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex p="6"> <Avatar size="lg" src={userInfo.photoURL ?? 'https://bit.ly/broken-link'} mr="2" /> <Flex direction="column" justify="center"> <Text fontSize="md">{userInfo.displayName}</Text> <Text fontSize="xs">{userInfo.email}</Text> </Flex> </Flex> </Box> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex align="center" p="2"> <Avatar size="xs" src={isAnonymous ? 'https://bit.ly/broken-link' : authUser?.photoURL ?? 'https://bit.ly/broken-link'} mr="2" /> <Textarea bg="gray.100" border="none" boxShadow="none !important" placeholder="어떤이야기를 하고 싶나요?" borderRadius="md" resize="none" minH="unset" overflow="hidden" fontSize="xs" mr="2" minRows={1} maxRows={7} as={ResizeTextarea} value={message} onChange={(e) => { if (e.target.value) { const lineCount = (e.target.value.match(/[^\n]*\n[^\n]*/gi)?.length ?? 1) + 1; if (lineCount > 7) { toast({ title: '최대 7줄까지만 입력가능합니다', position: 'top-right', }); return; } } setMessage(e.target.value); }} /> <Button disabled={message.length === 0} bgColor="#FFB86C" color="white" colorScheme="yellow" variant="solid" size="sm" onClick={async () => { const postData: { message: string; uid: string; author?: { displayName: string; photoURL?: string; }; } = { message, uid: userInfo.uid, }; if (isAnonymous === false) { postData.author = { photoURL: authUser?.photoURL ?? 'https://bit.ly/broken-link', displayName: authUser?.displayName ?? 'anonymous', }; } const messageResp = await postMessage(postData); if (messageResp.result === false) { toast({ title: '등록실패', position: 'top-right' }); } setMessage(''); }} > 등록 </Button> </Flex> <FormControl display="flex" alignItems="center" mt="1" mx="2" pb="2"> <Switch size="sm" colorScheme="orange" id="anonymous" mr="1" isChecked={isAnonymous} onChange={() => { if (authUser === null) { toast({ title: '로그인이 필요합니다', position: 'top-right', }); return; } setAnonymous((prev) => !prev); }} /> <FormLabel htmlFor="anonymous" mb="0" fontSize="xx-small"> Anonymous </FormLabel> </FormControl> </Box> <VStack spacing="12px" mt="6"> {messageList.map((messageData) => ( <MessageItem key={`message-item${userInfo.uid}-${messageData.id}`} item={messageData} uid={userInfo.uid} displayName={userInfo.displayName ?? ''} photoURL={userInfo.photoURL ?? 'https://bit.ly/broken-link'} isOwner={isOwner} /> ))} </VStack> </Box> </ServiceLayout> ); }; export const getServerSideProps: GetServerSideProps<Props> = async ({ query }) => { const { screenName } = query; if (screenName === undefined) { return { props: { userInfo: null, }, }; } try { const protocol = process.env.PROTOCOL || 'http'; const host = process.env.HOST || 'localhost'; const port = process.env.PORT || '3000'; const baseUrl = `${protocol}://${host}:${port}`; const userInfoResp: AxiosResponse<InAuthUser> = await axios(`${baseUrl}/api/user.info/${screenName}`); return { props: { userInfo: userInfoResp.data ?? null, }, }; } catch (err) { console.error(err); return { props: { userInfo: null, }, }; } }; export default UserHomePage;
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
검색 해보니까 input태그에 자식을 넣어서 발생하는 에러라고 하는데 코드에는 input태그에 props를 넣은것 빼곤 그럴만한 에러사항이 없습니다. 무엇이 문제인가요..?ㅠ index.js import BoardWrite from "../../../src/components/units/board/write/BoardWrite.container"; export default function GraphqlMutationPage() { // 한 줄일 땐 괄호() 필요 없음 return ( <div> <div>########## 여기는 페이지입니다.####### </div> <BoardWrite />;<div>########## 여기는 페이지입니다.####### </div> </div> ); } BroadWrite.container.js: import { useMutation } from "@apollo/client"; import { useState } from "react"; import BoardWriteUI from "./BoardWrite.presenter"; import { 나의그래프큐엘셋팅 } from "./BoardWrite.queries"; export default function BoardWrite(props) { const [writer, setWriter] = useState(); const [title, setTitle] = useState(); const [contents, setContents] = useState(); const [나의함수] = useMutation(나의그래프큐엘셋팅); const onClickSubmit = async () => { const result = await 나의함수({ variables: { // variables 이게 $ 역할을 함 writer: writer, title: title, contents: contents, }, }); console.log(result); }; const onChangeWriter = (event) => { setWriter(event.target.value); }; const onChangeTitle = (event) => { setTitle(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; return ( <div> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> <BoardWriteUI aaa={onClickSubmit} bbb={onChangeWriter} ccc={onChangeTitle} ddd={onChangeContents} /> <div>$$$$$$$$$여기는 컨테이너입니다.$$$$$$$$</div> </div> ); } BroadWrite.presenter.js import { RedInput, BlueButton } from "./BoardWrite.styles"; export default function BoardWriteUI(props) { return ( <div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> <div> 작성자: <RedInput type="text" onChange={props.bbb} /> 제목: <input type="text" onChange={props.ccc} /> 내용: <input type="text" onChange={props.ddd} /> <BlueButton onClick={props.aaa}>GRAPHQL-API 요청하기</BlueButton>; </div> <div>@@@@@@@@@@@여기는 프리젠터입니다.@@@@@@@@@@</div> </div> ); } BroadWrite.styles.js import styled from "@emotion/styled"; export const RedInput = styled.input` border-color: red; `; export const BlueButton = styled.input` background-color: blue; `;
미해결
[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit을 이용해서 코딩을 하고 있고 credentials까지 강의 나와있는대로 다 작성을 한 상태입니다 post action creator는 이렇게 작성하였고 export const addPost = createAsyncThunk( "/post", async (data, { fulfillWithValue, rejectWithValue }) => { try { console.log(data); const response = await axios.post("/post", data); console.log(response.data); return fulfillWithValue(response.data); } catch (error) { throw rejectWithValue(error.response); } } ); 에러메시지는 POST http://localhost:3065/post 500 (Internal Server Error) redux dev tools에 rejected 요청으로 온 여러 정보가 있는데 그중에 뭐가 필요한 정보인지 몰라서 제로초님이 필요하신 정보를 얘기해주시면 추가적으로 추가 하겠습니다 status(pin):500 statusText(pin):"Internal Server Error" 일단 이 두개가 상태 메시지입니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자유게시판 대댓글 등록 & 조회 기능 구현을하는데 playground에서 회원정보 인증에서 오류가 발생합니다. 피그마 상에서도 일반회원에 대한 내용만 있고 비회원일 경우없는 것을 보면 대댓글 기능 자체가 로그인이 되어있을 경우를 상정한건가요? 일단 docs에는 유저토큰 정보를 요구하지는 않는데... 회원정보가 필요한가요? 대댓글 자유게시판에서 대댓글기능 작동하는 건가요...?
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
유저 api 하나 간단히 만드는 줄 알았는데.. 리팩터링하고 또하고 모델과 컨트롤러 파일로 만들고 (모르신다면 MVC 패턴) 에러 핸들링의 기초까지 싹 다 훑어버림 1시간도 안되는 강의지만 조심하세요 프린이 여러분들...근데 잘보면 뒤에 계속 API를 추가하기 때문에 여기서 정신차리셔야합니다... 꺾였지만 계속 가는 마음이 중요합니다 고고
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
어떤 부분때문에 이런 오류가 나는 걸까요? 이미지 등록 버튼을 눌러서 파일 선택하면 이 오류 메세지가 뜹니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
가비아 에서 도메인 결제 후 터미널 dig 부분에서 막혀서 질문 드립니다. 가비아 AWS 여기까지 잘 따라 왔는데 터미널에서 오류가 뜨네요 강의에서 2-3일 걸릴수도 있다했는데 현재 6시간 이상 지나도 안돼서 궁금함에 질문 남겨요.. 기다리면 될까요? 아님 잘못한 부분이 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
deprecated 되는 걸로 알고있고 안써줘도 되는 것 같은데 리액트랑 타입스크립트 버전업에 따른 결과인가요?
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
안녕하세요! 질문 입력 컴포넌트 강의를 듣던 중 toast 처리부터 아래와 같은 오류가 납니다.또한 Anonymous 버튼도 실행이 되지 않습니다. 어떤 문제 일까요? import { ServiceLayout } from '@/components/service_layout'; import { useAuth } from '@/contexts/auth_user.context'; import { Avatar, Box, Button, Flex, FormControl, FormLabel, Switch, Text, Textarea, useToast } from '@chakra-ui/react'; import { NextPage } from 'next'; import { useState } from 'react'; import ResizeTextarea from 'react-textarea-autosize'; const userInfo = { uid: 'test', email: 'cccodus313@gmail.com', displayName: 'park chae yeon', photoURI: '', }; const UserHomePage: NextPage = function () { const [message, setMessage] = useState(''); const [isAnonymous, setAnonymous] = useState(true); const toast = useToast(); const { authUser } = useAuth(); return ( <ServiceLayout title="user home" minH="100vh" backgroundColor="gray.50"> ; <Box maxW="md" mx="auto" pt="6"> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex p="6"> <Avatar size="lg" src={userInfo.photoURI} mr="2" /> <Flex direction="column" justify="center"> <Text fontSize="md">{userInfo.displayName}</Text> <Text fontSize="xs">{userInfo.email}</Text> </Flex> </Flex> </Box> <Box borderWidth="1px" borderRadius="lg" overflow="hidden" mb="2" bg="white"> <Flex align="center" p="2"> <Avatar size="xs" src={isAnonymous ? 'https://bit.ly/broken-link' : authUser?.photoURL ?? 'https://bit.ly/broken-link'} mr="2" /> <Textarea bg="gray.100" border="none" boxShadow="none !important" placeholder="어떤 이야기를 나누고 싶나요?" borderRadius="md" resize="none" minH="unset" overflow="hidden" fontSize="xs" mr="2" minRows={1} maxRows={7} as={ResizeTextarea} value={message} onChange={(e) => { if (e.target.value) { const lineCount = (e.target.value.match(/[^\n]*\n[^\n]*/gi)?.length ?? 1) + 1; if (lineCount > 7) { toast({ title: '최대 7줄까지만 입력가능합니다', position: 'top-right', }); return; } } setMessage(e.target.value); }} /> <Button disabled={message.length === 0} bgColor="#FFB86C" color="white" colorScheme="yellow" variant="solid" size="sm" > 등록 </Button> </Flex> <FormControl display="flex" alignItems="center" mt="1" mx="2" pb="2"> <Switch size="sm" colorScheme="orange" id="anonymous" mr="1" isChecked={isAnonymous} onChange={() => { if (authUser === null) { toast({ title: '로그인이 필요합니다', position: 'top-right', }); return; } setAnonymous((prev) => !prev); }} /> <FormLabel htmlFor="anonymous" mb="0" fontSize="xx-small"> Anonymous </FormLabel> </FormControl> </Box> </Box> </ServiceLayout> ); }; export default UserHomePage;
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강사님 안녕하세요 혹시 쿼리문좀 백엔드에서 잘못되는거 같은데 한번 봐주시면 안될까요... 아무리 _id로 할려고해도 같은 유저가 질문하게 되면 컨텐츠로도 확인해야해서요 ㅠㅠ 강사님 댓글이라도 대댓글 이거에 관한 힌트라도 얻을수있게 남겨주시면 감사하겠습니다.. 아무리해도 쿼리문에서 필요한게 없으니 어떻게 해야할지를 모르겠습니다...
