[FLY AI - 스터디] React와 Node.js를 활용한 실습 (End)

React와 Node.js를 활용하여 간단한 실습을 하고 싶다면?

 

 이번 글은 SKT FLY AI 스터디와 관련해서 React와 Node.js를 활용한 실습에 관한 글입니다. 일단, 저희가 기본적으로 '코딩 알려주는 누나'를 통해서 기본 지식을 쌓았는데, 이걸로는 부족하다는 느낌을 받아서 추가적인 유튜브 강의를 찾아서 다른 실습을 진행하고자 합니다. 이번 강의까지만 완료하면 이제부터는 저희 앱 개발과 관련된 기능들을 구현하기 위한 미션을 프론트엔드를 담당한 친구에게 받아서 수행하고자 합니다. 참고로 실습은 유튜버 나동빈님의 "React와 Node.js를 활용한 고객 관리 시스템 개발 강의"를 통해 구현되었음을 말씀드립니다. 

 

 

---

• 프론트 : React
• 백엔드 : Node.js
• DB : MongoDB

강의 목록

내 용	수 강 일
1강. Create React App으로 리액트 프로젝트 시작하기	2024.01.24
2강. Visual Studio Code를 이용한 소스코드 작성	2024.01.24
3강. 깃 허브를 이용해 소스코드 관리하기	2024.01.24
4강. 고객 컴포넌트 만들기	2024.01.24
5강. 고객 컴포넌트 구조화하기	2024.01.24
6강. Material UI를 적용하여 고객 테이블 디자인 하기	2024.01.25
7강. Node.js Express 서버 개발 환경 구축하기	2024.01.26
8강. Node.js Express에서 REST API 구축하기	2024.01.26
9강. React의 라이프 사이클 이해 및 API 로딩 처리 구현	2024.01.30

 

 

내 용	수 강 일
10강. Create React App으로 리액트 프로젝트 시작하기	2024.01.30
11강. Visual Studio Code를 이용한 소스코드 작성	2024.01.30
12강. 고객 추가 양식 구현 및 이벤트 헨들링	2024.01.30
13강. Node.js Express에서 파일 업로드 요청 및 DB에 데이터  삽입	2024.01.31
14강. 부모 컴포넌트의 상태 변경을 통한 고객 관리 시스탬 개발	2024.01.31
15강. 고객 정보 삭제 기능 구현하기	2024.01.31
16강. Material UI 모달 디자인 구현하기	2024.02.01

 

 

---

결과물

 

1. 첫 화면

 

 

2. 고객 추가하기

 

 

3. 고객 추가 이후 페이지

 

4. 고객 정보 삭제

 

 

5. 삭제 이후 페이지

 

 

6. DB 페이지

 

---

 

마무리

 여기까지 나동빈님의 "React와 Node.js를 활용한 고객 관리 시스템 개발 강의"에 대한 목록입니다. 생각보다 강의가 길지 않고 react나 Node.js를 구현하는 것이 처음이신 분들 혹은 강의료를 지불하는 것이 부담스러운 분들에게 추천드립니다. 일단 저같은 경우는 시간이 그리 많지 않기 때문에 서둘러서 강의를 팍팍 들어보고 얼른 깃허브에 올려보아야겠습니다. 그럼 다들 화이팅하시고~ 이번 글은 여기까지 마무리하도록 하겠습니다. 

 

링크

GitHub : https://github.com/Muns91/The-study-for-full-stack--SKT-FLY-AI-

GitHub - Muns91/The-study-for-full-stack--SKT-FLY-AI-: This repository stores code for full-stack projects.