인프런 커뮤니티 질문&답변
작성한 질문수
yarn dev 실행 시 새로고침 미실행 오류에 대한 질문
해결된 질문
작성
·
860
0
포트폴리오 섹션 01의 UI 작업을 수행하던 도중 궁금한 점이 생겨 질문드립니다. css의 설정이 변경되면 새로고침되면서 설정에 맞게 바뀌어야 하는 게 맞습니다.
하지만 제가 작업하다 보면 css가 잘 적용되다가도 자주 중간에 wait-compiling이 계속 이어지며, 그런 도중 새로고침 (ctrl+f5랑 그냥 ctrl 둘 다)을 하면 설정한 화면과 저 아래 새로고침 영역이 사라지고 화면에 Internal Server Error가 출력되고 결국 다시 yarn dev를 새 터미널을 열어 실행시켜야 합니다. 이 문제를 어떻게 해결할 수 있을까요?
사진은 제가 페이지가 잘 만들어졌나 테스트를 위해 핑크로 글자를 만든 것이고, 핑크색을 적용하는 css를 빼고 다른 설정을 넣었는데도 화면은 로딩중이라고 계속 뜨며 화면 변화도 없는 상황입니다.
답변 1
0
안녕하세요 현정님
현재 코드에서는 별다른 문제는 없어보입니다만,
한가지 걸리는 부분은 emotion에서 import 해서 가져오시는 부분에서 ,가 뒤에 붙어 있는데 이 부분을 지워주시기 바랍니다. 현재 VSCODE 터미널 창에서 RegisterTitle 에서 에러가 발생한 후 compiling이 지속되는 것으로 보이네요
참고로 emotion과 함께 사용하면 좋은 VSCODE extension 하나 추천해드립니다.
에러를 해결하시는데 도움이 되시길 바랍니다.
안녕하세요 현정님
위 멘토님께서 답변해주신 것 처럼, 코드에는 별 문제가 없어보이나 터미널 창에서 RegisterTitle에서 compiling이 지속 되는 걸로 확인됩니다.
에러의 원인으로 추정되는 모든 파일내의 RegisterTitle 부분을 주석으로 제거해보신 후 다시 yarn dev 해보세요!
감사합니다.
안녕하세요 현정님!
import 경로를 확인해보니 styles파일에서 작업을 하고 계신 것 같습니다.
styles 파일은 css파일을 모아둔 폴더입니다.
하지만 저희는 css를 emotion(JS)으로 사용하기때문에 styles 폴더를 삭제하고 scr폴더를 생성해 컴포넌트관련폴더와 파일을 넣어둡니다.
(그리고 pages에서 import해서 사용하죠!)
제안 해결법
1. 만일 현정님이 사용하신 방법과 비슷하게 사용하고 싶으시다면,학습자료 section4의 [ 컴포넌트 디자인 패턴&리액트의 단방향 흐름 ] 의 실무용 폴더구조를 한번 보시는게 도움이 될 수 있을 것 같습니다.
2. 해당 컴포넌트 index.js에서 emotion을 import 해주시고, 작성한 emotion을 컴포넌트 태그에 바로 적용해주세요 .
3. 컴퓨터 재부팅(껐다 킨지 오래되셨다면 재부팅 후 다시 시도해주세요! 일주일에 한번이라도 재부팅 해주는 것 또한 중요한 요소입니다!)
위의 방법으로 다시 시도해보시고 답글 남겨주세요!
감사합니다.😄
emoiton.js 파일을 없애고 대신 해당 사진처럼 /board/new/index.js 파일 안에 예전처럼 작업했는데도 똑같은 에러 현상이 발생합니다.
이모션 부분을 컴포넌트 밖으로 빼주세요!그럼 현정님 테스팅용으로 npx create-next-app으로 새로운 프로젝트를 생성해주시고, 새롭게 생성된 프로젝트에서도 해당 문제가 동일하게 발생하는지 확인 한번만해주세요!
테스팅에서도 동일한 문제가 발생한다면 컴퓨터 전반적 문제라 저희 직접적인 도움을 드리는게 어려울 것 같습니다..ㅠㅠ
만일 테스팅 폴더에서는 동일한 문제가 발생하지 않는다면 해당 프로젝트에서 진행하시는 걸 추천 드립니다!
예전에 import한 요소의 끝에 ,가 없었어도 동일한 문제가 발생해서 알려주신 내용으론 해결되지 않습니다.