풀스텍의 큰 언덕 Rails 백엔드 넘어가기

소개

이번 스터디 목표는 프론트보다는 백엔드 구현이 목표였다. 스터디도 벌써 3주차에 들어섰기 때문에, 백엔드 구현능력 확보에 조바심이 났다.

내가 이제까지 기업에서 업무프로세스를 개선(PI)한 후 Smart Process를 구현해 온 방식은 다음과 같다.

  • 사용자 UI(Excel) - VBA - ADO - DB(Access/MSSQL)

사용자가 사용하는 엑셀서식을 DB 테이블에 적합하도록 약간의 클리닉을 거친 후, ADO와 VBA를 통해 DB와 연결시키는 방식이다. 이렇게 하면 사용자들은 거의 하던 그대로 엑셀을 통해 DB와 연결된 프로그램을 이용할 수 있는 이점을 누리게 된다. 기본적으로 CS 방식이지만, DB를 Cloud에 두면 웹 프로그램이 부럽지않다.

하지만 이 방식의 단점도 역시 엑셀이다. 사용자의 눈에는 엑셀 밖에 보이지 않기 때문에, 가치를 평가받지 못하는 것이다.

이번 스터디에서 내가 추구하는 방식은 Rails 프레임워크를 이용해서 사용자의 웹 UI(프론트엔드)가 백엔드를 통해 DB와 연동하는 방식이다. 입코딩을 통해서 이를 이룰 수 있을 것이지만, 나는 내가 직접 백엔드 어프로치를 이해할 수 있기를 원한다. 나같은 비개발자들이 바이브코딩을 통해서 코끼리 다리 더듬기 식으로 프론트엔드까진 잘 구현했어도, 나중에는 꼬이거나 백엔드에서 어려움을 겪는 경우를 많이 듣고 있기 때문이다. 또, 나중에 유지보수를 위해서는 내가 뭘 어떻게 대처해야 하는지를 주도해야 끌려다니지 않을 수 있을 것 같았다.

진행 방법

목표 수준은 내가 테이블을 직접 살펴보면서, 데이터 추가, 삭제, 수정, 정렬 등이 가능할 수 있는 정도까지로 정했다.

DB는 기본적인 SQLite로 하고, 제품을 등록하고 제품 입고량이나 출고량을 입력하면 현재 재고량를 보여주는 기능을 먼저 구현해보기로 했다. 해당 품목의 현재재고수량 이외에 입고량, 출고량, 불량, 폐기수량 등도 확인할 수 있도록 해보고자 한다.

그래서 제품등록테이블과 제품수불테이블을 먼저 만들고, 두 테이블 간의 관계로부터 현재고 검색기능을 View로 구현해보고자 한다.

일은 클로드코드에게 시키되, 만들어진 코드를 일정 수준까지는 내가 이해하고서야 넘어가려고 한다.

이번 주 목표

1. SQLite DB 테이블 생성 (-> 나중에 알았지만 Rails는 SQLite를 기본 Model(DB)로 생성한다!)

- 제품등록(CRUD 기능) : 제품코드, 제품명, 제품Spec

- 제품수불(CRUD 기능) : ID, 입출고일, 제품코드, 제품명, LotNo, 입출구분, 수량, 입출고처, 비고

2. Rails 재고현황 검색 폼뷰 만들기

- 제품재고(R 기능) : CatNo, Description, LotNo, 현재고, 입고, 출고, 불량, 폐기

- 검색어 : 수불일자 기간, 제품명 일부

3. 로그인 기능 추가

4. 달력 기능 추가

다음 주 목표

5. 백엔드 기능 구체적으로 이해

6. DB 고도화(웹DB)

그 다음 목표

7. 보급형ERP에서 API 활용하여 데이터 끌어오기(업로드하기) 자동화

8. Dash Board 기능 추가 (BI: Looker Studio, Power BI)

9. 고객에게 서비스(MVP)

Rails의 M-V-C 패턴 구동방식

Rails의 MVC 패턴은 컨트롤러가 핵심인데, 컨트롤러는 라우터의 규칙에 따른다.

1. 라우팅 (config/routes.rb)

서버가 사용자의 요청을 받으면 가장 먼저 라우터(Router)가 이를 처리하는데, 라우터는 요청된 URLHTTP 메소드 (GET, POST, PUT, DELETE 등)에 따라 요청을 처리할 특정 Controller의 특정 Action으로 연결(매핑)한다. 라우터 설정 파일은 config/routes.rb이다.

routes.rb 파일에 정의된 규칙(예: get '/posts', to: 'posts#index')에 따라 요청을 지정된 Controller/Action으로 전달한다

2. 컨트롤러 (app/controllers)

라우터로부터 요청을 전달받은 컨트롤러(Controller)는 요청을 처리하는 역할이다. 라우터로부터 지정받은 Action(메소드)를 호출하여, 데이터 조회, 생성, 수정, 삭제 등 필요한 데이터 작업을 Model에게 요청하거나 사용자가 입력한 Parameter를 처리하고, 최종적으로는 해당 Action 이름과 일치하는 View 템플릿으로 렌더링(사용자가 볼 수 있는 화면으로 출력)하도록 지시한다. (Action이란 하나의 요청을 처리하는 단위의 메소드인데, 루비에서는 이를 액션이라고 부른다)

3. 뷰 (app/views)

뷰(View)는 Controller의 지시에 따라 사용자가 최종적으로 보게 될 화면을 생성한다. 즉 HTML, CSS, JavaScript 코드로 변환하여 사용자의 웹 브라우저로 전송한다

Model 구동 방식

앱 디렉토리로 이동한 뒤 다음을 입력하면 모델이 생성된다.

bundle exec rails g model Post(모델이름) title:string  content:text

모델이 생성되었는 지는 다음으로 알 수 있다

1. app/models/post.rb - Post 모델 파일(데이터 조작을 담당)

2. db/migrate/20251125161800_create_posts.rb - 데이터베이스 마이그레이션 파일(데이터베이스 구조(스키마)를 정의하고 관리)

3. test/models/post_test.rb - 테스트 파일(모델 기능의 정확성을 검증)

모델이 생성되었으면, 마이그레이션을 수정확인하여 테이블을 생성한다.

rake db:migrate

- db의 구조를 변경하는 마이그레이션 수행. 즉 테이블을 생성

한국어가 포함된 웹페이지 스크린샷
Rails DB 페이지의 스크린샷
테이블 게시물 페이지의 스크린샷

이렇게 DB 접근방식을 알아보고 나서, 생각만 하던 재고관리현황 백앤드 구현에 나섰다

DB 중심으로 프로젝트 개발

  • AI에게 요청해서 핵심이 되는 두 개의 테이블을 다음과 같이 설계했다.

    한국어 - 중국어 - 한국어 - 중국어 - 한국어 -
  • 두 테이블 간의 관계

    한국어 텍스트 편집기의 스크린샷
  • 이제 프로젝트를 새로 생성한 다음

rails new testdb
  • 설계한 대로 제품정보테이블과 수불(거래)테이블을 만들어줬다.

    rails g model Product name:string code:string:uniq description:text unit:string 
    rails g model Transaction product:references transaction_type:string quantity:integer transaction_date:date note:text
  • 마이그레이션을 실행하고

rails db:migrate
  • 제품정보테이블과 수불(거래)테이블의 관계를 설정해줬다. 참고로 수불(거래)유형은 입고, 출고, 불량, 폐기로 구분하기로 했다.

has_many :transactions, dependent: :destroy
  • 컨트롤러 및 뷰를 구현했다. 다음은 재고현황 뷰를 구현하는 컨트롤러 내용이다.

      def index
        @products = Product.all
        @total_products = @products.count
        @products_with_stock = @products.select { |p| p.current_stock > 0 }.count
        @products_out_of_stock = @products.select { |p| p.current_stock <= 0 }.count
        
        @recent_transactions = Transaction.by_date.limit(10)
      end
  • 마지막으로 라우터를 설정하고 프로젝트를 마무리했다.

# 루트 경로
root 'dashboard#index'
  
# 대시보드 (재고현황)
get 'dashboard', to: 'dashboard#index'

결과

말로 구현된 코드를 조금씩만 수정해서 생각하던 것 보다 더 잘 구현할 수 있었다. 여기에 디자인 요소와, 편의기능을 추가해주면 얼추 될 것 같다.

한국사이트 스크린샷
한국어가 포함된 웹페이지 스크린샷
한국사이트 스크린샷
한국 달력의 스크린샷
한국어가 포함된 웹페이지 스크린샷
한국사이트 스크린샷

앞으로의 계획

이번 연구의 의의는 내가 DB 구동 원리와 코드를 많은 부분을 이해했다는 것이다. 백엔드 DB 구현은 이렇게 하면 될 것 같다는 자신감이 들었다. 처음 목표를 다 완수한 것도 아니고 재고관리 중 최소한의 기능만 넣은 상태지만, 큰 산하나는 넘은 듯이다.

이제 백엔드는 연습해 보았으니 Project Plan, 기술스텍, CSS 프레임워크, PRD부터 다시한 번 시작해볼 생각이다.

2
2개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요