예외 처리

• 왜 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..

[이 포스팅은 Next.js App Router 15 버전 기준으로 테스트를 진행한 후 작성된 글입니다. Next.js App Router의 이전 버전이나 Pages Router 디렉토리 또는 리액트만을 사용한 경우 결과가 다를 수 있습니다.] 이 글은 저의 탐구 과정을 세세하게 기록한 글이고 매우 장황하며 분량이 정말 깁니다. ⚠️ 확실한 정보와 간결한 결론을 얻고자 오셨다면 그 목적에 부합하는 글이 아닐 가능성이 높습니다. ⚠️ Zero-Install이란? 패키지 매니저로 Yarn berry를 사용한다면 활용할 수 있는 독자적인 기능입니다. Yarn berry의 기본적인 pnp(plug'N'play) 기능의 핵심은 의존성을 node_modules로 관리하지 않는다는 것입니다.  Zero-Install..

yarn? yarn berry🫐? npm? pnpm?이것들은 패키지 매니저야. 그리고 나는 패키지 매니저로 npm과 yarn만 사용해 봤다.요즘 공고를 보면 yarn berry 내지는 pnpm이라는 패키지 매니저들이 많이 보여서 궁금했다.전에 팀 프로젝트를 할 때 우리 팀은 아니고 다른 팀이었는데 패키지 매니저로 yarn berry를 쓴다는 분이 있었어. 난 처음 들어본 거라 궁금해서 물어봤거든 그때 그분은 yarn berry의 이점이 있어서 그것을 채택했지만 초기설정이 좀 복잡했다는 식으로 언급했었어.  yarn의 버전 2 이상은 전부 yarn berry로 칭한다고 해(고로 나는 yarn 4.7.0을 설치했지만 얘도 yarn berry인 것이다. yarn candy나 yarn cream이 아니고. 과..

이 글은 제가 궁금했던 것에 대해서 테스트를 수행해 보고 그 과정에서 당면하게 된 현상 또는 새로 알게 된 것들을 기록해 나가기 위한 목적으로 작성되었습니다. 그러므로 당장의 기능 구현을 위해 또는 깔끔하고 간략한 정보만을 얻기 위해 이 페이지에 들어오신 분들에게는 적합하지 않을 수 있음을 미리 말씀드립니다.   이 글을 작성하게 된 이유지난 포스팅에서 Next.js에서의 CSS-in-JS 적용 관련 내용을 정리하겠다고 언급한 적이 있습니다.  [Next.js] App Router에서는 어떤 CSS 방식을 사용해야 합니까? [Next.js] App Router에서는 어떤 CSS 방식을 사용해야합니까?이 글을 쓴 이유저는 Next.js 프로젝트를 여러 번 진행했었는데 그때마다 CSS 스타일링 방식 선정에 ..

이 글을 쓴 이유저는 Next.js 프로젝트를 여러 번 진행했었는데 그때마다 CSS 스타일링 방식 선정에 있어서 고민이 많았습니다. 그 당시 다른 프론트엔드 팀원들은 이전 리액트 프로젝트에서 CSS-in-JS의 방식을 많이 활용했었기에 그 방식을 선호했습니다. CSS-in-JS는 그때 당시엔 저도 사용해 본 적 없는 CSS 방식이라 궁금했습니다. 하지만 Next.js의 특성상 CSS-in-JS의 활용은 제한적이었습니다. 서버 컴포넌트라는 개념이 도입되면서 CSS 또한 이를 고려해서 적용해야 했기 때문입니다. 때문에 그를 제외한 다른 CSS 방식을 고민하고 결정해야 했는데 이러한 과정들이 마냥 쉽지는 않았습니다.   이 글을 누가 읽었으면 하나요?어떤 CSS 라이브러리를 적용해야 하는지 헷갈리는 Next...

이 글을 쓰게 된 이유 Next.js App Router에서 CSR(이라고 생각했던) 페이지를 구현하다가 어떠한 궁금증에 빠져버렸기 때문입니다.  사실 이 글은 어떤 기술적인 해결책을 알려주는 글이라기보다 어떤 개념에 대해 제가 계속 계속 파생해서 생각했던 과정을 기록한 글에 가깝습니다. 그리고 제가 이 과정에서 생각하거나 떠올린 것, 그리고 헷갈리는 개념들과 새로 알게 된 것들을 모두 다 적으려고 했기 때문에 전체적인 내용을 요약하지 않았습니다. 고로 분량이 매우 깁니다. 그리고 의심의 여지가 없는 정확하고 깔끔한 정보를 얻는 것이 목적이라면 적합한 글이 아닙니다. 결론만 원하신다면 제일 아래 문단만 보면 됩니다. 제가 순수 리액트를 사용해 본 경험이 없는 것은 아니지만 순수 리액트만을 사용해 프로젝트..

03장. 자바스크립트 개발 환경과 실행하는 방법 3.1 자바스크립트 실행 환경모든 브라우저와 Node.js는 자바스크립트를 실행할 수 있는 자바스크립트 엔진을 내장하고 있습니다.  브라우저는 HTML, CSS, 자바스크립트를 실행해 웹페이지를 브라우저 화면에 렌더링하는 것이 주된 목적이지만 Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 것이 주된 목적입니다. 따라서 브라우저와 Node.js는 모두 자바스크립트의 코어인 ECMAScript를 실행할 수 있지만 이외 추가로 제공하는 기능은 호환되지 않습니다. 예를 들어 브라우저는 파싱된 HTML 요소를 선택하거나 조작하는 기능의 집합인 DOM API를 기본적으로 제공하지만 Node.js는 그렇지 않습니다. 반대로 Node.js에서는 파일..

02장. 자바스크립트란? 2.1 자바스크립트의 탄생자바스크립트는 1995년 개발자 브랜던 아이크에 의해 만들어졌으며 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어라는 목적을 가지고 있었습니다.  2.2 자바스크립트의 표준화1996년 8월, 마이크로소프트는 자바스크립트의 파생 버전인 "JScript"를 인터넷 익스플로러에 탑재했습니다. 넷스케이프 커뮤니케이션즈와 마이크로소프트는 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하였고 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생했습니다. 이에 표준화된 자바스크립트의 필요성이 대두되었고, 컴퓨터 시스템의 표준을 관리하는 비영리 표준화..

1.1 프로그래밍이란?프로그래밍이란 컴퓨터와의 커뮤니케이션입니다.해결해야 할 문제(요구사항)을 명확히 이해한 후 적절한 문제 해결 방안을 정의해야 하는데 이 때 문제 해결 능력이 요구됩니다. 요구사항은 복잡하며 명확하지 않을 수 있기에 이를 단순하게 분해하고 자료를 정리하고 구분해야 하며 순서에 맞게 행위를 배열해야 합니다.프로그래밍이란 0과 1만 이해할 수 있는 컴퓨터가 실행할 수 있도록 정확하고 상세하게 요구사항을 설명하는 작업이며 그 결과물이 바로 코드입니다. 우리는 문제 해결 방안을 고려할 때 컴퓨팅 사고(Computational thinking)를 통해 컴퓨터의 관점에서 문제를 해결해야 합니다.  1.2 프로그래밍 언어 이처럼 문제 해결 능력을 바탕으로 정의된 문제 해결 방안을 컴퓨터에게 전달하..