React5 2023.Dec.27.Wed [Front] Module not found 짜잔! 새롭게 프로젝트를 만들던 도중 갑자기 나타나 나를 괴롭힌 Module not found... 해결한 지금으로선 어이없는 실수(?)를 머릿속에 각인시켜 다시는 같은 실수를 반복하지 않고자 오류를 정리해본다. 저 말인즉슨 모듈을 찾을 수 없다는 말인데, src/ 바깥에서의 import는 지원하지 않는다는 말이다. 그렇다. 나는 src 바깥 폴더에 component폴더를 만들고 파일들을 생성해놓고선 왜 안될까 고민했다..ㅎ 그래도 금방 깨닫고 바깥에 만들었던 component 폴더를 /src 폴더 안으로 옮겨주고나니 잘 작동됐다! 2023. 12. 27. 2023.Dec.21.Thu [React] JSX 먼저 JS는 JavaScript의 약자이고, JSX는 JavaScriptXML의 약자이다. 둘 다 기본적으로 JavaScript 코드를 포함하고 있어서 비슷하다. 다만! .jsx 파일은 React에서 UI를 작성할 때 주로 사용되는데, JavaScript를 쓰면서 HTML을 조합하여 사용할 수 있기 때문에 더 편리하다. 이는 코드의 가독성을 높이고, 컴포넌트 기반의 아키텍처를 쉽게 작성할 수 있도록 도와주기 때문에 UI를 더 쉽게 구성하고 유지보수할 수 있게 해 준다. 주의해야 할 점은 브라우저에서 바로 실행하려면 JSX 코드를 JS로 변환해주는 과정이 필요하다! 브라우저는 기본적으로 JS를 이해하고 실행하지만 JSX는 표준 JS 문법이 아니기 때문이다. +++ VSCode에서 보면 앞에 아이콘이 좀 달.. 2023. 12. 21. 2023.Dec.20.Wed [React] 깔끔한 UI 라이브러리 MUI MUI란? MUI는 'Material-UI'의 약자로 React 프레임워크를 위한 라이브러리다! React를 기반으로 해서 Google에서 미리 디자인된 많은 컴포넌트를 제공해서 좀 더 멋진 UI를 간편하게 구축하고 관리할 수 있다. How to use 먼저 MUI의 Material-UI를 사용하기 위해서는 설치를 해줘야 한다. > 사용하고자 하는 프로젝트에서 cmd 창을 열고 npm install @mui/material @emotion/react @emotion/styled 또는 npx install @mui/material @emotion/react @emotion/styled 혹은 yarn add @mui/material @emotion/react @emotion/styled 를 타이핑 하고 엔터.. 2023. 12. 20. 2023.Dec.19.Tue [React] Hook React에서 Hook(훅)이란 함수에서 React의 기능을 사용할 수 있게 도와주는 기능 ! 이다. 이 기능은 React 16.8이 출시되면서 도입되었는데, 이전엔 클래스에서만 상태나 생명주기 메서드를 사용하여 관리할 수 있었다고 한다. Hook는 걸다란 뜻이 있는데 마찬가지로 훅! 걸어서 React의 기능을 연결하여 사용한다고 이해하면 좋을 것 같다. 자주 쓰이는 Hook 1. useState : 함수에서 상태를 관리해 주는 훅으로, 초기 상태값과 그 값을 갱신하거나 추가로 변경되는 내용을 저장 후 반환한다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return .. 2023. 12. 19. 이전 1 2 다음 728x90 반응형
