회사에 가면 어떻게 개발이 진행되는지, 앞으로의 프론트 엔드의 전망이 어떻게 되는지에대해 얘기를 해주셨다.
회사에 가면 어떻게 개발이 진행될까?
스타트업 기준으로 본다면
먼저 모바일 퍼스트인지,
웹 퍼스트 인지에서로 나뉜다.
무엇을 먼저 만들것인가에 대한것이다.
웹으로 먼저 만든다는 것은 웹페이지를 먼저 만든다는 것이다. 먼저 리엑트로 웹페이지를 만들고, 반응형으로 모바일 웹을 만든다.
이렇게 리엑트로 두가지를 만들수 있게된다.
이렇게 웹으로 두가지를 만들면 초기 스타트업의경우에 리엑트 네이티브의 webview를 이용햐 햐당태그를 만들고 이 안에 반응형으로 만든 웹 주소를 넣게되면 앱이 만들어진다.
이 상태로 안드로이드나 ios 둘다 배포가 가능하다.이렇게 모바일앱이 된다.
그럼 앱과 웹이 뭐가 다른가?
앱은 다운받아서 사용이 가능한것이고, 웹은 주소가 있는것이다.
주소가 있어 주소로 접속하는것이 웹!!
==> 이렇게되면 웹과 반응형 이 두개만 만들면 나머지는 자동으로 되는것!
스타트업의 벡엔드의 경우 js와 node.js로 만들고, 이렇게 js만 가지고 가능하다.
내부인력이 다 js를 다룬다. 한다면 다른 대체인력이 필요치 않은것.
이렇게 공통되는 언어로 작업하는 형태이면 5인 미만스타트업의 경우에는 효율적으로 작동하게된다.
웹 --> 마케팅비용이 적다. SNS 등에 주소만 뿌리면(링크만 뿌리면 바로 접속이 가능하다.)
앱 --> 주소가 없다. 보통 다운로드 화면으로 넘어가는 그 시점에 많이들 이탈한다 ==> 한명 다운로드 받게 하는 비용과 한명 접속하게하는 비용이 완전달라서 앱 홍보 비용이 많이 들 수 밖에 없다.
웹으로 쓰다가 후에 상황을 봐가며 서비스 규모가 커지면 그때 안드로이드, ios,리엑트 네이티브.. 로 갈아탄다. 그때 각 개발자들을 뽑는 식으로 이루어진다.
리엑트 네이티브, Flutter등을 하나만 만들면 안드로이드와 ios 둘다로 배포가 가능하다고 크로스 플랫폼 이라고 한다.
모바일 퍼스트면 모바일먼저,
웹 퍼스트면
1. 웹을 먼저 만들고
2. 반응형으로 사이즈를 줄여
3. 리엑트 네이티브의 webview 태그를 이용해 그 안에 해당주소를 사용한 반응형 웹을 넣어 앱을 만든다.
이렇게되면 ios 와 안드로이드 두개로 배포가 가능하다.
===> 이런식으로 한번에 4개의 서비스 배포를 동시에 한다.
요즘 트랜드는 PWA-Progressive web-app 이다.
모바일에서 하던 기능들을 웹에서도 할 수 있게 제공하는 것이다.
녹음, 영상촬영, 푸쉬알림기능등 웹상에서도 가능하게 하는 것이다.
--> 안드로이드에서는 가능하다. ios에서는 앱들 점유율이 껄어질까봐 막아놨었는데. 최근에는 점진적으로 허용하겠다고 발표했다고 한다.
결국 PWA가 프론트의 미래!
모바일 웹에서 --> 앱 --> PWA형태로!!!!
일단 js에서 갈 수 있는 방향
-
PWA공부하기.오프라인모드 가능(네트워크없이도 온라인으로 활성화되면 오프라인모드기 작성했던것 그대로 반영되는것)
-
기존 앱에서만 가능했던 카메라 기능을 웹상에서도 가능하게하는 WebRTC => 웹 리얼타임 커뮤니케이션
HTML 5에서 지원하는 카메라기능을 코드로 만들어 리엑트에서도 적용 가능한것. 카메라 기능뿐만이 아니라, 녹음 , 영상촬영, 내 핸드폰에서 카메라열기 등 지원이 가능하다.
여기서 좀 더 나아가
3. VR /AR
-
더 나아가면 WebGL 이라는 부분. 해당 라이브러리로는 three.js 라는것이 있는데, 3D그림을 그려주는 것이다.
웹화면으로 3D그래픽이 나오게 하는것이 WebGL이다. 그런데 좀 느린갑이있어 요즘에는 속도를 개선하는 많은 방법들이 나오고 있다.
이것이 잘 동작되면 웹 3D게임이 나올 수 있다. -
웹 시각화(데이터 시각화)
라이브러리로는 d3.js가 있다. 실시간 데이터를 시각화하는것. 주식등을 실시간으로 움직이는 것을 웹상에서 어떻게하면 끊김없이 움직이게 만들지를 공부하는 부분이다. -
리엑트 네이티브를 사용한 앱전문
웹뷰로 모바일 웹을 올린다면 리엑트 네이티브가 안드로이드나 ios로 바꿔 해당코드로 변환시켜야하니 좀 느린감이있다. 즉, 모바일 웹 위에 웹뷰가 있으니 계층이 생겨 느림. 물론 게임이나 3D그림등 이 나오는 것들에 대해는 느리다고 얘기하나, 그 외 데이터를 fetching해 화면에 뿌려주는 것에 대해선 느리지는 않다고한다.
실제로 모바일 웹을 사용하여 만든게 토스와 네이버앱.
터치때마다 회색 영역이 생기면 웹뷰라는것인데, 요즘에는 웹뷰임에도 불과하고 영역 안생기게 할 수가 있어 사실상 구분이 어렵다.
다만, 성능이 중요한 게임 등에서는 웹뷰를 적용하지 않고 바로 네이티브를 사용한다.
---->> 웹을 반응형으로 만들고,-> 그것을 webview로 묶는게 모바일 웹을 사용한 앱이라고 할 수 있다.
- AI
빅데이터라는 개념이 존재한다.
모든 데이터를 모아 데이터를 분산저장한다.(즉, DB가 여러개가 있는것)
이 분산저장된 데이터를 통계, 계산, 학습을 시킨다.
이런과정에서 네트워크를 활용하게되는데, 그렇기에 네트워크지식이 필요하다(하나의 컴퓨터에 담을 수 없기때문!)
그렇기에 네트워크를 어떻게 분산처리할것인지.. 이런쪽에서 일하는 데이터 엔지니어 , 그리고 하나의 데이터 베이스를 다루는 데이터 베이스 관리자 라는 직업도 나오게 되었다.
이 데이터들을 가져와 알고리즘 기반으로 학습시키는 것이 AI영역!!
알고리즘 기반으로 학습시켜 하나의 수학식을 만들어낸다.
예시: 개와 고양이 구분하기.
많은 개와 고양이 사진들을 가져와 저장하고,이것을 분석해 학습시켜 (이미지를 확대시키면 하나하나 무수한 RGB로 되어있음을 알 수 있다.해당 영역들을 분석해 어떤것이 고양이인지, 어떤것이 개인지 학습시킴)
배열로 나타낸 후 패턴화, 계산해 특정 수학식을 만든다.
이것을 모델이라고한다.
이렇게 모델을 만들고 새로운 사진이 들어온다면 해당 모델을 통해 검증, 판단하는것!
여기까지만 보면 벡엔드 영역이다. DB에 저장되는 것을 분석해 패턴화한다....
그런데 요즘에는 100% 수학식으로 다 만드는 방식이 아니다.
90%만 학습시키고 프론트로 던진다.이런것을 전이학습한다고 한다.
프론트에서는 사용자가 클릭하는 버튼이나, 행동패턴을 더해 최종학습을 시켜 개개인에 최적화된 방향을 만든다.
즉, 예전에는 벡엔드쪽에서 100% 학습시켰다면 요즘엔 90% 정도를 학습시킨 후 프론트로 보내 개개인 성향을 분석해 버튼 색이라던지, 메뉴위치 버튼위치등, .. 에 반영한다.
그 사람에 맞게 UI변경 가능하다.
그래서 프론트엔드에선 AI전이학습 부분으로 갈 수도 있다.
이렇게 관심있는것을 해보며 하나로 좁혀가는것이 하나의 방법이 될 수도 있겠다.
PWA는 선택하는 방향이 아니라 무조건 한다고 보고 나머지중에서 선택....
