TIL : 37번째- 230125 [1-4-수]

I. 프로젝트 관련

1. 시스템

1)

기획 분석을 구분하는게 좋음

기획은 없는 것을/ 분석은 있는 것을 전산화하는 방식으로

 

2)

SI 에서 시스템이란? 

체계란 한단어에서 시스템이 있다 없다에서 

 

예컨데 회사에서 처음에는 특정 한명이 물품구매 해줌. 그러나 이후에 한명이 특정기간에만 해주는 등으로 물품구매시스템을 만든다.

이후에 사람이 더필요해서 구인시스템이 만들어진다.

 

어떤 것을 목적으로 할때, 그 목적으로 실행하는 절차, 역할자가 있다. 이런것이 시스템되어있다고 하려면 복합적인 행위들이 체계적일 때 시스템을 갖추었다고 한다. 우리가 무엇을 할 때 하고자하는 것의 기능,역할,흐름이 하나로 융합된것을 시스템이라고한다

 

전산화 이전에는 이러한 문제점이 있다.

이러한 물품구매, 구인 등의 시스템을 회사는 전산화 하려고한다. 왜냐하면 종이가 엄청 쓰이게 된다. 모든 것이 종이로 이루어지게 된다. 이런것이 검증이 필요할까봐 보관하게 된다. 보관위한 캐비닛 공간도 필요하다. 문서들을 저장하는데 쌓아두는것이 3,4년 있게 된다.

우리도 이러한 캐비넷, 종이를 줄이는 것이 필요하다

캐비넷 => HDD / 종이 VS 전산화 인력 운영비용 등

 

전산화 하면은 우선은 하드웨어(서버, 컴퓨터)를 고려해야한다

그리고 반대로 SW들도 필요하다 이를 위한 업체 유지보수 교육도 알아야한다.

그런데 전산화 담당자에게는 가혹하다 다 맡아야하기 때문이다. 이런경우 나타나는 것이 SI업체이다.

SI업체란 System을 전산화할때 통합해서 알아서 해준다는 의미이다.

 

마치 결혼식할때 복잡하는데 웨딩플래너!가 다 해준다.

즉 웨딩플래너로 이해하면 수월하다

- 웨딩플래너가 천차만별인거 처럼 SI업체도 마찬가지이다.

 

3) 

우리에게 분석은 어렵다

회사 업무파악은 잘아는 실무자등이 할 수있다. 그나마 가능해서 뽑아내기 어렵다

우리는 시스템이 없을 때에는 기획이 그나마 수월할 수있다

 

 

2. 시스템을 기획

(1) 기획

1) 

처음에는 누가 쓰는지에 대해서 파악해야한다.

즉 누가(역할자) 사용할 서비스(시스템)인가? : 역할자

(관리자는 사용자에 포함되는것이다. 유의하자)

 

2)

역할자에 따라서 달라지는 것 : 문서(작성내용)

 

각 역할자 별로  기능을 살펴보자

우선 중복된 역할자 제거해주는데 이 경우 오해의 여지를 줄이기 위해서 영어를 없애준다.

비단 수강생, 관리자 외에도 방문객, 선생님도 있다

가장 먼저 대상을 떠올려준다.

 

3) 등록관련

여기서 선생님은 강의,숙제,공지사항등을 등록할 수있다.

시스템은 선생님이 위를 할 수 있게끔 해야한다 

 

그렇다면 관리자는 공지사항등의 제반 관리사항

 

수강생은 댓글등록, 숙제제출, 강의수강, 질문등록,마이페이지 등이 가능하다

수강생은 쏟아졌지만 등록이 무엇인지 생각은 해 보아야한다.

 

이제까지는 시스템은 사람간 관계라고 했는데 

내가 오늘 새로운 물건을 만들었는데, 자동청소 시스템이다.

시스템은 체계인데 꼭 사람을 의미하는것은 아니다.

물리적인 시스템도 시스템이다.

 

 

4) 물리적인 시스템 ⭐️

혼자가는 자동 캐리어(목적)가 있다고하자 이 경우 앞에 뭐기있는지 센서를 달아주어야한다.

이동하다가 속도제어를 위한 칩이 있고 때로는 문이 저절로 열리게끔 기능을 추가 함

이런것들은 시스템일수있다. 그리고 역할자(구성요소)도 있다

 

즉 구성요소로 이루어져서 체계를 이루는 복합적인 집합체 : 시스템

즉 물리적 업무적인 복합체 혹은 집합체계등을 시스템이라고한다.

[시스템 기획 결론 : 역할자가 사용할 시스템(여기서 시스템은 구성요소의 복합적인 집합체)규명]

 

선생님의 강의 숙제 공지사항 각각은, 각각의 시스템으로 만들어야한다.

수강생의 강의수강이나 숙제제출은 먼저 등록되어야하는 강의나 숙제가 있다. 그래서 선생님의 강의 숙제가 먼저 되어야한다

즉 key 가 되는 entity이다 모두가 다가 아니다.

 

우리들의 시스템은 역할자가 무엇인고, key가 되는 것을 관리하는것이 무엇인지 찾는것을 시작하자

이거는 업무적인것이여서 답이있는것이 아니다

 

- 운영하지 않으면 마땅히 무엇이 필요한지 감이 어렵고, 누가봐도 뻔한거만 나오게 됨

우리도 1차때 만들고 2차에서 또 올리면된다. 일단 방향성만 맞다면! 가능하다 처음부터 완벽할 필요는 없다.

최대한 짜낼만큼 짜내서 역할자가 어떻게 관리할지 생각해보아야한다. (짧은기간 내)

 

2. 실습 및 우리 조 피드백

요청은 행위인데 행위 말 생각하기 보다는, 어떤 정보를 등록하는지? 등록하는 정보가 어떤건지?

 

- 용어를 조심하자! 셋다 기업정보를 관리하는 것임

넣어야할 데이터는 기업정보이다. 얘들은 하나의 시스템으로 가능하다

 

이런 행위는 명사형태, 동사형태가 있다

명사쪽은 관리대상이다. 기업정보에서 등록은 빼고 요청만 행위로본다

명사는 데이터/ 동사는 행위이다 우리는 대상과 행위로 나누어보아야한다

 

명사가 우리가 다룰데이터이다. 동사 행위이다.

 

시스템 다 분석하고 한번에 만드려고 하지말고, 가장먼저 할 것은 하나의 가닥잡기

후기라기 보다는 기업등록 시스템 만! 하나! 만들기 (승인까지)

조원들이 하나의 시스템을 같이만든다.

그 과정에서 백 프론트가 있다. 같이 스터디 하면서 만듬

이후에 만들어진 시스템(후기등록, 채용등) 은 둘씩 나누어서 각자 만들게끔

 

그러나 시스템을 기획해야 맡아야할것이 보인다.

기능이 같은지는 화면이 같을까? => 그러면 같은페이지를 쓸수있다.

 

애자일하게 먼저 기업등록하기 스피디하게 한과정을 거쳐야한다

먼저 기업정보 등록하는 페이지에 대해서 생각해보라, 어떤화면을 가지게 할 것인지

 

구직자 기업/ 시스템관리자 다른화면을 각자 구상해보자!

하나의 시스템에대해서만 

 

 

3. 파일을 만들어보기

html 각자 만들지와 관련해서... 파일구조를 만들고...

피그마를 이용한다.  이 경우 모바일을 먼저하자! 왜냐하면 오늘날 모바일을 더 많이 이용하기 때문이다.

그림그렸던 것을 집에 가면서 확인하게끔 하자, 프로토타입도 먼저 만들기가 가능하다

svg 파일로 따오기가 가능하다

 

 

기능잡기 ->  html 파일구조(물리 아키텍처) 생각해보기 -> 페이지그리기(피그마로) 

 

II. 서블릿

1. CSR / SSR

CSR(Client side Rendering) <-> SSR(Server side Rendering)

과거에는 SSR인데 요새는 CSR로 바뀌고있다.

CSR에서 서버에서는 문서를 만드는게 아니라 비어있는 문서를 보낸다 DB데이터를 문서에 바인딩이 아직 안된상태이다

 

1) SSR로 만들면 클라이언트는 할 일이 없다.  server는 문서를 동적으로 만들어서 제공

2) CSR은 클라이언트가 문서를 동적으로 만든는 일을 한다. 서버는 데이터를 제공하는 역할 API (:Restful)을 한다.

최근에는 클라이언트로 문서를 만드는것으로 바뀌고있다.

 

2. 왜 변화?

1) 그렇다면 왜 바뀌고있는가?

옛날에는 서버에 요청하는거를 html만 했다. 결과로 페이지가 있다. 또 요청하면 또 페이지가 온다.

이 경우 화면 갱신에 대한 불만이있다. 웹기반의 app을 만들고싶어한다 (구글들이)

클릭만 하면 페이지가 모두 다시 load 되어야한다.

 

즉 싸이월드 bgm은 사이트가 바뀔때 마다 음악이 유지되지않는다. (다시 로드 되서)

 

2) JS와 Ajax를 이용하기 시작한 후의 웹 환경

그래서 Ajax 라고 해서 화면을 한번만 요청하고(음악플레이는 한번만)

이제는 페이지 요청이 아니라 데이터 요청이다. (html 기능으로는 불가능하다)

그래서 JS이용이 커졌고 이렇게 해면 강력한 사용자 환경을 가질 수있음

계속 데이터 요청만 해서 화면갱신하게 된다 (JS, XML 비동기요청인 Ajax)

 

결국 SPA (sigle page Application) 이고 이것이 곧 프론트앤드 개발이다

결국 이런것이 CSR로 바뀐것으로 볼수있다

---

1. 보충

(1) svg 

피그마에서 svg 로 가능하다

svg기존 레스터방식(jpg등)과 달리 벡터방식이여서 파일이 깨지지않는다. 왜냐하면 수학적함수를 이용하기 때문이다.

 

(2) AJAX (비동기식 자바스크립트, XML)

What (정의) : JS를 이용해서 비동기통신 그리고 클라와 서버간 XML데이터 주고 받는것을 의미한다.

(즉 JS로 서버에 데이터 요청)

Why (존재이유) : CSR 을 위한 기법이다. 다르게 말하면 SPA를 위한 것이라고 볼수 있다. (왜냐 기존에는 response를 하게 되면 연결이 끊기게 됨 -> 일부만 갱신)

How (방법) : 비동기식이기 때문에 콜백함수를 만든다. / 그 이전에 HTML DOM JS 등의 기술을 혼합적으로 이용 함 

e.g. (예) :

 

 

(3) rest API  (https://meetup.nhncloud.com/posts/92) [진짜중요]

What (정의) : 클아이언트와 서버 간 데이터를 주고받는 방식을 의미한다. 

웹의 기존기술 & HTTP 프로토콜을 그대로 활용가능

 

Why (존재이유) : 웹의 장점을 최대한 활용할 수 있는 아키텍처이다.  + 멀티플랫폼에 대처하기위해서 

How (방법) : == 디자인가이드

이거를 보니 앞서 본 명사는 정보 동사는 행위라고 한것이 이해가 된다

한편 동사의 경우 PGPD => CRUD 매핑시켜서 암기하자

 

 

e.g. (예) :

 

 

(4) ssr csr 차이 [https://hahahoho5915.tistory.com/52]

What (정의) : 서버 혹은 클라이언트 측에서 렌더링이 일어나는 것이다 여기서 렌더링이란 웹과 관련된 코드를 유저가 보게되는 페이지로 바꾸는 절차를 의미한다.

 

두개의 방식은 최초 웹페이지를 불러오는데 시간이 다르다

그러나 이후 로딩시간은 차이가 있고, 서버에 자원에 대한 부하량도 다르다.

 

 

2. 회고 

1) 예전에 소공시간에 배웠던 것들을 다시 보니 그때 자료를 한번참고 해야겠다고 생각했다

그런데 강의지원사이트를 가니 방학기간동안 점검중이라 들어가지를 못한다 아쉽다