172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
넥스트 서버사이드렌더링 까지 다한상태인데 getStaticProps는 정말 빨리 넘어갑니다 하지만 getServerSideProps으로 만든 페이지는 정말 3초? 이상 걸립니다. 서버도 다 한국으로 시작했고 GCP 쓰고 있습니다 서버속도 문제가 아니라면 속도를 줄일수있는방법이 머가있을까요.. ㅜㅜ build 시에 페이지 용량도 높지 않습니다. 정적페이지랑 차이도 별루 없구요 ㅜㅠ 2.back 에서 데이터를 가져올 때 시간이 많이 걸리는거 같은데 페이지 이동이라도 빠르게 진행하고 그다음 데이터를 불러오는 방법을 어떻게 깔삼하게 구현할 수 있을까요..
미해결
자바 개발자를 위한 코틀린 입문(Java to Kotlin Starter Guide)
Java 에서 Final 만 사용할 수 있는게 외부 변수가 메모리에서 해제 되었을 경우, 가비지를 참조할 수 있는 것을 방지하기 위해서로 알고 있는데 코틀린은 이게 가능한게 아예 메모리를 통째로 떠와서 그런걸까요? ㅎㅎ 강의 영상에서 포획한다 라고 표현하신게 그런 의미 같아요!
해결됨
자바 개발자를 위한 코틀린 입문(Java to Kotlin Starter Guide)
함수가 1급객체가 되어버려서 functional interface가 필요없어진 것처럼 보여요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
혹시 강의 중에 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" 일단 이 두개가 상태 메시지입니다
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] "package hello.hellospring.aop; import org.aspectj.lang.ProceedingJoinPoint; import org.aspectj.lang.annotation.Around; import org.aspectj.lang.annotation.Aspect; import org.springframework.stereotype.Component; @Component @Aspect public class TimeTraceAop { @Around("execution(* hello.helloSpring..*(..))") public Object execute(ProceedingJoinPoint joinPoint) throws Throwable { long start = System. currentTimeMillis (); System. out .println("START : " + joinPoint.toString()); try { return joinPoint.proceed(); } finally { long finish = System. currentTimeMillis (); long timeMs = finish - start; System. out .println("END : " + joinPoint.toString()+ " " + timeMs + "ms"); } } }" TimeTraceAop 클래스를 작성한 이후에 실행을 시켜보아도 수업처럼 START END 부분이실행되지 않습니다. 단순 스프링 실행화면만 보이는데 어디가 문제일까요?
해결됨
실전! Querydsl
안녕하세요 queryDsl의 기본 문법에 대해서 듣고 있는데요. 현재 기준, fetchResults(), fetchCount() 가 deprecated 되었네요.(자바11, springboot 2.7 버전에 맞는 queryDsl) 강의 끝부분에서 말씀하신, 복잡한 페이징 & 쿼리 부분에서는 coun와 select 쿼리가 다르니까 따로 작성해서 해야된다는 말씀 것과 연관되어서 그런 것 맞을까요? 그러면 @Deprecated 된 현재는 fetchResults(), fetchCount() 는 사용을 지양하고 별개의 쿼리로 각각의 값들을 얻어 조합해서 response 해주는 것이 맞죠?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
자유게시판 대댓글 등록 & 조회 기능 구현을하는데 playground에서 회원정보 인증에서 오류가 발생합니다. 피그마 상에서도 일반회원에 대한 내용만 있고 비회원일 경우없는 것을 보면 대댓글 기능 자체가 로그인이 되어있을 경우를 상정한건가요? 일단 docs에는 유저토큰 정보를 요구하지는 않는데... 회원정보가 필요한가요? 대댓글 자유게시판에서 대댓글기능 작동하는 건가요...?
미해결
만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)
유저 api 하나 간단히 만드는 줄 알았는데.. 리팩터링하고 또하고 모델과 컨트롤러 파일로 만들고 (모르신다면 MVC 패턴) 에러 핸들링의 기초까지 싹 다 훑어버림 1시간도 안되는 강의지만 조심하세요 프린이 여러분들...근데 잘보면 뒤에 계속 API를 추가하기 때문에 여기서 정신차리셔야합니다... 꺾였지만 계속 가는 마음이 중요합니다 고고
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
어떤 부분때문에 이런 오류가 나는 걸까요? 이미지 등록 버튼을 눌러서 파일 선택하면 이 오류 메세지가 뜹니다.
