예외 처리

•  About Me - Layout and Design About Me(자기소개) 섹션에는 다음과 같은 요소들이 들어갑니다.  필수(Required)슬로건깃허브 링크기술 블로그 링크연락처(이메일)교육사항(저는 기재할 교육사항이 길지 않기 때문에 이를 위한 카테고리를 따로 분리하지 않고 자기소개 파트에 포함시켰습니다.)  선택(Optional)프로필 이미지학력취미 이외에 또 어떤 요소가 추가되거나 빠져야 할지는 계속 생각해봐야 할 것 같습니다.  •  디자인 시스템(그리드 시스템) 적용 아무래도 디자인 시스템 규칙을 먼저 정하고 시작해야겠죠? 웹 레이아웃과 관련된 디자인 시스템 규칙 중에서는 아래의 두 가지가 가장 대중적이고 무난한 방법 같았습니다.  12 Column Grid Layout 8-point..

•  2번째 포트폴리오 이전에도 제 포트폴리오 웹사이트를 만들어본 적은 있는데 당시 완성도가 마음에 들지 않았기에 과감하게 삭제했었습니다. 이번에는 이전보다 본격적이고 체계적으로 포트폴리오를 제작해보려고 합니다.   •  다른 개발자들의 포트폴리오는? 다른 프론트엔드 개발자들은 포트폴리오를 어떻게 만들었는지가 궁금해서 찾아보았습니다. 당연한 이야기지만 구글링을 통해 나온 포트폴리오(SEO에 상당히 신경 썼겠죠)들은 대부분 퀄리티가 좋았습니다. 정말 감탄이 나오는 포트폴리오도 적지 않더군요. 이렇게 전반적으로 쓱 훑어보니 최근의 프론트엔드 개발자 포트폴리오 트렌드는 어떠한 것인지도 감이 왔습니다.  한 페이지에서 다 보여줌상단 및 사이드 네비게이션 바를 통한 부드러운 섹션 이동좌우 여백을 충분히 줘서 중앙..

[이 포스팅은 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..

추상화(Abstraction) 제가 추상화라는 개념에 대해서 잘 이해하고 있는지 모르겠습니다. 자세하고 세부적이고 명시적인 과정을 어떠한 편의를 위해 그 절차를 단순화하거나 간소화해서 좀 더 두루뭉실하게 만드는 것일까요?  거기 있는 고기 좀 줘 예를 들어 제 동생이 “거기 있는 고기 좀 줘”라고 말했을 때 제가 식사 중이라면 그냥 젓가락으로 고기를 집어 동생 앞접시에 덜어줄 것입니다. 그런데 제가 저의 이 행동을 이렇게 표현하는 것은 추상화가 매우 높은 수준으로 적용되어 있는 것입니다. 다음에 나오는 문장들은 모두 동일한 행동을 의미하지만 과정의 세부사항을 얼마냐 포함하고 있냐에 있어서 차이가 있습니다. 고기를 동생한테 준다. 젓가락으로 고기불판 위의 고기를 집어서 동생의 앞접시에 고기를 준다. 내 앞..

첫 게시글 작성일로부터 한 달이 흘렀습니다. 왜 기술 블로그를 시작했습니까? 기술 블로그 운영의 이점을 얻기 위해서입니다. 너무 포괄적인 답변인가요?구체적으로 정리해 보겠습니다.  기술 블로그의 이점  지난 한 달 동안 체감한 이점들은 다음과 같습니다.  1. 공부할 수 있습니다.기술 블로그를 운영한다는 것 자체가 공부에 대한 강력한 동기부여가 되어줍니다. 새로운 개념이나 주제를 학습하거나 구현해 보고 내지는 헷갈렸던 개념을 명확히 하면서 빨리 그에 관련한 블로그 글을 써내고 싶다는 이전에 없던 욕구가 생겼습니다.  2. 기록할 수 있습니다.학습하고 실제 코드를 작성하고 기능을 구현하는 과정에는 정말 많은 지식과 정보가 뇌에 입력됩니다. 그런데 이는 어디 적어놓지 않으면 휘발됩니다. 사람의 뇌에는 생물학..

오픈소스란? 소스 코드가 공개된 소프트웨어 프로그램을 의미합니다.쉽게 말하자면 누구나 수정하고 공유할 수 있는 일종의 공개 레포지토리인 것이지요.   오픈소스 기여하기란?이와 같이 소스코드가 공개된 레포지토리에 코드를 수정하거나 추가하는 등 일련의 "기여"할 수 있는 행위를 하는 것을 의미합니다. 이러한 기여는 코드 기여뿐만 아니라 컨텐츠 기여 문서화 기여 등 다른 방식으로도 할 수 있습니다.   Party Parrot을 아십니까? 이 앵무새에 익숙한 사람이 많을 것입니다. 사실 이 앵무새는 시로코(sirocco)라는 이름을 가진 카카포 앵무새입니다.걷지 못해서 멸종위기에 처한 대형 야행성 앵무라고 합니다.평균 수명은 60세, 최대 수명은 90세라고 하는군요. BBC에서 카카포를 탐사하러 간 다큐멘터리 ..

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