기능완성 후 새로고침 시 application 항목에 key value 값 사라지는데 새로고침시에도 key value 값이 유지되는방법이 있을까요

format on save 기능을 사용하면 저장 시에 자동으로 개행과 줄바꿈을 해줘서 잘 사용하고 있습니다. 그런데 짧은 코드는 오히려 개행을 하지 않고 한줄에 작성하는 것이 가독성이 좋은 것 같아서 한줄에 쓰고 싶은데 format on save에 체크가 되어있어서 한 줄에 입력하는 게 불가능하네요.그런데 강사님의 경우에는 if (true) { alert("안녕하세요") ; } 같은 짧은 코드의 경우에는 if (true) { alert("안녕하세요") ; } 처럼 한줄로 작성하고 저장해도 강제로 개행이 안되던데, 여쭤보고 싶은건강사님은 format on save를 off로 설정해놓으셨나요? 아니면 format on save를 on으로 설정해놓고, 저런 짧은 if문을 한줄에 다 입력할 수 있는 설정방법이 있을까요?

appendchild강의에서 addEventListener 로 넘어갈 때,const KeyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); } };위 코드에서const KeyCodeCheck = function () {if (window.event.keyCode === 13 && todoInput.value) {createTodo();}};로 아무런 설명없이 바뀌어 있네요. 이유를 설명해주세요.이거 외에도 아무 부연설명없이, 코드가 바뀌어 있는 경우가 매우 많습니다. 수정해서 다시 올려주세요

*우분투안쓰고 윈도우로 이용중입니다.   질문1.강의자료 보면서 따라하는 중인데요.강의자료에 나온 화면과 다르게 저는 style.thirteen도 없고 삭제부분을 삭제하면오류가 많습니다. 마찬가지로 첫번째 div인 container가 저는 애초에 존재하지않고 <>형식으로 되어있는데따로 타이핑해서 만들어줘야하나요? 질문2:버전: 강의자료에 나온것 외에도 전부 no하는게 맞나요?잘따라가고 있는지 모르겠습니다 ㅠ 질문3:저는 yarn dev를 해서 페이지에 접속하니 컴파일 실패가 뜨네요.. 질문4:혹시나 powershell로 설치한게 문제인건가 싶어서 폴더를 다 삭제하고 재생성후gitBash를 사용해봤는데 yarn설치 명령어가 안먹히네요그리고 powershell에선 먹히던 기본 명령어들이 Gitbash에선 안먹힙니다어디서 부터 잘못된건지 막혀서 진도를 못나가고 있습니다. 도와주십쇼..+ 실무에서 설치할때는 이런일이 발생하지 않으려면 신경써야 하는 것들이어떤게 있을까요?

로그아웃 버튼 클릭후에setAccessToken을통해 accessToken이 공백으로 바뀌고 로그아웃 mutation 결과값 true 반환까지 확인되는데쿠키의 refreshtoken 값이 사라지지않습니다ㅜㅜ도와주세요

훈훈한 자바스크립트 강의 중에 D-Day 사이트 만들기 강의가 있는데, 설명 복잡한 건 그렇다 쳐도, 최종적으로 코드에 오류가 있더라고요. 새로 고침을 하게 되면 사이트 로컬 스토리지 에서, 데이터가 사라져 있는 걸 볼 수가 있어요. 해결 방법 알려주세요.

useForm 이용해서 하고있는데 update_board를 할때 계속 try에서 catch(error)로 넘어가네요 ㅠpresenter.jsimport * 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.jsimport { 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.jsimport { 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가 다소 약하더라도 따라가는데 어려움이 없을지 질문 드립니다.

오타있는지도 확인하고 껐다가 다시 실행시켜봐도 안됩니다 ㅠ 어떻게 해결해야 하나요?

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 로 변환시켜주어 포트폴리오에서도 똑같이 했는데 안되더라고요!

질문1. 앞으로의 강의를 css-in-js 방식으로 진행하신다고 하셨는데 실무에서 기존 css 방식으로 사용할땐 코드 작성법을 따로 공부해야 할까요?질문2. css-in-js 방식을 사용했을때 지원종료는 했지만 아직 ie11버전을 맞추는 고객들이 있는데 그 경우에서도 사용이 가능한가요?질문3. css-in-js 방식을 사용했을때 - 유지보수나,- 웹접근성 표준, - 그리고 일반적으로 id나class 값을 부여하지 않아도 되는 요소에 들어가는 이름의 용량같은 버려지는 용량에 대한 부분에 있어서 기존 css 보다 알맞고?(적절하고?) 좋은가요 아니면 단순히 작성자의 편의를 위해 사용하는 건가요?

게시물 포토폴리오 리펙토링 하는 과정에서 ant design icon 사용해 만든 별점 기능에 다른 form ( wrtier, password, contents)과 동일하게 react hook form 을 사용하려고 하는데 어떻게 사용해야 할지 모르겠습니다. 도와주세여 ㅠㅠ 

mutation으로 게시글 삭제 구현했는데비밀번호 확인할수있는 방법이 없어서 확인절차없이 전부 삭제가 됩니다API가 바뀌어야 할것같은데 확인부탁드려요

자꾸 저런 오류가 뜨는데 레퍼런스 코드를 보고 참고해도 똑같네요 무엇이 문제인가요>? ㅜscript.js: const todoInput = document.querySelector("#todo-input"); const todoList = document.querySelector("#todo-list"); const savedTodoList = JSON.parse(localStorage.getItem("saved-items")); const createTodo = function (storageData) { let todoContents = todoInput.value; if (storageData) { todoContents = storageData.contents; } const newLi = document.createElement("li"); const newSpan = document.createElement("span"); const newBtn = document.createElement("button"); newBtn.addEventListener("click", () => { newLi.classList.toggle("complete"); saveItemsFn(); }); newLi.addEventListener("dblclick", () => { newLi.remove(); saveItemsFn(); }); if (storageData?.complete) { newLi.classList.add("complete"); } newSpan.textContent = todoContents; newLi.appendChild(newBtn); newLi.appendChild(newSpan); todoList.appendChild(newLi); todoInput.value = ""; saveItemsFn(); }; const keyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); } }; const deleteAll = function () { const liList = document.querySelectorAll("li"); for (let i = 0; i < liList.length; i++) { liList[i].remove(); } saveItemsFn(); }; const saveItemsFn = function () { const saveItems = []; for (i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, complete: todoList.children[i].classList.contains("complete"), }; saveItems.push(todoObj); } saveItems.length === 0 ? localStorage.removeItem("saved-items") : localStorage.setItem("saved-items", JSON.stringify(saveItems)); // if (saveItems.length === 0) { // localStorage.removeItem("saved-items"); // } else { // localStorage.setItem("saved-items", JSON.stringify(saveItems)); // } }; if (savedTodoList) { for (let i = 0; i < savedTodoList.length; i++) { createTodo(savedTodoList[i]); } } const weatherSearch = function (position) { console.log(position.latitude); console.log(position.longitude); fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=8980c5d6dfb72e97b5871537ee59d9c1` ) .then((res) => { return res.json(); }) .then((json) => { console.log(json.name, json.weather[0].description); }) .catch((err) => { console.error(err); }); }; const accessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, longitude: position.coords.longitude, }; weatherSearch(positionObj); }; const askForLocation = function () { navigator.geolocation.getCurrentPosition(accessToGeo, (err) => { console.log(err); }); }; askForLocation();

vscode가 아닌 웹스톰을 사용하고 있습니다.에디터 문제인지는 모르겠지만schema에 계속 타입을 요구하길래schema: yup.ObjectSchema<any>로 넘어갔는데 괜찮겠죠?그런데 any를 안에 넣고 싶지 않아서다른 방법을 강구해봤는데 잘 안되네요 ㅠ라이브러리가 업데이트 되어서 그런건가요?

강의 너무 잘듣고 있습니다.23-05-login-chech-hoc / login-check-hoc-success앞쪽에 chech라고 오타가 있는 것 같아요 

안녕하세요.강의를 복습하던 도 중 궁금한게 생겨서 질문 드립니다.onClick={qqq}으로 버튼을 클릭시 5개 정도의 데이터가 refetchqueries 되어야 하는데 모두 다 쓰면 비효율적 인 듯 합니다.많은 데이터가 refetch되어야 할 때 페이지가 새로고침 되는것이 낫다고 생각 하는데.. 1.새로고침을 한다면 어떤식으로 코드를 써야하나요?2. 둘 중 어느것이 더 효율적일까요.

포토폴리오 마이페이지 - 내포인트 부분을 작업하는 도중 api 질문입니다.fetchPointTransactionsOfBuying 이 내포인트 -> 구매내역 api로 알고있습니다.피그마를 보면 거기서 판매자 데이터를 가져오고있는데 오류가 뜨네요.ㅠ판매자 데이터를 가져오고 싶은데 여기서 seller {name} 이부분을 넣으면 데이터가 안가져오네요..판매자데이터가 없어서 그런건지 왜 그런지와 어떻게 해야하는지 두가지 모두 알고싶습니다.

하드코딩으로 값을 넣었을때는 잘진행이 되었는데요ㅠㅠ 안에 값을 지정하니 에러가 계속뜨네요 아마 이 부분 에서 고쳐야 할 점이 있는 것 같은데 똑같이 작성을 한 것 같음에도 동작이 안되서 질문드려봅니다