꿀팁 저장소

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 폴더경로 및 폴더명

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

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

언제 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

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

* 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) // 빌드 재시도

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

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

momentjs 언어 포맷을 변경할 수 있다.

관련해 많은 포스팅들이 있다.

그런데, 번거로운 작업없이 요일만 한글화 한다던지, 년 월 등만 한글화 하고 싶을때가 있다.

그럴때는 moment의 내장함수를 이용하면 가능하다.

updateLocale이다.

예를들어, 요일을 업데이트한다면,

import moment 아래에

moment.updateLocale('kr', {
    weekdaysShort: ['일', '월', '화', '수', '목', '금', '토'],
});

과 같이 설정해주고

moment().locale('kr).format('ddd') 해보면 한글화 된걸 확인 할 수 있다.

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

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

http://self-made.cloud

API를 계속해서 만들어왔고, 서버를 관리해왔다.

전문적으로 서버를 공부한 사람은 아니지만, 실무위주의 학습과 개발을 해왔다.

전문적으로 다루시는 분들에 비해 그 내부적인 동작과 퍼포먼스 향상 관련해서는 부족하지만,

적어도 원하는 기능을 구현하고자 한다.

나아가 전문가가 된다면 더 좋겠지만, 나의 주 포커스는 Front-end이다.

[ 지금부터 언급하는 RestAPI는 외부 RestAPI를 말합니다.

Restful API Server를 말하는것과는 다릅니다. ]

그런 내가 개발과정에서 RestAPI, API에 대해 얻은 개인적인 통찰을 기록한다.

최근, YoutubeAPI, KakaoAPI, FacebookAPI 등의 RestAPI를 통해 개발을 하면서 느낀바는 '비슷하다' 이다.

무슨말이냐면, 'Kakao의 RestAPI를 가져다 쓸줄 안다면 나머지도 다 쓸수 있다' 라고 봐도 무방하다.

그 사용패턴과 방식이 같기 때문이다.

그렇다면 본론으로 들어가  RestAPI가 어떻게 돌아가는지 확인하자.

RestAPI는 Client에서 직접 호출하는걸 지양한다. 즉 server - to - server API 이다.

따라서, RestAPI를 통해 어플리케이션을 구축하고자 한다면 Third API Server가 필요하다.

여기서 Third API Server는 흔히 말하는 서버이다.

즉, Only Front-end앱이 아니라면 보통 하나씩 가지고있는 그 서버말이다.

일반적인 경우에는 아래와 같이 서버를 사용한다.

Client의  API요청 <---> Third API Server의 API응답

그러나, 외부 RestAPI를 이용할때는 아래와 같다.

Client의 API요청 <---> Third API Server의 API 요청/응답 <---> RestAPI Server(외부)의 응답

server - to -server 로 외부 RestAPI를 호출하고 응답받아 나의 Client로 전달해주는것이다.

다소 번거롭지만 그 장점은 확실하다. 

하나의 서버구축만으로 웹/앱/데스크탑 어떤 플랫폼에도 대응할 수 있다는것이다.

클라이언트에서 필요한 api를 요청하기마나 하면 된다.

RestAPI를 처음 접하시는 분들에게 혼선을 주지않기위해 마지막 코멘트를 남기자면,

흔히 말하는 Rest API Server란, Restful하게 설계한 내 서버를 의미합니다.

Restful하다는 의미는 검색해보시면 잘 정리된 자료가 많이 있습니다 ^^

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

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

http://self-made.cloud

보통 react에서 rest api를 통해 작업을 하게된다.

만약 나 또는 내 그룹에서 작업하고있는 rest api 서버라면 문제없지만

firebase, kakao, naver 등의 rest api를 이용함에있어 cors문제를 한번쯤 겪게된다.

chrome에서 보안 정책상 기본적으로 cors를 방지하고있기 때문이다.

이럴때는 chrome확장도구 중 "CORS:Allow CORS: Access-Control-Allow-Origin"라는 확장도구가있다

요놈을 설치해 ON해주면 문제없이 테스트를 진행할 수 있다

(이놈 때문에 무려 6시간을 삽질했다)

그런데,

중요한것은 사실 저것이 아니다.

클라이언트(웹 브라우저)에서 Reat API를 서버로 요청할때는 axios, fetch등이 아닌 a태그의 href를 이용해야한다.

query parameters들을 href="...url?accessToken=something ...." 과 같이 해서 요청하면 된다.

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

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

http://self-made.cloud

File upload는 대부분의 앱/웹에서 사용되는 아주 기본적인 기능

클라이언트 사이드에서의 처리는 생각보다 간단하다.

1. input type='file'로 태그를 생성하고,

2. onChange 이벤트리스너를 통해 ev.target.files[0]으로 선택된 파일을 읽어와 변수에 담는다.

3. 서버로 보내준다. 보내줄때는 formdata에 넣어보내줘야한다.

const formdata = new Formdata();

formdata.append('photo', file);

여기서 photo는 서버에서 해당 요청을 받을때 사용하게된다.

(예를들어, multer를 이용한 미들웨어에서 사용한다면 photo.upload(photo);

이때는 헤더설정도 해줘야한다. 

const config = { headers: { 'Content-Type': 'multipart/form-data' } }; << 이렇게

axios.post(url, formdata, config) 와 같이 서버에 요청을 날리면된다.

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

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

http://self-made.cloud