MVC : How to Structure your App

프로젝트 및 파일 구조를 잡는 방법들에 대해 정리하였습니다.

 

---

< MVC: Model, View, Controller >

MVC is short for Model, View, and Controller. MVC is a popular way of organizing your code.
The big idea behind MVC is that each section of your code has a purpose, and those purposes are different.

MVC gives you a starting place to translate your ideas into code, and it also makes coming back to your code easier, since you will be able to identify which code does what.

---

: What is MVC ?

1. Model: stores & manages data.
   Often a database. Model code typically reflects real-world things. This code can hold raw data, or it will define the essential components of your app. For instance, if you were building a To-do app, the model code would define what a “task” is and what a “list” is – since those are the main components of a todo app.
2. View: Graphical User Interface.
   View code is made up of all the functions that directly interact with the user. This is the code that makes your app look nice, and otherwise defines how your user sees and interacts with it.
3. Controller: Brains of the application.
   The controller connects the model and view. The controller converts inputs from the view to demands to retrieve/update data in the model. The controller receives input from view, uses logic to translate the input to a demand for the model, the model grabs the data, the controller passes data from the model back to the view for the user to see in a nice display.

---

: Separation of Concerns

&amp;amp;amp;amp;amp;lt; Web App as a MVC &amp;amp;amp;amp;amp;gt;

You can think of a web application as a Model View Controller design. MVC is popular in web applications, one of the reasons is because responsibilities are divided between the client & server.

• A team might have a designer, engineer, and database architect. Separation of concerns means each team member can work on their piece at the same time.
• Developers can fix a bug in one piece of code, without having to check out the other pieces of code.

---

 

Example : A To-do list app. This app will let users create tasks and organize them into lists.

1. The Model might define what a “task” is and that a “list” is a collection of tasks.
2. The View code will define what the todos and lists looks like, visually. The tasks could have large font, or be a certain color.
3. The Controller could define how a user adds a task or marks another as complete. The Controller connects the View’s add button to the Model, so that when you click “add task,” the Model adds a new task.

 

Article : MVC Architecture

MVC Architecture in 5 minutes: a tutorial for beginners

 

---

< Node.js >

Article : MVC Architecture

Bulletproof node.js project architecture 🛡️

 

Documentation : Express application generator tool

Express application generator

--> like Create-React-App

 

---

< React >

Article : React - File Structure

File Structure – React

 

Article : React Folder Structure in 5 Steps

React Folder Structure in 5 Steps [2021]

 

Documentation : Create React APP

 

Create a New React App – React