728x90

* a태그가 필요해

개발을 하다보면 Html의 a태그가 필요한 순간들이 발생합니다.

 

예를들어,

전화번호를 누르면 다이얼 화면으로 연결한다던지,

링크를 클릭하면 해당 링크로 이동시킨다던지.. (특히, RestAPI를 사용할 때)

 

이때는, RN의 기본모듈인 Linking.openURL('')를 사용하면 됩니다.

 

다음은 사용 예시입니다.

Linking.openURL('tel://+82 ...'); // 전화

Linking.openURL('https://kakao.com/auth/...') // link

728x90
반응형
728x90

* 몽고디비에서 날짜 필터링

await SomethingCollection.find({
    createdAt: {
    	$gte: moment().startOf('month').toDate(),
        $lt: moment().endOf('month').toDate(),
    },
}).exec();

여기서는 moment.js를 함께 사용하였습니다.

$gte는 from,

$lt는 to 의 역할을 한다.

 

시간을 핸들링 할 필드값이 따로 있다면, createAt 외의 다른 필드를 사용해도 무방합니다.

 

728x90
반응형
728x90

* javascript heap out of memory

react프로젝트를 빌드하다보면 안타깝게도 이와같은 에러를 미주하게 될때가 있습니다. 보통 프로젝트가 너무 커서 메모리가 고통스러워 하는것인데요.

 

max_size를 키워주는것으로 간단히 해결할 수 있습니다~

 

(on ubuntu)

export NODE_OPTIONS=--max_old_space_size=4096

 

 

그래도 걱정된다면 8192와 같이 4096보다 더 크게 설정해도 됩니다.

 

 

728x90
반응형

'개발, 코딩 > RDB|SQL|NoSQL' 카테고리의 다른 글

react-native/expo, a태그의 href기능  (0) 2019.11.13
MongoDB - 날짜 필터링  (0) 2019.11.11
Https 설정하기 (let's encrypt, certbot)  (0) 2019.11.07
ubuntu18.04, 최신 nodejs환경 설치  (0) 2019.11.07
import/require  (0) 2019.11.07
728x90

https설정은 할일이 매우많다

 

로그인이 들어가는 순간 그 서버는 거의 필수적으로 https를 사용해야 된다고 생각한다.

 

그래서 관련 포스팅을 해본다.

 

 

기본적으로 https설정은 유료이다.

 

단, Certbot을 사용하면 무료로 설정할 수 있다.

 

Let's encrypt에서 발행해주는 https인증서는 그 수명이 3개월인데, 간단한 설정으로 자동 무한발급을 받을수 있다.

( lets' encrypt의 정책이 바뀌지 않는다면)

 

https://certbot.eff.org/lets-encrypt/ubuntubionic-nginx

 

Certbot - Ubuntubionic Nginx

Different Internet services are distinguished by using different TCP port numbers. Unencrypted HTTP normally uses TCP port 80, while encrypted HTTPS normally uses TCP port 443. To use certbot –webroot, certbot –apache, or certbot –nginx, you should have an

certbot.eff.org

 

위의 사이트에서 자신의 os - web server에 맞게 검색하여 가이드라인을 따른다면

 

세팅을 아주 무난히 마칠수 있다.

 

문제는, 늘 세팅 이후의 나의 환경에 맞게 설정하는 부분이다.

 

다들, 그냥 이렇게 저렇게 하라고만 할뿐 어떻게 내 환경에 맞게 설정해야 될지는 아무도 알려주지 않아 내가 적는다.

 

0. 최소한의 웹서버 설정

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;
        root /home/ubuntu/myproject/build;
        index index.html index.htm index.nginx-debian.html;

        server_name mydomain;

        location / {
                try_files $uri $uri/ =404;
        }
}

 

1. Http요청 Https redirect시키기

 

웹의 기본 요청방식(통신방식)은 http이기 때문에, 사용자들의 http요청을 https로 redirect시킬 필요가 있다.

 

/etc/nginx/sites-available/defulat 파일에서 설정을 해보도록 하자 (본 파일은  nginx.conf에 include됨)

 

server 블록을 하나 만들어 http요청을 모두  https로 redirect시킬 수 있다.

server {
    server_name mydomain;

    if ($host = mydomain) {
        return 301 https://mydomain
    }

    return 404;
}

 

2. 내 프로젝트 붙이기

 

이제 막, 서버를 개설중인 것이라면 내 프로젝트를 nginx/apache서버에 붙여줄 필요가 있다.

 

어떻게 만들어졌냐에 따라 크게 달라지지만

 

먼저, html로 만든 간단한 웹사이트의 경우이다.

server {
    client_max_body_size 100M; // 너무 큰 요청은 곤란하다..

    server_name mydomain;
    root /var/www/html; // 내 프로젝트 위치를 잡아주면됨. 특히, 그중에서도 index.html의 위치
    index index.html // 위에서 말한 index.html 파일명을 명시

    // https 설정!!
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

 

다음으로, react로 만든 프로젝트이다.

...

server {
  server_name mydomain;
  root /home/ubuntu/myproject/build; // 내 프로젝트 위치를 잡아주면됨. 특히, 그중에서도 index.html의 위치
  index index.html // 위에서 말한 index.html 파일명을 명시


  location / {
  	try_files $uri $uri/ /index.html;
  }

  location ~* \.(?:manifest|appcache|html?|xml|json|service-worker\.js)$ {
  	expires -1;
  }

  location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
  }

  location ~* \.(?:css|js)$ {
    expires 1y;
    access_log off;
    add_header Cache-Control "public";
  }

  // https 설정!!
  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

 

728x90
반응형
728x90

ubuntu가 빠르게 업데이트 되고있지만, apt package manager는 그렇지 못한것 같습니다.

node 버전이 8에 머물러있네요...

 

node버전 문제를 해결하는 방법은 nvm (node version manager)을 사용하는 것입니다.

 

nvm 설치 명령어

sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

nvm install 버전 (ex. nvm install 12.13.0)

위의 명령어를 통해 최신버전의 node, npm 을 설치할 수 있습니다.

 

다만, 프로젝트의 의존성 모듈을 설치하는 중에 경우에따라 Missing write access to ... 와 같은 권한문제를 맞이할 수 있습니다.

 

해결책

프로젝트 폴더의 접근권한을 주는것입다

 

sudo chown -R $USER 폴더경로 및 폴더명

 

어렵지않게 위의 명령어로 깔끔하게 해결가능합니다.

 

 

 

728x90
반응형
728x90

최신 웹 개발환경에서 개발하는 초보개발자라면 종종 드는 생각이 있다.

 

언제 import고 언제는 require지?

 

"client 개발할때는 import고 nodejs로 server-side개발할때는 require인가?"

 

라고 생각한다면 60%정도 정답이라고 볼수있다.

 

정확히는,

 

Browser위에서 동작하는 코드는 import

 

그 외에, nodejs기반으로 돌아가는 code들은 require이다.

 

따라서, client-side 프로젝트라고 하더라도, browser기반으로 동작하는 코드가 아닌,

 

환경설정 (예를들어, 웹팩설정) 에서는 require를 쓰게되는것이다.

 

 

 

** 아래의 포스팅에서 Nodejs에서 import사용하는 법을 확인할 수 있다. **

https://honeystorage.tistory.com/133

 

nodejs에서 import/export 사용하기

1. esm 라이브러리를 설치한다. 2. index.js, main.js로 파일구성을한다. main은 주요 실행파일, index는 진입 파일이다. 3. index.js를 다음과 같이 작성한다. require = require("esm")(module /*, options*/);..

honeystorage.tistory.com

 

728x90
반응형
728x90

File upload를 할때, 특정 파일형식만 허용해야하는 경우가 매우 많다.

 

그때는 input의 accept라는 attribute를 사용하면된다.

 

이미지 허용

accept="image/x-png,image/gif,image/jpeg" 

혹은

accept="image/*"

 

비디오 허용

accept='video/mp4'

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

 

728x90
반응형

'개발, 코딩 > RDB|SQL|NoSQL' 카테고리의 다른 글

ubuntu18.04, 최신 nodejs환경 설치  (0) 2019.11.07
import/require  (0) 2019.11.07
Build error: connect ECONNREFUSED 127.0.0.1:19001  (0) 2019.11.05
window에서 mongo설치하기  (0) 2019.10.08
mysql connect할때  (0) 2019.08.27
728x90

* expo build error

expo 빌드를 진행하다보면 connect ECONNREFUSED 127.0.0.1:19001 라는 에러를 한번쯤 마주하게 됩니다...

start했던 expo가 비정상적으로 종료된 이후 빌드를 시도할 때, 이런경우가 종종 있는것으로 보입니다.

 

이때의 해결방법은 아주 간단합니다. expo를 실행시켰다가 다시 종료하는 것이죠.

1. expo start

2. ctrl + c (quit)

3. expo build:android(or ios) // 빌드 재시도

 

 

 

 

 

 

728x90
반응형

'개발, 코딩 > RDB|SQL|NoSQL' 카테고리의 다른 글

import/require  (0) 2019.11.07
Html - input(file), 특정 파일형식만 허용하는 방법  (0) 2019.11.05
window에서 mongo설치하기  (0) 2019.10.08
mysql connect할때  (0) 2019.08.27
mongo - field제거  (0) 2019.08.22
728x90

React에서 Redux를 함께 쓰다보면, 혹은 React를 사용하다보면

 

불변성과 관련하여 종종 맡닥드리는 문제상황들이 있다.

 

불변성 관리의 편리함을 제공해주는 immer, immutablejs 등이 있는데,

 

그것들을 사용하더라도 javascript에 대한 이해도가 떨어지면 결국 문제상황과 만나게된다..

 

특히, array..object..array.. array..와 같은 깊은 구조에서 문제가 발생한다.

 

이때, 한가지만 명심하면 해답을 찾을 수 있다.

 

"값을 직접 바꾸지 마라" 라는 react의 철학이다.

 

위와같이 깊고 복잡한 구조에서는 arr['something']['action']['whatIndex'] = value;

와 같이 값을 직접 변경할것이 아니라

splice등과 같은 array method를 이용하도록 하자.

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

728x90
반응형

'개발, 코딩 > React' 카테고리의 다른 글

string의 \n 을 html <br/> 으로 변환하는 트릭  (0) 2020.03.25
CRA(create-react-app), IE대응  (0) 2020.01.31
react, cors 그리고 chrome  (0) 2019.10.31
Input focusout - redux/react  (0) 2019.10.29
html - hash / react- ?  (0) 2019.10.29
728x90

Html, JS를 가지고

 

이미지 파일을 불러온 후, 미리보기를 구현하는 아주 간단한 방식을 소개해본다.

 

window객체에 내장되어있는 FileReader를 이용한 것이다.

 

먼저, input file에 onChange이벤트리스너를 붙여준다.

 

const oFReader = new FileReader();
oFReader.readAsDataURL(ev.target.files[0]);
oFReader.onload = ev => {
    document.querySelector('#uploadImage').src = ev.target.result;
};

위와 같은 코드로, 이미지 미리보기를 간단히 구현해볼 수 있다.

uploadImage는 해당 이미지 태그이다.

 

(예, <img id='uploadImage' alt='profile' />)

 

 

 


웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

 

 

 

728x90
반응형