728x90 React15 React_ Refused to execute script from 'static/js/main.e0239543.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. React 에서 프로필 프로젝트를 개발하고 서버에 업로드 중 Refused to execute script from 'https://url/static/js/main.e0239543.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.이런 오류가 발생해서 만든 scss 나 컴포넌트들이 보이질 않아 흰 화면으로 남아있었다. 분명 url 접속은 잘 된듯 한데 내용물이 안나오고 저런 에러가 나오니까 뭔가 좀 이상했다.. 해당 url이 npm run build 한 폴더에서 인식을 못했기 때문에 빈 내용이 나올 수 있다 생각이 들었다. 그래서 여기 애초에 처음 시작하는 부분에서 profi.. 2024. 8. 9. React_ Semantic 구조 시멘틱 태그에 대해서 알아두면 굉장히 좋다사실 이거 하나만 알아도 실제로는 무방하다 보지만, 협업이나 여러사람들이 같이 하는 구조에서는 이러한 방법은 비효율적인 방법이다.어떤 곳에서 어떻게 쓰이는지 시각적으로 직관적으로 해야 협업이 가능하므로 알아두면 굉장히 좋다필수라고 해도 과언이 아니다https://velog.io/@oimne/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-HTML5-%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8-%EC%A0%81%EC%9A%A9...로 " data-og-host="velog.io" data-og-source-url="https://velog.io/@oimne/%EB%A6%AC%EC%95%A1%.. 2024. 8. 7. React_ npm module @types 의 의미 보통 무의식적으로 npm i ~ 이렇게 필요한 모듈을 설치할때가 많았다.근데 구글링 해서 찾아보면 npm i --save , npm i --save -dev 이렇게 사용해서 설치하는 경우를 보았는데 뭐가 다른건지 궁금해졌다.그래서 한번 찾아보았다.밑의 사이트에서 설명을 잘 해놓은듯 하다. npm init 하여 설치할때 npm 설치를 관리를 해주는 역할이기 때문에 새로운 프로젝트를 시작하더라도 쉽게 다운받았던 모듈들을 npm install 로 받을 수 있는걸 처음 안것 같다.이렇게 좋은 시스템이였구나 ..! 다시한번 공부하는 계기가 되었다. https://garniel23.tistory.com/entry/%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0-styled-components-.. 2024. 7. 29. Node_ 기본 url 변경시 서버 기본 url 매핑 작업 node 서버에서 보통 npm run build 후 node 서버에 파일을 업로드 한다음 이 서버를 실행시켜 무중단 배포를 하는 과정이 있다그 중에서 클라이언트 리액트 프로젝트와의 기본 url 를 매칭시켜야 하는 부분이 있다. 만약 클라이언트에서 "/" 로 시작하는 url 로 기본 도메인을 설정할 경우 서버에서도 app.use(express.static(path.join(__dirname, "build"))); app.get("/*", (req, res) => { res.sendFile(path.join(__dirname, "build", "index.html"));}); 이런식으로 build 파일 경로 설정을 해서 http://localhost:3000/ 이렇게 들어올 경우 해당 build 폴더의 in.. 2024. 7. 16. React_ build 시, 기본 접속 url 변경 원래는 "/" 이부분으로 기본 url 설정 되어 있어서 npm run build 시 빌드파일의 index.html 이 모두 기본 "/"으로 시작하고 있다.난 "/xxx" 이런식으로 기본 url 를 변경하고 싶었다. 여러가지의 서버파일 분리를 위한 작업을 하고 싶었다그러던 중 찾아보니 package.json 에 { "name": "your-app-name", "version": "0.1.0", "private": true, "homepage": "/badminton", "dependencies": { // your dependencies }, "scripts": { // your scripts }} 이런식으로 homepage 키워드를 넣고 설정만 해준다면 바로 npm run bui.. 2024. 7. 16. React 프로젝트 생성 feat. Typescript 처음 리액트 프로젝트 생성했을땐 그냥 npx create-app my-app 으로 진행해서 타입스크립트가 적용이 안된채로 타입스크립트 환경설정을 해주었다. 하지만 지금 새로운 프로젝트를 생성할 필요가 느껴져서 다시 찾아보려 하니 익숙했던 부분이 익숙치가 않아져서 불편했다. 그래서 이 사이트를 우선 참조했다 https://velog.io/@defaultkyle/react-with-ts-1 [Study] React _ TypeScript 적용하기 #1이번주차 스터디 공유물로 리액트에 점진적으로 TypeScript를 적용하는 방법에 대해서 알아보겠습니다. create-react-app을 이용해서 리액트 어플리케이션을 만든다면, TypeScript + React 환경을 쉽게 구축velog.io 그리고 기존에 .. 2024. 6. 13. 이전 1 2 3 다음 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 728x90
