본문 바로가기

프론트엔드/Next.js3

next js 에서 emotion 라이브러리에 styled 적용 안될 때 emotion을 적용하려고 했더니 아래처럼 텍스트로 인식이 되고 적용이 안되었다. 나는 vscode를 이용해서 개발 하고 있었는데 원인을 찾고 보니 vscode에서 styled를 적용 못해주고 있었다. 우선 확장팩을 선택하여 설치해주면 styled가 적용된다. styled-components 2024. 9. 16.
vscode 에서 next js 개발 할때 div 태그 등 자동완성 안될 때.. 해결 법 next js 공부를 시작하였는데, div 태그 등 html 태그들이 자동 완성 안된다는 것을 알고 너무 답답하였다. 하지만 구글링을 통해 답을 알아내었다. 우선 vscod에서 window 기준 ctrl + shift + p 를 눌러 settings.json 을 열어주고아래 코드를 추가 해준다."emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.syntaxProfiles": { "javascript": "jsx" }, 그러면 아래와 같이 자동완성이 된다. ㅎㅎㅎ 2024. 9. 16.
Next js 13버전 생성 최근 Next js 프로젝트를 생성하려고 하였더니 14버전으로 생성되었다. 듣고있는 강의는 알고 보니 13버전이라 폴더 구조가 달라서 혼란이 왔고, 확인해보니 13버전으로 설치가 필요했다. 명령어: npx create-next-app@13 my-next-app 를 입력하여 13버전으로 설치하면  폴더구조가 강의를 듣고있는 구조와 같게 생성 되었다. 만약 조금씩 다르다면 src/ 나 라우팅 옵션을 NO로 선택하여 진행해 보면 좋을 거 같다.   더불어 react 17버전으로 설치 하는 방법:yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact 2024. 9. 16.