🤯 파트 2: 혼돈에서 정신 클릭으로: Angular를 현실 세계와 연결하기 (그리고 살아남기)

Source: Dev.to

번역할 텍스트를 제공해 주시면 한국어로 번역해 드리겠습니다.

소개

계속해서… 이제 진짜 혼돈이 시작됐어요 😂
이전 포스트에서는 로그인과 회원가입이 가능한 온라인 프로젝트를 Render에 백엔드, Netlify에 프런트엔드, Railway에 데이터베이스를 두고 운영했어요. 나 행복해. 기뻐. 왜냐하면 바로 여기서 진짜 좋은 부분이 시작되거든요: 앱이 “예쁜 화면”에 머무르지 않고 실제 데이터와 함께 살아가기 시작하는 거죠. “모두 목(mock) 상태”에서 “이제 진짜다”로.

Mock 데이터 만들기

로그인 기능을 구현한 뒤, 나는 핵심인 작업을 했습니다:

• 👉 Mock 데이터를 생성해서 앱에 카드들을 표시할 수 있게 했습니다.

왜? 여기서 @for, @if와 @switch를 마음껏 사용하기 시작했습니다. 처음으로 Angular가 단순히 이상한 이론이 아니라 시각적으로 의미가 생기기 시작한다는 느낌을 받았습니다. 하지만 물론… 그건 거짓이었습니다.

Angular를 실제 백엔드와 연결하기

다음 단계는 명확했습니다:

• 👉 모크(mock) 사용 중단

그리고 여기서부터 내 삶이 복잡해졌습니다. 수업에서 제대로 설명하기 전에 시도해봤어요(전형적인 내가 앞서 나가는 모습 😅).

• 서비스는 어디에 두는가
• 프로바이더는 어떻게 설정하는가
• environments는 어떤 역할을 하는가
• 왜 어떤 것은 컴포넌트에 두고, 어떤 것은 두지 않는가

결과

친구인 그레고리오(ChatGPT)와 여러 차례 싸운 뒤… 동작은 했지만 완전히 이해하지 못했어요.

몇 차시가 지난 뒤, 교수님이 정확히 설명해 주셨습니다:

• 서비스는 어떻게 연결하는가
• 모크를 어떻게 교체하는가
• Angular 프로젝트가 가져야 할 파일은 무엇인가
• 각각의 용도는 무엇인가

그때 나는 “AHHHH 이제 알겠어.” 라고 외쳤습니다. 코드를 다시 검토했죠… 직접 테스트해봤기 때문에. 비로소 내가 무엇을 하고 있었는지 진짜로 이해했습니다. 그 차이는… 엄청났어요.

Formularios reactivos

리액티브 폼에서도 같은 일이 일어났어요. 이미 AI의 도움으로 만든 것이 있었습니다:

• FormGroup
• ReactiveFormsModule
• Validaciones
• Estados como touched, dirty, valid, invalid

하지만 마법 주문을 모른 채 마법을 쓰는 것과 같았고, 교수님이 설명해 주실 때까지는 그렇았습니다.

🧠 뇌 클릭

그래서 나는 이 점을 강조하고 싶어요: AI는 정말 큰 도움이 되지만, 그것이 작동한다는 것과는 별개입니다. 배운 것에 자신을 두고 이해하여 단순화하세요. Keep it simple (하지만 저는 처음에 그걸 무시했어요 😅).

일반적인 오류

내 프로젝트도 여러 개념을 앞서 나가면서 고전적인 실수를 저질렀기 때문에 복잡해졌어요:

• 👉 시작부터 아이디어를 100 % 명확히 하지 않은 것.

페이지, 부모/자식 컴포넌트, 라우트 및 서로 오가는 데이터 사이에서… 정말 쉽게 엉망이 될 수 있습니다.

복잡한 데이터베이스

내 데이터베이스는 너무 정규화되어 있었다. 모든 것이 서로 의존했다. 백엔드에서는 “예쁘게” 보였지만, 문제가 되었다.

양방향 바인딩과 그 놀라운 순간

수업에서 양방향 바인딩을 배웠을 때, 처음엔 전혀 이해 못했어요(진짜). 하지만 저는 고집이 있어요. 몇 시간 후… 갑자기…

• 👉 “이게 바로 내 프로젝트에 이벤트를 만들 때 필요한 거야.”

데이터 타입 때문에 (많은 date, Angular가 화남 😅) 어려움이 있었지만 해냈어요. 며칠 동안 이해 못했던 것이 갑자기 의미가 통할 때… 순수한 마법이죠.

앱의 현재 상태

내 프로젝트는 완벽하거나 아주 깔끔하지는 않지만, 작동합니다. 그리고 그게 나에게는 엄청납니다.

현재 앱은 다음을 가지고 있습니다:

1. 랜딩 페이지

이 모든 것이 다음과 연결됩니다:

• Angular (프론트엔드)
• FastAPI (백엔드)
• Railway의 MySQL (데이터베이스)
• JWT 인증

이 과정에서 가장 현실적인 것

가장 힘들었던 것은 코드를 쓰는 것이 아니었다. 그것은:

• 길을 잃다
• 물건을 부수다
• 무엇을 건드렸는지 모른 채 2 시간 동안 뭔가를 고치기
• AI의 지시를 따르다 더 악화되다
• “작동해야 할” 것이 왜 작동하지 않는지 이해하지 못함

하지만 또한:

• 도움을 요청하다
• 단순함으로 돌아가다
• 교수들이 가르치는 것과 비교하다
• 시도하고, 부수고, 다시 만들다

그리고 가장 중요한 것은:

• 👉 포기하지 않기.

몇 달 전의 나는 이것이 불가능하다고 생각했다. 그게 금값이다 💛

앱 테스트 방법

🚀 이제 앱을 테스트할 수 있습니다 (아직 할 일이 많고 개선할 점도 많아요, 알고 있습니다).

많은 반복, 버그, 리팩터링, 그리고 존재론적 위기 순간들을 겪은 뒤…

Angular 프론트엔드

구경하고 싶다면, 다음 데모 사용자로 로그인할 수 있습니다:

• 사용자: laura.lopez@demo.com

유용한 링크

• 프론트엔드 (실제 앱):
• 프론트엔드 코드:
• 백엔드 코드: