173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
로그아웃 버튼 클릭후에 setAccessToken을통해 accessToken이 공백으로 바뀌고 로그아웃 mutation 결과값 true 반환까지 확인되는데 쿠키의 refreshtoken 값이 사라지지않습니다ㅜㅜ 도와주세요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
훈훈한 자바스크립트 강의 중에 D-Day 사이트 만들기 강의가 있는데, 설명 복잡한 건 그렇다 쳐도, 최종적으로 코드에 오류가 있더라고요. 새로 고침을 하게 되면 사이트 로컬 스토리지 에서, 데이터가 사라져 있는 걸 볼 수가 있어요. 해결 방법 알려주세요.
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
위와 같이 실행이 안되고 저 상태로 계속 멈춰있습니다. 종료하고 다시해도 안되고, 삭제했다 다시 설치해도 안되고, 컴퓨터를 껐다 켜도, NPM을 업그레이드 시켜도 계속 저 창에서 멈춰있는 것만 반복하는데 뭐가 문제일까요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
1. fallback:true 인 경우 npm run build 할때 정적 페이지를 생성하는게 아니라 외부사용자가 접근한 시점에 생성을해서 보여준다는 것인가요? 맞다면 npm build 시점에는 생성을 하나도 안한다는 건가요? 2. fallback: false 인 경우 npm run build 시에 getStaticPaths 에서 return한 path에 대한 페이지만 생성하는게 맞나요? 3. getStaticProps 안에서 fallback에 대한 처리는 fallback:true인 경우에만 처리하는거죠? (return { notFound: true } 같은것) 4. getStaticPaths는 path에 따른 페이지를 생성시켜주는 함수이니 동적 라우팅에만 사용하는 함수인가요? 5. 데이터가 자주 바뀌는 페이지도 이러한 방식을 적용가능한것 같은데 초기 페이지에 대해서 SSR과 SSG 중 하나의 선택지로 골라서 적용을 해야할것 같네요. 어떤것을 선택해야 하는지는 직접 성능을 측정해가면서 비교하는게 정확한가요? 아니면 강좌에서 말씀하신것 처럼 웬만하면 SSR를 지양하고 SSG를 적용하는쪽으로 가는게 좋은건가요? CSR, SSR, SSG 적용을 하는 판단기준이 잘 안서네요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
useForm 이용해서 하고있는데 update_board를 할때 계속 try에서 catch(error)로 넘어가네요 ㅠ presenter.js import * as S from "./BoardWriter.styles"; export default function BoardWriteUI(props) { return ( <S.Wrapper onSubmit={props.isEdit? props.handleSubmit(props.onClickUpdate, props.onInValid) : props.handleSubmit(props.onValid, props.onInValid)}> <S.Title>{props.isEdit? "게시글 수정": "게시글 등록"}</S.Title> <S.WriterWrapper> <S.InputWrapper> <S.Label>작성자</S.Label> <S.Writer {...props.register("writer", { validate : (value) => value ? true:"작성자를 작성해주세요."} )} onChange={e => props.onChangeWriter(e)} type="text" placeholder="이름을 적어주세요."/> <S.Error>{props.errors.writer?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>비밀번호</S.Label> <S.Password {...props.register("password", { validate : (value) => value? true: "비밀번호를 작성해주세요."} )} onChange={e => props.onChangePassword(e)} type="password" placeholder="비밀번호를 작성해주세요." /> <S.Error>{props.errors.password?.message}</S.Error> </S.InputWrapper> </S.WriterWrapper> <S.InputWrapper> <S.Label>제목</S.Label> <S.Subject {...props.register("title", { validate : (value) => value? true: "제목을 작성해주세요."} )} onChange = {e => props.onChangeTitle(e)} type="text" placeholder="제목을 작성해주세요." /> <S.Error>{props.errors.title?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>내용</S.Label> <S.Contents {...props.register("contents", { validate : (value) => value? true: "내용을 작성해주세요."} )} onChange={e => props.onChangeContents(e)} placeholder="내용을 작성해주세요." /> <S.Error>{props.errors.contents?.message}</S.Error> </S.InputWrapper> <S.InputWrapper> <S.Label>주소</S.Label> <S.ZipcodeWrapper> <S.Zipcode {...props.register("boardAddress")} placeholder="07250" /> <S.SearchButton>우편번호 검색</S.SearchButton> </S.ZipcodeWrapper> <S.Address /> <S.Address /> </S.InputWrapper> <S.InputWrapper> <S.Label>유튜브</S.Label> <S.Youtube {...props.register("youtubeUrl")} placeholder="링크를 복사해주세요." /> </S.InputWrapper> <S.ImageWrapper> <S.Label>사진첨부</S.Label> <S.UploadButton>+</S.UploadButton> <S.UploadButton>+</S.UploadButton> <S.UploadButton>+</S.UploadButton> </S.ImageWrapper> <S.OptionWrapper> <S.Label>메인설정</S.Label> <S.RadioButton type="radio" id="youtube" name="radio-button" /> <S.RadioLabel htmlFor="youtube">유튜브</S.RadioLabel> <S.RadioButton type="radio" id="image" name="radio-button" /> <S.RadioLabel htmlFor="image">사진</S.RadioLabel> </S.OptionWrapper> <S.ButtonWrapper> <S.SubmitButton isActive={props.isActive} type="submit">{props.isEdit? "수정하기": "등록하기"}</S.SubmitButton> </S.ButtonWrapper> </S.Wrapper> ); } quires.js import { gql } from '@apollo/client' export const CREATE_BOARD = gql` mutation createBoard($createBoardInput: CreateBoardInput!) { createBoard(createBoardInput : $createBoardInput){ _id } } ` export const UPDATE_BOARD = gql` mutation updateBoard($updateBoardInput: updateBoardInput!, $password: String, $boardId: ID!) { updateBoard(updateBoardInput: $updateBoardInput, password: $password, boardId: $boardId) { _id } } ` container.js import { useState } from 'react' import { useForm } from 'react-hook-form'; import { useRouter } from 'next/router'; import { useMutation } from '@apollo/client' import BoardWriteUI from './BoardWriter.presenter'; import { CREATE_BOARD, UPDATE_BOARD } from './BoardWriter.queries'; export default function BoardsWriteContainer(props) { const router = useRouter() const [isActive, setIsActive] = useState(true) const [createBoard] = useMutation(CREATE_BOARD) const [updateBoard] = useMutation(UPDATE_BOARD) const { register, watch, handleSubmit, formState: { errors } } = useForm(); const onChangeWriter = (e) => { e.target.value && watch("password") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangePassword = (e) => { e.target.value && watch("writer") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangeTitle = (e) => { e.target.value && watch("password") && watch("writer") && watch("contents") ? setIsActive(false) : setIsActive(true) } const onChangeContents = (e) => { e.target.value && watch("password") && watch("title") && watch("writer") ? setIsActive(false) : setIsActive(true) } const onValid = async (data) => { try { const result = await createBoard({ variables: { createBoardInput: { writer: data.writer, title: data.title, password: data.password, contents: data.contents, } } }) console.log(result.data.createBoard._id) alert("게시물이 정상적으로 등록되었습니다.") router.push(`/boards/${result.data.createBoard._id}`) } catch(error) { alert(error.message) } } const onInValid = (error) => { console.log("에러입니다", error) } const onClickUpdate = async (data) => { try { const result = await updateBoard({ variables: { updateBoardInput : { title: data.title, contents: data.contents }, password : data.password, boardId : router.query.boardid, } }) console.log(result) // router.push(`/boards/${router.query.boadid}`) } catch(error) { console.log(error) } } return <BoardWriteUI onValid = {onValid} oninValid = {onInValid} register = {register} handleSubmit = {handleSubmit} errors = {errors} onChangeContents = {onChangeContents} onChangeTitle = {onChangeTitle} onChangePassword = {onChangePassword} onChangeWriter = {onChangeWriter} onClickUpdate = {onClickUpdate} isActive={isActive} isEdit={props.isEdit} /> }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의를 따라 순서대로 따라했는데 마지막에 cannot read property _id 오류가뜹니다 ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
현재 저는 국비학원을 마치고 취업을 준비중 현실을 맞닥들이고 다시 공부를 시작하였습니다. 국비는java를 기반으로 수료했지만 저의 적성이 백엔드보다는 프론트가 맞을 것 같아 본 강의를 구매했습니다. 기본적인 html,css는 이해하고있지만 js는 다소 약한 부분이있습니다. 강의를 들으려고 보니 새로 시작한 사람은 새셕23부터 시작하면 된다고 설명이 되어있길래 살펴봤더니 바로 리액트부터 시작하는 것 같았더라구요. js가 다소 약하더라도 따라가는데 어려움이 없을지 질문 드립니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Quiz에 관한 코드는 따로 없을까요?
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
섹션 2 할 일 목록 추가하기 영상 3분 4초 부분에서 Ctrl + K + F가 아니라면 어떤 커맨드 사용하신 건지 알 수 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
오타있는지도 확인하고 껐다가 다시 실행시켜봐도 안됩니다 ㅠ 어떻게 해결해야 하나요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
const { data } = useQuery(FETCH_BOARD, { // $: { number: 1 }, // variables: { number: Number(router.query.qqq) }, variables: { number: Number(router.query.number) }, }); const { data } = useQuery(FETCH_BOARD, { variables: { boardId: router.query.boardId }, }); 포트폴리오에서는 router.query 부분을 문자인데 숫자로 왜 변형을 안 시키는 걸까요 ? 05-04 수업에서는 router.query.qqq 를 문자니까 Number 로 변환시켜주어 포트폴리오에서도 똑같이 했는데 안되더라고요!
미해결
[리뉴얼] React로 NodeBird SNS 만들기
버전 문의있습니ㄷㅏ. 지금 최신버전으로 만ㄷㅡㄹ고싶으면 제로초님의 github에서 ch7을 보면 ㄷㅚㄹ까요?
해결됨
현재 개인 프로젝트로 next.js를 사용하고 있는데 처음이다 보니 잘 감이 오지 않는 것이 있어서요. next.js를 사용한다면 보통의 서비스는 클라이언트 - Next.js 서버 - api 서버 - db 대략 이런 구조로 진행이 될것으로 이해하고 있는데요, 혹시 클라이언트 - Next.js 서버 - db 로 Next.js 서버가 api서버 역할까지 하는 식으로 구성하는 경우가 있나요? 찾아보니 Next.js에서도 db를 연결하는 경우가 있는걸 보았는데, 그러면 간단한 crud만 하는 api 서버일 경우 굳이 api서버를 따로 둘 필요가 없을 수도 있을 거란 생각을 해서요! 만약 이러한 방식이 그닥 권장되지 않는다면 이유가 무엇인가요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
로그인시에 서버사이드렌더링으로 쿠키가 저장되고 공유하는건 확인이 됐습니다. 헤드에 저장이 되어 쿠키 저장이 된건 확인이 됐는데 로그인시 리덕스에서 me값으로 action.data가 전달되는데 왜 새로고침시에 state 인 me값이 왜 null 값으로 바뀌는걸까요.. 이것도 서버사이드 렌더링으로 유지가 가능할까요? 여러페이지를 만들시에 페이지이동시에도 처음 로그인시에 me 로 넘겨주는 action.data 값도 유지하고 싶습니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
질문1. 앞으로의 강의를 css-in-js 방식으로 진행하신다고 하셨는데 실무에서 기존 css 방식으로 사용할땐 코드 작성법을 따로 공부해야 할까요? 질문2. css-in-js 방식을 사용했을때 지원종료는 했지만 아직 ie11버전을 맞추는 고객들이 있는데 그 경우에서도 사용이 가능한가요? 질문3. css-in-js 방식을 사용했을때 - 유지보수나, - 웹접근성 표준, - 그리고 일반적으로 id나class 값을 부여하지 않아도 되는 요소에 들어가는 이름의 용량같은 버려지는 용량에 대한 부분에 있어서 기존 css 보다 알맞고?(적절하고?) 좋은가요 아니면 단순히 작성자의 편의를 위해 사용하는 건가요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요 강사님, 좋은 강의 잘 듣고 있습니다! 다름 아니라, 아래 캡쳐와 같이(캡쳐하기 위해 일부러 sleep을 걸고 진행했습니다.), resetMapOptions를 실행하면서, morph를 못찾겠다면서 그냥 화면을 새로고침만 해버립니다. 제가 사용하는 환경은 아래와 같고, "next": "^13.4.9", "react": "^18.2.0", "react-dom": "^18.2.0", "@types/navermaps": "^3.6.5", next.config.js도 말씀주신대로 잘 따라했고 /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: false, } module.exports = nextConfig 모든 컴포넌트 제일 상단에 'use client'도 명시했는데 왜 안되는지 모르겠네요 ㅜㅜ 도움주시면 감사하겠습니다..! 어쩌면 버전의 문제일 수도 있을 것 같은데.. 주변에 물어볼 사람이 없어서 강사님께 한 번 고민 부탁드려봅니다! 감사합니다.
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
[ 게시글 삭제 saga 작성하기 ] 수강 중 질문 드립니다. 이전 댓글을 추가할때는 reudce에서 case ADD_COMMENT_SUCCESS: { const postIndex = state.mainPosts.findIndex(v => v.id === action.data.postId); const post = { ...state.mainPosts[postIndex] }; // 얕은 복사 const Comments = [action.data, ...post.Comments]; const mainPosts = [...state.mainPosts]; mainPosts[postIndex] = { ...post, Comments, }; return { ...state, mainPosts, addCommentLoading: false, addCommentDone: true, addCommentError: false, }; } 이런식으로 얕은 복사를 하셨는데요. case REMOVE_POST_SUCCESS: { const mainPosts = state.mainPosts.filter(v => v.id !== action.data.id); return { ...state, mainPosts, removePostLoading: false, removePostDone: true, removePostError: false, }; } 게시글을 삭제할때는 왜 'state.mainPosts'를 얕은 복사해서 조작하지 않는 건지 궁금합니다. 혹시 filter가 기존 state.mainPosts 을 수정하지 않으며, 새로운 배열을 return하기에 얕은 복사가 필요없는 건가요? 답변 기다리겠습니다. 감사합니다 :)
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강좌에서는 SSR 적용전 CSR 만으로 로그인 유지를 할 때 초기상태가 로그인 유지가 안되있는 상태기 때문에 로그인정보 부분에 깜빡임이 발생하는데요. 혹시 CSR에서도 깜빡임 없이 로그인 유지를 할 수 있는 방법이 있나요? 혹시 리액트 라이프 사이클쪽을 건드려야 하는건가요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
if (exUser) { return res.status(403).send("이미 사용중인 아이디입니다." ); } 이렇게 send를 보내고 redux toolkit에서는 이 메시지를 error.message에 넣는 방법을 잘 모르겠는데 어떻게 하면 되나요? 위에 사진은 signup/rejected의 Action안에 있는 정보입니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시물 포토폴리오 리펙토링 하는 과정에서 ant design icon 사용해 만든 별점 기능에 다른 form ( wrtier, password, contents)과 동일하게 react hook form 을 사용하려고 하는데 어떻게 사용해야 할지 모르겠습니다. 도와주세여 ㅠㅠ
