[Project] 리액트 게시판 구현 #1 (툴 소개)

 

글을 작성하기 전에, 저는 html, css만 조금 만져 보고, 전체적으로 만져본 경험이 없습니다.

공부해보기 위해 게시판을 혼자 구현해 봐야겠다는 생각을 했고,
그 발자취를 블로그에 남기려 합니다.

코드를 잘 짜지 못해, 코드가 다소 난잡하고 쓸데없는 코드들이 들어 있을 수 있습니다!

 

---

- 툴을 정하게 된 계기

 

게시판을 구현하기 위해서 어떤 툴을 사용해 보아야 할 지 많이 고민을 해보았습니다.

 

대학교 프로젝트에서 웹사이트를 디자인쪽만 만져 보았었는데, 프로젝트를 같이 진행한 팀원이

 

어느정도 툴에 대한 이해와 좋은 툴을 추천해주어, 툴을 고민끝에 정하게 되었습니다.

 

---

제가 쓰고자 하는 툴은,

React,    Express.js,    MySQL

 

---

[ React ]

 

Facebook에서 주도하여 개발한 웹 어플리케이션의 UI를 효과적으로 구축하기 위해 사용되는

JavaScript 기반 라이브러리이다.

 

다른 라이브러리들과 함께 사용할 수 있어 효율적인 라이브러리라고 할 수 있다.

 

React 자체는 프레임워크라고 불리는 기준인 라우팅, 상태관리 기본 제공을 충족하지 못하기에

'라이브러리' 이지만, React의 생태계는 프레임워크이다.

 

---

[ React 특징 ]

 

1. 선언적(Declarative)이다.

=> 리액트는 대화형 UI를 작성하기 좋다. 데이터가 변경되었을 때 효율적으로 랜더링이 수행 가능하다.

 

 

2. 컴포넌트 기반(Component-based)이다.

=> 캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있다.

 

 

3. 한 번 배워서 어디에서나 사용하기(Learn Once, Write Anywhere)

=> 기존 소스를 불필요하게 재작성할 필요 없이, 새 기능을 개발할 수 있다.

      Node 서버에서 랜더링을 할 수도 있고, 온라인 웹에서도 사용이 가능하다.

      React Native를 사용하면 모바일 앱 또한 만들 수 있다.

 

---

[ React 장점 ]

 

1. React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.

2. Component 하나로 여러 로직이 하는 행동을 다 관리할 수 있다. ( view 역할 담당 )

3. 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능을 지원한다.

4. UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.

5. 다른 프레임워크나 라이브러리와 병행해서 사용이 가능하다. 또한 확장성도 좋다.

 

---

[ React 단점 ]

 

1. IE8 이하 버전은 지원하지 않는다.

2. view 이외의 기능은 직접 구현하거나 라이브러리를 사용하여 구현해야 하므로 JavaScript 배경지식이

    필수적으로 필요하다. 

3. 데이터 모델링, 라우팅, Ajax 등 기능 지원이 되지 않는다.

4. 로딩 시간이 길다.

5. 웹의 궁극적 지향점과 다소 동떨어져 있다.

    웹의 핵심은 모든 것을 streaming하고, 페이지들은 HTML 태그를 내포하고

    가벼운 response만 브라우징하는 것이 특징이다.

 

    리액트는 사이트에 필요한 자바스크립트를 처음에는 공백 페이지를 띄우며 다운로드한다.

    다운로드 이후에는 다시 리소스를 다운하지 않아도 되지만, 처음에 보이는 것이 없는게 차이다.

 

---

[ Express.js ]

 

Express.js, 또는 간단히 익스프레스(Express)는 Node.js를 위한 웹 프레임워크의 하나로,

MIT 허가서로 라이선스되는 Free-Open software로 출시되었다.

 

Express.js는 웹 어플리케이션, API 개발을 위해 설계되었다.

 

Node.js의 사실상의 표준 서버 프레임워크로 불리고 있다.

 

---

[ Express.js 특징 및 장점 ]

 

1. 개발자들에게 개발 규칙을 강제하여 코드 및 구조의 통일성을 향상시킨다.

 

2. 웹 서버를 빠르게 구현하기 위해 개발 시 구조에 대한 자유도가 높다.

 

---

 

[ MySQL ]

 

세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터베이스 관리 시스템(RDBMS)이다.

 

다중 스레드, 다중 사용자 형식의 구조질의어 형식의 데이터베이스 관리 시스템으로,

오라클이 관리 및 지원하며 이중 라이선스가 적용된다.

 

---

[ MySQL 특징 ]

 

1. SQL에 기반을 둔 RDBMS 중 하나이다.

 

2. 작고 빠르다.

 

---

[ MySQL 장점 ]

 

1. MySQL 서버는 일반적으로 PostgreSQL보다 빠르다.

    ( 쿼리 캐시 기술을 통해 read-only-site에 대해 최선의 성능 발휘 )

2. 많은 API를 개발 언어에 제공하고 있다.

3. Multi-Thread : Context switching과 공용자원 접근 속도가 빠르다.

4. 백업이 편리하다. 테이블 당 파일 하나의 storage를 갖는다.

 

---

[ MySQL 단점 ]

 

1. 트랜잭션 지원이 완벽하지 않다.

2. 사용자 정의 함수(UDF)의 사용이 쉽지 않고 유연하지 못하다.

3. 다중 테이블에 update가 쉽지 않다.

 

---

[ 마치며.. ]

 

위의 내용들을 통해, 쓰려고 하는 React, Express.js, MySQL의 특징과 장단점에 대해 알아보았습니다.

 

엄청나게 많은 툴들이 있지만, 주변에서 사용해보고 익숙한 툴들을 고르게 되었습니다.

 

서툴겠지만, 좋은 게시판을 만들어 보도록 열심히 코딩하겠습니다.

 

---

이미지 출처 : https://images.velog.io/images/jini_eun/post/107f5cfb-e97c-4c4c-b997-06098062e5b3/image.png
이미지 출처 : https://velog.velcdn.com/images%2Fpotter%2Fpost%2F650e3b96-854f-4b9b-b3c8-b5c13ed4334d%2Fimage.png
이미지 출처 : https://hiseon.me/wp-content/uploads/2018/11/mysql-logo.png

참고 문헌https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC)
참고 문헌 : https://ko.wikipedia.org/wiki/Express.js
참고 문헌 : https://ko.wikipedia.org/wiki/MySQL
참고 문헌 : https://velog.io/@potter/TIL-express
참고 문헌 : https://89-02-07.tistory.com/131