안녕하세요.프론트쪽은 처음이라 하나 하나 해보고 있는데요. 카카오 맵으로 구현 하고 싶어서 https://github.com/JaeSeoKim/react-kakao-maps-sdk 라이브러르를 사용해서 naver map 사용하는 부분을 고쳐서 동작 시켰는데요.strategy="afterInteractive" , "beforeInteractive" 로 하면 TypeError: undefined is not an object (evaluating 'new window.kakao.maps') 에러가 나요.네이버맵 대신 카카오맵을 사용하고 싶은데요. 어떻게 해야할까요?감사합니다. 

package.json 에 "generate": "graphql-codegen" 이라는 명령어가 없어서 작동을 제대로 안 하는거 같은데 혹시 이 문제는 뭘 어떤 걸 설치 해야 될까요? graphql 도 다시 설치해보고 인터넷에서 찾은 것들로 설치를 해봐도 문제가 해결이 안됩니다.

포트폴리오 리뷰 중 타이핑하지 않은 상태에서 등록하기를 누르면 입력란 밑에 빨간색에러 표시가 나는 코딩부분에 질문이 있습니다.선생님은function onChangeWriter (event) { setWriter(event.target.value) if(event.target.value != "") { setWriterError("") } };이런식으로 if란에 이벤트 핸들링 함수를 넣어줘서 처리하셨고, 저는function onChangeWriter (event) { setWriter(event.target.value) if(writer != "") { setWriterError("") } };writer자체를 넣어서 안에 값이 들어오면 에러가 사라지게 만들었는데요.선생님은 코드는 한 번의 타이핑으로 바로 반응해서 없어지는데 반면, 저의 코드로는 에러 표시가 없어지기 위해서는 제목란을 제외하고는 2번씩 입력해야 에러 표시가 없어집니다.중요하지는 않은 것 같지만 궁금해서 여쭤봅니다. 

멘토님 따라 작성했는데 빨간 밑줄이 사라지지 않고있습니다 ㅠㅠ임포트도 했는데 저렇게하는게 아닌걸까요??... 오류메세지는 이렇게 뜹니다 vscode 껐다 켜도 동일하고..node_modules 와 yarn.lock삭제 후 재설치해도 동일합니다ㅜㅜ 문제가 뭐일까요

textarea를 적용시키니 칸을 줄이고 늘릴수 있는저런 요소가 생겼는데 못 없애나요?그리고 리액트에선 예전에Css를 다뤘던것 처럼 마우스커서로 색깔을 마음대로 선택 할수 없던데해결방법이 있나요?HTML:import { Wrapper, Project, Title, Label, Writer, Password, Contents, Address, WriterLabel, AddressNumber, AddressButton, YoutubeInput, InputWrapper, UserWrapper, TitleWrapper, ContentWrapper, AddressWrapper, YoutubeWrapper, ImageWrapper, UploadButton, UploadButtonText, SettingWrapper, RadioButton, RadioLabel, SubmitButton, } from "../../../styles/01-freeboard"; export default function EmotionPage() { // 여기는 자바스크립트 쓰는곳 return ( <Wrapper> <Project>게시물 등록</Project> <UserWrapper> <InputWrapper> <WriterLabel>작성자</WriterLabel> <Writer placeholder="이름을 적어주세요." /> </InputWrapper> <InputWrapper> <Label>비밀번호</Label> <Password type="password" placeholder="비밀번호를 작성해주세요." /> </InputWrapper> </UserWrapper> <TitleWrapper> <InputWrapper> <Label>제목</Label> <Title placeholder="제목을 작성해주세요." /> </InputWrapper> </TitleWrapper> <ContentWrapper> <InputWrapper> <Label>내용</Label> <Contents placeholder="내용을 작성해주세요." /> </InputWrapper> </ContentWrapper> <AddressWrapper> <InputWrapper> <Label>주소</Label> <AddressNumber placeholder="07250" />{" "} <AddressButton>우편번호 검색</AddressButton> <Address /> <Address /> </InputWrapper> </AddressWrapper> <YoutubeWrapper> <InputWrapper> <Label>유튜브</Label> <YoutubeInput placeholder="링크를 복사해주세요." /> </InputWrapper> </YoutubeWrapper> <ImageWrapper> <InputWrapper> <Label>사진 첨부</Label> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> <UploadButton> <UploadButtonText>+</UploadButtonText> <UploadButtonText>Upload</UploadButtonText> </UploadButton> </InputWrapper> </ImageWrapper> <SettingWrapper> <InputWrapper> <Label>메인 설정</Label> <RadioButton type="radio" name="radio_button" /> <RadioLabel>유튜브</RadioLabel> <RadioButton type="radio" name="radio_button" /> <RadioLabel>사진</RadioLabel> </InputWrapper> </SettingWrapper> <SubmitButton>등록하기</SubmitButton> </Wrapper> ); } Css: import styled from "@emotion/styled"; export const Wrapper = styled.div` margin: 50px; padding: 20px; width: 800px; /* border: 0.5px solid gray; */ box-shadow: 0px 0px 10px gray; display: flex; flex-direction: column; align-items: center; `; export const Project = styled.div` font-size: 34px; font-weight: bold; `; export const InputWrapper = styled.div``; export const Label = styled.div` font-size: 16px; font-weight: bold; margin-bottom: 10px; `; export const WriterLabel = styled.div` font-size: 16px; font-weight: 900; text-shadow: 2px 2px 2px gray; margin-bottom: 10px; `; export const UserWrapper = styled.div` display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Writer = styled.input` width: 380px; height: 30px; border: 1px solid #bdbdbd; `; export const Password = styled.input` width: 380px; height: 30px; border: 1px solid #bdbdbd; `; export const TitleWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Title = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; `; export const ContentWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const Contents = styled.textarea` width: 100%; height: 300px; border: 1px solid #bdbdbd; `; export const AddressWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const AddressNumber = styled.input` width: 80px; height: 30px; border: 1px solid #bdbdbd; `; export const Address = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; margin-top: 20px; `; export const AddressButton = styled.button` background-color: black; color: white; height: 35px; cursor: pointer; `; export const YoutubeWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const YoutubeInput = styled.input` width: 100%; height: 30px; border: 1px solid #bdbdbd; `; export const ImageWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const UploadButton = styled.button` background-color: #bdbdbd; width: 75px; height: 75px; cursor: pointer; margin-right: 10px; `; export const UploadButtonText = styled.div` display: flex; flex-direction: column; `; export const SettingWrapper = styled.div` width: 100%; margin-top: 20px; margin-bottom: 20px; `; export const RadioButton = styled.input` cursor: pointer; `; export const RadioLabel = styled.span` font-weight: 500; `; export const SubmitButton = styled.button` background-color: yellow; height: 60px; width: 140px; font-weight: bold; cursor: pointer; `;

const onChangeEmail = (event) => { console.log(event.target.value); setEmail(event.target.value); console.log("!@# ", email); if (email === "") { alert(); }위의 코드를 실행할경우가장 첫 입력시 아래와 같은 문제가 발생합니다.(이메일 입력란에 'ㅁ' 입력)첫번째 console.log envent.target.value는 정상적으로 출력되며두번째 console.log는 "!@#" 을 제외한 email이 출력되지 않습니다. "!@#"만 출력됨if문의 경우 공백으로 인식해서 true 동작하여 출력이 되고 있습니다.원인은 무엇인가요?추가로 event 의 문제인가 싶어onChange가 아닌 onKeyUp 을 사용 할 경우에는f12 개발 디버깅쪽 console 에 error 표시가 잔뜩 발생합니다.이유가 무엇인가요?==================================email input tag에 최초 입력 시 아래의 코드처럼 onChange 함수안에 지역변수 testb 에 할당하는 event.target.value 는 출력되지만state 에 할당된 email 은 한반작 늦은? 출력이 됩니다.ex) input box 'ㅁ' 입력 시 결과state email = '' 공백출력지역변수 testb = 'ㅁ' 출력const onChangeEmail = (event) => { let testb = event.target.value; alert(testb); console.log(event.target.value); setEmail(event.target.value); console.log("!@# ", email); 설명 부탁드립니다.

이 질문은 학습용임으로 사용목적에 대해서 답변을 구하는것은 아닙니다.function onChangePasword(e){}위와 같이 사용도 가능하지만const onChangeEmail = function (event) {}와 같이 익명함수로도 선언이 가능하자나요?질문코자 하는 내용은 아래와 같이 default 로 생성시 error 가 발생합니다.onChangeEmail = function (event) {}또한 화살표 함수를 사용시에도 동일한 문제가 발생합니다.const onChangeEmail = (event) => {} 정상onChangeEmail = (event) => {} error 이유가 뭔가요?

안녕하세요!궁금한게 있어서 질문드려요 ㅎㅎ현업에서 next version 12.3.4를 쓰고 있고next/image를 사용해서 이미지를 화면에 보여주려고 하고 있는데 일반 img 태그를 쓸 때보다 화질이 안좋습니다.. 어떤 부분을 개선해야 할까요?또한 next/image를 쓰면 이미지 최적화 및 lazy loading을 자동으로 지원한다고 했는데,priority를 설정 해주지 않으면 이미지가 늦게 로드 되고 lazy loading은 layout 옵션을 설정해주지 않으면 안되더라구요!구 버전은 자동으로 지원해주지 않는걸까요? 아래 처럼 쓰고 있습니다."next/future/image" "next/image" 두개 다 쓰고 있습니다! import Image from 'next/future/image'; <Image      src="" alt=""      width={320}     height={395}     quality={100} />

섹션1,2,3을 마친 학생입니다.섹션4인 react를 시작하다보니 버전도 안맞고 혼자 헤매다 보니까섹션23부터 다시 react파트부터 리뉴얼 되었더라구요섹션1,2,3을 마쳤다면섹션3~섹션22까지 뛰어넘고 23부터 들으면 되는건가요?그렇게 하는게 맞다면 진도에 의한 수료증은 어떻게 받을수 있나요?

안녕하세요 지금 section31과제를 진행하고 있습니다.제가 지금 useForm으로 포트폴리오 과제를 진행하고 있는데 초기값 설정하는 데 어려움이 있습니다현재 useForm이 가지고 있는 defalutValues속성으로 기본값을 설정하는데 console에서는 data값이 찍히는데 defaltValues에서는 undefined값으로 나옵니다.변수가 먼저 선언되고 값이 할당이 안되는 걸까요?useForm에서는 기본값을 어떻게 설정해야 하는걸까요?useForm을 사용하기 시작했는데, 점점 벅찬거같아요... 이제라도 input으로 변경해야할까요..export default function BoardWriteUI({isEdit, data, onSubmitCreate, onSubmitUpdate, onClickMoveToBack}) { console.log(data) const {register,watch, formState : {errors, isValid}, handleSubmit} = useForm({ mode : 'onSubmit', defaultValues : { writer : data?.fetchBoard.writer, password : "", title : data?.fetchBoard?.title, contents : data?.fetchBoard?.contents, } });

안내한 것 처럼 버전 확인하고 node modules 지운 다음 다시 설치해서 yarn dev를 실행했는데 안되는데 어디에서 틀린 지를 모르겠습니다.. 

기능완성 후 새로고침 시 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문을 한줄에 다 입력할 수 있는 설정방법이 있을까요?

매 요청마다 로그인 유지를 위한 요청을 보낸다고 할때(유저 정보를 받아오는 방식)useEffect를 이용해 CSR로 구현을하면 로그인 정보를 받아오기 전에는 초기상태가 없기 때문에`초기상태` -> `유저정보 들어있는 상태` 로 변경하는 과정에서 화면 CSS에 깜빡임이 발생합니다.이 현상이 저는 layout shift와 같다고 느껴서 해결을 하고 싶은데 실무에서는 보통 어떻게 해결하나요?초기로드에 SSR을 적용할지, 아니면 CSR 에서도 깜빡임을 없애는 방법이 있는지 궁금합니다.

동적인 페이지에서 getStaticPaths 를 사용할때 fallback: true 속성을 이용해서 페이지를 요청때마다 새롭게 빌드할수 있는걸 배웠습니다.만약 getStaticPaths를 안쓰고 getStaticProps만 쓰는경우는 요청할때마다 빌드하는 방식의 처리를 못하는건가요? , getStaticprops만 사용하면 revalidate 밖에 못하는건가요?

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에선 안먹힙니다어디서 부터 잘못된건지 막혀서 진도를 못나가고 있습니다. 도와주십쇼..+ 실무에서 설치할때는 이런일이 발생하지 않으려면 신경써야 하는 것들이어떤게 있을까요?

https://nextjs.org/docs/getting-started/installation 공식문서, 아래 명령어 실행.npx create-next-app@latest폴더명 적고 아래와 같이 선택하여 설치. ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias? … No강좌 그대로 따라하려고 했는데 아래 캡쳐화면이 현재 제가 설치한 화면 입니다.강의 화면 처럼 pages 이런 폴더들이 없는데, 대체 어떻게 하라는 건가요??사용하지 않는 코드를 모두 정리하라고 했는데, 정리해야하는 코드들이 없을 경우 어떻게 처리를 해야 하는 지 상세한! 자세한! 답변 바랍니다. 

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

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