(번역) 2025 리액트 기술 스택
ykss.netlify.app
Prisma
ver 6.3.0 ∙ 2025.01.29 업데이트됨
개요
Prisma, 차세대 Node.js 및 TypeScript ORM. 직관적인 데이터 모델, 자동 마이그레이션, 타입 안전성 및 자동 완성을 통해 편리한 데이터베이스 작업 경험을 제공
관련 게시물
모두 보기2025 리액트 기술 스택
오늘은 42dot의 유경상님이 번역해주신 글입니다.
이 글에서는 저자가 자신의 실무 경험과 현재 트렌드를 바탕으로 2025년 리액트 풀스택 애플리케이션 개발을 위한 기술 스택을 제안합니다. Next.js, Tailwind CSS, TypeScript, Prisma, Supabase 등의 핵심 기술과 함께 UI/UX, 상태 관리, 인증, 결제를 위한 도구들을 추천하며, 각 선택의 이유와 장점에 대해 설명하고 있습니다. 새해를 맞아 새로운 리액트 기반의 프로젝트를 준비하시는 분들께 이 글을 추천드립니다 :)
> 글 링크 : https://ykss.netlify.app/translation/2025_react_tech_stack/
토글은 채용연계형 인턴을 채용중!
안녕하세요, 회계 업계에서 ‘AI 기반 솔루션’ 도입을 이끌고 있는 토글캠퍼스입니다.
저희는 AI Agent를 활용하여 회계 업무에서 발생하는 비정형 데이터의 분석, 복잡한 규칙 기반의 작업 최적화, 그리고 회계 기준 및 세법과 같은 동적 데이터를 전처리하여 활용하는 등 인공지능 기술 중심으로 기존 회계산업의 업무 방식을 혁신하는 것을 목표로 하고 있습니다.
현재는 내부감사 자동화, 절세 플랜 생성 등 AI 기반 회계 솔루션을 개발 중이며, 앞으로 이를 토대로 약 70% 이상의 기존 회계업무를 모두 자동화하기 위해 나아가고 있습니다.현재 금융 업계에서 기술력을 인정받아 빅4 회계법인 중 2곳, 한국공인회계사회와 장기적 파트너십(고객사 + 공동개발 MOU 등)을 맺는 등 시장에서 그 가치를 인정받고 있고, 23년 7월 설립 후 1년만에 누적 투자액 30억을 유치하여 꾸준히 성장하고 있습니다.
또 24년에는 억단위의 ARR을 달성하여 내년에는 흑자전환과 Series A 투자 유치를 목표로 하고 있습니다.앞으로 저희와 함께 폭발적으로 성장하고, 미국 진출 등 더 큰 도전을 함께 할 개발자 인턴(채용연계형)을 채용합니다.
[토글 팀 소개]
저희는 8명의 작은 팀으로, 개발자 5명, 디자이너 1명, 운영 2명으로
구성되어 있습니다.
AI Agent라는 기술이 아직 시장에 보편화 되어 있지 않은 만큼, ‘
토글캠퍼스’에서만 할 수 있는 경험이라는 특별함이 있습니다.
함께 배우고 성장하는 재미에 푹 빠져 집요하게 몰입하고 있습니다.
긍정적인 분위기를 유지하면서도 지치지 않고 꾸준하게 시도합니다.
(이 부분은 우리팀이 국내 최고라고 자부하고 있습니다 ㅎㅎ)
[저희가 풀고 있는 문제]
Accounting Agent as a service (A4S)
LLM-assisted Decision-Making
Multi Agent Orchestration
Multi Modal Document Analyzer
[저희가 찾고 있는 분]
새로운 지식을 배우는 것에 열려있고, 성장하는 재미에 푹 빠지신 분!
아직 10명도 되지 않는 극초기 팀의 초기멤버로서 프로덕트의 방향성, 기획, R&D 등 모든 분야에 기여하는 것에 관심이 많으신 분을 모십니다!
기술 스택이 꼭 맞지 않아도 괜찮습니다. 스택과 상관없이 기술을 빠르게 학습해서 문제를 해결하고 싶으신 분, 성장하려는 의지와 에너지가 넘치시는 분이라면 누구나 환영합니다!
[모집 포지션]
풀스택 개발자 1명
회계 기준, 세법을 검색하는 AI 검색 서비스를 엔드투엔드로 개발하는
업무를 담당하실 예정입니다.
지금 사용하는 기술들
Python(FastAPI)
Cloud Computing(AWS, GCP, Azure)(optional)
Next.js
상태 관리 : Redux(optional), React-Query(optional)
스타일 : tailwindcss(optional)
ORM : Prisma(optional)
AI 개발자 1명
회계 업무를 자동화하는 AI Agent 개발 및 Agent Orchestration
기획 개발 업무를 담당하실 예정입니다.
지금 사용하는 기술들
Python
LlamaIndex
Langgraph
Autogen
Huggingface
관심 있으신 분은 부담 없이 지원해주세요.
커피챗도 언제나 환영입니다!
감사합니다!!
[상세 채용 페이지]
관련 개발자 Q&A
모두 보기nextauth 를 이용해 springboot 의 jwt를 받아와서 로그인을 구현중입니다.
안녕하세요. nextauth 를 이용해 로그인 구현중입니다. 흔히 생각하는 소셜 로그인이 아닌 username 과 password를 통해 springboot security 에서 jwt를 반환 받아오려고 합니다. // app/api/auth/[...nextauth]/route.ts CredentialsProvider({ name: 'Credentials', credentials: { username: { label: 'Username', type: 'text', placeholder: '아이디' }, password: { label: 'Password', type: 'password' }, }, async authorize(credentials, req) { const res = await fetch(`${process.env.NEXTAUTH_URL}/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ username: credentials?.username, password: credentials?.password, }), }); const user = await res.json(); console.log(user); if (user) { return user; } else { return null; } }, }), 그런데 위의 코드처럼 코드를 구성했을때 .env.local 파일의 NEXTAUTH_URL 이 등록이 되면 authorize 가 작동하지 않습니다 . 에러 log라도 있으면 어떻게라도 해보겠는데.. 그것도 없습니다. 그래서 NEXTAUTH_URL 를 등록하지 않고 const res = await fetch(`http://localhost:8080/auth`, 바꾸면 이것역시 에러 log 없이 브라우저상에서 Error 라는 문구만 보여줍니다. 이렇게 생각했을때 authorize는 값을 내부에서만 가져올수 있는거 같은데요. 실제로 가상의 const user = {....} 를 만들어서 반환하면 로그인이 아주 잘 됩니다. 하지만 제가 원하는 방법은 아니죠..ㅍ 검색해보면 prisma 가 많이 나오는데.. 그것 또한 시스템상 제가 원하는 방식이 아닙니다. springboot security 에서 jwt를 받아와서 nextauth에 로그인을 할수 있는 방법은 없을까요? custom login 페이지를 만들어서 해야 할거 같은데 방법을 잘 모르겠습니다. 현재 springboot 서버에 cors 설정이 정상적으로 허용된 상태입니다.
공식문서에서 콜백함수 쪽을 확인해보세요. 인증 요청은 저렇게 보낸다고 명세 되어서 요청은 날아갔으나 그 후 발동되는 콜백에 대한 명세가 없어서 아무일도 벌어지지 않는 상황으로 보입니다.
영화 예매 프로젝트의 예매 기능과 관련하여
안녕하세요. 토이 프로젝트로 영화 예매 서비스를 만들어보고 있습니다. 어느 정도 기능 구현이 완료되었다고 생각했었는데, 오늘 생각지도 못한 고려 사항을 발견해버렸네요 ㅠㅠ.. 좌석 모델과 예매 모델 사이의 관계의 모호함이 있었습니다.. 저는 MovieSchedule 모델을 두어 참조하는 영화의 id, 상영 시작 시간, 상영 종료 시간, 참조하는 screen(상영관)의 id를 column으로 두었습니다. 그리고 Reservation 모델이 이 MovieSchedule 모델을 참조하도록 하고, 예매 인원, 예매하는 유저의 아이디 등의 column을 갖도록 하였습니다. 아래 코드를 참조부탁드립니다(Prisma ORM을 사용하였습니다). 하지만 이렇게 구성을 하다보니, 같은 영화, 같은 상영관이지만 시간대만 다른 좌석(같은 screen, 다른 MovieSchedule을 참조)의 경우에, seat와 reservation이 one-to-many로 설정되어 있기 때문에 이미 다른 시간대(다른 MovieSchedule)에서 해당 좌석을 예매 해두었다면, 좌석은 더 이상 예매를 할 수 없는 상태가 되더군요.. schema를 변경할 필요가 있을 것 같은데 ERD를 설계해본 경험이 별로 없다보니 어떤식으로 변경해야 할지 감이 잘 안 잡힙니다.. 제가 생각해본 대안들은 다음과 같습니다. 1. movieSchedule에 대응하는 screen과 seat를 생성하고, 상영 후 해당 screen 및 seat를 모두 삭제. 이러면 여러 시간대에 같은 screenNum이 여러개 생길 수 있으니 screenNum의 unique 조건을 삭제해야할듯. 2. seat와 reservation의 관계를 many to many로 변경하고 reservation-seat과 같은 table을 하나 더 생성. 해당 테이블은 seatId와 reservationId를 갖고 있을 것이므로, 좌석 조회 시 reservation의 movieSchedule과 조회하는 movieSchedule이 일치하면 예약되었음을 확인할 수 있음. 위 대안들이 적절한지, 그렇지 않다면 어떤 대안이 있을지 조언 부탁드립니다 ㅠㅠ
공유해주신 Prisma 스키마를 보면 현재 Seat 모델과 Screen 모델 간에 직접적인 관계가 형성되어 있는데요. 상영관에서 우리가 실제로 만질 수 있는 의자라는 "물체"라고 생각하면 이러한 데이터 모델링이 맞을 수도 있겠지만, Seat 모델이 Reservation 모델과도 연관되어 있다라는 것을 고려해봤을 때, 여기서 Seat 모델은 물리적인 의자라기 보다는 특정 상영 시간 내에서만 유효한 논리적인 "좌석"의 개념에 더 가까울 수도 있을 것 같습니다. 영화관의 비즈니스를 생각해보면 "일정 시간 동안 의자의 사용 권리"를 파는 것이지, 가구점처럼 물리적인 의자를 판매하는 게 아니니까요. 만약에 제가 바라보는 관점이 맞다면, Seat 모델과 Screen 모델 간에 관계를 끊고 대신에 MovieSchedule 모델과 다대일 관계를 맺으시는 것도 고려해보실 수 있을 것 같습니다. 이렇게 해주시면 자연스럽게 여러 개의 좌석을 하나의 상영 일정과 하나의 예약에 연결하실 수 있으실 거고요. 뿐만 아니라 Seat 모델은 더 이상 상영관에 비치되어 있는 의자를 의미하지 않으므로 Seat 모델과 Reservation 모델의 관계를 다대다로 바꿔야할까라는 고민도 사라지지 않을까요? 추가적으로 over booking을 방지하기 위해서 어떤 영화의 특정 상영 일정에 어떤 좌석이 나갔는지 여부는 Seat 모델에 isReserved와 같은 칼럼을 추가하여 관리할 수도 있고요. 논리적인 식별자 뿐만 아니라 물리적인 의자 번호가 필요하다면 Seat 모델에 seatNumber 칼럼을 추가하는 것도 고려하실 수 있을 것 같습니다. 마지막으로 혹시 물리적인 의자와 논리리적인 좌석을 모두 관리하고 싶으시다면 Ticket이라는 새로운 모델을 추가하시는 것도 한 가지 방법이 될 수 있을 것 같아요. 그리고 Seat는 Screen과 Ticket과만 관계를 맺고, 대신 Ticket은 MovieSchedule과 Reservation과 관계를 맺어 주는 것이지요. 그러면 각 상영 일정에 대해서 해당 영화를 상영하는 스크린의 의자(Seat) 개수만큼의 예약이 가능한 좌석(Ticket)들을 미리 생성해놓을 수 있겠죠?
Docker compose 컨테이너 구성을 어떻게 될까요?
저는 prisma nextjs postgresql을 사용하고 있습니다 Docker compose에서 컨테이너를 local용postgresql, deploy용postgresql, nextapp 이렇게 3개로 구성하려고 합니다 이렇게 해서 npm run dev로 app을 local로 실행한다고 하면 local용 postgresql과 연결되게 하고 Build를 하고 deploy된것은 deploy용postgresql과 연결되게 하려고합니다 해당 프로젝트가 포폴용이라 상관은 없지만, 정말 서비스를 진행하려고하면 서버를 늘리는 일이 일어날텐데 이런경우 위에서 생성했던 docker이미지를 이용해서 docker compose up을 할텐데요 그러면 새로운 서버가 생길때마다 local용 db를 생성할 수 밖에 없을 것 같은데 제가 아직 배포도 안해보고 프론트라서 제가 지금 생각하는 방식이 맞는지 잘 모르겠습니다 혹시 제가 말한게 맞나요?
저도 프론트이지만 최근 해당부분 관련해서 미니PC로 가지고 놀다보니 어느정도 이해가 가더라구요. 일단 Chatgpt 등을 통해 막연하게 만들어가면서 차이점을 보는것도 좋았던 것 같습니다. DB는 예를 들어 posgresql로 구현하셧다면 딱히 코드나 버전이 바뀔일이 없습니다. 15v을 사용했다면 차후 버전업을 하는게 아닌이상 Docker 이미지를 다시 업로드하지 않으며 새로운 서버가 생기지 않습니다. 마찬가지로 작성 중 활용할 db가 2개라면 2개의 도커로 구성하시면 되며 env의 환경변수를 통해 postgresql에 접근하는 주소를 바꿔주시면 될 듯 합니다. 로컬, 개발, 엔터프라이즈 이렇게 3개가 필요하시면 3개를 만들어서 쓰시면 될 듯 합니다.
프론트엔드분들은 개인 프로젝트할 때 백엔드를 어떻게 하시나요?
프론트엔드 분들은 취업이나 이직, 사이드프로젝트 등 개인 프로젝트를 진행할 때 백엔드는 어떻게 하시나요? 예시는 react 진영 기준으로 하였습니다 다른 선호하는 방식이 있다면 댓글로 알려주세요! 1. 클라이언트, 서버 각각 전부 개발 ex. reactjs(nextjs) + nestjs 2. 백엔드 서비스를 활용하여 개발 ex. nextjs + firebase, supbase 3. 풀스택 프레임워크 사용해 한 번에 개발 ex. nextjs + prisma(orm) + s3(storage)
안녕하세요 해당 답변에 대한 개인적인 의견을 적어봅니다. 위의 글에서 프론트엔드 이직 시, 개인 프로젝트, 사이드 프로젝트라고 적어 두셨는데, 그러면 프론트엔드 개발이나 기술에 더 힘을 주고, 백엔드에 대해서는 msw를 해서 하는 게 어떨까요?? 그래서 제가 생각하는 방향은 react로 프론트엔드 개발자로서 조금 더 집중해야 할 것에 집중하고 데이터 관련 해서는 msw를 상요하는 것을 추천 드립니다. 물론 서비스가 고객까지 노출 될 경우에는 백엔드 개발에 필요를 두고 서로 분리하여 개발하는 것이 맞지만, 위의 글을 봤을 때는 이직과 취업에 관련된 개발이라 하면 혼자서 빠르게 본인의 장점을 어필 할 수 있도록 하는 것이 가장 좋다고 생각합니다. 우리가 종종 어떤 프로젝트나 일을 할 때 목표를 너무 크게 잡아서 오히려 더 실천을 못하는 경우가 있는데, 먼저 어떤것을 할 때 작게 목표를 잡고 빠르게 실천해서 서서히 발전시키는 방향으로 작업하면 더 좋은 결과물이 나올 것 입니다. 응원합니다. 화이팅 😎😎
프론트엔드 공부 7개월 차, 방향성을 잘 못 잡겠습니다. 조언 부탁드립니다.
안녕하세요 저는 취직을 목표로 공부를 하고 있는 비전공자 입니다. 현재 7개월 간 공부하면서 많이 성장했다고 생각하는데요. 요즘 들어 방향성이 흔들리는 것 같습니다. Typescript, React, nextjs 그리고 알고리즘도 꾸준히 공부하고 있습니다. 나름 빠르게 성장 중이라 생각되었는데 요즘 들어 정체가 되는 듯 합니다. 처음 Nextjs를 공부하면서 인강으로 pscale + prisma 조합으로 백엔드 연습했었고, 요즘 새로운 시도를 해보고자 supabase를 시도해 보고 있는데, 문득 프론트 엔드로 취직이라는 목표를 가지고 쓸데없는 공부를 하는게 아닌가 라는 생각도 들고, 끝도 없으니 너무 얕게 공부하게 되는 것 같아서 이건 아니다 라는 생각도 들구요. 팀 프로젝트 경험을 쌓아 보고 싶어서 다양한 부트캠프 (네부캠, 우테코, 크래프톤 정글 등) 지원해보려고 하는데 그 이전 스스로 무엇을 공부해야 하는지 고민입니다. 현재는 이런 공부를 하고 있어요 1. 모딥다 정독 2. 백준 알고리즘 3. 클론 코딩 및 개인 프로젝트 이런 것들이 궁금합니다 1. 다양한 serverless db를 다루어 보는 것이 프론트 취직이라는 목표에 부합하는지. 2. 현재 중요한 무언가를 놓치고 있는 것이 아닌지. 3. 부트캠프를 지원하기 이전 팀 프로젝트에 도움이 되고, 스스로 성장시킬 수 있는 기술적 역량이 있는지. 조금 심도 깊은 공부를 하고 싶은데, 프론트엔드를 공부하는 취준생에게 ”나였으면 이런걸 공부했을 것 같다“ 같은 조언 한마디 부탁드립니다!
궁금하신 점에 있어서 답변을 드리겠습니다. 저는 백엔드로 근무중입니다만 컴퓨터공학을 졸업했고 프론트엔드도 어느 정도 공부했던 경험이 있습니다. 1. 다양한 Serverless DB를 다루어 보는 것이 프론트 취직이라는 목표에 부합하는지. -> 프론트엔드 / 백엔드 상관 없이 다양한 기술을 접하는 것은 언제나 도움이 됩니다. 빅데이터 / 인공지능 / 데브옵스를 경험해도 도움이 될겁니다. 다만 프론트엔드 취직이라는 목표에 직접적으로 연관이 있느냐라고 물어봤을 때 직접적인 영향은 없을 수 있습니다. 일단 프론트엔드 기술 react / vue 에 대한 기술적인 지식을 잘 알고 있느냐가 선행되어야 합니다. 그후 더불어 공부한 영역이 있다면 서류 / 면접 때 가산점이 붙는 형식입니다. 2. 현재 중요한 무언가를 놓치고 있는 것이 아닌지. -> 알려주신 내용으로는 현재 react / next / typescript를 공부중인 것으로 보입니다. 중요한 무언가를 놓치고 있다고는 생각되지는 않습니다. 다만 신입으로 취업하기 위해서는 단순한 공부가 아니라 공부한 것으로 만든 결과가 필요합니다. 이른바 포트폴리오가 필요합니다. 중요한 것이 필요하다면 앞서 배운 내용들로 스스로 처음부터 기획해서 만든 포트폴리오가 필요할 것 같습니다. 이 때 포트폴리오는 스스로 처음부터 만들어도 좋고 팀원을 꾸려서 각자 기능을 구현해서 만들어도 좋다고 생각합니다. 중요한 것은 배포 / 운영까지 가면 좋을 것이라 생각됩니다. 3. 부트캠프를 지원하기 이전 팀 프로젝트에 도움이 되고 스스로 성장시킬 수 있는 기술적 역량이 있는지. -> 부트캠프에 가시면 바로 상위권으로 가실 것 같습니다. 보통 그렇게 준비하고 가지 않습니다. 우테캠이라고 하더라도 대부분 알고리즘을 준비하고 들어가는 것으로 알고 있습니다. 해당 과정으로 배민에 입사한 제 절친도 그랬구요. 이미 지금 공부하신 것이 팀 프로젝트할 때 많이 도움이 될 것이라 생각합니다. 다만 더 도움이 될 부분이 있다면 CS / 알고리즘 이론 (문제풀이X)에 대한 내용을 더 공부하시면 좋을 것 같습니다. 결국 코딩테스트에 통과해도 기술 면접을 또 보게 되니까요. 기술 면접은 벼락치기로 준비하기 힘든 면이 있습니다.
Next.js 13 Vercel로 배포 질문
안녕하세요 이전에 사용한적 없던 Next.js를 이참에 13 버전이 나온 김에 공부를 하고 있습니다 DB의 경우 PlanetScale와 Prisma를 사용하여 같이 사용하고 있습니다 Vercel을 통해 Next.js를 배포한 상태이구요. 혼자 개발 공부용으로 하고있다보니 일단 배포DB와 개발 DB는 동일한걸 사용중입니다 npm run dev로 localhost를 접속하면 DB에 수정된 사항이 새로고침하면 바로 반영이 됩니다 (예시 : DB에 데이터가 4개가 있다가 > 6개로 변경) 하면 바로 반영이 됩니다 그러나 Vercel를 통해 배포한 페이지의 경우 동일한 DB를 사용하고 있으나 변경사항이 즉각 반영이 되지 않습니다, 항상 재 배포를 해야 그때 기준 최신화된 데이터를 가져옵니다 (예시 : DB에 배포 직전까지 데이터가 6개가 있다가 > 배포 후 4개로 변경 > 동일 DB 사용하니 당연히 이거도 반영이 되겠지? > 예상과 달리 데이터가 6개 그대로인 상황이 발생) 배포 버전에서도 DB 최신화된 사항을 그대로 반영시킬려면 어떻게 해야할까요??..
저도 사이드프로젝트를 하다가 똑같은 현상을 겪어서, 아주 공감이 되는 질문이네요 ㅎㅎ 12에서 13으로 넘어가며, 서버 컴포넌트 개념이 추가되고 서버 컴포넌트의 경우 배포 시 정적으로 페이지가 만들어져 빌드 시점에서의 데이터를 기준으로 페이지들이 구성되는데요. https://nextjs.org/docs/app/building-your-application/deploying/static-exports#server-components 이를 해결하기 위해서는 클라이언트 컴포넌트로 만들어 렌더링 시점에 데이터를 가져오는 CSR 또는 서버 컴포넌트 그대로 유지한 상태에서 어느 시점에 기반 데이터를 업데이트 할지 설정해주는 ISR 방식 이렇게 두가지가 있을 것 같아요. (ISR 방식은 저도 아직 적용은 안해봤지만) 서버 컴포넌트의 데이터를 재확인하여, 페이지를 업데이트해주는 ISR(Incremental Static Regeneration) 방식은 공식 문서를 참고해서 적용해보실 수 있을 것 같습니다. https://nextjs.org/docs/app/building-your-application/data-fetching/revalidating
개발용 DB와 운영용 DB를 나누는 방법이 궁금해요
안녕하세요! 지금 장소추천 서비스를 만들고 있어요. planetScale과 prisma를 이용하고 있어요. 새로 업데이트를 해서 data schema가 변경될 것 같아요. 근데 운영 서버와 개발 서버 모두 하나의 DB에 연결되어 있어서, 개발 시 서비스 운영에 영향을 끼칠거 같은데 어떻게 해결하면 좋을까요? 대학생이고, 처음 만들다보니까 어려움이 많습니다. 많은 도움 부탁드립니다
답변
개발시 운영에 영향을 미치지 않도록 되도록 모든 인프라를 분리해야 합니다. 왜냐하면, 개발후 운영에 적용하기 전 모든 부분에서 테스트를 안정적으로 할 수 있어야 하기 때문입니다. 따라서 DB도 개발용/운영용으로 분리되어야 하는게 맞구요, 인스턴스 자체를 분리하시기 바랍니다. 코드베이스의 경우 환경변수 사용등으로 개발/운영 별도의 코드가 나뉘는 일이 최소화 되도록 하시구요~
웹 데브에서 어떤 테크스택을 사용하시나요?
하나의 웹앱을 만들 때에도 다양한 테크스택을 사용할 수 있고 어떤 테크스택을 사용하느냐는 개발 트랜드에 따라서 조금씩 바뀌는 것 같아요. 그래서 요즘 개발자 분들은 어떤 테크스택을 사용하는지 궁금해서 질문 올립니다. 프레임워크, DB, ORM, CSS 등 말그대로 개발에서 사용하는 툴들을 알려주세요 ㅎㅎ 제가 사용하는 테크스택은 (프론트에 치중되어 있습니다) 이렇습니다! - NextJS - Prisma - Tailwind - Supabase
