시작하기#7

_posts/2022-04-17-Java_웹_애플리케이션_아키텍쳐.md

@@ -1,10 +1,11 @@
 ---
 layout: single 
 title: Java 웹 애플리케이션 아키텍쳐 
-categories: WebApplication tag: [Java Web Application Architecture]
+categories: WebApplication 
+tag: [Architecture]
 ---
 
-<img src="../images/javaarchitecture.jpg" width="80%"></img>
+<img src="../images/javaarchitecture.jpg" width="80%"/>
 
 # - 초고 - 
 
@@ -25,17 +26,17 @@ DBMS는 Oracle,Mysql,Mssql,Tibero 등 다양하게 이용했던것 같다.
 >내용들은 웹개발자라면 깊이 알진 못해도 가볍게 알아야 되는정도로만 다뤄보겠다. 각각에 대한 설명을 깊게들어가면 그것만으로도 분량이 엄청나다. 
 그리고 필자보다 훨씬 뛰어난분들께서 선행적으로 잘 정리해주신게 있으니 가볍게 보도록 하자. 
 
-##1. Browser
+## 1. Browser
 사용자와의 상호작용을 해주는 매체이다. WAS에서 생성된 ui를 랜더링 해서 표시해준다.
 사용자의 요청을 request 하고 response 받는다.
 MS진형에서 Internet explorer가 오랫동안 사용되었으나 여러문제로 인해 Edge로 대체되었고 mac에서는 apple의 safari가 주로 이용되고 있다.
 범용적으로는 구글진형의 크롬이 쓰이고 있고 그로 인해 점유률 1위는 현재 크롬이다. firefox, naver에서 만든 whale등도 상당히 괜찮은 브라우저로 손꼽힌다.
 
-##2. Web server
+## 2. Web server
 정적인 컨텐츠(Html, Css, Jpeg 등)를 제공한다. 브라우저의 요청을 어플리케이션 서버로 위임시킨다. 
 오랫동안 Apache를 이용했으며 요즘은 nginx도 많이 사용된다.
 
-##3. Was 
+## 3. Was 
 동적인 컨텐츠를 제공한다. 요청을 필요에 따라 DBMS에 질의 할수 있고 그정보를 바탕으로 HttpResponse가공하여 WebServer에 전달한다.
 전세계적으로 Tomcat을 많이 이용하고 국내에서 Tmax회사의 Jeus를 사용하는 경우를 더러 봤다. JBoss, Web Sphere 등도 있다는것만 알아두자.  
 

_posts/2022-05-11-node.js_웹_애플리케이션_아키텍쳐.md → _posts/2022-05-11-node_웹_애플리케이션_아키텍쳐.md

@@ -1,10 +1,11 @@
 ---
 layout: single 
 title: Node.js 웹 애플리케이션 아키텍쳐 
-categories: WebApplication tag: [Java Web Application Architecture]
+categories: WebApplication 
+tag: [Architecture]
 ---
 
-<img src="../images/nodearchitecture.jpg" width="80%"></img>
+<img src="../images/nodearchitecture.jpg" width="80%"/>
 
 # - 초고 - 
 
@@ -14,11 +15,11 @@ categories: WebApplication tag: [Java Web Application Architecture]
 
 Java 웹 애플리케이션 아키텍쳐가 오랫동안 강세였는데 왜 나누어졌을까?
 
-##1. 클라이언트의 다양성
+## 1. 클라이언트의 다양성
 웹 브라우저만 이용되던 시대에서 스마트폰의 등장으로 다양한 클라이언트들이 등장했다. 그로인해 was에서 모든걸 만들어주던 구조는 더이상 해결책이
 아니게 되었다.
 
-##2. 관심사의 분리
+## 2. 관심사의 분리
 이 제목이 적절한지 모르겠으나
 클라이언트들이 늘어남으로 인해 다양한 니즈들이 생겨나기 시작했다. 더이상 풀스텍의 개발자들이 그 니즈를 충족시킬수 없었고 
 사용자의 경험을 충족시키기위한 프론트, 비즈니스를 안정성으로 제공하기 위한 백엔드로 분리되었다. 
@@ -27,14 +28,12 @@ Java 웹 애플리케이션 아키텍쳐가 오랫동안 강세였는데 왜 나
 * 프론트엔드 주업무 : UX(사용자경험)/UI(인터페이스)를 위한 업무
 * 백엔드 주업무 : API, 라이브러리 생성, 트래픽 처리 등
 
-##3. 기존 아키텍쳐의 한계
+## 3. 기존 아키텍쳐의 한계
 Java 웹 애플리케이션을 몇년간 개발하다보면 잘 설계된 구조라 할지라도 구조의 복잡성으로 인해 한계에 봉착하게 된다. 
 확장해나가기 위해서 화면과 비즈니스 로직을 분리하고 싶어도 기존 아키텍쳐에서는 쉽지 않다. 
 사견이지만 언젠가 다뤄보고 싶은 클린아키텍쳐에 대한 개념이나 함수형 프로그래밍 등도 비슷한 결이라 생각이 든다.
 
 >솔루션 회사라고 간판을 걸은 회사들중 솔루션을 만들어 놓고 그걸 기반으로 SI를 하는 업체들이 있다. 
 그런 회사들은 비즈니스로직자체가 솔루션이다. 
 이러한 업체를 다녔는데 적극적으로 추진했던것이 비즈니스 로직과 화면의 분리 였다. 하지만 이러한 의견을 경영진들도 인정하고 하고싶어 했으나 현실적인 이유로 끝내 하지못했다. 
-이 내용에 대해선 나중에 꼭 다시 다뤄볼것이다.
-> 
-> 
+이 내용에 대해선 나중에 꼭 다시 다뤄보고 싶다.

_posts/2022-07-02-react_느즈막히_시작하는_리엑트.md

@@ -0,0 +1,79 @@
+---
+layout: single 
+title: 느즈막히 시작하는 리액트 
+categories: React 
+tag: [React]
+---
+
+# - 초고 - 
+
+
+우연치 않게 리엑트를 시작해보기 좋은 상황이 와서 한번 시작해보려 한다.
+자바스크립트 라이브러리를 시작한다면 스벨트를 해보고 싶었는데 이직한지 얼마 되지 않아
+나대지 않기로 했다. 그리고 아무래도 리엑트 쓰는 회사가 많다보니 괜찮을것 같다는 생각이 든다.
+
+이번에 고생하더라도 꼭 해봐야겠다고 생각이 들었던건 기획, 퍼블리셔, 프론트엔드, 백엔드 쪽이 완벽하게 나누어져 진행이 되는 첫 경험이기 때문이다.
+
+지금 정리하는건 HTML, CSS는 기본이지만 Javascript 초보분들을 위한 글이 될것 같다.
+
+> ※ 개인적으로 웹개발 초보자분들이 리엑트로 시작하시는건 절대 추천하고 싶지 않습니다.
+
+## 1. React 시도해보기
+
+공식문서가 아주잘되어 있기에 아래링크대로 진행해서 프로젝트를 만들어보자. 
+
+https://ko.reactjs.org/docs/create-a-new-react-app.html
+
+* CRA(create react app)를 시작해보자.
+* Webpack, Babel등은 나중에 공부해보자.
+
+
+## 2. 기본 파일구조
+프로젝트를 생성하고 나면 아래와같은 폴더구조를 가진다.
+<pre>
+ 프로젝트 이름
+├── README.md          // 나를 읽어라!!
+├── node_modules       // 패키지 모듈 폴더(CRA로 기본적인 react 모듈들이 포함되어있다.)
+├── package.json       // 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
+├── .gitignore         // git에 올리고 싶지 않은 폴더와 파일 설정
+├── public             // 정적파일 폴더
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+└── src                // 소스폴더
+    ├── App.css
+    ├── App.js
+    ├── App.test.js
+    ├── index.cssarrow function
+    ├── index.js
+    ├── logo.svg
+    └── serviceWorker.js
+    └── setupTests.js
+</pre>
+
+프로젝트를 진행하다보면 파일구조를 어떤식으로 관리할까에 대한 고민에 빠지는데
+이것도 공식문서에 잘정리되어 있다.
+
+https://ko.reactjs.org/docs/faq-structure.html
+
+이번에 준비하면서 많은 블로그와 영상을 보면서 한가지 아쉬웠던게 초보들을 위한 자료인데 파일구조에 대한 
+언급이 많이 없었다. 개인적으론 굉장히 중요하다고 생각하는데 말이다.
+
+## 3. Javascript 조금만 더 알기
+변수(let, const, var), if, for, function 이정도 알면 초보라고 생각한다.
+하지만 리엑트를 하기위해서 조금 낯설어 보이는 기능들이 등장하는데 미리 알고 넘어가자.
+조금만 더 알아야되는 이유는 리엑트를 설명하면서 다시 다뤄보겠다.
+
+### 1) Destructuring(구조분해할당)
+이번 포스팅은 날로먹는것 같다. MDN을 참조하자.
+
+https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+
+### 2) Arrow function(화살표 함수)
+당분간 회는 안먹어도 될듯하다. MDN을 참조하자.
+https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+
+
+> 초보분들에게 리엑트등의 라이브러리를 추천하지 않는 가장큰 이유는 '선언적'인 코딩때문이다. 
+> 처음부터 익숙해지면 좋을수도 있으나 많은 사람들이 그럴수 없다. 대부분 혼란을 겪는부분이 이때문이라 생각한다. 이것에 대해선 
+> 언젠간 다뤄보겠다. 이번 포스팅과 프로젝트는 타의로 프로그램밍을 하고 있는 분과 같이 해야하기 때문에 최대한 '명력적'으로 진행하려 한다. 

_posts/2022-07-03-react_리엑트_퍼블리싱적용하기.md

@@ -0,0 +1,79 @@
+---
+layout: single
+title: 퍼블리싱 적용하기
+categories: React 
+tag: [React]
+---
+
+# - 초고 - 
+
+
+우연치 않게 리엑트를 시작해보기 좋은 상황이 와서 한번 시작해보려 한다.
+자바스크립트 라이브러리를 시작한다면 스벨트를 해보고 싶었는데 이직한지 얼마 되지 않아
+나대지 않기로 했다. 그리고 아무래도 리엑트 쓰는 회사가 많다보니 괜찮을것 같다는 생각이 든다.
+
+이번에 고생하더라도 꼭 해봐야겠다고 생각이 들었던건 기획, 퍼블리셔, 프론트엔드, 백엔드 쪽이 완벽하게 나누어져 진행이 되는 첫 경험이기 때문이다.
+
+지금 정리하는건 HTML, CSS는 기본이지만 Javascript 초보분들을 위한 글이 될것 같다.
+
+> ※ 개인적으로 웹개발 초보자분들이 리엑트로 시작하시는건 절대 추천하고 싶지 않습니다.
+
+## 1. React 시도해보기
+
+공식문서가 아주잘되어 있기에 아래링크대로 진행해서 프로젝트를 만들어보자. 
+
+https://ko.reactjs.org/docs/create-a-new-react-app.html
+
+* CRA(create react app)를 시작해보자.
+* Webpack, Babel등은 나중에 공부해보자.
+
+
+## 2. 기본 파일구조
+프로젝트를 생성하고 나면 아래와같은 폴더구조를 가진다.
+<pre>
+ 프로젝트 이름
+├── README.md          // 나를 읽어라!!
+├── node_modules       // 패키지 모듈 폴더(CRA로 기본적인 react 모듈들이 포함되어있다.)
+├── package.json       // 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
+├── .gitignore         // git에 올리고 싶지 않은 폴더와 파일 설정
+├── public             // 정적파일 폴더
+│   ├── favicon.ico
+│   ├── index.html
+│   └── manifest.json
+└── src                // 소스폴더
+    ├── App.css
+    ├── App.js
+    ├── App.test.js
+    ├── index.cssarrow function
+    ├── index.js
+    ├── logo.svg
+    └── serviceWorker.js
+    └── setupTests.js
+</pre>
+
+프로젝트를 진행하다보면 파일구조를 어떤식으로 관리할까에 대한 고민에 빠지는데
+이것도 공식문서에 잘정리되어 있다.
+
+https://ko.reactjs.org/docs/faq-structure.html
+
+이번에 준비하면서 많은 블로그와 영상을 보면서 한가지 아쉬웠던게 초보들을 위한 자료인데 파일구조에 대한 
+언급이 많이 없었다. 개인적으론 굉장히 중요하다고 생각하는데 말이다.
+
+## 3. Javascript 조금만 더 알기
+변수(let, const, var), if, for, function 이정도 알면 초보라고 생각한다.
+하지만 리엑트를 하기위해서 조금 낯설어 보이는 기능들이 등장하는데 미리 알고 넘어가자.
+조금만 더 알아야되는 이유는 리엑트를 설명하면서 다시 다뤄보겠다.
+
+### 1) Destructuring(구조분해할당)
+이번 포스팅은 날로먹는것 같다. MDN을 참조하자.
+
+https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
+
+### 2) Arrow function(화살표 함수)
+당분간 회는 안먹어도 될듯하다. MDN을 참조하자.
+https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+
+
+> 초보분들에게 리엑트등의 라이브러리를 추천하지 않는 가장큰 이유는 '선언적'인 코딩때문이다. 
+> 처음부터 익숙해지면 좋을수도 있으나 많은 사람들이 그럴수 없다. 대부분 혼란을 겪는부분이 이때문이라 생각한다. 이것에 대해선 
+> 언젠간 다뤄보겠다. 이번 포스팅과 프로젝트는 타의로 프로그램밍을 하고 있는 분과 같이 해야하기 때문에 최대한 '명력적'으로 진행하려 한다.