《Do it! 커서로 시작하는 AI 코딩 입문》 5일 완독 챌린지 3일 차 후기 START!🔥
커서를 활용해 AI 코딩을 하는 것에 빠져버린 이지스퍼블리싱 마케터입니다. 프롬프트를 잘 입력하는 것만으로 Todo list를 만들고, 포트폴리오 웹 사이트를 만들어 봤던 경험이 너무 재미있었어요.
👉🏻 2일 차 학습 내용 참고
3일 차에는 무엇을 공부했는가?
1일 차에는 AI 코딩과 프롬프트에 대해 공부했고, 2일 차에는 커서를 활용해 간단한 프로그램을 만들며 기능을 익혔었는데요. 3일 차에는 웹 사이트를 본격적으로 만들기 전, 웹의 구성 요소와 웹의 동작 방식에 대해 공부해 보았습니다.
커서가 코드를 작성해 주기는 하지만!! 웹의 구조와 동작을 이해해야만 웹 사이트를 제대로 만들 수 있기 때문에 꼼꼼히 공부하려 노력했습니다. 정말 다행인 건 저 같은 초보자도 쉽게 이해할 수 있도록 책에 설명이 정말 잘 되어 있었어요. 사실 처음엔 제가 내용을 이해할 수 있을지 겁을 잔뜩 먹었었는데 친절한 책 덕분에 지금은 아주 잘 이해했답니다😌
📖3일 차 커리큘럼
- 웹의 구조와 동작 이해하기
- 웹에서는 정보를 어떻게 주고받을까?
- 웹 개발의 4단계 살펴보기
- 웹 앱을 개발할 때 사용할 기술
웹 구조와 동작 이해하기
웹을 구성하는 요소 정리
웹 사이트의 종류로는 정적인 웹 사이트(=변하지 않는 웹 사이트)와 동적인 웹 사이트(=사용자의 입력에 따라 동작이 바뀌고 정보를 저장하거나 불러오는 기능을 갖춰야 하는 웹 사이트)가 있습니다. 정적인 웹 사이트는 HCJ 만으로 만들 수 있지만 동적인 웹 사이트는 프런트엔드 기술 외에도 백엔드 기술이 필요합니다. 우리가 자주 사용하는 웹 사이트는 대게 동적인 웹 사이트이며, 아래와 같은 구성 요소로 이루어져 있습니다.
📌웹 구성 요소
1) 프런트엔드: 사용자가 실제로 보는 화면
2) 백엔드: 실제로 일을 처리하는 역할
3) API:서로 다른 부서 간의 연락책(클라이언트와 서버가 원활하게 소통하기 위해 사용하는 것)
4) 데이터베이스: 정보를 저장하고 꺼내 오는 역할
《Do it! 커서로 시작하는 AI 코딩 입문》 의 ‘알아 두면 좋아요!’ 코너를 통해 구성 요소의 기본 개념은 물론, 추가적인 내용까지 함께 익힐 수 있어 좋았습니다.
웹의 동작 과정
위에서 설명한 웹 구성 요소는 아래 이미지와 같이 동작합니다. 책에서는 커피 주문 앱을 예로 들어서 설명하고 있습니다.
그림으로 설명해서 그런지 이해가 더욱 쉬웠습니다.
웹에서는 정보를 어떻게 주고 받을까?
네트워크 핵심 개념까지 살펴보다
책을 읽으며 또 좋았던 점은 웹 앱 구성 요소와 동작 원리만 알려주는 것이 아니라 이를 이해하기 위해 선수로 알아야 할 네트워크 핵심 개념까지 설명해 주고 있는 것입니다.
클라이언트와 서버, 요청과 응답은 물론 HTTP/HTTPS 프로토콜, IP&DNS 서버, URL를 배웠습니다. 항상 웹 사이트 링크를 볼 때 마다 HTPP와 HTTPS의 차이가 궁금했었는데 이번 기회게 알게 되었네요!(평소에 궁금했던 점이 해소가 되어 기억에 많이 남는 것 같습니다.)
웹 개발의 4단계
제가 2일 차에 만들었던 Todo list와 포트폴리오 웹 사이트는 정적인 웹 사이트라 간단히 만들 수 있었지만 앞으로 실습하게 될 웹 사이트는 여러 단계를 거쳐 만들 수 있습니다.
1단계: 앱 기획
사실 어떤 웹 앱이든 기획이 중요하다고 생각합니다. 목적이 분명하면 개발 방향도헤매지 않고 잘 잡아갈 수 있기 때문이죠.
이 단계에서는 이런 일을 합니다.
- 앱 구상
- 기술 스택 정하기
- PRD(제품 요구 사항 문서) 작성하기
2단계: 프런트엔드 개발
사용자가 보는 화면 즉, 사용자가 클릭하거나 입력할 수 있는 인터페이스를 만드는 단계인 프런트엔드 개발입니다.
이 단계에서는 이런 일을 합니다.
- 구현할 기능 정의하기
- 와이어프레임 그려 보기
- 프런트엔드 개발 환경 만들기
- 화면 개발하기
- 테스트하고 개선하기
여기까지 웹 앱 개발 과정을 살펴보며 '《Do it! 커서로 시작하는 AI 코딩 입문》 이 개발자뿐만이 아니라 기획자에게도 많은 도움이 되겠다~'는 생각이 들었습니다. 기획한 내용을 커서로 구현해 실제 화면을 확인할 수 있기 때문입니다.
3단계: 백엔드 개발
백엔드 개발은 프런트엔드 개발 단계에 비해 조금 복잡합니다.
- 데이터 모델 설계하기
- 개발 환경 만들기
- 서버 만들기
- 데이터베이스 만들고 연결하기
- API 개발하기
- 테스트하고 개선하기
이 내용을 모두 실행해야 합니다.
4일 차에는 커서로 커피 주문 웹 앱을 만들어 보는데 백엔드 개발 내용을 보니 걱정이 또 다시 스멀스멀 올라오는 중입니다.😱
4단계: 앱 배포
마지막 배포! 개발은 배포까지 완벽하게 끝내야 끝납니다. 아 근데 수정에 수정이 있을 거라 배포했다고 해서 끝난 건 아니긴 하죠?
동적인 웹 사이트는 프런트엔드+백엔드+데이터베이스가 모두 함께 작동해야 해서 정적인 웹 사이트에 비해 배포 과정이 복잡하지만 아래 단계를 차근차근 따라가면 그리 어렵지는 않다고 합니다.
- 배포 플랫폼 선택하기
- 데이터베이스 준비하기
- 백엔드 배포하기
- 프런트엔드 배포하기
- 연동 확인하기
이렇게 웹 구조와 동작을 이해하고, 웹 개발의 4단계를 차례차례 살펴보니 개발자분들이 정말 대단하게 느껴집니다. 하나의 웹 사이트를 만드는 데에도 고려해야 할 사항이 정말 많더라고요.
그리고 또 한 편으로는 이런 기본 개념을 책에서 학습했으니 어서 직접 웹 앱을 만들어보고 싶다는 생각이 들었습니다. 저는 책에 나오는 내용을 바탕으로 커서를 활용해 커피 주문 앱을 만들어 볼 예정입니다.
그럼 커피 주문 웹 앱 제작 후기로 또 다시 돌아오겠습니다.
