개발

0. 환경 react-native : 0.70.6 react-native-call-log : 2.1.2 typescript : 4.8.3 macOS M1 1. 문제의 발생 react-native-call-log 라는 통화기록을 가져올 수 있는 react-native 패키지를 사용하다가 아래와 같은 에러를 만났다. https://github.com/wscodelabs/react-native-call-log 종종 보이던 에러라 TS용 패키지 추가로 설치하면 되겠다 싶어서 yarn add @type/react-native-call-log 를 했는데... 음... 암튼 TS용으로 만들어진게 없다는 말인거 같네요... (이거 TS 모듈을 만들어서 npm에 배포해보는 프로젝트도 할 일 큐에 넣어보겠습니다) 2. 구..

React로 사이드프로젝트를 하던 중 특정 변수에 대해 거의 모든 컴포넌트에서 참조를 하고 변경시 랜더링해줘야 하는 이슈가 생겼다. 개발 환경과 언어는 MacOS, React(v18.2.0), Typescript(v4.8.4), Redux(v4.2.0)이고, 배포는 docker로 묶어서 EC2에 띄울 예정이다. 그냥 App.tsx에서 useState로 State Hook 만들어서, 변수와 컨트롤러를 만들 수도 있었겠지만 depth가 커지는 컴포넌트가 생기면, 코드 가독성이 저해될 것 같았다.(사실 나만 보는 코드니까 상관은 없지만...) 그래서 상태 관리 라이브러리인 Redux를 사용해봤다. 이전에는 Redux가 react에 종속적인 라이브러리인줄 알았는데, 이번에 공부하며 찾아보니 JS를 위한 상태관리..

Elasticsearch란 루씬(자바로 된 정보 검색 오픈소스)기반 검색 엔진이다. 역인덱스 방식으로 단어 단위로 나눠서 저장을 하여 검색속도를 높인다. 장점 : 검색속도 빠름 - 모든 행을 탐색해야하는 RDBMS 방식보다. 이미 단어가 어느 문장에 들어있는지 mapping 되어 있으니 훨씬 빠르다. 단점 : 수정, 삭제 속도 느림 - 단어별로 다 쪼개놨으니 삭제하려면 일일이 찾아서 삭제해줘야하는 낭비가 존재 -> 아 그러면 수정과 삭제가 빈번하지 않고, 검색을 자주하게 되는거에 쓰면 좋겠군 -> 로그 수집 및 분석 현재 진행중인 프로젝트에서 로그 정보 수집 및 분석을 위해 도입하고자 한다.(나중에 따로 자세히 적어보겠다) 설치 1. java 다운로드 https://www.java.com/en/downl..

내가 쓰고 있는 백엔드 기술에 대해 언어, 런타임, 프레임워크 자체에 대해서 조사하고 정리해보고자 한다. 언어 - JavaScript 역사 JavaScript(이하 JS)는 애초에 웹 브라우저를 위해 만들어진 언어다. 1990년대에 주된 브라우저였던 '넷스케이프'(지금은 파이어폭스로 승계되었다고 한다)를 만든 회사인 '넷스케이프 커뮤니케이션즈'에서 정적인 HTML을 동적으로 표현하기 위해 만든 언어이다. 이름이 'Java'Script인 이유는 애초에 만들때부터 만들게될 스크립트 언어가 자바를 구현할 것이고 비슷한 문법을 채용하고자 했다. 더불어 초기에는 LiveScript였으나 Java에서 파생되었다는 점과, 마케팅의 이유로 JavaScript가 되었다고 한다. ECMAScript ECMA(정보와 통신 ..

현재 프로젝트는 Ubuntu(EC2)에서 nodejs+express+GraphQL로 백엔드 구성, 프론트는 React-Native와 약간의 React 기반 웹뷰로 진행되고 있다. Webview에서 React로 카카오 지도API를 띄우는 과정에서, 현재 사용자의 위치정보를 받기 위해 Geolocation API를 사용했는데, 로컬에서는 잘 돌아가는 것이 서버에 띄우니까 빈화면이였다... Geolocation PositionError 어쩌고 저쩌고 나오길래 구글링해봤더니 Geolocation API는 브라우저에서 지원하는 네이티브 API로 localhost가 아니면, https://에서 작동한다는 것이다. 유료 ssl을 쓰자니 아직 프로젝트 지원비 신청을 안해서 너무 비싸서 못쓰겠고, openssl 같은걸로..

앞선 포스트에서 @Apollo/Client 에서 지원하는 React Hook을 이용하는 방법을 공부했었다. 하지만 실제 프로젝트에 쓰려고 보니, GraphQL을 가져오는 과정이 React Component 안쪽이 아닌 곳에서는 useQuery, useMutation과 같은 Hook을 사용할 수 없다는 점이었다. (이 사실을 모르고, 거의 이틀을 억까 당하며 고생했다.) 위 사실을 깨닫고 나서는 새로운 방법 axios 라이브러리를 이용해서 직접 API 쿼리를 날리는 방법을 사용했다. 이렇게하면 어디서나 함수호출의 형태로 response를 받아오는것이 가능해졌다. 본인은 백엔드를 개발하지만, 결국 프론트 개발자에게 맞춰서 API 호출 규약을 짜서, 넘겨줘야 했기에 프론트 언어 (혹은 라이브러리)에 대한 이해..

이번에 소마 프로젝트를 하게 되면서, BackEnd에서 뭔가 더 배우고 싶다는 생각이 들었다. 다른걸 시도 해볼만한게 2개 있었는데, SQL 쿼리 작성할 때 ORM을 쓰는 것과, API 단에 GraphQL을 사용하는 것이었다. ORM을 도입하기엔 쿼리가 복잡하진 않았고, REST API 대신 GraphQL을 도입하기로 했다. server단은 다른 포스팅에서 다루고, client 단만 다룰 예정이다. 처음에 npx CRA로 react 앱을 생성하고, 3가지 파일만 바꿔주면 된다. React는 쉬운데, React Native에서 적용하려니 에러가 나서 거진 하루는 털린거 같다... React Native에서 할때는 컴포넌트를 같은걸로 바꿔 써야한다. + android, ios 각각에서 외부 api http..

Ubuntu 20.04(리눅스)에 Apache2를 사용해서 Nodejs+express가 3000포트로 뿌리는걸, 80포트(기본 http)로 client가 들어왔을 때, 연동되도록 포트 포워딩(포트 매핑)을 해주는 과정이다. (3000포트는 예시일 뿐 다른 것도 상관없다) 할 때마다 삽질해서 정리해둔다. 특히 apache와 apache2는 폴더 구조와 내부 설정 구조가 완전히 다르니 정확히 파악해서 사용하자 예전에 서브 도메인으로 바꿔주는건 아래 포스팅에서 참고하면 좋을 듯 https://pypystory.tistory.com/9 먼저 apache2를 설치해준다. sudo apt-get install apache2 아래로 들어가서 아파치 설정을 해준다. cd /etc/apache2/sites-avaliab..

Svelte는 멘토님의 일침과 함께 고이 던져두고, 원래 공부하던 리액트로 돌아왔다. NodeJS는 설치되어 있다는 가정하에 시작한다. 이번엔 카카오API로 로그인을 만들어보고, 다음편엔 sms나 email을 push하는 기능을 만들어볼거다. 개인 프로젝트명을 요약하면 '리액트와 노드JS를 사용해서, sms, email, kakao 메시지를 push하는 기능을 만들껀데, 인증은 카카오 로그인 API로' 정도가 될것 같다. Setting 1. 프로젝트 폴더(빈 폴더)에서 npm init을 해주고, client, server 폴더를 만들어준다. npm init mkdir client mkdir server 2. client 폴더로 들어가서 npx CRA . 을 해준다. cd client npx create-..

Svelte Svelte인 이유는 없다. 여기저기서 스벨트가 좋다길래 일단 프레임워크부터 못박아 놓고 뭘 만들지 고민했다. 복잡한걸 만들기보다, 어떤 느낌인지 찍먹 해보고 싶어져서 네이버 클라우드에서 지원하는 sms, mms API를 활용하는 페이지를 만들어보려한다. Svelte는 프론트엔드 프레임워크다. 슥보니 프론트엔드에서 JS를 좀 더 쉽고, 빠르게 쓸 수 있게 해주는 라이브러리라고 한다. 어떤 언어인지는 여기저기 유튜브 등등에 잘 설명되어 있고, 2021년 스택오버플로우에서 발표한 '가장 사랑받는 프론트엔드 프레임워크' 1위, '가장 원하는 프레임워크' 5위를 달성했다고 한다. 1. 설치 & 라우팅 세팅 npm install -g degit npx degit sveltejs/template sve..