728x90
반응형
웹 개발을 하기 위해 필요한 기술들을 한눈에 담아보려고 클로드에게 정리해달라고 했다. 마치 여러 명의 직원들이 각자 맡은 일을 하면서 하나의 회사를 운영하는 것처럼 모든 기술이 엮여있다. 기술마다 트랜드가 있겠지만, 우선 초보자들도 쉽게 이해할 수 있는 수준으로 웹 사이트를 만들기 위해 필요한 대표적인 기술들에 대해 서로 상관관계를 적어보았다.
- 프론트엔드 (사용자가 보는 부분):
- React: 레고 블록처럼 웹사이트의 부품들을 만들어서 조립할 수 있게 해주는 도구예요. 예를 들어, 인스타그램의 게시물 하나하나가 다 React로 만든 부품이에요.
- Redux: React로 만든 부품들이 서로 정보를 주고받을 때 사용하는 우체통 같은 거예요. 모든 정보를 한 곳에 모아두고 필요한 부품에게 전달해줘요.
- Bootstrap: 미리 만들어진 예쁜 버튼, 메뉴 등을 쉽게 가져다 쓸 수 있게 해주는 도구예요.
- Sass: CSS(웹페이지 꾸미기)를 더 쉽고 깔끔하게 작성할 수 있게 해주는 도구예요.
- 백엔드 (사용자가 보지 못하는 서버 부분):
- Node.js: 컴퓨터랑 대화할 수 있게 해주는 프로그램이에요. 웹사이트의 뒤에서 일하는 직원 같은 거예요.
- MongoDB: 정보를 저장하는 창고예요. 예를 들어, 사용자들의 아이디, 비밀번호, 게시물 같은 것들을 보관해요.
- Redis: 자주 쓰는 정보를 임시로 저장해두는 작은 메모장 같은 거예요. 매우 빨리 정보를 가져올 수 있어요.
- 통신:
- Apollo: React와 서버가 서로 대화할 때 사용하는 전화기 같은 거예요.
- 서버 관리:
- Docker: 프로그램을 상자에 담아서 어떤 컴퓨터에서든 똑같이 돌아가게 해주는 도구예요.
- Kubernetes: 여러 개의 Docker 상자들을 관리하는 관리자예요.
- AWS: 인터넷에 있는 커다란 컴퓨터들을 빌려주는 서비스예요.
- Nginx: 웹사이트에 찾아오는 손님들을 안내하는 안내원 같은 거예요.
상관관계:
- 프론트엔드 관계:
- React로 만든 웹사이트는 Redux로 정보를 관리해요
- Bootstrap과 Sass로 웹사이트를 예쁘게 꾸며요
- 백엔드 관계:
- Node.js가 MongoDB와 Redis에서 정보를 가져와서 처리해요
- Apollo가 React와 Node.js 사이에서 정보를 전달해줘요
- 서버 관리 관계:
- Docker로 만든 프로그램들을 Kubernetes가 관리해요
- AWS의 컴퓨터에서 이 모든 것들이 돌아가요
- Nginx가 사용자들의 요청을 적절한 프로그램으로 안내해줘요
이렇게 모든 기술들이 서로 도와가면서 하나의 완성된 웹사이트를 만들어진다. 마치 여러 명의 직원들이 각자 맡은 일을 하면서 하나의 회사를 운영하는 것처럼, 프론트엔드는 사용자들이 보는 화면을, 백엔드는 데이터 처리를, 서버 관리 도구들은 이 모든 것이 안정적으로 운영될 수 있도록 지원하면서 우리가 매일 사용하는 웹사이트가 완성된다. 하나씩 헤쳐나가보자. ㅎㅅㅎ
728x90
반응형