오늘은 오전에는 미니 프로젝트 마무리를 진행했다.
BootStrap card-grid 기능을 이용했는데 2개 있을 때는 크기가 찌그러지는 문제가 생겼다.
신경이 많이 쓰였지만 팀원들의 도움으로 해결했다.
card style에 width height를 100%로 하는 것으로 해결했지만 grid 자체에 제공하는 기능이 있지않을까 싶다. 이 부분에서는 더 알아보고싶지만 일단 백엔드 공부에 대해 더 집중을 해야될 것같다.
발표 이후 KPT를 진행하라했는데 처음듣는 단어라 생소했다. Keep, Problem, Try의 앞글자 씩 따서 나온 것으로 보인다.
프로젝트를 복기하듯이 팀원들과 생각해보았고 의사소통이 잘 안된 문제가 있어서 앞으로 있을 팀 프로젝트를 할 때는 힘들 수 있겠지만 대화를 많이 시도해야된다는 것을 느꼈다.
웹 특강이 오후 7시부터 있어서 들었다.
그동안 찾아보려했고 정리가 잘 안되어 추상적이던 개념들을 정리한 것같아 도움이 많이 되었다.
아래로는 특강 내용을 어느 정도 정리한 것이다.
웹 기초 정리
웹 서비스는 웹이라는 공간에서 제공되는 서비스
그 서비스를 설계/제작/관리하는 것이 웹 서비스 개발자이다.
서비스를 제공하는 주체가 서버.
웹 공간의 클라이언트가 요청하는 것은 브라우저를 가진 누구든지 요청가능.
초라한 노트북이라도 인터넷에 연결되어있고 웹서버로 기능할 수 있도록 프로그래밍을 해놓는다면 웹서버이다.
AWS, Vercel, Netlify
사용 이유?
과금제, auto scaling, 물리적인 한계 때문에
클라이언트
요청하는 주체, 브라우저라는 도구를 활용하여 웹서버에 요청
서버
요청 처리, 요청에 대한 응답을 준다
프론트엔드와 백엔드는 프론트앤드가 클라이언트고 백엔드가 서버가 아닌 상대적으로 달라질 수 있다.
웹서버의 주요기능은 정적 페이지 제공, API 제공이다.
API
여러 소프트웨어 간에 정보나 기능을 공유하게 해주는 중간 매개체
일종의 규약(약속)
한 프로그램이 다른 프로그램의 기능을 사용하거나 정보를 가져올 수 있음
API는 클라이언트의 요청에 따라 동적으로 데이터나 정보를 제공
주로 JSON이나 XML로 응답을 반환 -> XML로 정보를 받으면 파서로 변환하는 편
프론트엔드와 백엔드는 각각 구성하여 각각 배포하는 방법 -> 웹서버 2개
리액트 프로젝트를 만들어서 Vercel에 배포,
스프링, 노드 프로젝트를 만들어 ec2등으로 별도 배포
페이지 전달 : 리액트, API 제공 : 스프링
프론트엔드와 백엔드를 동시에 구성하는 방법 -> 웹서버 1개
프로젝트에 리액트와 스프링 폴더가 각각 존재하여 한번 배포
장점 : 배포와 관리가 간단, 통신 오버헤드가 적거나 없다
단점 : 동일한 리소스를 공유하기 때문에 성능 이슈가 발생할 수 있다, 스케일 아웃이 어려울 수 있다.
백엔드만 구성해서 배포하는 방법 웹서버 1개
백엔드에서 정적 페이지와 API를 함께 제공
페이지 전달 : 스프링(or node)
API 제공 : 스프링(or node)
프론트엔드만 구성하여 배포하는 방법 웹서버 1개
페이지 전달 : 리액트
API 제공 : 없거나 Next.js를 사용하는 경우
장점 : 백엔드 없이 순수한 클라이언트 사이드 렌더링을 활용할 수 있다.
단점 : 복잡한 기능을 구현하기 위해서는 별도의 백엔드 서비스가 필요하다. SEO 최적화를 위해 서버 사이드 렌더링이 필요한 경우 별도의 설정 및 구성이 필요하다.
예시로는 포트폴리오 웹사이트 같은 것이 있다.
