예외 처리

04. 개인 포트폴리오 배포하기

• Deployment드디어 배포합니다! • 어떻게 배포할 것인가? 여러 가지 후보군이 있었고, 결국 Vercel로 배포하는 것을 선택했습니다. 이유는 다음과 같습니다. Vercel은 Next.js의 개발사이기에 배포 플랫폼 중에서 가장 최적화가 잘 되어있습니다.배포하는 과정이 쉽고 배포 이후 관리도 간편합니다. 기본적인 배포만 한다면 무료입니다. [Vercel] Next.js 프로젝트 배포하기 [Vercel] Next.js 프로젝트 배포하기• Vercel를 배포 플랫폼으로 선택한 이유 가장 쉽고, 무엇보다 무료입니다. (기본적인 배포만 하는 경우) 그리고 Vercel은 Next.js의 개발사이기 때문에 최적화가 잘 되어있습니다. Next.js 프로젝트를unhandled.tistory.com 자세..

들어가기 전에 다음 과정은 매우 간단한 Next.js App Router 프로젝트를 배포하는 과정입니다. AWS 가입 과정, 탄력적 IP연결, HTTPS설정, 도메인 등록, Docker 사용, 환경 변수 관리 등의 내용은 이 글에 포함되지 않았습니다. 이번 배포를 시도하는 이유 간단한 프론트엔드 프로젝트를 굳이 EC2로 배포할 필요가 있는가? 라는 의문이 들 수밖에 없다고 생각합니다. 이번 EC2 배포의 배경에는 3가지 이유가 있습니다. 첫 번째 이유원래 배포를 Vercel로 했었습니다. 배포과정이 쉽고 무료였기에 편했죠. 하지만 배포나 인프라 관련 학습을 할 수 있는 부분이 없다고 느껴졌습니다. 그래서 AWS라는 또 다른 배포 플랫폼에 관심을 가지게 되었습니다. 이전 팀 프로젝트에서 인프라 담당 팀원..

• 왜 AWS Amplify로 배포했나요? 전 원래 개인 프로젝트 배포할 때 간편하고 쉬운 Vercel을 사용했습니다. 그런데 배포 과정이 너무 간단하다는 것은 배포나 인프라 관련 지식을 배울 수 있는 부분이 적다는 것을 의미합니다. 한 번쯤 AWS를 사용해보고 싶었는데 다른 방식(EC2, ECS 등) 학습해야 하는 부분이 많다고 해서 AWS를 통한 배포를 가장 부담 없이 경험해 볼 수 있는 AWS Amplify를 선택했습니다. • 대상 독자 (AWS 가입 과정은 포함하지 않습니다.) 간단한 Next.js 프로젝트를 AWS Amplify로 배포하고자 하는 개발자. 이 과정은 "간단한 프로젝트"를 배포하는 과정입니다. (배포하는 프로젝트는 App Router 기반의 프로젝트입니다.) • 배포..

• Vercel를 배포 플랫폼으로 선택한 이유 가장 쉽고, 무엇보다 무료입니다. (기본적인 배포만 하는 경우) 그리고 Vercel은 Next.js의 개발사이기 때문에 최적화가 잘 되어있습니다. Next.js 프로젝트를 배포할 때 Vercel은 가장 편하고 적절한 선택지가 되어줄 수 있습니다. • 대상 독자 간단한 Next.js 프로젝트를 Vercel로 배포하고자 하는 개발자. 이 과정은 "간단한 프로젝트"를 배포하는 과정입니다. (배포하는 프로젝트는 App Router 기반의 프로젝트입니다.) • 배포 과정 1. 메인 홈페이지에서 Start Deploying 버튼을 눌러줍니다. 2. 배포할 Git Repository가 있는 Git provider 플랫폼을 선택합니다. 저는 Gith..

• Projects - Development 피그마 프로토타입을 토대로 Projects 섹션을 구현합니다. 저의 개인 프로젝트와 전에 진행했던 팀 프로젝트에 대한 정보를 제공하는 섹션입니다. • 구현 화면 HTML 마크업과 CSS 구현(반응형까지)을 완료한 화면입니다. 데스크톱 - 큰 모니터 데스크톱 - 작은 모니터 (breakpoint : 1440px)(큰 모니터와 비교하자면 반응형 부분은 동일하며 좌우 여백의 크기만 다릅니다.) 태블릿 (breakpoint : 1024px) 모바일 (breakpoint : 768px) CSS 스타일링과 디자인 부분에서는 지속적으로 개선해 나갈 예정입니다. • 반응형 웹 구현 쉽지 않았습니다. 그래도 CSS 그리드와 친해질 수 있는 기회였습..

• Tools - Development 피그마에서 제작한 프로토 타입을 참고하여 Tools 섹션을 구현하는 단계입니다. 구현사항의 대부분이 이전 Skills 섹션과 동일하기 때문에 이번 포스팅은 매우 짧습니다. • 구현 화면 Tools 섹션을 구현한 화면입니다. 이전의 Skills 섹션과는 달리 해당 기술에 대한 설명은 한 문장으로만 표시됩니다. • 사용자 인터렉션 요소 (gif 이미지에서는 로고 크기 전환이 버벅거리는 것처럼 보이나 실제 구현 화면에서는 매끄럽게 전환됩니다.) 사용자와 상호작용하는 기능은 skills 섹션과 동일합니다. • 앞으로의 계획 다음 구현은 HTML 마크업과 CSS 적용이 쉽지 않을 것이라 예상되는 Projects 섹션입니다. (하지만 기대되기도 합니다!)..

• Skills - Development 피그마에서 제작한 프로토 타입을 참고하여 Skills 섹션을 구현하는 단계입니다. • 구현 화면 Skills 섹션을 구현한 화면입니다. • 반응형 브레이크 포인트(1440px, 576px) 추가 이번 섹션도 태블릿(1024px), 모바일(768px) 브레이크 포인트를 기준으로 반응형 웹을 구현했습니다. 근데 데스크톱에서 태블릿 해상도로 넘어가기 직전과 태블릿에서 모바일 해상도로 넘어가기 직전에 로고가 회색 컨테이너의 범위를 벗어나는 모습을 보았습니다. 이는 다음 브레이크 포인트에 도달하기 전까지 콘텐츠 영역이 상대적으로 계속 좁아지기 때문이었습니다. 제가 중앙 집중형 레이아웃을 설계하면서 데스크톱 해상도에서 설정한 좌우 여백(초기 프로토타입에서는 마..

• About Me - Development 피그마에서 제작한 프로토 타입을 참고하여 About Me 섹션을 구현하는 단계입니다. • 구현 화면 초기 퍼블리싱이 완료된 화면입니다. • 시맨틱 태그 사용 사실 이번 개인 프로젝트는 포트폴리오 제작만의 목적이 있는 것은 아닙니다. 제가 이전 프로젝트에서 상대적으로 아쉬웠던 부분(신경 쓰지 못했던 부분)들을 제대로 구현해 보자는 의의도 있습니다. 부끄럽게도 제가 과거의 팀 프로젝트에서는 어떠한 시간의 제약 때문에 시맨틱 태그와 웹 접근성을 크게 고려하지 못했었습니다. 초보자들이 그렇듯이 태그를 남발했죠. 이번에는 제 자유도가 높은 만큼 신경 써보기로 했습니다. 시맨틱 태그를 어떻게 활용했는지 예시를 보여드리겠습니다. 다음은 저의 깃허브 주소,..

•  Projects - Layout and Design 이 섹션에서는 제가 이전에 진행했거나 현재 진행 중인 프로젝트에 대해 소개합니다.   •  초안과 디자인 시스템 적용   초안입니다.이 상태에서 두 가지 디자인 시스템을 적용했습니다.  12 Column Grid Layout8-point Grid System  바로 최종안을 보여드리겠습니다.   •  최종안 결정   이 섹션에는 들어갈 요소들이 많기 때문에 가장 정석적인 방법으로 보여드리려고 했습니다. 여기서 얼마만큼의 정보를 보여드려야 할지는 여전히 고민입니다. 프로젝트가 여러 개이기에 이 화면에서 각 프로젝트의 모든 정보를 다 전달하고자 한다면 복잡하게 느껴질 것 같습니다.   프로젝트 상세 정보를 보여주는 모달을 추가적으로 구현하거나 이미지와..

•  Tools - Layout and Design 이 섹션에서는 제가 팀 프로젝트에서 사용했던 협업툴(Jira, Notion)과 형상관리 도구(Git, Github) 그리고 다른 목적으로 사용했던 기타 도구들(Figma)에 관하여 소개합니다.  •  초안과 디자인 시스템 적용  위 이미지는 디자인 시스템을 적용하기 전 Tools 페이지의 초안입니다. 이번에도 지난번과 같이 두 가지 디자인 시스템을 적용합니다.  12 Column Grid Layout8-point Grid System  지난번 Skills와 레이아웃 형식이 거의 동일하기 때문에 추가적으로 설명드릴 부분이 없습니다. 그러므로 다음 소제목은 곧바로 최종안입니다!   •  최종안 결정   지난 포스팅(Skills) 때에는 로고를 레이아웃 그리..