react
-
[React] How to make responsive components according to the screen size.(리엑트 화면 사이즈에 따른 반응형 컴포넌트 만들기)Frontend/react 2020. 10. 16. 15:55
요즘 반응형 웹 페이지 제작은 필수이다. 리엑트로도 당연히 가능하다. 현재 페이지의 대부분을 material-ui의 Grid를 사용해서 레이아웃을 관리한다. 그런데 브라우저 창 크기의 변화에 따라 direction을 row에서 column으로 변경하고 싶은데 Grid에서 그런 기능을 해주는 부분은 찾지 못했다. (결론부터 보고 싶으면 스크롤을 좀 내리길.) 일단 구글링,, 이곳저곳 찾아봤다. 'flex' 'flex-direction' 과 같은 키워드로 많은 글들이 보이는데, 거의 레이아웃에 대한 기본적인 설명이었다. 그러다 w3schools.com에서 한가지를 발견했다. www.w3schools.com/cssref/css3_pr_flex-direction.asp @media를 사용한 예제로 친절하게 데모..
-
[React] How to make custom image icon with .png files.Frontend/react 2020. 10. 16. 12:47
React로 KANA 어드민 웹 페이지 제작을 진행하면서, 최신 이벤트에 대한 리스트를 만들떄 우리에게 맞는 아이콘이 필요했다. material-ui를 적용 하고 있어서 아래 리스트를 기반으로 제작한다. material-ui.com/components/lists/ 리스트에 들어갈 텍스트는 그냥 바꾸면 되는데 아이콘의 경우 맞는게 없기 때문에 커스텀으로 만들어야 했다. 먼저 아이폰을 만들 이미지파일(32x32)을 아래처럼 가져와주자. // constants.js export const ICONS = { AAA: require("../assets/images/icon/AAA.png"), BBB: require("../assets/images/icon/BBB.png"), CCC: require("../asse..
-
[react] react-router 특정 URL로 바로 접근시 '404 페이지를 찾을 수 없습니다.' 에러 해결방법!Frontend/react 2020. 10. 5. 18:52
react-router의 경우 production으로 빌드 배포시 BASE URL이 index.html와 연결된다. 그래서 index.html을 통해 링크를 클릭하여 페이지(URL) 이동을 하면 문제 없이 잘 된다. 그런데 아래와 같이 브라우저에 BASE(/) 이외의 주소로 직접 접근 시 아래와 같이 HTTP 404 ERROR을 맞이하게 된다. http://127.0.0.1/signin 해결방법은 간단하다. nginx.conf를 아래와 같이 수정한다. ... # location / { # # First attempt to serve request as file, then # # as directory, then fall back to displaying a 404. # try_files $uri $uri..
-
table row search function 만들기Programing/javascript 2020. 9. 11. 09:19
React로 웹 페이지를 만드는데 테이블 검색 기능이 필요했다. 구글에 좀 찾아보니 아예 검색 기능이 제공되는 테이블을 쓰는게 편해보여서 바꾸니까,, 커스텀 해야하는 것들이 성가셔서 직접 만들기로 결정했다. 테이블이 아래와 같을 경우 검색을 한다면, 이메일과 이름 컬럼을 필터링 해야한다. 검색 필터 주요 부분이다. input은 검색 TextField의 값이고 d는 사용자 정보 객체를 담은 배열이다. d = [{id=1, email:'test@test.com', name: '테스터'}, {id=3, email:'test1@test.com', name: '테스터1'}] const filtered = data.filter( d => d.email.indexOf(input) != -1 || d.name.inde..
-
How to start react-native with ignite boilerplate.Frontend/react-native 2020. 4. 29. 10:43
React Native 학습을 시작하기 앞서 관련된 boilerplate를 알아봤다. 현재 깃허브에서 인기순위 1위 ignite를 실행해보고자 한다. https://github.com/infinitered/ignite infinitered/ignite The hottest CLI for React Native, boilerplates, plugins, generators, and more! - infinitered/ignite github.com 설치 및 관련 설명은 깃허브 페이지에도 잘 나와 있지만, 그 과정을 기록하기 위해 글을 써내려 가고자 한다. 먼저 아래와 같이 ignite-cli를 설치하고 바로 기본 프로젝트를 생성해본다. $ yarn global add ignite-cli $ ignite n..
-
[chrome extension] boilerplate 크롬에서 실행(적용) 해보기Frontend/chrome extension 2020. 3. 19. 02:38
이 글에서는 크롬 확장 프로그램 개발을 처음 시작하려고 할때 예제 소스를 크롬에 적용하여 실행해보는 방법을 소개한다. 원하는 chrome extension bilerplate를 깃허브나 기타 저장소에서 다운로드 한다. 나의 경우 react-chrome-extension-boilerplate 를 다운로드한 후 빌드를 했다. 빌드 과정 까지는 생략하겠다. 빌드를 완료하면 아래와 같은 파일이 구성된다. 이제 크롬 브라우저를 열어 옵션 > 도구 더보기 >확장프로그램 탭으로 이동한다. 우측 상단에 있는 개발자모드를 ON 한다. 그러면 아래와 같은 버튼이 생성된다. '압축해제된 확장 프로그램을 로드합니다.' 버튼을 클릭한 후 좀 전에 빌드해서 생긴 빌드 폴더를 선택한다. 별 문제가 없다면 아래와 같이 확장 프로그램..
-
[React] react에서 jscrambler로 코드 난독화(obfuscation)Frontend/react 2020. 3. 16. 18:50
php 기반 프레임워크와는 다르게 react에선 javascript 사용이 절대적이다. 그래서 한가지 보안 관련 문제가 생기게 된다. 스크립트 코드를 훤히 다 볼 수 있어서, API KEY 값과 같은 중요 정보도 노출될 염려가 있다. 해결하는 방법을 찾다가 코드 난독화 툴을 알아봤다. 이게 위의 문제를 해결하는 방법이 될 수 있는진 잘 모르겠다. 왜냐하면 아래 소개할 툴로 테스트 중 용량 초과로 내 프로젝트 적용은 실패했기 떄문이다. (무료 버전의 한계...) 사용법을 소개하겠다. 먼저 jascrambler 에 가입 한다. (가입은 회사계정으로 해야한다.) 그리고 메일 인증! 로그인 후, Dashboard에서 새로운 앱을 만들어주자. 클릭해서 들아가서 Protect App 버튼을 누르면 아래 같은 결과를..
-
[React] How to stop refresh when submit formFrontend/maskeyes 2020. 3. 15. 03:11
리엑트에서 form을 submit 했을때 페이지 재실행 되지 않고 비동기 작업을 하는 방법. 먼저 나는 웹 개발 경험이 그렇게 많지 않다. 그래서 필요에 의해 한번씩 개발을 하게 될때면, 검색을 최대한 활용한다. 주소 검색 기능이 필요해서 작업 했던 과정(삽질?)을 남기고자한다. 아래는 bootstrap을 이용해서 Navigation에 Form을 가져왔다. 이동 여기서 시작이다. 이동 버튼을 누르면 submit 이벤트가 발생해 serachAddress 함수가 실행된다. searchAddress는 아래와 같이, 실행되면 input의 값을 dispatch 함수로 넘겨준다. searchAddress: (e) => { dispatch(mutations.searchAddress(e.target['inputAddr..