반응형

취업 180

[React] React에서 고정된 형태의 index.html 만들기

리액트에서 고정된 형태의 index.html 만들기. public 폴더 내 index.html을 이용하여, 해당 내용을 원하는 내용으로 커스텀한 후 npm build를 한다. 그러면 매번 넣어주지 않고 해당 내용을 build할때마다 해당 내용으로 작성됨. enact 같은 react framework를 쓰면서 /dist/index.html이 고정된 형태로 나오지 않아 해당 부분을 발견하게 되었다. public/index.html을 생성 한 후 build로 생성된 index.html의 내용을 붙여 넣기한 후 해당 내용에 원하는 내용으로 추가하고 저장해두면 매번 build시 해당 변형된 내용으로 자동 생성된다. react에서 script 라이브러리 호출할때 쓸 수 있다. 야호~

취업/React.JS 2023.01.10

[CI4] PHP md5 동일 파일 체크하기.

AJAX로 파일을 넘기고, PHP에서 이를 받을 경우 파일은 4가지로 들어온다. // ajax에서는 Form 데이터이름을 image로 정해둠. echo var_dump($_FILES); // 응답 값 $_FILES['image']['name'] $_FILES['image']['type'] $_FILES['image']['tmp_name'] $_FILES['image']['size'] // 위와 같이 들어오는데, 실제 파일은 tmp_name에 숨어있다. // 해당 내용을 md5하면 된다. echo var_dump(md5($_FILES['image']['tmp_name'])); // 위처럼 하면 단순히 임시 이름을 쓰는 것이라 매번 결과 값이 바뀐다. // file_get_contents를 사용해서 파일을 ..

취업/CodeIgniter 2023.01.05

[webOS] React Router dom 중에서 tv에선 BrowserRouter 작동안됨

내가 처음 발견했다가, 다른 문제가 있어 안되는 것인가(앞서 포스팅한 404에러 문제 및 포트 이슈가 있어 그거인줄) 알고 시간이 없어 그냥 넘어간건데 동료직원이 해결했다. 우리가 기본적으로 쓰는 BrowserRouter는 tv에서 당연하게 먹히지 않는다. 왜냐하면 linux를 보통 쓰니까 그런데, 그걸 생각하지 못하고 왜 안되냐? 이러고 있었다. 아무튼 공식문서를 찾아본다는 생각은 안하고 있다가 이번 기회를 통해서 다시 공부했다. 분명 브라우저 말고 다른 것도 있을텐데하면서 예전에 한번 쓴 기억은 있는데 너무 오래되어 까먹은 듯... +++ 추가 에뮬레이터에서만 안되는 것 같다. Tv로 배포하는 경우 정상작동을 확인. 사이드 이펙트가 있을 것으로 보고 hash라우터에서 탈출해서 다행인 듯 ++02.28..

취업/LG webOS 2022.12.30

[CI4] Jquery sortable 적용하기

내용은 별거 없다. 공식문서 보니까 jquery 라이브러리와 jqueryui 라이브러리 임포트 시켜놓고 적용 하는 것. 내 경우에 좀 고민이 많았던 게 ul li li ul li li li li 이러한 구조로 짜야 했는데, li 하위에 있는 ul 태그가 li를 1개만 갖고 그려진 문제가 있었다. for문 위치를 잘못 잡아 한개 그리고 닫고 한개 그리고 닫고하는 식으로 그렸음... 그러다보니 하위 태그가 이동을 안하는 문제... 이건 내 실수라 별수 없었다 ㅇㅅㅇ 아무튼 결론적으로 구조는 아래와 같다 참조 코드에서 적힌 start는 잡히나 end는 안잡히는 것을 보아 end가 아니라 stop인 듯? 난 update만 필요해서 update로 호출. update를 할 경우마다 이동한 li값에 idx를 넣어두어..

취업/CodeIgniter 2022.12.30

[React] 배포 후 404 문제.

로컬에서는 문제가 없는데, 배포 후 문제가 발생하는 게 생겼다. 404 not found 원인은 SPA 구조 문제. SPA 특징이 특정 페이지로 바로 못가다보니, index 페이지를 거쳐 지나가게 만들었다. 배포한 프로젝트 디렉토리 위치에 aws apache2가 읽도록 .htaccess파일을 만들고 아래 내용을 넣는다. Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L] /etc/apache2/site-available에서 해당 도메인 .conf에 아래와 같이 AllOverride를 All로 수정한다. Directory "/var/www/html"> ... AllowO..

취업/React.JS 2022.12.28

[CI4] 다날 API PHP 연동작업 후기

그냥 소스코드 이런거 공개는 못합니다. 해당 API가 그냥 순수 PHP로 구성되어 있어 이를 CI4로 작업한 후기입니다. 후기. 1. VIEW에서 그대로 작동안됨. ㄴview의 특성상 함수가 view 최초 로딩에는 불려지나 그 이후 호출해도 작동되지 아니함. 2. 컨트롤러로 옮기고 컨트롤러 내에서 함수 호출하는 방식으로 해당 변수 값 호출진행해야 한다. ㄴ php의 global로 변수값에 접근이 가능하나 ci 컨트롤러 내에서는 public 또는 $_SESSION으로만 접근이 가능한데, 이마저도 접근이 안되어, 그냥 class내 함수로 호출하여 가져오는 방식으로 구현. 3. 외부 api서버에 직접 접근 후 그 이후에 다시 리다이렉트 하는 부분이 있는데, 해당 부분에서 세션이 끊어지는 부분이 있음. 해당 부..

취업/CodeIgniter 2022.12.18

[CI4]codeigniter4에서 www 작동하게 만들기.(with apache)

2022.02.22 - [취업/CodeIgniter] - [ci4] 최소지원 php 버전은 7.2? 7.3? [ci4] 최소지원 php 버전은 7.2? 7.3? 회사에선 ci4이지만, php 버전 7.2를 쓰는데, ci4에선 다운로드에선 최소 지원이 7.3버전이더라 https://codeigniter.com/download Welcome to CodeIgniter CodeIgniter 4 is the latest version of the framework, intended for use with PHP kasumil.tistory.com 해당 내용을 통해서 다운 받으면 되고, 내 경우에 7.2를 사용하기에 해당 부분의 내용대로 수정하였다. public폴더가 연결이 안되서 이걸 어떻게 하나 했는데, aw..

취업/CodeIgniter 2022.12.14

[Tree] react-d3-tree 미니맵 만들기.

마땅한 라이브러리가 없어 해당 라이브러리를 적용하기로 했다. https://github.com/jeremy-carbonne/react-minimap GitHub - jeremy-carbonne/react-minimap: A minimap component for React A minimap component for React. Contribute to jeremy-carbonne/react-minimap development by creating an account on GitHub. github.com npm i react-minimap --force or npm i react-minimap --legacy-peer-deps 위 명령어를 사용하는 이유는 오래되서리... 뒷 옵션은 참조할 것. https..

취업/Tree Graph 2022.12.13

[React.JS] react-d3-tree 그래프 기술 검토

간단하게 말하자면 이걸로 확정. Reactflow라는 걸출한 라이브러리가 있으나 좌표를 줘야하는 문제가 있어서 그냥 검토중에 버렸다. https://reactflow.dev/ React Flow Showcase React Flow is used by thousands of people, from solo open-source developers to companies like Stripe and Typeform. We’ve seen the library used for data processing tools, chatbot builders, machine learning, musical synthesizers, and more. reactflow.dev 해당 라이브러리 type https://bkrem...

취업/Tree Graph 2022.12.11

[React.JS] react-native-webview 설치가이드

// 1. 프로젝트 생성 npx react-native init webviewtest // 2. 라이브러리 설치 yarn add react-native-webview or npm install --save react-native-webview // 3. pod install ios라면 필수 cd ios pod install // 4. android 설정 // android/gradle.properties 파일 내 하단 추가 android.useAndroidX=true android.enableJetifier=true // 5. 리액트네이티브 버전 고정 명령어. npm config set save-exact=true // 이게 기초 세팅. //App.js import React, { useRef } fro..

취업/React.JS 2022.12.10
728x90