ETC (4) 썸네일형 리스트형 [CodePen] tistory에서 CodePen 사용하는 방법 1. CodePen 로그인 하기 (github 연동하면 편리) 2. Pen 작성하기 3. 우측 하단의 Embeded 눌러 소스 코드 복사하기 4. HTML 블럭에 카피한 코드 붙여넣기 See the Pen Fibonacci Calculator by NKKIM3107 (@NKKIM3107) on CodePen.">See the Pen Fibonacci Calculator by NKKIM3107 (@NKKIM3107) on CodePen. !주의할 점!공유한 이후더라도 CodePen에서 코드를 수정하면 공유된 페이지에서도 코드가 동기화 되어 바뀌므로 새 코드를 작성할 때에는 새로운 work 페이지를 열어 작성해야 한다! [WEB] 리액트 앱 생성 기본 설정 1. 파일 생성 후 터미널에서 리액트 앱 생성 2. 기본적으로 필요한 라이브러리들 설치 3. 불필요한 파일 삭제 및 ESLint 설정ESLint 파일의 rules에 설정 추가 "no-unused-vars":"off", "react/prop-types":"off",불필요한 파일 삭제/public/vite.svg/src/assets/react.svg불필요한 코드 삭제\src\App.jsx리턴문 안의 빈태그 코드import './App.css'를 제외한 import문 const [count, setCount] = useState(0)/src/App.css 모든 코드/src/index.css 모든 코드 /src/main.jsx스트릭트모드: StrictMode>와 StrictMode>, [WEB] 에러일지 2024.10.28Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec. 발생 원인모듈을 import할 때 확장자명을 제대로 명시하지 않아 경로가 지정되지 않음. 해결 방안파일명 확인확장자까지 모두 입력/ , ./, ./../ 등과 같이 ˚절대경로인지 ˚상대경로인지 확인˚절대경로: 파일의 root부터 해당 파일까지의 전체 경로절대 경로는 어느 곳에서든 경로에 접근할 수 있다는 장점이 존재하나 경로가 변경되면 경로를.. [Visual Studio Code] Live Server 이용하기 Live Server란 코드 내에서 수정한 사항을 저장하면 실시간으로 서버에 렌더링하여 개발자가 실시간으로 확인할 수 있도록 도와주는 프로그램이다. 장점단점1. 빠른 개발 환경 제공코드를 수정하면 저장과 동시에 브라우저에서 자동으로 새로고침이 이루어지기 때문에 별도의 수동 새로고침 없이 UI/UX 변경 사항을 즉시 확인할 수 있어 프론트엔드 개발에 유용하다.2. 간편한 설치 및 사용3. 로컬 서버 제공개발 중인 파일을 로컬 서버에서 실행해 브라우저에 표시할 수 있어 실제 서버 환경과 비슷한 환경에서 개발이 가능하며 파일 접근 권한 문제를 해결하는 데 도움이 된다.4. 다양한 파일 형식 지원HTML 뿐만 아니라 CSS, JavaScript 파일도 실시간으로 감지해 브라우저에 즉시 반영된다.1. 대규모 프.. 이전 1 다음
