Vue.js로 CRUD 구현하기 - 1강

안녕하세요, 구디사는 개발자 '9Diin' 입니다.

 

오늘부터 Vue.js 자바스크립트 프레임워크를 사용하여 흔히 '투두리스트'라고 불리는 웹 서비스를 한 번 만들어 볼 텐데요. 이전 콘텐츠였던 Open Weather Api를 이용하여 간단한 조회기능을 구현했던 것처럼 디자이너 친구에게 투두리스트 디자인을 부탁했습니다. 굉장히 높은 퀄리티의 투두리스트가 될 것이라 예상이 듭니다.

 

저 역시 아직 개발에 착수한 상태가 아니기 때문에 그리고 경력이 고작 1년밖에 되지 않은 주니어 개발자이기 때문에 어느 부분까지 기능 구현이 가능할지 가늠은 안되지만, 최대한 디자인과 비슷하게 그리고 모든 기능을 구현할 수 있도록 공부하고, 구글링을 해보면서 여러분들께 하나하나 알려드리도록 하겠습니다.

---

1. 개요

우리가 함께 앞으로 만들어 볼 '투두리스트'는 전형적으로 '게시판 만들기'라고 불리는 CRUD, Create 생성 - Read 조회 - Update 수정 - Delete 삭제 기능을 구현해 보도록 하겠습니다. CRUD는 웹이든 앱이든 통틀어 가장 기본이 되는 기능이고, 이 로직을 얼마나 깔끔하고 쉽게 그리고 유지보수하는데 편리하게 코드를 짜는 것을 잘하느냐에 따라 인정을 받느냐 안 받느냐 나뉠 정도로 정말 기본적이지만, 중요한 스킬이라고 생각합니다.

 

그러나 CRUD 기능을 구현하려면 백엔드 기술이 필요하겠죠? 그래서 이번 강의는 총 2개의 파트로 구성해 볼 생각인데요. 한 가지는 제 친구가 파이썬으로 코드를 이미 만들어 놓았습니다. 그 백엔드 코드를 프런트(Front) 코드와 연동하고 사용해서 한 번 개발을 진행해 볼 테고, 다른 한 가지 파트는 제가 직접 Node.js의 라이브러리인 Express.js로 간단한 CRUD 백엔드 코드를 작성해서 연동시켜 보는 시간을 가져보도록 하겠습니다. 

 

https://aws.amazon.com/ko/what-is/restful-api/

RESTful API란 무엇인가? - RESTful API 초보자 가이드 - AWS

---

2. 개발

앞서 말씀을 드렸지만, 이번에도 디자인 시안을 보고 개발을 해볼 텐데요. 실제 현업에서 많이 사용되는 Figma 디자인 툴로 디자인을 진행하였기 때문에 간단하지만, 어떻게 피그마를 보면서 개발을 하는지 보여드리면서 개발을 진행해 보는 방향으로 해보도록 하겠습니다. 그래서 강의 하나하나의 영상시간이 다소 길어질 수 있는 점 양해 부탁드립니다.

 

그리고 당연하게도 이번 콘텐츠 역시 Vue.js 자바스크립트 프레임워크를 사용하여 화면 개발을 진행할 예정이고, 직전 콘텐츠에서 Vuex가 아닌 Pinia를 사용하여 강의를 제작해 달라는 구독자분의 요청이 있으셔서 만약, 상태관리를 하게 될 경우 Vuex가 아닌 Pinia를 사용하여 공식문서를 하나하나 같이 읽어보면서 Store 관리를 진행해 보도록 하겠습니다.

 

추가적으로, 이번 강의 콘텐츠는 강의를 제작하고 있는 시점에서의 제가 알고 있는 모든 스킬을 담아볼 예정인지라 디자인 시안을 보고 어떻게 컴포넌트를 쪼개는지 개발자는 디자이너에게 어떻게 컴포넌트 구조화를 요청해야 하는지 마지막으로 Git 형상관리와 Atomic Design Pattern 방법론을 활용하여 함께 진행보도록 하겠습니다.

 

Git 형상관리와 Atomic Design Pattern 방법론 같은 경우에는 아래 링크를 참조해 주시면 감사하겠습니다.

 

https://techblog.woowahan.com/2553/

우린 Git-flow를 사용하고 있어요 | 우아한형제들 기술블로그

https://brunch.co.kr/@ultra0034/63

Atomic Design

---

3. 들어가기 앞서

저의 강의 콘텐츠를 위해 흔쾌히 멋있는 디자인을 해준 제 친구에게 감사를 표하며 이 글 혹은 이 영상을 보고 계신 여러분들에게 조금이라도 도움이 되었으면 하는 바람입니다.

 

자, 우리는 이제 마음의 준비를 하였으니 저와 함께 이 멋진 서비스를 만들러 가보도록 하죠.

 

Step By Step!!

 

 

https://www.youtube.com/@9diin

9Diin