물에 살고싶은 개발자

안녕하세요. 오늘은 React와 Node.js를 이용하여 .docx 파일을 업로드하고 분석하는 방법에 대해 알아보겠습니다. 먼저, React에서 파일을 업로드하는 방법을 알아보았습니다. 이를 위해 FileReader 객체를 사용하였습니다. 이후, Node.js 서버를 구축하였고, 파일 업로드를 처리하기 위해 multer 미들웨어를 사용하였습니다. 서버와 클라이언트 간의 통신을 위해 cors 미들웨어를 사용하였습니다. // React 코드 const [selectedFile, setSelectedFile] = useState(null); const handleFileUpload = () => { if (!selectedFile) { alert('Please select a file to upload.');..

항상 그랫듯 선결론 원인 ! 안드로이드 웹뷰로 React,NextJs 등 스토리지를 이용하는 프레임워크로 만든 웹을 띄워줄때 해당 내용을 허가해주지 않으면 이슈가 발생한다. 페이지를 React같이 생명주기를 이용해 웹개발을 하게 되면, 스토리지에서 로그인정보 등의 내용들을 이용해 화면을 그려주는 경우가 은근 많은데, 이 경우 안드로이드 웹뷰에서 해당내용을 허용해주지 않으면 스토리지에서 아무것도 꺼내오지 못해 null 익셉션이 발생하는것이다. 해결방안 ! (코틀린) mWebSettings.domStorageEnabled = true //웹뷰에서 stroage를 사용하도록 설정 웹뷰세팅에서 위 내용 추가해주면 끝.

- 이 글은 보안이라던가 설계 등을 전혀 고려하지 않은 아주 기본적인 배포 방법 가이드라는점 참고바랍니다. - 언제나 그랫듯 바쁜 여러분(사실은 필자 본인)을 위한 선결론 요약본 1. 배포하려는 React 프로젝트 폴더 경로에서 npm build 명령어를 통해 빌드 한다(최초 빌드라면 build 폴더가 생성됨) 2. AWS EC2 인스턴스(이하 서버)를 만들고 이 포스팅을 따라 접속할수 있게 만든다. 3. nginx를 설치 -> 파일질라든 깃이든 이용해서 위에서 생성한 build 폴더를 통으로 서버에 업로드. 4. nginx 설정파일에서(현재 버전 기준 sudo vi /etc/nginx/sites-available/default 명령어를 통해 수정 가능) 아래 이미지와 같이 빨간 밑줄친 root [경로]..

이번에는 정말 기초적인 원인으로 인해 날 괴롭혔던 is not a function 에 대한 글이다. 분명 오타도 없고 제대로 실행될거같은데, 생기는 경우에 이 글을 참고해보자. 범위(scope) 문제다. 너무나도 잘알고 있고 익숙하지만 그래서 간과한 원인인셈이다. 아래와 같은 코드가 있다고 치자_set = () => { setTimeout(() => { this._goTo(); }, 4000); }; 여기서 4초 후 _goTo() 를 실행하면 _goTo is not a function 이 등장한다.method 호출뿐만 아니라 state나 props 등 다 안된다.(정확한 원인은 모르겠는데 이유는 간단하다. _set() 안에서 호출하는건 정상적으로 되지만 저 setTimeout 안에는 별개의 범위로 인식되..

오늘도 여전히 RN 삽질을 삽질삽질 한다. 이제 막 시작하는 프로젝트라 간단하게 api 호출 하고 오는것만 테스트해보려했는데 이거떔에 한시간정도 삽질했다. 언제나 그렇듯이 결론부터. fetch(serverIp + "/getServerIp") .then(response => response.json()) .then(response => { console.log(response.msg); GLOBAL.BASE_URL = response.msg; console.log(GLOBAL.BASE_URL); }) .catch(function(error) { console.log( "There has been a problem with your fetch operation: " + error.message ); // A..

단도직입적으로 바로 시작 ! 그리고 결론 ! RN의 라이프사이클에 대해 이해하고 사용하자 !생성자에서 this.props.navigation.navigate("open")을 사용해서 해당 에러가 발생한 경우, 생성자 말고 componentDidMount() 를 이용하면 된다. 즉, props가 세팅 된 후에 사용하면 된다! 뜬금없는 추가 팁. 생성자엔 super(); 가 꼭 있어야한다. 없으면 무슨일이 발생하는지 궁금하면 생성자를 정의해놓고 직접 확인해보시라. Cannot read property 'navigation' of undefined 이라는 에러가 발생하는 경우가 있다.내 경우에는 App.js에 사용할 화면들을 쭉 정의해놓고 시작하자마자 스플래시 화면으로 보내려고 했다.자연스레 생성자에서 thi..

이 글은 다음번에 새로운 기술을 시작할때 같은 실수를 하지 않기 위한 글이다.(즉 내가 보기위한 글이다.) 사실 이 글을 쓰는 지금시점에서도 웹스톰을 포기하고 vsc로 개발을 해야하는 타이밍이긴 하지만,지금 개발을 들어가면 글쓰기를 미루고 미루다 결국 안쓸것같아서 미리 쓰고 간다.긴 글이 될지 안될지는 써봐야 알것같다. 있었던 일을 날것 그대로 전하고싶기에 편집없이 횡설수설 할 예정이다. 일단 시작하기전 요약부터하자면1. 리액트 네이티브의 기술이 어떻게 돌아가는지 뭔 장단점을 가졌는지 파악(블로그를 주로 봣고 공홈은 번역기의 힘을 빌어 장점만 참고함)2. 개발환경 구축하는법과 개발툴에 대해 검색 -> 이 과정에서 기존에 익숙한 inteliJ 기반의 웹스톰을 선택(난 안드로이드 개발자였기때문)3. 시간을 ..