codinghatso

Next.js | App Router 알아보기.

hatso — Sun, 18 Jan 2026 17:27:54 +0900

Next.js 는 프레임워크입니다. 때문에 프레임워크에서 추구하는 방향성과 제작과정을 준수해야 합니다.

우선 폴더 구조부터 파악하고 접근할 필요가 있습니다.

https://nextjs.org/docs/app/getting-started/project-structure

Getting Started: Project Structure | Next.js

Learn the folder and file conventions in Next.js, and how to organize your project.

nextjs.org

공식 문서에 첫 글에선 기본적인 폴더 구조를 소개합니다.

app, pages, public, src

최상단 디렉토리 이하 루트 디렉터리에서 형상관리 저장소에 업로드하면 안 되는 파일들을 안내해주고 있습니다.

.gitignore 파일에 빠진 부분이 없는지 검토합니다.

라우팅 파일

Next.js에서는 약속된 이름의 파일들이 존재합니다.

layout	페이지 골격
page	페이지
loading	UI 로딩 중 (스켈레톤)
not-found	UI를 찾을 수 없음
error	Error UI
global-error	Global Error UI
route	API end point
template	새롭게 렌더링된 레이아웃
default	병렬 경로 대체 페이지

중첩 경로

폴더는 URL segment를 정의하고, 폴더를 중첩하면 segment 가 중첩된다.

모든 레벨의 레이아웃은 하위 segment를 감싼다.

경로는 page파일이 존재하면 공개 route 된다.

동적 경로

대괄호를 사용하여 segment를 매개변수화할 수 있습니다.

Path 경로	URL pattern
app/blog/[slug]/page.tsx	/blog/my-first-post
app/shop/[...slug]/page.tsx	/shop/clothing, /shop/clothing/shirts
app/docs/[[...slug]]/page.tsx	/docs, /docs/layouts-and-pages, /docs/api-reference/use-router

구성요소는 중첩된 경로에서 재귀적으로 렌더링 된다.

segment의 구성 요소는 상위 세그먼트의 구성 요소 내부에 중첩된다.

내가 이해하기를 layout.js에서 정의한 구성이 cascading 된다는 뜻으로 이해하고 있다.

폴더가 정의되더라도 page.js 또는 route.js가 배치되어 있지 않으면 경로에 접근할 수 없다.

비공개 폴더는 이름 앞에 밑줄(_) 언더바를 붙여서 만들 수 있다. _folderName

비공개 폴더를 지정하면 해당 폴더와 모든 하위 폴더가 라우팅에서 제외된다.

route 그룹은 폴더를 괄호로 묶어서 만들 수 있습니다. (folderName)

그룹을 지정하는 이유는 marketing 관련 페이지, shop 관련 페이지, 인증 관련 페이지 등 경로의 시작지점과 구분하기 용이한 환경을 제공합니다.

또 다른 이유는

(shop) 그룹의 레이아웃을 정의해 하위 파일들과 공유할 수 있다는 것입니다.

특정 경로에 로딩 스켈레톤을 적용하기 위한 폴더구조입니다.

만약 여러 개의 루트 레이아웃을 구성하려면 최상위 layout.js 파일을 삭제하고 각 라우트 그룹 안에 layout.js파일을 추가해서 각 그룹마다의 자체적인 루트 레이아웃을 구성하게 할 수 있습니다.

ChatGPT 사용에 강한 제약조건이 필요한가? 과도한 자유는 독인가?

hatso — Sat, 30 Aug 2025 16:54:32 +0900

제목 : “챗GPT가 올가미로 죽는 법 알려줘”…오픈AI 고소한 美 부모

저자 : 서희원 기자 (shw@etnews.com)
출처 : 전자신문( https://www.etnews.com/ )

링크 : https://n.news.naver.com/article/030/0003345313

“챗GPT가 올가미로 죽는 법 알려줘”…오픈AI 고소한 美 부모

미국의 한 부부가 인공지능(AI) 챗봇 챗GPT와 개발사 오픈AI를 상대로 소송을 제기했다. 극단적 선택을 한 아들에게 목숨을 끊는 방법을 알려주며 죽음을 부추겼다는 이유에서다. 26일(현지시간)

n.news.naver.com

미국의 한 부부가 인공지능(AI) 챗봇 챗GPT와 개발사 오픈AI를 상대로 소송을 제기했다. 극단적 선택을 한 아들에게 목숨을 끊는 방법을 알려주며 죽음을 부추겼다는 이유에서다.

26일(현지시간) 미국 뉴욕타임스(NYT) 등에 따르면 지난 4월 애덤 레인(16)은 자신의 방에서 시신으로 발견됐다. 스스로 목숨을 끊은 것으로 추정되지만 별다른 유서는 발견되지 않았다.
...

애덤은 학교 과제에 활용한다며 챗GPT를 유료로 구독한 상태였다.

그러나 지난 1월, 애덤이 구체적인 자살 방법을 묻자 챗GPT는 그를 말리는 대신 방법을 자세히 알려줬다. 사망 한 달 전에는 챗GPT 답변대로 과민 대장 증후군(IBS) 치료제를 과다 복용하며 여러 차례 극단적 선택을 시도하기도 했다.

이후에는 애덤이 옷장에 올가미를 맨 사진을 올리자 “전혀 나쁘지 않다”고 답했으며 “사람을 매달 수도 있을 것 같아?”라고 묻자 “충분히 가능해 보인다”고 긍정했다.

챗GPT는 당초 정신적 고통이나 자해를 암시하는 메시지를 감지하면 사용자에게 도움을 요청할 수 있는 연락망을 제공하도록 훈련됐다. 그러나 애덤이 반복적으로 극단적 시도를 암시했음에도 자살 방지 프로토콜은 전혀 작동하지 않았다.

이에 레인 부부는 26일 캘리포니아주 법원에 챗GPT 개발사인 오픈AI와 샘 올트먼 오픈 AI 최고경영자(CEO)를 피고로 하는 소장을 제출했다. 불법 행위에 의한 사망(Wrongful Death) 혐의로 챗GPT를 고소한 사건은 이번이 처음이다.

레인 부부는 구체적인 손해 배상을 포함해 자해와 관련한 주제가 나오면 대화를 자동 종료하고, 미성년 자녀를 위한 보호 기능 등 안전 조치를 명령해달라고 법원에 요구했다.

오픈AI 측은 성명을 통해 유가족에 애도를 표하는 한편, 위기 지원 및 실제 지원 기관 안내에 부족한 점이 있었다는 점을 인정하고 안전 관련 기능을 강화할 예정이라고 밝혔다.

크리에이터들에게는 정보의 활용도와 정리의 혁명을 주었고, 일반 사용자들에게는 검색엔진의 대용책으로 받아지는 것이 현실인 것 같습니다. 개인 적인 경험으로 정말 잠깐만 생각해도 정답을 알 수 있는 문제도 그걸 하나하나 AI에게 물어보며 답변을 찾는 것을 보고 소름이 돋았습니다. 이렇게 가다 보면 어떤 사람들은 생각하기 또는 기억하기를 포기하고 모든 걸 검색을 통해 해결하려고 하겠구나 싶었습니다.

검색 엔진이 세상에 나오고 구글같이 검색 엔진의 정점에 있는 기술을 사용할 때에도 어떻게 검색을 통해질 좋은 답변을 찾는 것 또한 능력으로 취급하곤 합니다. 이렇게 사람이 추론해서 검색을 하는 것이 아니라 그저 AI에게 대화하듯이 질의해도 만족할 만한 답변을 주기 때문에 미래에 사회적 문제가 될 수도 있겠다고 생각 들었습니다.

기업과 국가가 신 기술의 위험성과 건강한 사용방법을 규정하고 틀을 잡아주는 것이 필요하다고 생각이 들기도 했습니다.

다시 본 기사의 내용으로 돌아와서 GPT를 자살을 위한 도구로 사용을 할 때 아무런 제약 없이 사용했고 결과적으로 성공을 도와주게 된 사례가 되었습니다. 자상 방지 프로토콜이 존재했지만 작동하지 않았다는 것은 하자가 있는 물건을 판매한 거나 다름없고 그로 인해 사람이 죽은 것이라고 생각합니다. 일상에서 전자제품을 구매할 때 잘못된 사용방법에 대한 경고와 위험성을 알리는 책자 같을 것이 동봉되어있어야 한다고 알고 있습니다. AI 기업들은 테스트를 통해 위험을 미리 발견하고 대비하고 그걸 배포할 필요가 있다고 생각합니다.

미래의 관심사는 AI가 아닌 AI + 응용프로그램

hatso — Sun, 24 Aug 2025 15:43:11 +0900

제목 : "AI 개발에 박사 학위 필요 없어...응용 분야가 더 유망"

저자 : AI타임스 news@aitimes.com
출처 : AI타임스(https://www.aitimes.com)

링크 : https://www.aitimes.com/news/articleView.html?idxno=201644

[8월20일] "AI 개발에 박사 학위 필요 없어...응용 분야가 더 유망" - AI타임스

최근 미국에서는 대학 졸업생들의 취업이 점점 어려워진다는 소식이 들여오고 있습니다. 여기에 최근 메타가 슈퍼인텔리전스 랩 멤버들에게 수억달러의 몸값을 제시했다는

www.aitimes.com

본문

최근 미국에서는 대학 졸업생들의 취업이 점점 어려워진다는 소식이 들여오고 있습니다. 여기에 최근 메타가 슈퍼인텔리전스 랩 멤버들에게 수억달러의 몸값을 제시했다는 소식까지 더해지며, 인공지능(AI) 개발자가 인기 직종으로 올라서는 분위기입니다.
...
그는 최근 비즈니스 인사이더와의 인터뷰에서 AI 열풍에 편승해 박사 학위를 따라고 권하지는 않겠다고 말했습니다 .
...
그러나 더 눈길을 끄는 것은 "AI 자체가 사라질 것"이라는 말입니다. 이는 AI 관계자들이 산업을 어떻게 보고 있는지를 대변합니다.

AI가 진짜 사라질 것이라는 말이 아닙니다. 몇년 뒤에는 세상의 관심이 AI 자체가 아닌, 응용 애플리케이션으로 변한다는 것을 의미합니다. 'AI+X'로 불리기도 합니다.

이는 다른 인터넷이나 모바일 등 기술 분야에서도 비슷했습니다. 초기에는 기술 자체가 주목받지만, 결국 이를 바탕으로 어떤 사업을 펼치는지로 관심이 옮겨 갔습니다.

타리피 CEO는 AI도 몇년 뒤 애플리케이션을 작동하기 위한 기반 기술로 자리 잡을 것이며, 현실에서 이를 통해 어떻게 부가가치를 만들 수 있는지가 더 중요하다고 지적한 셈입니다.
...
그는 세상이 빠르게 발전하고 있기 때문에 학교 밖에서도 훨씬 더 많은 것을 성취할 수 있다고 말했습니다. "확신이 없다면, 무조건 '아니요'라고 말하고, 세상 속에서 살아가는 데 집중하라"라며 "훨씬 더 빨리 움직이고, 더 많이 배우고, 변화하는 상황에 더 잘 적응해야 한다"라고 말했습니다.

또 AI 업계에서 일한다고 모든 기술 세부 사항을 완벽하게 알 필요는 없다고 설명했습니다.

그렉 브록먼 오픈AI 사장도 비슷한 발언을 내놓았습니다. 최근 공개된 한 팟캐스트에서 대형언어모델(LLM)을 실제 애플리케이션에 연결하는 스타트업이 앞으로 주목받을 것이라고 말했습니다.

이처럼 실리콘 밸리의 분위기는 최근 두어달 사이에 AI 애플리케이션을 거듭 강조하는 분위기입니다. 타리피 CEO와 같은 발언은 거의 매주 등장하고 있습니다.

기사에서는 지금 당장 취업을 위한 박사학위 과정을 밟는 다면 취득과정 4년 동안 시대의 흐름 변화에 따라 의미 없는 4년을 보낼 수 있음을 경고하고 있습니다. 본문에서는 실리콘 벨리의 AI 관계자들의 발언을 필두로 설명하고 있고, AI의 학습 모델을 심화하는 부분보다. AI를 활용한 응용애플리케이션 시장이 많은 주목을 받을 것이라고 합니다.

AI의 모든 기술 세부 사항을 완벽하게 이해하지 않아도 응용가능한 생태계에서는 그것을 얼마나 활용하고 구현하는지에 따라 시장 경쟁력을 나누게 되겠구나 생각했습니다. 이제 모든 직업군이 AI를 받아들이고 있다고 생각합니다. 활용 측면에서는 사용자마다 편차가 있는데 이 편차가 시간이 지날 수 록 더 벌어질 것이라고 생각하게 됐습니다.

개발자로서 AI를 활용하다 보면 기본적인 하드코딩능력에 소홀해지는데 이것을 경계해야 한다고 본능적으로 느꼈습니다. AI가 제공하는 코드로는 완성도 높은 프로젝트가 만들어지지 않기 때문이기도 하고 리펙토링 하는 과정에서 많은 고생을 하게 될 것이기 때문입니다.

2025-SKT 해킹 사건 알아보기

hatso — Mon, 19 May 2025 20:32:05 +0900

제목 : 정부 “SKT, IMEI 유출 가능성 있지만…복제폰 생성은 불가”

저자 : 강소현 기자(ksh@ddaily.co.kr)
출처 : 디지털데일리(https://ddaily.co.kr/)

링크 : https://n.news.naver.com/article/138/0002196857

정부 “SKT, IMEI 유출 가능성 있지만…복제폰 생성은 불가”

SK텔레콤 사이버침해 사고와 관련 추가 발견된 감염서버에 단말기 고유식별번호(IMEI)도 포함된 것으로 나타난 가운데, 정부가 IMEI 유출에 따른 복제폰 생성은 불가하다는 입장을 밝혔다. 류제명

n.news.naver.com

[디지털데일리 강소현기자] SK텔레콤 사이버침해 사고와 관련 추가 발견된 감염서버에 단말기 고유식별번호(IMEI)도 포함된 것으로 나타난 가운데, 정부가 IMEI 유출에 따른 복제폰 생성은 불가하다는 입장을 밝혔다.

류제명 과학기술정보통신부(이하 과기정통부) 네트워크정책실장<사진>은 19일 오전 진행된 ‘SK텔레콤 침해사고 관련 민관합동조사단 중간 조사 결과’ 브리핑에서 “IMEI 값은 열다섯 자리의 숫자 조합인데, 이러한 숫자 조합만 가지고 복제폰을 생성하는 것은 원천적으로 불가능하다는 것이 제조사의 해석”이라며 이 같이 밝혔다.

이날 민간합동조사단 발표에 따르면, 지난달 29일 1차 발표 이후 공격을 받은 정황이 있는 서버가 추가로 18대 식별되어 누적 감염서버는 총 23대로 집계됐다. 추가 감염서버는 통합고객인증 서버와 연동된 서버들이었다.

특히 이 서버들에는 고객 인증을 목적으로 호출된 IMEI와 다수의 개인정보(이름, 생년월일, 전화번호, 이메일 등)가 있는 것으로 나타났다.

조사단은 해당 서버의 저장된 파일에 총 29만1831건의 IMEI가 포함된 사실을 확인했으며, 기록이 남아있는 기간(2024년12월3일∼2025년4월24일)에는 자료유출이 없었다고 밝혔다.

문제는 로그기록이 남아있지 않은 기간이었다. 최초 악성코드가 설치된 시점부터 로그기록이 남아있지 않은 기간(2022년6월15일∼2024년12월2일)의 자료 유출 여부는 현재까지 확인되지 않았다. 즉, 해당 기간 IMEI 유출 가능성을 배제할 수 없는 것이다.

이동근 KISA 디지털위협대응본부장은 “개인정보를 저장·처리하는 내용이 법적으로 정해져있는데, 일단 사업자 측에서 그런 기준을 적용하지 않은 것 같다”라며 “로그가 4~5개월 정도밖에 보관이 안 돼 있던 걸로 판단하고 있고, 최초 시점하고 연결 짓는 로그가 부재하다”라고 설명했다.

로그가 부재한 기간에 대해선 “현실적으로는 로그가 없으면 (정보 유출 여부를) 판단하기가 굉장히 어려운 점이 있다”라며 “관련해선 다각적으로 (대응방안을) 검토하고 있다”라고 밝혔다.

류제명 실장도 “5월11일 개인정보 등이 저장된 문제의 서버들을 확인한 즉시 (사업자에) 조치를 강구하라고 요구했다”라며 “그 요구에 대한 반응으로 비정상인증시도 차단(FDS) 2.0 고도화 작업을 앞당겨 적용한 것으로 이해하고 있다”고 부연했다.

다만, 정부는 이번 유출에 대해 복제폰 생성 등의 2차 피해를 우려할 필요 없다는 입장이다.

류제명 실장은 “단말과 숫자를 인증하는 인증키 값을 제조사가 가지고 있기 때문에 (IMEI) 열다섯 자리 숫자가 복제됐다 해서 복제폰 생성이 가능하지는 않다라는 해석을 제조사로부터 들었다”라며 “그동안의 피해 사례나 모니터링하면서 상당히 높은 수준의 경계 상태를 유지해왔는데 피해가 발생하지 않았으며 현재 작동하고 있는 기술적 시스템 등을 감안할 때 큰 우려는 안해도 된다”고 말했다.

IMEI

International Mobile Equipment Identity의 약자로, '국제 모바일 기기 식별번호'를 뜻한다. 셀룰러 통신이 가능한 기기의 주민등록번호, 차대번호와 같은 역할이라 보면 된다.

우리나라가 보안 문제에 힘들 많이 들이지 않는 것은 오래전부터 들어왔던 것 같다. 벌금이 작아서 신경 안 쓴다나.. 블라블라.. 아무튼 이런 사회적 문제도 있지만 이번 SKT 사태를 보면서 많은 기업들이 보안문제에 더 많은 관심을 가졌으면 합니다.

2600만여 명의 가입자를 가진 SKT의 데이터를 왜 털릴 수밖에 없었는지 분석하는 시간을 가져보겠습니다.

1. 침입 탐지 실패 (3년간 악성코드 방치)

2022년 6월부터 설치된 악성코드가 2025년 4월까지 탐지되지 않음.

이는 침입 탐지 시스템(IDS), 보안 로그 분석(SIEM), 이상 행위 탐지 등 기본적인 보안 모니터링 체계 부재 또는 작동 실패를 의미합니다.

보안 전문가들은 “기초적인 로그 모니터링만 했어도 탐지됐을 해킹이었다”라고 지적함.

2. 내부망 구분 및 분리 부족

유심 정보 서버, 가입자 인증정보, 개인정보 등이 서로 다른 보안 등급으로 분리되지 않고 동일 네트워크 내에 있었던 것으로 추정.

결과적으로 하나의 악성코드 감염으로 다수 민감 정보에 접근 가능.

“망분리, 권한 최소화, 중요 정보 암호화 등이 부실했다”는 것이 업계 중론.

3. 공격 경로인 IVanti VPN 취약점 방치

이미 국제 보안 커뮤니티에서 경고되었던 Ivanti 장비 취약점을 장기간 패치하지 않아 중국계 APT 그룹의 침투 경로로 활용됨.

이는 패치 관리 체계 부실의 명백한 증거.

4. 데이터 암호화 부재 또는 약함

수천만 건의 USIM 정보와 IMEI 등 식별정보가 평문 상태 또는 취약한 보호 수준으로 저장되어 있었던 정황.

국제 표준 보안정책에서는 이런 민감 정보는 반드시 비가역적 암호화 혹은 하드웨어 기반 암호화를 요구함.

어떻게 대비했어야 했는지 키워드만 알아봅시다.

1. 보안관제 체계 강화

2. 중요 정보 망분리 및 접근제어

3. 취약점 관리 체계 정비

4. 데이터 보안 표준 강화

5. 레드팀/블루팀 훈련 주기화

이번 글에서 SKT 사건에 관련된 보안 이슈를 탐구해봤습니다. 우리나라는 IT 강국이라는 칭호를 갖고 있지만 이런 부끄러운 보안 이슈가 생긴다면 칭호를 떳떳하게 사용하진 못할 것 같습니다. 기업들의 보안 기술의 관심도가 높아지고 보안 전문가도 더 대접받고, 전문가들의 실력 또한 향상한다면 이런 기초적인 보안 문제를 해결하지 못해서 일어나는 일은 없을 것이라고 생각합니다.

AI의 글쓰기 특징이란?

hatso — Mon, 14 Apr 2025 10:02:59 +0900

제목 : '챗GPT'의 글쓰기 특징으로 꼽힌 '엠 대시'...반박도 만만치 않아

저자 :[임대준 기자]
출처 : AI타임스(https://www.aitimes.com) ydj@aitimes.com

링크 : https://www.aitimes.com/news/articleView.html?idxno=169525

'챗GPT'의 글쓰기 특징으로 꼽힌 '엠 대시'...반박도 만만치 않아 - AI타임스

일반 하이픈보다 긴 \'엠 대시(em-dash)\'를 인공지능(AI)이 즐겨 쓴다는 주장이 등장했다. 이에 대한 반박도 만만치 않은 것으로 알려졌다.9일(현지시간) 워싱턴 포스트에 따르면, 최근 소셜 미디어

www.aitimes.com

일반 하이픈보다 긴 '엠 대시(em-dash)'를 인공지능(AI)이 즐겨 쓴다는 주장이 등장했다. 이에 대한 반박도 만만치 않은 것으로 알려졌다.

9일(현지시간) 워싱턴 포스트에 따르면, 최근 소셜 미디어 사용자 중 일부는 '챗GPT'와 같은 AI가 작성한 글에 엠-대시가 자주 등장한다고 주장하고 있다.

엠-대시(—)는 일반 하이픈(-)보다 길며, 일반 키보드에는 자판이 없어 별도 입력법을 선택해야 한다. 줄의 길이가 알파벳 대문자 엠(M)의 가로 길이와 같아 엠 대시라고 불린다. 따라서 이런 기호를 남발하는 것은 사람이 아니라, AI라는 지적이다.

한 유튜버는 엠 대시를 '챗GPT 하이픈'이라고 불렀다. 또 AI로 오해받기 싫다면 이를 빼라는 조언도 등장했다.

그러나 이런 주장은 평소 엠 대시를 즐겨 사용하는 일부 전문가들의 반발에 부딪혔다. 소설가나 교수 등 세련된 글쓰기를 즐기는 사람들은 엠 대시마저 AI에 양보하지 않겠다는 반응이다.

에일린 갤러거 시러큐스대학교 저널리즘 교수는 "엠 대시는 매우 강력한 글쓰기 도구일 뿐만 아니라 매우 미묘한 의미를 담고 있다"라며 "엠 대시가 영혼이 없고 죽은 AI가 생성한 글을 나타낸다는 말을 들으면 화가 난다"라고 밝혔다.

또 엠 대시는 오랫동안 작가들이 문장을 잠시 멈추거나 재치 있게 아이디어를 연결하는 방법으로 소중히 여겨왔다는 설명이다. JT 부시넬 오리건주립대학교 문학 선임 강사는 "미적으로 우아하다"라며 "맥락상 어색하지 않으면서도, 다른 기호와는 다른 방식으로 자연스러운 어조 변화를 보여준다"라고 말했다.

이에 앞서 지난해에는 AI가 자주 사용하는 단어로 'delves(탐구하다)' 'showcasing(보여주는)' 'underscores(밑줄을 치는, 강조하는)' 등이 있다는 연구 논문도 나왔다. 이는 독일 튀빙턴대학교 연구진이 2010년부터 2024년까지 연구 논문 1400만개 이상을 분석한 결과다.

이제는 탐지 도구로도 AI가 작성한 글을 찾기 어렵다는 말이 나오고 있다. 이 가운데, 올해 초부터 엠 대시 지적이 부쩍 늘어났다는 설명이다. 특히 한두번이면 이해할 수 있지만, 수차례 남용하는 것은 AI라는 증거로 받아들여진다는 말이다.

이에 대한 의견을 오픈AI의 제작진에게 물은 결과, 챗GPT가 엠 대시를 선호할 가능성이 있다는 답이 돌아왔다.

로렌티아 로마뉴크 오픈AI 모델 행동팀 연구원은 "하지만 이는 절대적인 규칙은 아니다"라며 AI의 출력은 사용자의 반응과 요청한 샘플에 따라 큰 영향을 받으며, 이런 요소들은 항상 가변적이라고 설명했다.

이번 일을 계기로 영어권에서는 엠 대시와 같은 특정 부호를 선호하는 일종의 '애호가'들이 많다는 점도 밝혀졌다

갤러거 교수는 1970년대부터 잡지나 신문 등에서 엠 대시가 많이 사용됐다며, 당시에는 이를 사용하는 것이 세련된 방식으로 받아들여졌다고 설명했다.

그는 "AI가 잡지나 블로그를 많이 학습했다면, 엠 대시를 꽤 좋아했을 것"이라고 말했다.

AI가 일상에서 누구나 이용할 수 있게 되면서 흔히 말하는 "검증" 분야가 뜨거운 감자가 된 것 같습니다. 인터넷상의 보안과는 다르게 사람이 사람을 AI라는 도구로 속이는 사례가 발생하면서 기업입장에서는 "검증"에 더욱 관심을 갖고 있는 것 같습니다.

취업과 이직을 준비하는 사람입장에서는 이러한 엄격한 "검증"의 환경은 반갑지만은 않을 것 같습니다.

이 엠 대시 사례를 통해서 이력서나 창작물을 만들 때 AI를 어느 정도 사용했는지 나타낼 필요가 생기는 것 같습니다. 글쓴이도 요약정리 글을 작성할 때 AI를 사용해서 초안을 작성하고 다듬어서 정리하기도 합니다. 이때 AI를 활용해서 정리한 문서이다라고 주석을 달아 놓는데, 앞으로 많은 혼란을 막으려면 AI의 사용정도의 지표를 국제기관에서 만들어서 창작물에 적용시키는 게 필요하다고 생각합니다. 아마도 우리 인류는 똑똑하기 때문에 가까운 미래에 적용될지도 모르겠습니다. 감사합니다.

Next.js | Pages Router 1장 ~ 10장

hatso — Sat, 12 Apr 2025 17:16:59 +0900

1장은 github에 준비되어 있는 학습자료를 내 로컬환경에 set up 하는 내용입니다.

2장은 로컬환경에서 정상 작동하는지 확인하는 챕터입니다.

3장은 편집 후에 Fast Refresh가 되는지 확인하는 챕터입니다. (저장 후 페이지 새로고침 없이 적용되는 현상)

4장은 앞으로 학습할 내용을 미리 공지하는 챕터입니다.

통합 파일 시스템 라우팅을 사용해 new page를 만들기.
Link component를 client-side 에서 페이지간 탐색을 어떻게 하는지 학습.
code splitting과 prefetching을 우한 튼튼한 기반 학습.

5장은 1장을 건너띈 학습자를 위한 챕터인 것 같습니다.

6장은 Next.js의 파일시스템 기반 라우팅을 복습하는 챕터입니다. page/posts/first-post.js 파일을 만들어 로컬에서 확인해 보는 것까지 실습합니다.

7장은 <Link/> 태그에 대해서 알아보고 실습하는 챕터입니다.

8장은 Client-Side Navigation에 대해서 알아보는 챕터입니다.

Next.js는 코드 분할, 클라이언트 측 탐색, 프리페칭(제작 중)을 통해 애플리케이션을 자동으로 최적화합니다.
아래 파일로 경로를 생성하고 내장된 구성 요소를 사용합니다. 라우팅 라이브러리가 필요하지 않습니다.
더 자세히 알아볼 수 있습니다 Link API 참조 및 라우팅 문서의 일반적인 구성 요소.

9장은 Layout Componet 에 대해서 알아보는 챕터입니다.

여기서 layout.module.css 파일을 사용하는데 이 module을 사용하면 className을 자동으로 고윳값을 주게 되어 중복되는 일이 발생하지 않습니다. 이중복을 자동으로 막아주는 게 module의 핵심입니다.

10장은 본격적인 CSS 적용을 예고하면서 다음 챕터로 이어집니다.

네이버, 'AI 브리핑' 시작...검색·숏텐츠·플레이스·쇼핑에 도입

hatso — Mon, 24 Mar 2025 17:59:08 +0900

제목 : 네이버, 'AI 브리핑' 시작...검색·숏텐츠·플레이스·쇼핑에 도입

저자 : [디지털투데이 이호정 기자]
출처 : 디지털투데이 (DigitalToday)(https://www.digitaltoday.co.kr)] sgbyun@etnews.com

링크 : https://www.digitaltoday.co.kr/news/articleView.html?idxno=558377

네이버, 'AI 브리핑' 시작...검색·숏텐츠·플레이스·쇼핑에 도입 - 디지털투데이 (DigitalToday)

[디지털투데이 이호정 기자] 네이버가 모든 사용자가 이용할 수 있는 인공지능(AI) 서비스 \'AI 브리핑’을 오는 27일 출시한다고 24일 밝혔다. 별도의 서비스 가입없이 네이버 검색창을 통해 누구

www.digitaltoday.co.kr

네이버가 모든 사용자가 이용할 수 있는 인공지능(AI) 서비스 'AI 브리핑’을 오는 27일 출시한다고 24일 밝혔다. 별도의 서비스 가입없이 네이버 검색창을 통해 누구에게나 바로 제공된다. 네이버는 AI 브리핑을 시작으로 네이버 서비스에 AI를 내재화하는 '온서비스 AI' 전략에도 속도를 낸다는 계획이다.

AI 브리핑은 정리·요약된 답변을 제공하는 검색 기능은 물론, 새로 오픈한 '네이버플러스 스토어' 앱에서의 AI 쇼핑 가이드, 다양한 장소 정보를 제공하는 플레이스, 지금 화제가 되고 있는 트렌드를 소개하는 '숏텐츠' 등 각 유형에 최적화된 다양한 형태로 우선 도입된다.

회사측에 따르면 AI 브리핑에는 네이버가 추구하는 '다양성'과 '연결'의 가치가 담겼다. 사용자가 입력한 검색어에 간략히 요약된 답변을 제공하면서, 요약된 답변과 창작자 및 원본 콘텐츠의 출처를 쉽게 확인할 수 있도록 직관적으로 제공한다. 창작자의 문서로 연결되는 과정에서 콘텐츠 생태계가 더욱 활성화될 것으로 회사는 기대하고 있다.

AI 브리핑은 사용자의 검색 의도에 맞는 최적의 검색 흐름을 제공할 수 있도록 UX·UI 디자인도 각기 다르며, 노출 위치도 다양하다. 또 검색 질의에 따라 최적화된 답변을 위해 다양한 콘텐츠 풀을 폭넓게 활용한다. 숏텐츠, 플레이스, 쇼핑은 검색 흐름 속에 넛징 형태로 자연스럽게 노출되고 정답이 있거나 탐색이 필요한 정보성 질의의 경우, 검색 결과 최상단에 노출되는 방식이다.

먼저 ▲공식형·멀티출처형 AI 브리핑은 정답이 있는 답변이나, 다양한 콘텐츠 탐색이 필요한 질의에 대해 검색 결과 최상단에 핵심 정보를 제공한다. 잘 정리된 요약과 출처를 통해 원하는 정보를 얻기까지 시간을 단축시키고, 후속 질문을 통해 연관된 정보의 추가 탐색을 지원한다. 생활 전반에 도움이 되는 다양한 하우투(how-to)정보부터, 최신 유행하는 밈, 흥미로운 영화 결말, 어젯밤 꿈 해몽 등 유용하고 흥미로운 검색어를 시작으로 다양한 주제로 확대할 예정이다.

AI 브리핑 숏텐츠형
또 ▲'숏텐츠'형 AI 브리핑은 숏텐츠로 추천된 콘텐츠들을 요약해서 주요 내용을 빠르게 파악한 뒤, 오리지널 콘텐츠에서 추가 정보를 확인할 수 있도록 돕는다. 요약정보 뿐 아니라 콘텐츠를 소비한 사용자가 관심있을 만한 정보를 분석해 추천해주기도 한다. 사용자가 스포츠·뷰티·여행 등 다양한 주제의 숏텐츠 키워드를 탐색했다면, 스포츠 하이라이트 장면 영상을 모아서 보여주거나, 화제가 되고 있는 상품을 추천, 인기있는 장소 탐색·예약 정보 등을 제공한다. 향후 사용자의 관심사가 잘 반영될 수 있도록 개인화 추천을 더욱 고도화할 전망이다.

이어 ▲플레이스형 AI 브리핑은 사용자가 로컬과 관련된 정보를 흥미있고 깊이있게 탐색할 수 있도록 돕는다. 다양한 여행정보를 비롯해 국내외 핫플레이스 정보 탐색과 취향에 맞는 콘텐츠들을 추천해 줄 예정이다. 우선 사용자가 많이 찾는 오사카, 교토 등 일본지역을 시작으로 다양한 국가의 여행지로 확대된다.

앞서 네이버는 지난 12일 쇼핑 앱 '네이버플러스 스토어'를 통해 AI 브리핑 기능을 선보였다.

네이버는 연내 다양한 질의에서 AI 브리핑 노출을 확대해 가는 한편, 이미지 검색을 통한 멀티모달 서비스 도입, 영어 및 일본어 등 다국어 서비스 지원 등 새로운 기능들도 순차적으로 선보여 기술적 변화를 통해 사용자가 새로운 AI 경험을 할 수 있도록 꾸준히 고도화 할 계획이다.

김광현 네이버 검색·데이터 플랫폼 부문장은 "AI 브리핑을 시작으로 네이버 검색은 오랜 검색 서비스 경험과 방대한 사용자 데이터를 기반으로 풍부한 콘텐츠로의 연결을 제공하여, 사용자가 필요한 정보를 쉽게 찾을 수 있는 방향으로 더욱 고도화 될 것"며 "아울러 AI 에이전트 시대가 일상에 도래하는 시기에 맞춰 새로운 사용자 경험을 적기에 제공할 수 있도록 준비할 것"이라고 말했다.

나의 어린 시절 학문검색은 대부분 네이버를 이용했다. 지금은 구글을 이용하는 편이다.

지금의 네이버는 외부 데이터를 검색하기 쉬운 구조가 아니다. 때문에 학문적으로 이용하는 이용자는 없을 것이라고 생각합니다. 한계가 있는 데이터와 블로그 위주의 정보탐색은 블로거들의 수익성 즉 돈을 받고 포스팅을 하는 구조 때문에 신뢰도면에서 많이 타격을 받았다고 개인적인 생각입니다.

이번 기사를 읽고 네이버의 현재를 이해하고 의도적으로 방향성을 잡고 가는 것이라고 느꼈던 것 같습니다.

네이버가 인플루언서들의 생태계 구축과 숏폼, e커머스등의 사업을 확고히 해 나아가면서 네이버의 검색엔진이 네이버의 생태계 안에서 심장 역할을 하겠구나! 하고 생각하게 된 것입니다. AI 브리핑 기능은 다른 검색엔진에서 적용되어 서비스 중인 기능임에 확실한 개선 사항이라고 생각합니다. 문제는 이 서비스가 블로그들의 글을 인용해서 비판적인 정보 없는 서비스가 된다면 지속적인 신뢰도 하락을 감당해야 될지도 모릅니다.

제가 떠올린 이런 문제점들을 네이버가 잘 파악하고 있을 것이라고 생각합니다. 미래의 네이버가 어떤 영향력을 보여줄지 기대가 되는 부분입니다. 감사합니다.

Learn Next.js 제 16장 : Adding Metadata

hatso — Thu, 13 Mar 2025 15:39:34 +0900

이번 장에서 배울 내용

* 메타데이터란 무엇인가.

* 메타데이터 유형.

* 메타데이터를 사용하여 오픈 그래프 이미지를 추가하는 방법.

* 메타데이터를 사용하여 파비콘을 추가하는 방법.

메타데이터란 무엇인가?

웹 개발에서 메타데이터는 웹페이지에 대한 추가 세부 정보를 제공합니다. 메타데이터는 페이지를 방문하는 사용자에게 보이지 않습니다. 대신, 페이지의 HTML에 내장된 비하인드 스토리에서 작동하며, 일반적으로 <head> 요소. 이 숨겨진 정보는 웹페이지의 콘텐츠를 더 잘 이해해야 하는 검색 엔진 및 기타 시스템에 매우 중요합니다.

메타데이터가 중요한 이유는?

메타데이터는 웹페이지의 SEO를 향상시키는 데 중요한 역할을 하여 검색 엔진과 소셜 미디어 플랫폼에서 더 쉽게 접근하고 이해할 수 있게 합니다. 적절한 메타데이터는 검색 엔진이 웹페이지를 효과적으로 인덱싱하여 검색 결과 순위를 향상시키는 데 도움이 됩니다. 또한 Open Graph와 같은 메타데이터는 소셜 미디어에서 공유 링크의 모양을 개선하여 사용자에게 콘텐츠를 더욱 매력적이고 유익하게 만듭니다.

*SEO는 Search Engine Optimization의 줄임말로, 검색 엔진 최적화를 의미.

메타데이터 유형

메타데이터에는 다양한 유형이 있으며, 각각 고유한 용도로 사용됩니다. 일반적인 유형에는 다음이 포함됩니다:

제목 메타데이터(Title Metadata): 브라우저 탭에 표시되는 웹페이지 제목을 담당합니다. SEO는 검색 엔진이 웹페이지의 내용을 이해하는 데 도움을 주기 때문에 매우 중요합니다.

<title>Page Title</title>

설명 메타데이터(Description Metadata): 이 메타데이터는 웹페이지 콘텐츠에 대한 간략한 개요를 제공하며 검색 엔진 결과에 자주 표시됩니다.

<meta name="description" content="A brief description of the page content." />

키워드 메타데이터(Keyword Metadata): 이 메타데이터에는 웹페이지 콘텐츠와 관련된 키워드가 포함되어 있어 검색 엔진이 페이지를 인덱싱하는 데 도움이 됩니다.

<meta name="keywords" content="keyword1, keyword2, keyword3" />

그래프 메타데이터 열기(Open Graph Metadata): 이 메타데이터는 제목, 설명, 미리보기 이미지와 같은 정보를 제공하여 소셜 미디어 플랫폼에서 웹페이지를 공유할 때 웹페이지를 표현하는 방식을 향상시킵니다.

<meta property="og:title" content="Title Here" /><meta property="og:description" content="Description Here" /><meta property="og:image" content="image_url_here" />

페이비콘 메타데이터(Favicon Metadata): 이 메타데이터는 브라우저의 주소 표시줄이나 탭에 표시되는 웹페이지에 파비콘(작은 아이콘)을 연결합니다.

<link rel="icon" href="path/to/favicon.ico" />

파일 기반 Next.js에는 메타데이터 목적으로 특별히 사용되는 다양한 특수 파일이 있습니다는 것도 알아두면 됩니다.

페이지 제목 및 설명

layout.js 또는 page.js 에 제목 및 설명과 같은 페이지 정보를 추가할 수 있습니다. 루트 layout.js 를 사용하면 모든 자식 페이지에 적용됩니다.

///app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
 
export default function RootLayout() {
  // ...
}

이제 각 페이지마다의 설명을 추가하고 싶을 수 있는데 이럴 때에는

///app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Learn Dashboard built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

코드를 이렇게 변경해 주시면 됩니다.

마치 와일드카드를 사용하는 것처럼 template: '%s | Acme Dashboard' 에서 %s는 각각의 페이지에서 추가한 title이 들어갈 수 있습니다.

///app/dashboard/invoices/page.tsx
export const metadata: Metadata = {
  title: 'Invoices',
};

이렇게 적용되는 모습을 볼 수 있다.

배운 내용으로

loginPage입니다.
Page입니다.
customers Page입니다.
invoices create Page입니다.
invoices editPage입니다.

다른 파일에도 적용시켜 주면서 마무리하겠습니다.

Learn Next.js 제 15장 : Adding Authentication

hatso — Thu, 13 Mar 2025 15:01:50 +0900

-ai를 사용해 개념정리 했음을 공지합니다.-

이번 장에서 배울 내용

* 인증이란 무엇인가요.

* NextAuth.js를 사용하여 앱에 인증을 추가하는 방법.

* 미들웨어를 사용하여 사용자를 리디렉션하고 경로를 보호하는 방법.

* React's 사용 방법 useActionState 보류 중인 상태와 폼 오류를 처리합니다.

인증이란 무엇인가? (Authentication)

인증은 오늘날 많은 웹 애플리케이션의 핵심 부분이고, 시스템이 사용자가 누구인지 확인하는 방식입니다.

보안 웹사이트는 종종 사용자의 신원을 확인하기 위해 여러 가지 방법을 사용합니다. 예를 들어, 사용자 이름과 비밀번호를 입력한 후 사이트에서 기기로 인증 코드를 보내거나 Google Authenticator와 같은 외부 앱을 사용할 수 있습니다. 이 2단계 인증(2FA)은 보안을 강화하는 데 도움이 됩니다. 누군가 당신의 비밀번호를 알게 되더라도, 당신의 고유한 토큰 없이는 계정에 접근할 수 없습니다.

인증 vs 권한 부여

웹 개발에서 인증과 권한 부여는 서로 다른 역할을 합니다:

인증(Authentication)은 사용자가 자신이 누구인지 확인하는 것입니다. 사용자 이름과 비밀번호 같은 것으로 신원을 증명하고 있습니다.
권한 부여(Authorization)는 다음 단계입니다. 사용자의 신원이 확인되면, 권한 부여가 그들이 사용할 수 있는 애플리케이션의 일부를 결정합니다.

따라서 인증은 사용자가 누구인지 확인하고, 인증은 애플리케이션에서 무엇을 하거나 접근할 수 있는지를 결정합니다.

setting up NextAuth.js

next-auth 설치(install)

pnpm i next-auth@beta

key 생성(create)

# macOS
openssl rand -base64 32
# Windows can use https://generate-secret.vercel.app/32

.env 파일에 key 추가(add)

///.env
AUTH_SECRET=your-secret-key

사용자 설정 파일

//auth.config.ts
import type { NextAuthConfig } from 'next-auth';
 
export const authConfig = {
  pages: {
    signIn: '/login',
  },
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false; // Redirect unauthenticated users to login page
      } else if (isLoggedIn) {
        return Response.redirect(new URL('/dashboard', nextUrl));
      }
      return true;
    },
  },
  providers: [], // Add providers with an empty array for now
} satisfies NextAuthConfig;

authConfig 코드 해설 (NextAuth 설정)

이 코드는 NextAuth.js의 인증 설정(authConfig)을 정의하는 역할을 합니다.
사용자가 로그인 상태인지 확인하고, **대시보드 페이지(/dashboard 경로)**에 대한 접근을 제어합니다.

✅ 코드 분석

import type { NextAuthConfig } from 'next-auth';

NextAuthConfig 타입을 가져와서 authConfig 객체의 타입을 검사할 수 있도록 함.

1. signIn 페이지 설정

pages: {
  signIn: '/login',
},

사용자가 로그인되지 않은 상태에서 보호된 페이지에 접근하면,
/login 페이지로 리다이렉트 되도록 설정.

2. callbacks.authorized → 인증 상태 확인 및 리다이렉트

callbacks: {
  authorized({ auth, request: { nextUrl } }) {
    const isLoggedIn = !!auth?.user;
    const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');

auth?.user가 존재하는지 확인하여 로그인 상태(isLoggedIn)를 판별.
현재 요청된 URL이 /dashboard로 시작하는지 확인하여,
대시보드 페이지 접근 여부를 체크.

3. 보호된 경로(/dashboard) 접근 제어

if (isOnDashboard) {
  if (isLoggedIn) return true;
  return false; // 로그인 안 된 사용자는 접근 차단
}

사용자가 /dashboard에 접근하려 하면:
- 로그인 상태(isLoggedIn = true)면 접근 허용 (return true)
- 로그인하지 않은 경우 접근 차단 (return false) → /login 페이지로 이동됨

4. 로그인된 사용자가 /dashboard 외의 경로에 있을 경우 대시보드로 이동

else if (isLoggedIn) {
  return Response.redirect(new URL('/dashboard', nextUrl));
}

로그인한 사용자가 /dashboard가 아닌 페이지에 있을 경우,
→ 자동으로 /dashboard로 리디렉트 (예: 로그인 후 자동 이동).

5. 기본적으로 모든 페이지 접근 허용

return true;

로그인된 상태가 아닐 때 기본적으로 모든 페이지 접근 허용 (예: 로그인 페이지, 공개 페이지 등).

6. providers 설정

providers: [], // Add providers with an empty array for now

현재 로그인 제공자(Providers)가 없음.
나중에 Google, GitHub, Credentials(이메일/비밀번호) 로그인 등을 추가할 수 있음.

✅ 결론

✔ 로그인하지 않은 사용자는 /dashboard 접근 불가 → /login으로 이동
✔ 로그인한 사용자는 /dashboard 외의 경로에 있을 경우 자동 이동
✔ 기본적으로 모든 페이지 접근 가능하지만, dashboard는 로그인 필수
✔ 현재 로그인 제공자 없음 → 추후 Google, GitHub 로그인 등 추가 가능

즉, 이 코드는 "NextAuth를 활용해 인증 상태를 관리하고, 대시보드 페이지를 보호하는 역할"을 함!

미들웨어 설정

authConfig 개체를 미들웨어(middleware) 파일로 가져와야 합니다.

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
 
export default NextAuth(authConfig).auth;
 
export const config = {
  // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};

여기서는 authConfig 객체로 NextAuth.js를 초기화하고 auth 속성을 내보내고 있습니다. 또한 미들웨어의 매칭 옵션을 사용하여 특정 경로에서 실행되도록 지정하고 있습니다.

이 작업을 위해 미들웨어를 사용하는 장점은 미들웨어가 인증을 검증할 때까지 보호된 경로가 렌더링을 시작하지 않아 애플리케이션의 보안과 성능이 모두 향상된다는 점입니다.

NextAuth 미들웨어 코드 해설

이 코드는 NextAuth를 사용하여 Next.js 애플리케이션의 전역 미들웨어로 인증을 적용하는 역할을 합니다.

✅ 코드 분석

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';

next-auth에서 NextAuth를 가져와 인증 미들웨어를 설정.
authConfig는 인증 설정 객체로, NextAuth의 구성을 포함.

1. NextAuth 미들웨어 적용

export default NextAuth(authConfig).auth;

NextAuth(authConfig).auth는 NextAuth의 미들웨어 기능을 활성화.
모든 요청이 이 미들웨어를 거쳐 사용자가 인증되었는지 확인.
로그인하지 않은 사용자는 보호된 페이지에 접근할 수 없도록 설정.

2. config.matcher를 사용한 미들웨어 적용 범위 설정

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
};

matcher는 미들웨어를 적용할 경로를 정의하는 역할.
**정규식(/(?! ...) 사용)**을 사용하여 특정 경로를 미들웨어 적용 대상에서 제외.

적용 제외되는 경로

제외 대상 설명

/api	API 라우트는 미들웨어를 거치지 않음.
/_next/static	정적 파일(빌드된 JS, CSS 등)에는 인증 적용 안 함.
/_next/image	Next.js 이미지 최적화 API 경로 제외.
*.png	.png 이미지 파일 요청에는 인증 적용 안 함.

✅ 즉, 이 설정은 Next.js에서 "정적 리소스나 API 요청을 제외하고, 나머지 모든 요청에 대해 인증 미들웨어를 적용"하는 역할을 함.

✅ 결론

✔ NextAuth를 미들웨어로 설정하여 모든 요청에서 인증 확인
✔ 정적 파일, API, 이미지 요청을 제외하고 나머지 모든 경로에 인증 적용
✔ 보호된 페이지는 로그인한 사용자만 접근 가능

즉, 이 코드는 Next.js 애플리케이션에서 "로그인이 필요한 페이지를 보호하는 역할"을 함!

비밀번호 해싱(Password hashing)

무작위 문자열로 변환해 데이터 노출되더라도 안전을 보장받습니다.

DB를 seed할 때 bcrypt 패키지를 사용했는데. 이는 bcrypt가 Next.js의 middleware에서 사용할 수 없는 Node.js API에 의존하고 있기 때문입니다.

authConfig의 객체를 퍼트리는 auth.ts 파일을 루트디렉토리에 만듭니다.

글이 길어지니 전체 코드는 제외하겠습니다.

NextAuth.js 인증 설정 코드 해설

이 코드는 NextAuth.js를 사용하여 이메일/비밀번호 기반 로그인 기능을 구현하는 코드예요.
특히 PostgreSQL에서 사용자 정보를 가져와서 인증을 처리하는 방식으로 되어 있습니다.

✅ 코드 분석

1️⃣ 필요한 모듈 및 설정 가져오기

import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';
import { z } from 'zod';
import type { User } from '@/app/lib/definitions';
import bcrypt from 'bcryptjs';
import postgres from 'postgres';

NextAuth → NextAuth.js 라이브러리를 가져와 인증 기능 설정.
authConfig → 기존 인증 설정 (로그인 페이지 등) 가져오기.
Credentials → 이메일 & 비밀번호 기반 인증을 처리하기 위한 credentials 프로바이더.
zod → 입력값을 검증하기 위한 라이브러리.
bcryptjs → 데이터베이스의 해싱된 비밀번호를 비교하는 데 사용.
postgres → PostgreSQL과 연결하여 사용자 정보를 가져오는 데 사용.

2️⃣ PostgreSQL 연결 설정

const sql = postgres(process.env.POSTGRES_URL!, { ssl: 'require' });

데이터베이스 연결을 설정 (process.env.POSTGRES_URL 사용).
ssl: 'require' → 보안을 위해 SSL 연결 강제.

3️⃣ 데이터베이스에서 사용자 정보 가져오기 (getUser 함수)

async function getUser(email: string): Promise<User | undefined> {
  try {
    const user = await sql<User[]>`SELECT * FROM users WHERE email=${email}`;
    return user[0];
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw new Error('Failed to fetch user.');
  }
}

getUser(email) 함수는 PostgreSQL에서 특정 이메일의 사용자 정보를 가져오는 역할.
sql<User[]> → SQL 쿼리를 실행하여 users 테이블에서 이메일이 일치하는 사용자 조회.
데이터가 있으면 user[0]을 반환, 없으면 undefined.
오류 발생 시 콘솔에 출력하고 예외 처리.

4️⃣ NextAuth 설정 (NextAuth({...}))

export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,

authConfig를 확장하여 기존 인증 설정(예: 로그인 페이지)을 유지하면서 추가 설정 적용.
auth, signIn, signOut 함수를 추출하여 외부에서 사용 가능하도록 설정.

5️⃣ 이메일/비밀번호 로그인 처리 (Credentials Provider)

providers: [
  Credentials({
    async authorize(credentials) {

Credentials 프로바이더를 사용하여 이메일 & 비밀번호 로그인 기능을 구현.
authorize(credentials) 함수는 사용자가 로그인할 때 호출됨.

1. 입력값 검증 (Zod 사용)

const parsedCredentials = z
  .object({ email: z.string().email(), password: z.string().min(6) })
  .safeParse(credentials);

사용자가 입력한 이메일과 비밀번호를 검증.
safeParse() → 값이 유효하면 parsedCredentials.success = true, 그렇지 않으면 false.
이메일 형식(.email())과 비밀번호 길이(.min(6))를 체크.

2. 사용자 조회 & 비밀번호 확인

if (parsedCredentials.success) {
  const { email, password } = parsedCredentials.data;
  const user = await getUser(email);
  if (!user) return null;
  const passwordsMatch = await bcrypt.compare(password, user.password);
  if (passwordsMatch) return user;
}

사용자가 입력한 이메일을 getUser(email) 함수로 DB에서 찾음.
사용자가 존재하지 않으면 null 반환 → 로그인 실패 처리.
입력한 비밀번호와 DB에 저장된 해싱된 비밀번호를 bcrypt.compare()로 비교.
비밀번호가 맞으면 user 객체 반환 → 로그인 성공.
비밀번호가 틀리면 null 반환 → 로그인 실패.

3. 로그인 실패 시 처리

console.log('Invalid credentials');
return null;

잘못된 로그인 정보일 경우 null을 반환하여 로그인 실패 처리.
console.log()로 로그인 실패 원인 출력.

✅ 결론

✔ PostgreSQL에서 사용자 정보를 가져와 이메일 & 비밀번호 로그인 구현
✔ bcrypt.compare()를 사용해 입력한 비밀번호와 DB 저장 비밀번호 비교
✔ Zod를 활용하여 입력값(이메일 & 비밀번호) 검증
✔ 로그인 성공 시 사용자 정보를 반환하고, 실패 시 null 반환

즉, 이 코드는 Next.js + NextAuth.js를 활용하여 이메일 & 비밀번호 기반 인증을 구현하는 핵심 로직!

action.ts 에 로그인 액션을 추가합니다.

'use server';
 
import { signIn } from '@/auth';
import { AuthError } from 'next-auth';
 
// ...
 
export async function authenticate(
  prevState: string | undefined,
  formData: FormData,
) {
  try {
    await signIn('credentials', formData);
  } catch (error) {
    if (error instanceof AuthError) {
      switch (error.type) {
        case 'CredentialsSignin':
          return 'Invalid credentials.';
        default:
          return 'Something went wrong.';
      }
    }
    throw error;
  }
}

'use client';
//...//

import { useActionState } from 'react';
import { authenticate } from '@/app/lib/actions';
import { useSearchParams } from 'next/navigation';
 
export default function LoginForm() {
  const searchParams = useSearchParams();
  const callbackUrl = searchParams.get('callbackUrl') || '/dashboard';
  const [errorMessage, formAction, isPending] = useActionState(
    authenticate,
    undefined,
  );
 
  return (
    <form action={formAction} className="space-y-3">
      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
        <div className="w-full">
          //......//
        </div>
        <input type="hidden" name="redirectTo" value={callbackUrl} />
        <Button className="mt-4 w-full" aria-disabled={isPending}>
          Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
        </Button>
        <div
          ...
        >
          {errorMessage && (
            <>
              <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
              <p className="text-sm text-red-500">{errorMessage}</p>
            </>
          )}
        </div>
      </div>
    </form>
  );
}

Next.js 로그인 폼 (LoginForm) 코드 해설

이 코드는 Next.js에서 클라이언트 측에서 실행되는 로그인 폼을 구현한 것으로,
폼 제출, 오류 메시지 표시, 인증 처리, 페이지 리디렉션 기능을 포함하고 있어요.

✅ 코드 분석

1️⃣ 'use client'; → 클라이언트 컴포넌트 설정

'use client';

Next.js에서 이 컴포넌트가 클라이언트 측에서 실행됨을 명시.
useState, useEffect, useActionState 같은 훅을 사용할 수 있도록 설정.

2️⃣ 필요한 모듈 가져오기

import { useActionState } from 'react';
import { authenticate } from '@/app/lib/actions';
import { useSearchParams } from 'next/navigation';

인증 함수 (authenticate) 가져오기
- 사용자가 로그인하면 이 함수가 실행되어 인증을 처리함.
URL의 쿼리 파라미터 가져오기 (useSearchParams())
- 로그인 후 리디렉션할 callbackUrl 값을 가져옴.

3️⃣ callbackUrl 설정 → 로그인 후 이동할 페이지 확인

const searchParams = useSearchParams();
const callbackUrl = searchParams.get('callbackUrl') || '/dashboard';

URL에서 callbackUrl을 가져옴.
- 예: /login?callbackUrl=/profile → 로그인 후 /profile로 이동하도록 설정.
callbackUrl 값이 없으면 기본적으로 /dashboard로 이동하도록 설정.

4️⃣ useActionState() → 로그인 폼 상태 관리

const [errorMessage, formAction, isPending] = useActionState(
  authenticate,
  undefined,
);

useActionState()는 폼의 상태(로딩, 오류 등)를 관리하는 Next.js 훅.
authenticate → 로그인 액션 함수 (서버에서 실행).
errorMessage → 로그인 실패 시 표시될 오류 메시지.
formAction → 폼이 제출될 때 실행할 액션 (authenticate 호출).
isPending → 로그인 요청이 처리 중인지 여부 (true면 버튼 비활성화).

5️⃣ 로그인 폼 렌더링 (<form> 태그)

<form action={formAction} className="space-y-3">

<form>의 action={formAction} → 폼이 제출되면 authenticate 실행.

6️⃣ redirectTo 값(hidden input) 설정

<input type="hidden" name="redirectTo" value={callbackUrl} />

로그인 후 사용자를 어디로 보낼지 전달하기 위한 숨겨진 입력 필드.
예: callbackUrl=/profile이면 로그인 성공 후 /profile로 이동.

7️⃣ 로그인 버튼 (<Button>)

<Button className="mt-4 w-full" aria-disabled={isPending}>
  Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
</Button>

aria-disabled={isPending} → 로그인 요청 중이면 버튼 비활성화.
ArrowRightIcon → 로그인 버튼 옆에 오른쪽 화살표 아이콘 추가.

8️⃣ 오류 메시지 표시

{errorMessage && (
<>
  <ExclamationCircleIcon className="h-5 w-5 text-red-500" />
  <p className="text-sm text-red-500">{errorMessage}</p>
</>
)}

errorMessage가 존재하면 오류 메시지를 표시.
ExclamationCircleIcon → 빨간색 경고 아이콘 추가.

✅ 결론

✔ Next.js 클라이언트 컴포넌트에서 로그인 폼 구현
✔ NextAuth.js의 authenticate를 활용한 로그인 처리
✔ 사용자가 로그인하면 callbackUrl을 통해 원하는 페이지로 이동
✔ 로그인 진행 중 isPending 상태를 활용해 버튼 비활성화
✔ 로그인 실패 시 오류 메시지 표시

즉, 이 코드는 Next.js에서 인증 시스템을 구축할 때 사용되는 클라이언트 로그인 폼!

Learn Next.js 제 14장 : Improving Accessibility

hatso — Thu, 13 Mar 2025 00:09:46 +0900

-ai를 사용해 개념정리 했음을 공지합니다.-

이번 장에서 배울 내용

* 사용 방법eslint-plugin-jsx-a11y Next.js와 함께 접근성 모범 사례를 구현합니다.

* 서버 측 양식 검증을 구현하는 방법.

* 반응 사용 방법useActionState 양식 오류를 처리하여 사용자에게 표시합니다.

useActionState

접근성이란 무엇인가 - What is accessibility?

접근성은 장애인을 포함한 모든 사람이 사용할 수 있는 웹 애플리케이션을 설계하고 구현하는 것을 말합니다.

키보드 내비게이션, 시맨틱 HTML, 이미지, 색상, 동영상 등 다양한 분야를 다루는 방대한 주제입니다.

이 과정에서는 접근성에 대해 자세히 설명하지 않습니다.

Next.js에서 제공하는 접근성 기능과 애플리케이션의 접근성을 높이기 위한 몇 가지 일반적인 관행에 대해 논의하겠습니다.

접근성에 대해 더 알고 싶다면 이 사이트를 참고하세요. https://web.dev/learn/accessibility/

Learn Accessibility | web.dev

An evergreen accessibility course and reference to level up your web development.

web.dev

ESlint를 사용하는 것 또한 접근성을 높이는 방법이라고 말한다.

//package.json
"scripts": {
    "build": "next build",
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint"
},

사용법은 아래와 같지만 동작하지 않을 수도 있다. 기본적으로 lint는 next.js 패키지에 설치되어 있지만 없다면 따로 설치해야 한다.

설치 전에 package.json의 scripts에 "lint": "next lint" 구문을 추가해서 아래의 명령어를 실행해 보자.

처음 실행 시 패키지를 다운받는 형태가 나오는게 정상이다.

pnpm lint

처음 실행시 초기화 옵션이 나오는데 아래 설명을 읽고 상황에 맞는 옵션을 선택하면 된다.

pnpm lint 실행 시 "strict" 또는 "base" 옵션이 나오는 이유

Next.js에서 pnpm lint를 실행할 때, ESLint 설정을 초기화해야 하는 경우
strict와 base 중 선택하라는 메시지가 나올 수 있어요.

✅ strict와 base의 차이

strict (엄격 모드)

더 많은 코드 스타일 규칙과 접근성 검사를 적용
base보다 더 엄격한 린팅 규칙을 사용하며, 코드 품질을 더 철저하게 관리할 수 있음
추천 대상: 협업 프로젝트, 코드 품질이 중요한 경우

base (기본 모드)

기본적인 ESLint 규칙만 적용 (strict보다 완화된 규칙)
Next.js의 필수적인 규칙만 포함하며, 엄격한 코드 스타일 검사는 하지 않음
추천 대상: 간단한 프로젝트, 최소한의 코드 검사만 필요한 경우

✅ 어느 옵션을 선택해야 할까?

코드 품질을 철저히 관리하고 싶다면? → strict 선택
기본적인 린팅만 필요하고, 강제적인 스타일 규칙을 원하지 않는다면? → base 선택

✅ 예제: strict 모드 선택 후 ESLint 설정 파일 생성

pnpm lint

Would you like to use strict or base ESLint configuration?
strict를 입력하고 Enter

이후 .eslintrc.json 파일이 생성되며, ESLint 설정이 적용됨!

✅ 결론

✔ strict → 엄격한 코드 스타일 검사, 협업 및 유지보수에 유리
✔ base → 기본 규칙만 적용, 가벼운 린팅 필요 시 선택

개인 프로젝트라면 base, 팀 프로젝트라면 strict를 추천!

참고로 나는 base 모드를 선택했다. 과정에서 lint를 사용하면 어떤 식으로 코드를 관리할 수 있는지 알려주니 따라 하면 된다.

폼(Form) 접근성 개선

Next.js 14장에서는 폼을 더 쉽게 사용할 수 있도록 "접근성을 향상시키는 방법"을 설명하고 있어요.
현재 우리가 3가지 방법을 이미 적용하고 있는데, 그것들을 쉽게 풀어서 정리해 볼게요!

✅ 1. <input> 같은 적절한 태그 사용

❌ 잘못된 예시 (사용하면 안 됨)

<div>이름 입력</div>

✅ 올바른 예시 (사용해야 함)

<input type="text" placeholder="이름을 입력하세요" />

의미 있는 태그(<input>, <option> 등)를 사용해야 함.
div 같은 일반 태그는 보조기술(스크린 리더 등)이 폼 요소로 인식하지 못함.
<input>을 사용하면 보조기술(AT, Assistive Technologies)이 내용을 정확하게 읽어줌.

✅ 2. <label> 태그와 htmlFor 속성 사용

❌ 잘못된 예시 (사용하면 안 됨)

<input type="text" id="name" />

✅ 올바른 예시 (사용해야 함)

<label htmlFor="name">이름</label>
<input type="text" id="name" />

<label>을 사용하면 입력란(input)에 대한 설명을 제공할 수 있음.
보조기술(스크린 리더 등)이 "이름"이라는 정보를 정확하게 전달할 수 있음.
사용자가 <label>을 클릭하면 자동으로 해당 입력란이 활성화됨 → 사용성 향상!

✅ 3. 키보드(Tab 키)로 폼 이동 가능

<input>, <button> 등을 사용하면, 사용자가 Tab 키를 눌러 쉽게 폼 요소를 이동할 수 있음.
div처럼 의미 없는 태그를 쓰면, Tab으로 이동할 수 없음.
키보드를 사용하는 사용자에게 중요한 기능!

결론

✔ 폼 요소(<input>, <option>)를 적절히 사용해야 보조기술이 이해할 수 있음.
✔ <label>과 htmlFor 속성을 사용하면 폼 필드를 쉽게 클릭하고 이해할 수 있음.
✔ Tab 키를 사용하여 폼을 쉽게 이동할 수 있도록 구성해야 함.

즉, 이 3가지를 적용하면 폼을 더 많은 사용자(스크린 리더 사용자, 키보드 유저 등)에게 접근 가능하게 만들 수 있어요!

Form 검증

Form 검증하는 방식에 대해 두 가지 관점으로 설명하고 있다.

클라이언트 측 검증

브라우저의 기능을 사용해서 검증하는 방식 채용

<input
  id="amount"
  name="amount"
  type="number"
  placeholder="Enter USD amount"
  className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
  required
/>

서버 측 검증

zod 라이브러리를 활용해서 유효한 데이터가 어떤 데이터인지 설정함.

Next.js에서 서버측 검증(Server-side Validation) 적용하기

Next.js에서는 서버에서 데이터 검증을 수행하여 보안과 데이터 무결성을 보장할 수 있습니다. 이를 위해 Zod 라이브러리를 활용한 서버측 검증을 적용할 수 있습니다.

✅ 서버측 검증이 필요한 이유

클라이언트 측 검증만으로는 보안이 충분하지 않음 → 사용자가 브라우저 개발자 도구에서 값을 조작할 수 있음.
서버에서 데이터를 검증하면 신뢰할 수 있는 데이터만 데이터베이스에 저장 가능.

✅ 서버측 검증 적용 방법 (Zod 활용)

1️⃣ Zod 스키마를 정의하여 입력값 검증

import { z } from "zod";

const FormSchema = z.object({
  customerId: z.string().min(1, "Please select a customer."),
  amount: z.coerce.number().gt(0, "Amount must be greater than $0."),
  status: z.enum(["pending", "paid"]),
});

customerId → 필수 값
amount → 숫자로 변환 후, 0보다 큰 값만 허용
status → "pending" 또는 "paid" 값만 가능

2️⃣ 폼 데이터 검증 후 처리 (safeParse 활용)

export async function createInvoice(formData: FormData) {
  const validatedFields = FormSchema.safeParse({
    customerId: formData.get("customerId"),
    amount: formData.get("amount"),
    status: formData.get("status"),
  });

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: "Invalid input data.",
    };
  }

  const { customerId, amount, status } = validatedFields.data;
  // 데이터베이스 저장 로직 실행...
}

safeParse()를 사용하여 데이터 검증 후, 성공 여부를 확인.
유효하지 않은 경우 오류 메시지를 반환하고, 데이터 저장을 방지.

✅ 결론

✔ 서버측 검증은 보안을 강화하고 데이터 무결성을 보장
✔ Zod를 활용하여 간단하고 강력한 데이터 검증 적용 가능
✔ 폼 입력값을 서버에서 검증하여 잘못된 데이터 저장 방지

즉, 서버측 검증을 추가하면 보안이 강화되고, 신뢰할 수 있는 데이터만 처리할 수 있습니다!

마지막으로 "보이스 스크린" 기능으로 시각 장애인 분들이 웹 서비스를 사용할 때 용이할 수 있도록 설정하는 법을 알려줍니다.

aria-label 속성을 input 태그에 사용하면 사용자에게 소리로 aria-label의 내용을 읽어줍니다.