Front-End/React
-
SPA, F5, APACHE2, NGINX 리프레시시 문제Front-End/React 2020. 9. 23. 18:23
react로 개발된 페이지에서 정상적으로 라우터를 타고 가면 문제가 안되지만 리프레시를 했을경우 404 error가 발생하는경우가 있다 apache2 와 nginx 앞단에서 받아서 처리를 할때의 문제가 생겼다. 예를들면 /login 페이지에서 라우터를 타고들어와서 리프레시버튼f5를 누르면 에러페이지가 나오는 식이다. 여기저기 찾아다니면서 나름 해결책을 찾았다. 100% 해결책이 아닐수도 있다. apache2 Options Indexes FollowSymLinks AllowOverride All Require all granted FallbackResource /index.html nginx location / { add_header 'Access-Control-Allow-Origin' '*'; root ..
-
Invalid Host Header 표시Front-End/React 2020. 1. 9. 11:45
리액트를 이용해 개발시 로컬접속시 iptime의 portForwarding을 이용해서 외부에서 접근하게 해놨다. 처음설정시 잘 접속이되다가 어느순간 접속하면 Invalid Host Header 글자만 나오면서 페이지가 안나오게 되었다. 구글링 구글링... 맨처음 보면 잘 모르던 부분도 계속 보다보면 어느순간 눈에 들어오는 시기가 있다. 이게 시간이 걸린다.ㅠㅠ node_modules > react-scripts > webpackDevServer.config.js disableHostCheck: true, 값으로 주고 재시작하면 정상적으로 외부에서 접근가능하다.
-
React image, media folderFront-End/React 2019. 6. 12. 10:27
npm start 시에 css에 있는 이미지가 어떤건 미디어 폴더로 경로가 잡히고 어떤 이미지들은 위와 같이 암호화된 방식으로 경로를 표시한다. 빌드 할때도 마찬가지가 된다. 대체 왜 media로 파일들이 들어가는지 이해가 되지 않았으나 밑의 링크에 어느정도 설명이되어있다. 결론을 말하면 url_loader 라는 라이브러리에서 이미지의 용량에따라 10kb이하면 암호화 하지만 그 이상의 이미지나 폰트 파일등은 media폴더로 경로를 잡아준다. 참고1: https://medium.com/a-beginners-guide-for-webpack-2/handling-images-e1a2a2c28f8d Handling Images Usually there are two ways the images are used i..
-
visual studio code terminal, rm -rf ./node_modul/ 매개변수 를 ...Front-End/React 2019. 6. 8. 14:46
visual studio code의 terminal 상에서 node_module폴더를 삭제하기 위해 명령어를 쳐도 rm -rf .\node_modules\ 실행되지 않는다. 저 명령을 치기 위해선 bash 환경에서 사용가능하다. 1. ctrl + `(역싱글퀘테이션, 정식명칭: grave accent) => 터미널을 여는 단축키 2. ctrl + shift + p (open command palette) 3. Select Default Shell (이라고 쓴고 엔터) 4. 터미널의 + 버튼을 누른다. 5. 새로운 터미널이 bash 로 바뀌어있을것이다. 사용하면 된다. 참고 링크: https://murra.tistory.com/36 https://stackoverflow.com/questions/426068..
-
React 프로젝트 version 호환성Front-End/React 2019. 6. 5. 15:21
현재 개발하고 있는 React 프로젝트의 환경세팅이 상당히 낮다. 그걸 감안하지 않고 퍼블이 준대로 npm install을 했다. 로컬에서 실행은 되지만 빌드가 되지 않는 상태가 되었다. 이것저것 헤딩하면서 package.json의 라이브러리 호환성에 문제가 있다는것에 결론이 다다랐다. ㅠㅠ 이전 webpack 3.x , babel-loader 7.x, babel-core 6.x 이후 webpack 4.x , babel-loader 8.x, babel-core 7.x 다른 라이브러리들도 확인을 해서 해야 하다니 ㅠㅠ
-
react 정리(정리중)Front-End/React 2019. 2. 20. 19:55
리액트를 다루는 기술(길벗) 정리한 내용입니다.react 사용목적DOM은 느리지 않다.느린것은 내용이 많은 DOM을 수정하는 행위 자체가 리소스를 많이 잡아 먹기 때문에 느리다고 하는것이다.페이스북처럼 계속 스크롤을 내려가면서 새로운 페이지들이 나오거나 하면 react가 좋은 솔루션일 것이다.반면 정적이고 DOM이 크지 않으면 REACT를 사용안하는것이 좋을 수도 있다. react는 라이브러리 -> (리액트와 같이 쓸 수 있는)수많은 라이브러리가 존재 angular.js는프레임 워크 node.jsnode.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 node.js를 사용하기 때문에 설치해야함 ecmas6를 ecmas5로 버전을 호환시켜주는 바벨(babel)bable(babe..
-
sass-loader 설정시 에러(작성중)Front-End/React 2019. 2. 11. 11:41
리액트를 다루는 기술책을 따라하면서 에러나는 부분이 있어서 포스팅을 남긴다. create-react-app v2가 작년 9월말 10월초에 업데이트 되면서기존에 책으로 나왔던 부분들이 달라져서 에러가 났다. https://velog.io/@velopert/react-component-styling Header.scss에서 @import 'utils';부분에서 webpack.config.js에서 sass파일설정부분이 바뀌었다. { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'sass-loader' ).con..