My Daily

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..

시멘틱 태그에 대해서 알아두면 굉장히 좋다사실 이거 하나만 알아도 실제로는 무방하다 보지만, 협업이나 여러사람들이 같이 하는 구조에서는 이러한 방법은 비효율적인 방법이다.어떤 곳에서 어떻게 쓰이는지 시각적으로 직관적으로 해야 협업이 가능하므로 알아두면 굉장히 좋다필수라고 해도 과언이 아니다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%..

보통 무의식적으로 npm i ~  이렇게 필요한 모듈을 설치할때가 많았다.근데 구글링 해서 찾아보면 npm i --save , npm i --save -dev 이렇게 사용해서 설치하는 경우를 보았는데 뭐가 다른건지 궁금해졌다.그래서 한번 찾아보았다.밑의 사이트에서 설명을 잘 해놓은듯 하다. https://garniel23.tistory.com/entry/%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0-styled-components-Could-not-find-declaration-file [에러 해결] styled-components Could not find declaration file🩺 에러 발생 평소처럼 App파일에 GlobalStyle 지정해주려고 styled-compone..

원래는 "/" 이부분으로 기본 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..

처음 리액트 프로젝트 생성했을땐 그냥 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  그리고 기존에 ..

리액트에서 페이징 처리를 해야하는 상황이였다...주로 앱을 작업하였기 때문에 Swift 에서는 tablecell 로 스크롤이 마지막에 닿으면 그때 쓰레드를 통한 페이징처리를 작업하였고 Java에서도 역시 recyclerview 를 이용한 페이징 처리를 진행하였다.하지만 웹에서는 어떻게 스크롤 끝을 감지하여 페이징하는지 잘 몰라서 검색해보았다.. https://velog.io/@somda/FE-React%EB%A1%9C-%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%9D%84-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EC%9E%90 [FE] React로 무한 스크롤을 구현해보자강아지를 무한대로 즐길 수 있게 무한 스크롤을 구현해보자. 페이..

리액트 작업 중 회원가입 페이지에서 새로고침했을때 기존에 input 태그에 입력했던 정보들이 전부 없어져버렸다.Redux 를 사용하고 있어서 새로고침되면 자동으로 저장되어 기존 데이터를 유지할 줄 알았는데 그게 아니였다.원래 새로고침시 특정 조치를 취하지 않는 이상 데이터가 휘발되어 버린다... persistance .. 단어 부터 영구적이다 Redux persistance 적용 후 원하던 대로 기능이 작동되었다. 새로고침해도 필요한 데이터는 남아있게 되었다.  https://choyeon-dev.tistory.com/14 [Redux-persist] 새로고침에도 유지되는 store (with Redux-toolkit)🤔 1. redux-persist를 사용한 이유 프로젝트 중 로그인 기능을 구현하는데..

정보가 아주 중요해진 부분 코드까지도 보안적인 부분에서 허점이 있을 수 있다..크롤링 경험이 있는 나에겐 아주 유용했다.. 개발자모드... 그래서 이러한 경험으로 인해 코드를 아예 보지 못하도록 하고 싶었다. 예전엔 javascript 로 했을때 js 파일 각각 난독화 사이트에서 난독화를 진행한 적이 있는데 .... 참... 리액트에서는 간단하게 package.json script 파일만 만져주면 바로 가능하다... 프로덕션 기준으로 적용이 된다. https://velog.io/@hazel123/%EC%86%8C%EC%8A%A4-%EC%BD%94%EB%93%9C-%EB%82%9C%EB%8F%85%ED%99%94code-obfuscation 소스 코드 난독화(code obfuscation)우선 코드난독화에..

https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있react.vlpt.us 우선 리액트 참조사이트이당... ㅋㅋ React Native 에서 useMemo , useCallback , memo 등 다양한 함수들을 써왔다. 불필요한 리렌더링을 방지하기 위한 일련의 대책으로 사용했다. 하지만 useCallback , useMemo 등 비슷한 기능들이여서 정확히 어떤 용도인지 잘 몰랐다. 그래서 이참에 한번 글을 읽어 보았다. React useMemo , useCallback , m..

React 사이트 작업 중 파일 업로드 관련해서 찾아보았다. 스프링 , 스프링부트 등 자바계열로 서버를 다루어왔었는데 요번엔 node.js 로 바꾸어 서버를 만들어보려고 했다.기존 자바스크립트를 했다보니 React 에서도 비슷하다고 많이 느꼈다 ...당연하지.. 같은 자바스크립트잖아 !! 약간 다른 부분들이 있긴 하지만 ReactNative 를 했다보니 바로바로 알게 되어 리액트 배우는데 크게 오래 걸리지 않았다.. 파일 업로드 관련해서 참조한 사이트이다 https://velog.io/@ksh4820/React-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C React 이미지 파일 업로드React에서 이미지를 업로드하는..