Next.js에서 뷰포트(viewport)를 설정하려다가 "Unsupported metadata viewport" 오류를 만난다면?최근 Next.js 업데이트로 인해 기존의 metadata.viewport 방식이 더 이상 지원되지 않기 때문!지금부터 오류 원인과 해결 방법을 정리해보겠습니다. 😊export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", viewport: "width=360, height=800, initial-scale=1, user-scalable=no",};Next.js layout.tsx에서 위처럼 metadata.viewport을 설..

약 40분 전, ‘커플팰리스’라는 예능을 보면서 흥미로운 생각이 들었다.출연한 부자 남성들이 이상형을 이야기하는데, 연봉? 직업? 모아둔 재산?그런 건 전혀 중요하지 않았다.그들의 선택 기준은 단 하나."예쁜가, 안 예쁜가."처음엔 좀 황당했다.“아니, 결혼인데 외모가 전부야?”그런데 가만히 생각해보니, 이건 단순한 취향 문제가 아니었다.사람들은 왜 예쁜 사람을 좋아할까?이유는 간단하다. 예쁜 사람이 드물기 때문이다. 희소성이 곧 가치다.그럼 이걸 이렇게도 생각해볼 수 있다.우리는 왜 선한 사람을 칭찬할까?그것도 선한 사람이 드물기 때문이 아닐까?만약 세상 모든 사람이 선하다면, 굳이 선을 특별하게 여기지 않을 것이다.마치 우리가 숨 쉬는 걸 당연하게 생각하듯이.여기서 문득 궁금해졌다."그렇다면 인간의 ..

🤔 애자일(Agile)이란?개발을 하시는 분이거나, 프로젝트 매니저(PM)를 준비하시는 분, 혹은 다른 분야에 계신 분들도 애자일(Agile)이라는 단어를 한 번쯤 들어보셨을 거예요. 하지만 애자일이라는 단어가 입에 착 붙지도 않고, 비슷한 개념을 접해본 적도 없어서 낯설게 느껴지지 않나요?저도 처음에는 시험 공부하듯이 암기했지만, 실무에서 애자일이 다양한 분야에서 실제로 활용되는 방법론이라는 걸 알게 됐어요. 그래서 여러분도 쉽게 이해할 수 있도록 정리해보았습니다.애자일이란?애자일(Agile)이란, 빠르고 유연하게 일하는 방식입니다.기존의 전통적인 개발 방식(예: 폭포수 방식)과 달리, 한 번 계획을 세우고 끝내는 것이 아니라 계속해서 수정하고 개선하는 접근 방식을 의미해요.🤷‍♂️ 왜 애자일이 필..

안녕하세요! 😊 요즘 블로그 글이 업로드되지 않았습니다. 그동안 정보처리기사 자격증 시험 준비와 어학성적을 위한 오픽 시험 준비를 하느라 바빴고, 동시에 ICT 인턴십도 준비하고 있었습니다. 그래서 개발할 시간이 없었어요. 오랜만에 글을 씁니다. 오늘은 ICT 인턴십 합격하게 된 제 이야기를 풀어보려고 합니다.사실, 쓸까 말까 고민했지만, 제가 지원할 때부터 최종 합격까지 다른 분들의 합격 후기를 많이 읽으면서 도움도 받았고, 재미도 있었어요. ✨ 그래서 25년도 하반기부터 새롭게 지원하실 분들에게 도움이 되고, 소소한 재미를 전달할 수 있으면 좋겠다는 마음에서 이 글을 시작합니다. 💪ICT 학점연계 인턴십 프로그램 소개아마 이 글을 보시는 분들이라면 ICT 학점연계 인턴십에 대해 대충은 아실 거라고..

Next.js는 React 기반의 프레임워크로, 웹 개발자들에게 파일 기반 라우팅을 제공합니다. Next.js 13에서는 새로운 라우팅 시스템인 App Router가 도입되었으며, 기존 Page Router와 함께 사용 가능합니다.이 글에서는 App Router와 Page Router의 차이점, 각각의 특징, 그리고 어떤 상황에서 어떤 라우팅 방식을 선택해야 하는지 명확하게 설명하겠습니다.1. App Router와 Page Router란?App Router (Next.js 13 이상)기반 디렉토리: app/React의 서버 컴포넌트(Server Components)를 기본으로 사용.더 나은 레이아웃 재사용과 중첩 라우팅을 제공.서버 사이드 데이터 패칭과 클라이언트 컴포넌트를 혼합하여 효율적인 UI 구축 ..

나에게 상처 준 사람에게 가장 멋지게 복수하는 방법은 무엇일까?상대방이 나에게 똥을 던졌다고 하자?그래서 내 몸에 똥이 묻었어.화가 나서 내가 상대방에게 다시 똥을 던지려면,내 손에 똥을 묻혀야 해... 그런데 내가 지금까지 살면서 느낀거는굳이 내 손에 똥을 묻히지 않아도, 세상이 다 알아서 갚아주더라, 그렇다고 당하고만 살라는 말은 아니야.나에게 상처를 준 사람은 내가 똑같이 복수하지 않아도,인과응보의 법칙에 따라 반드시!죄값을 치르게 될거야. 누군가로부터 상처를 받았다면,내가 제일 먼저 해야 할 것은 미워하는 마음을 내려놓는 거야. 굳이 상처를 준 상대를 용서하려 애쓸 필요는 없겠지만, 그렇다고 복수에 집착할 필요도 없어. 상처 준 사람에 대한 최고의 복수는, 그 사람을 향한 내 감정 낭비를 멈추고그..

React는 SPA(Single Page Application) 구조를 지원합니다. 그런데 일부 웹 애플리케이션은 MPA(Multi-Page Application)구조를 가집니다. 이번 글에서 React Router DOM을 사용하여 SPA구조를 어떻게 구현할지, 그리고 MPA구조와 어떻게 비교할 수 있는지를 다뤄봤습니다.React Router DOMReact Router DOM은 리액트 애플리케이션에서 패이지 간에 네이게이션을 관리하는 라이브러리라고 생각하시면 됩니다. 이를 사용해서 클라이언트(사용자)쪽에서 페이지를 새로 고침하지 않아도 다른 페이지로 전환할 수 있습니다.React Router DOM은 SPA구조에 적합하며 페이지 이동시에도 브라우저가 새로고침되지 않고, 필요한 컴퓨넌트만 렌더링하여 성..

JavaScript에서 비동기 작업을 처리할 때 콜백 함수는 유용합니다. 하지만 콜백 함수를 여러번 사용하면 중첩이 발생하여 콜백 지옥에 빠질 수 있습니다.이때 Promise를 이용하면 코드를 깔끔하게 짤 수 있습니다.Promise란?Promise란 비동기 작업을 처리할 때 그 작업이 성공하거나 실패할 것에 대해서 결과를 알려준다고 약속하는 것입니다. Promise를 이용하여 비동기 작업이 성공하면 resolve를, 실패하면 reject로 반환 값을 전달합니다.const myPromise = new Promise((resolve, reject) => { // 비동기 작업을 수행 let success = true; if (success) { resolve("작업이 성공적으로 완..