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} />
안녕하세요 지금 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, } });
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 이런 폴더들이 없는데, 대체 어떻게 하라는 건가요?? 사용하지 않는 코드를 모두 정리하라고 했는데, 정리해야하는 코드들이 없을 경우 어떻게 처리를 해야 하는 지 상세한! 자세한! 답변 바랍니다.
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 적용을 하는 판단기준이 잘 안서네요.
현재 저는 국비학원을 마치고 취업을 준비중 현실을 맞닥들이고 다시 공부를 시작하였습니다. 국비는java를 기반으로 수료했지만 저의 적성이 백엔드보다는 프론트가 맞을 것 같아 본 강의를 구매했습니다. 기본적인 html,css는 이해하고있지만 js는 다소 약한 부분이있습니다. 강의를 들으려고 보니 새로 시작한 사람은 새셕23부터 시작하면 된다고 설명이 되어있길래 살펴봤더니 바로 리액트부터 시작하는 것 같았더라구요. js가 다소 약하더라도 따라가는데 어려움이 없을지 질문 드립니다.
