React와 Node.js로 나만의 블로그 만들기 (풀스택 완전 정복)
"나만의 블로그, 근사하게 하나 만들어볼까?"
이런 생각, 한 번쯤 해보셨죠?
그런데 막상 시작하려고 하면
수십 개의 튜토리얼 창만 띄워놓고
결국 폴더만 만들다 지쳐 잠든 경험, 저만 있는 거 아니잖아요?
솔직히 저도 그랬어요.
React로 예쁜 화면 만드는 건 좀 알겠고,
Node.js로 서버 비스무리한 것도 만들어봤는데...
도대체 이 둘을 어떻게 한 팀으로 묶어서
하나의 서비스로 만드는지 감이 안 오더라고요.
마치 영어 요리책이랑 한글 요리책을
따로 들고 있는 느낌이랄까요?
각각은 이해되는데, 합쳐서 요리를 하려니 막막한 거죠.
하지만 걱정 마세요.
오늘 이 글이 여러분의 풀스택 프로젝트를 위한
가장 확실한 내비게이션이 되어 드릴게요.
React라는 멋진 인테리어와 Node.js라는 튼튼한 골격을 합쳐
세상에 하나뿐인 나만의 집(블로그)을 짓는 방법, 지금 바로 시작합니다!
🚀 뼈대부터 세우자! 프로젝트 준비물
근사한 집을 지으려면 연장부터 챙겨야죠.
코딩도 마찬가지예요.
본격적으로 벽돌을 쌓기 전에,
우리의 작업을 도와줄 든든한 도구들을 준비해 볼게요.
이름이 좀 어려워 보여도 겁먹지 마세요.
하나씩 설치하고 나면, "아하! 이게 그거였구나!" 하고
무릎을 탁 치게 될 거예요.
✅ Node.js: 우리 블로그의 보이지 않는 곳에서 모든 일을 처리할 '만능 일꾼'이에요. 백엔드 서버의 심장이라고 할 수 있죠.
✅ VS Code: 코드를 짜고 다듬을 '나만의 작업실'이에요. 여기서 모든 마법이 시작됩니다.
✅ Postman (선택사항): 주방(백엔드)에서 만든 요리(API)가 잘 나왔는지 미리 맛보는 '시식 전문가' 같은 친구예요. 있으면 정말 편해요.
✅ 기초 지식: JavaScript, React, Node.js에 대한 아주 약간의 관심! 수학의 정석이 아니라 구구단 정도만 알아도 충분해요.
이 글은 각 재료(React, Node.js)가 뭔지는
어렴풋이 안다는 가정하에 진행되는 레시피예요.
만약 '변수'가 뭔지, '함수'가 뭔지 헷갈린다면,
유튜브의 무료 기초 강의를 30분만 보고 오셔도
훨씬 수월하게 따라오실 수 있을 거예요!
💡 1단계: 보이지 않는 심장, 백엔드 서버 구축 (Node.js)
모든 서비스의 핵심은 바로 서버예요.
우리 블로그를 하나의 레스토랑이라고 상상해볼까요?
백엔드는 바로 손님 눈에 보이지 않는 '주방'의 역할을 해요.
주문을 받고, 요리(데이터 처리)를 하고, 완성된 음식을 내보내는 곳이죠.
이 주방을 Node.js와 Express로 빠르고 튼튼하게 지어볼게요.
• 메뉴판(API) 제공: 홀(프론트엔드)에서 어떤 음식을 주문할 수 있는지 알려주는 메뉴판을 만들어요.
• 식료품 저장고(DB) 관리: 손님들이 쓴 글, 댓글 같은 소중한 재료들을 안전하게 보관해요.
• 24시간 영업 준비: 언제든지 홀에서 주문이 들어오면 바로 응답할 수 있도록 항상 대기해요.
자, 이제 주방 공사를 시작해볼까요?
먼저 프로젝트 폴더를 만들고, 필요한 자재들을 가져올게요.
mkdir my-blog-backend
cd my-blog-backend
npm init -y
npm install express cors mongoose
이제 주방의 기본 가스레인지와 개수대를 놓아볼게요.
`index.js` 파일을 만들고 아래 코드를 붙여넣어 보세요.
const express = require('express');
const cors = require('cors');
const app = express();
const port = 5000;
app.use(cors()); // 옆집(프론트)에서 오는 주문을 받기 위한 허가증!
app.use(express.json());
app.get('/', (req, res) => {
res.send('저희 레스토랑 주방, 정상영업합니다!');
});
app.listen(port, () => {
console.log(`${port}번 화구에서 불을 지폈습니다.`);
});
터미널에 `node index.js`라고 외치면
드디어 우리 레스토랑의 주방이 문을 엽니다! 정말 쉽죠?
🎨 2단계: 화려한 얼굴, 프론트엔드 화면 구성 (React)
주방이 준비됐으니 이제 손님을 맞이할 '홀'을 꾸밀 차례예요.
프론트엔드는 손님이 직접 보고, 만지고, 경험하는 공간이죠.
인테리어가 예쁘고 동선이 편해야 다시 찾고 싶잖아요?
이 홀을 React라는 레고 블록으로 조립해볼게요.
npx create-react-app my-blog-frontend
cd my-blog-frontend
npm start
이 마법의 주문만 외우면,
눈앞에 리액트로 만들어진 기본 홀이 짠! 하고 나타나요.
이제 여기에 테이블(컴포넌트)을 배치하고 의자를 놓으며
우리만의 스타일로 공간을 채워나갈 거예요.
• PostList.js: 전체 메뉴판처럼 글 목록을 쫙 보여주는 블록
• PostView.js: 음식 하나를 자세히 보여주듯 글 하나를 보여주는 블록
• PostWrite.js: 손님이 직접 레시피를 적듯 새 글을 작성하는 블록
홀(프론트)에서 주방(백엔드)으로 주문을 넣으려면
'전화기'나 '주문서'가 필요하겠죠? 그 역할을 해줄 `axios`를 설치할게요.
npm install axios
🔗 3단계: 주방과 홀을 잇다! React와 Node.js 연결
자, 드디어 대망의 하이라이트입니다.
각자 멋지게 만들어진 주방과 홀을 하나로 연결해서
드디어 손님을 받고 음식을 서빙하는, 진짜 레스토랑을 오픈할 거예요.
• 주문과 요리: 홀(React)에서 '글쓰기' 주문을 넣으면, 주방(Node.js)에서 요리해 저장고(DB)에 보관해요.
• 실시간 서빙: 주방의 최신 요리(글) 목록을 홀의 메뉴판에 바로바로 업데이트해서 보여줘요.
• 역할 분담: 홀 직원은 인테리어에, 주방 직원은 요리에만 집중하니 레스토랑 전체 효율이 300% 올라가요!
홀에 있는 메뉴판(`PostList.js`)에서
전화기(`axios`)를 들어 주방에 최신 메뉴를 물어볼게요.
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function PostList() {
const [posts, setPosts] = useState([]);
useEffect(() => {
// 주방(localhost:5000)에 전화해서 전체 메뉴(/api/posts)를 달라고 요청!
axios.get('http://localhost:5000/api/posts')
.then(response => {
setPosts(response.data); // 받은 메뉴를 메뉴판에 기록
});
}, []);
// ... posts를 예쁘게 보여주는 JSX 코드
}
주방에서는 `/api/posts`라는 주문을 받으면
저장고(DB)에서 글 목록을 꺼내 맛있게 요리한 뒤
JSON이라는 접시에 담아 홀로 보내주면 끝!
원래 웹 세상에서는 보안 때문에 옆집(React, 3000번)에서 우리집(Node, 5000번)에 뭘 달라고 하면
경비 아저씨가 막아요. 이때 필요한 게 바로 `cors`라는 '출입증'이에요.
주방 코드에 `app.use(cors())` 한 줄을 넣어 '아, 저 옆집은 아는 사이니까 통과시켜주세요!' 라고
미리 말해두는 거죠. 정말 중요해요!
어때요? 이 흐름만 이해하면 끝난 거예요.
이제 '새 메뉴 추가(글쓰기)', '메뉴 수정', '메뉴 삭제' 같은 기능들을
똑같은 원리로 하나씩 추가해 나가면,
어느새 여러분의 레스토랑은 동네 맛집으로 소문날 겁니다!
🏆 축하합니다! 이제 당신도 풀스택 건축가입니다
여기까지 오셨다면, 스스로에게 큰 박수를 보내주세요!
여러분은 이제 단순히 코드를 따라 치는 사람이 아니라,
서비스의 설계도(백엔드)를 그리고, 멋진 외관(프론트엔드)을 지어 올린
풀스택 건축가가 되신 거예요.
주방과 홀을 연결하며 겪었던 문제들, 그리고 그걸 해결했던 경험은
앞으로 어떤 거대한 빌딩을 짓게 되더라도
가장 든든한 기초 공사가 되어줄 거예요.
✅ 튼튼한 골조(백엔드): Node.js와 Express로 데이터가 오가는 길을 만들었어요.
✅ 멋진 인테리어(프론트엔드): React로 사용자가 머물고 싶은 예쁜 공간을 꾸몄어요.
✅ 중앙 통로(연결): Axios로 골조와 인테리어를 연결해 살아 숨 쉬는 집을 완성했어요.
✅ 자신감(경험): 이제 어떤 집이든 지을 수 있다는 자신감을 얻었어요!
이제 두려워 말고, 여러분의 집에 새로운 가구를 들여보세요.
방명록(댓글 기능)을 만들거나, 비밀번호 잠금(로그인)을 달아보거나,
아니면 밤에는 조명을 바꾸는(다크 모드) 건 어떠세요?
코드는 여러분의 상상을 현실로 만드는 가장 강력한 도구입니다.
여러분의 첫 번째 풀스택 건축 프로젝트를 진심으로 응원합니다!
#풀스택, #React, #Nodejs, #블로그만들기, #개발자, #코딩독학, #프로젝트, #초보개발자, #웹개발, #포트폴리오, #IT정보, #코딩팁, #개발블로그, #풀스택개발자, #코딩초보, #나만의블로그