리액트 웹앱 제작 총론 2/e: 리액트와 리덕스를 이용한 웹앱 개발 가이드, 2019

그냥 간단하게 잘 나와있다

jquery, jsp, php, asp 등등 구닥다리 웹프론트 기술을 좀 알고 있고
angular, typesript, express 정도는 조금 만져본 상태의 지식수준에서
볼 때는 대충 넘기면서 한두시간 보면 되는 정도..
요약을 잘 해 놓으면 네다섯페이지도 안되는 분량

리엑트나 웹 프레임웤을 처음 접하는 사람이 볼 수 있을지는 모르겠다
난 이 책을 보기전에 리엑트로 된 어드민사이트를 며칠 살짝 만져보긴 한 상태라서 좀 더 쉬웠는지도 모르겠다.
아예 프로그래밍 초보자라면 따라하고나서 남는거 하나도 없을 듯 하고

React

생명주기 메서드

  • componentWillMount
  • componentDidMount
  • componentWillUnmount
  • componentWillUpdate
  • componentDidUpdate
  • shouldComponentUpdate
    • if ~~~ return true else false
      true면 업데이트, false면 무시
  • componentWillReceiveProps
  • componentDidCatch

동작

초기 렌더링

  • 기본 속성 설정
  • 기본 상태 설정
  • componentWillMount
  • render
  • componentDidMount

상태변경

  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

속성변경

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

언마운트

  • componentWillUnmount

scaffold

npm i -g create-react-app
create-react-app hellowork-app

Redux, HOC

Admin 개발 편하게 하려면

쓸만한 무료 어드민 툴종류

어드민 프레임워크

  • Vaadin
    • https://vaadin.com/
  • CUBA Platform – vaadin에 의존성 있는듯
    • https://www.cuba-platform.com/
    • https://github.com/cuba-platform/cuba

프레임웤 내부지원

  • RubyOnRails – ActiveAdmin
  • django – admin

템플릿

react template도 많고 등등..

교훈

관리자 사이트를 리엑트로 만들지 말라

– 소크라테스 AI

디자인도 하지말고

Cors – python flask on Dokku

파이썬 개 똥언어

서버가 오류나뒈지면서 에러메시지 처리도 제대로 안되고
코드 중간에 오류나면 오류는 처먹고 뒤져버린다

솔직히 연습용으로는 좋다. 구석구석 에러가 나니까 개발할 때 프로토콜은 잘 배울 수 있겠다
라이브러리도 죄다 쓰레기라 하나하나 손봐서 써야되고 커스텀도 불가능한 구조로 만들어진 경우가 많아 pip고 뭐고 그냥 복사붙여넣기 해서 수정해야 하는 경우가 많다

이런 심플함(좆도없음)이 파이썬의 장점이라고 하니까

이쓔상황

Dokku에서 돌리는 Flask 서버에서 Cors가 난다고 한다.
swagger에서는 괜찮은데 react 클라이언트에서만 발생

문제는 뭘까? 의심가는 부분은..

  1. flask cors가 쓰레기라 제대로 동작을 안한다
  2. nginx reverse proxy가 제대로 일을 못한다
  3. 클라이언트가 코딩을 제대로 못했다
  4. 리엑트는 원래 병신 쓰레기라 아무 오류나 나온다

1번체크

curl \
--verbose \
--request OPTIONS \
'https://dokku-api-server' \
--header 'Origin: http://localhost:3000' \
--header 'Access-Control-Request-Headers: Origin, Accept, Content-Type' \
--header 'Access-Control-Request-Method: GET'

2번체크

/home/dokku/api-server/nginx.conf

별 이상없어보인다

3번체크

실행…
서버 호출을 잘못하기는 했는데…
서버오류가 cors가 아닌데 cors라고 나오는게 문제고

4번체크

????

추가체크

서버로그를 보니 flask jwt인증부분을 손을 댔는데 여기서 오류가 난 모양…
헤더가 안 들어올 때 401을 내려줘야하는데 그러질 못하고 있다
서버에서 응답이 없으면 cors가 뜨나? http 프로토콜문제인지 리엑트가 원래 병신인지 잘 모르겠다.

리엑스에서 cors오류발생시 리엑트와 플라스크서버가 모두 병신일 수 있다는걸 기억하자

Web 개발 용도별 기술선택

간단하게 만들려면 js, python이 좋다??

로그인, 디비 정도만 딱 붙이고 추가기능이 전혀 없을 경우….

보안이나 벨리데이션 신경쓰지 않고 프로토타이핑을 하는 경우에 한해서는

js, py가 괜찮은 선택이다

완성된 프레임워크 Spring, RoR

조금 제대로된 뭔가를 만들려면 이런걸 쓸 수 밖에 없다.

python으로 뭐 하려면 멀티스레드 지원 때문에 엄청 불편하다

모든걸 편법으로 처리해야 하는데 Queue, multiprocess, Celery 등등.. 이것저것 하다보면

전혀 간단하지가 않다

메시지 기반 Akka 프레임워크

게시판 종류의 서비스 말고 좀 복잡한 서비스 만들 때 … 필요하다.
거래소, 쇼핑몰 등 실시간, 비동기성이 좀 필요한 경우

Storm, Flink, Kafka, Kafka Streams 정도는 써 봤는데

Flink, Storm은 지들이 알아서 분산형 데몬을 관리 해 줘야 할 것 같은데… 그런부분에서 상당히 기능이 부족하다. 디버깅도 힘들고…유닛테스트도 힘들다. 분산형 키값공유 aggregate가 될 줄 알았는데…. 안된다. kafka와 효율면에서 뛰어나지 않다. 별 수 없겟지.. scale out을 할 때 kafka보다 더 이상 효율적이기는 힘들 것 같기는 하다.

이런저런 이유로 복잡도를 털어내고 사용하려면
kafka streams를 docker 환경에서 배포하는게 더 괜찮은데…
메시지 처리나 시리얼라이저 등등 여러부분을 직접 관리 해 줘야하는게 문제다.
그럼에도 불구하고… 나쁘진 않다.
여러 언어 지원 안되는게 조금 약점..이라고 할 수도 있지만 잡언어 안쓰면 되지

elixir도 akka처럼 액터기반 프레임웤인데 언어가 생소하니 접근성이 떨어지고 만들어놔도 인력 구하기도 힘든 문제가…

Akka로 이런 부족함을 채울 수 있을지 모르겠다

-테스트 더 해서 추가-

Proceee Manager – python, node, ruby …

자바계열에서는 많이 쓸 일이 없는데.. 스레드로 해결하면 되니까

싱글스레드.스크립트 언어에서는 필수적이다

종류

  • PM2
  • Unicorn
  • Gunicorn
  • Uvicorn(ASGI)
  • uWSGI
  • Foreman
  • Supervisord
  • forever
  • honcho

PM2

node.js
ecosystem.config.js 파일로 설정 관리

사용편리 프로세스 관리 편리 백그라운드 포어그라운드 가능

Foreman

ruby
Procfile 파일로 설정관리

heroku, dokku 등등과 설정파일을 함께 사용

Gunicorn

python
ini 파일로 설정관리

설정파일 안쓰는편… docker에서 foreground로 돌릴 때 좀비가 되는 경우가 있음 주의


나머는 모르겠다. 장단점

SPA:SinglePageApplication과 SSR:ServerSideRendering

SSR을 하면 SPA가 필요없음

봇이 들어왔을 때 구분해서 SSR을 쏴주거나 한다면 모르겠는데
그렇게 되면 봇이 보는페이지랑 사용자가 보는 페이지가 달라질 가능성도 있겠고
복잡도 증가로 성능문제도 있겠고

SPA는

트위터, 페이스북처럼 완전개인화된 1회성 페이지에만 사용

Xpressengine3는 아직 미완성인가

SSIBAL 이거 돌아가는거 맞나?

composer install 하면 뭔가 경고가 엄청 뜬다. 의존성 오류가…?
보니까 composer.lock이 ignore가 되어있다.
php, composer 모두 정해진 버전을 써야할 것 같은데 알 길이 없다.
.lock, .phar 등등은 gitignore에 포함시키지 말아야 하는거 아닌가?

developement 환경은 왜 셋팅도 안 되어 있는건가
sqlite에 달아주던가 해야 데모 테스트도 해 보고 쓸지 말지 결정할텐데

Docker 공식 이미지를 제공을 안 하길래 만들어서 써볼까 했는데
제대 돌아가질 않는다.
docker에서 terminal install을 하는경우 디비가 이미 생성 돼 있으면 넘어가주거나 하면 좋을텐데 에러를 토해낸다.
그럼 웹 설치만 해야되겠군…
latest.zip를 받아서 다시 만들었는데 localhost/만 접속이 되고 localhost/auth .. 등등 다른페이지가 안뜬다. 뭔가 손이 많이 간다.

config쪽이랑 installer env 네이밍이 너무 제각각사용된다. 그리고.xe_install_config.yml은 환경변수를 받지 않아서 꼭 파일을 넣어줘야 하는 것 같다.

redis를 넣어줬더니 predis가 필요하다고 한다.
다이내믹하게 설치가 되는건 아닌가본데… 그럼 서버 실행전에 composer install을 해 줘야한다는건데…

기능개발보다 안정화를 먼저 해야 사용자층을 넓힐 수 있지 않을까
며칠 보다보니 고쳐서 쓸 수는 있을 것 같은데 계속 이런상태일 것 같아서 고민이다.

그냥 안쓰는게 나을 것 같다.
wordpress, joomla 등등의 대안이 있으니까
이정도로 불안정한 플랫폼으로 서비스를 만드느니 새로 만드는게 나을 것 같다.

웹사이트 사용기술 알아내는 방법

직접 확인방법

공개된 정보 활용

  • 커뮤니티 질문 또는 글 검색
  • 해당 서비스 채용글 확인
  • StackShare 등의 사이트에 공개된 정보 확인
  • 해당 서비스의 기술블로그

기술적으로 확인

  • HttpHeader, Response 확인
  • 관용적으로 사용되는 주소 패턴 확인
  • Html 메타데이터 확인
  • CSS/JS 형태확인(컴파일?/소스형태)
  • Static파일의 서비스 형태

서비스 사용

이런걸 궁금해 하는 사람들을 위해 주소만 입력하면 확인할 수 있도록 도와주는 서비스가 많이 있다.

W3Techs (https://w3techs.com)

  • 웹에서 주소입력(https://w3techs.com/sites)
  • 브라우저 확장(FireFox, Chrome)

WebApplyzer (https://www.wappalyzer.com)

  • 웹에서 주소입력(https://www.wappalyzer.com/lookup)
  • 브라우저 확장(FireFox, Chrome, Edge)
  • Node 모듈

BuiltWith (https://builtwith.com)

  • 웹에서 직접사용 (https://builtwith.com)

isitwp (https://www.isitwp.com)

  • 웹에서 주소입력 (https://www.isitwp.com)

PageXray (https://pagexray.com)

  • 브라우저 확장 (Chrome)

Whatruns (https://www.whatruns.com)

  • 브라우저 확장 (Firefox,Chrome)

SimilarTech (https://www.similartech.com)

  • 웹에서 주소입력 (https://www.similartech.com)

Process Manager

불안정한 쩌리랭기지들을 위한 도구

python, node, ruby

Unicorn

개발 언어 : ruby
https://github.com/phusion/unicorn

Forever

개발 언어 : nodejs
https://github.com/foreversd/forever

pm2

개발 언어 : nodejs
https://github.com/Unitech/pm2
nodejs, python

supervisord

개발 언어 : python
http://supervisord.org
https://github.com/Supervisor/supervisor

pman

개발 언어 : python
https://github.com/FNNDSC/pman

ptop

개발 언어 : python
https://github.com/darxtrix/ptop

php-pm

개발 언어 : php
https://github.com/php-pm/php-pm