1. Frontend: Vue.js + TypeScript
- 프레임워크: Vue 3
- 언어: TypeScript
- 상태 관리: Pinia
- 스타일링: SCSS 또는 Tailwind CSS
- 빌드 도구: Vite
2. Backend: Java + Spring Boot
전통적으로 네이버는 Java 기반의 시스템이 매우 견고합니다.
- 프레임워크: Spring Boot 3.5.10
- 언어: Java 25
- API 설계: REST API
- 인증: Spring Security + JWT
- 빌드 관리: Gradle
3. Database: RDBMS + NoSQL (선택)
- 메인 DB: Oracle
- ORM: Mybatis
- 검색(심화): Elasticsearch
원하는 건 Vue + TypeScript + 백엔드 Java + Mybatis 였고, 이에 맞게 시스템 구성도를 짜달라고 하였다.
1. DB 생성
기존에 사용하던 Oracle 21c가 있어서 유저만 생성해 주었다.
CREATE USER NAVERCLONE IDENTIFIED BY 1234
하지만 이렇게 실행하면 오라클 12c 이상부터는 'ORA-65096: 공통 사용자 또는 롤 이름이 부적합합니다.' 이 에러를 보게 되는데, 오라클 12c 이상부터는 계정 생성 시 CREATE USER C##아이디 IDENTIFIED BY 비번; 처럼 C##을 붙여야 하는 경우가 많아서 그렇다.
SQL> show CON_NAME;
CON_NAME
------------------------------
CDB$ROOT
CON_NAME을 봤을 때 PDB가 아닌 CDB라면
alter session set "_ORACLE_SCRIPT"=TRUE;
를 실행한 후 ' CREATE USER NAVERCLONE IDENTIFIED BY 1234' 생성해 주면 정상적으로 실행된다. 현재 세션에서만 유효하니 FALSE로 바꿔줄 필요는 없다고 한다.
(나중에 DB Tool이나 접속할 때 앞에 C## 붙여야 하는 불편함 때문에 해 주었음)
2. application.properties 설정
# tomcat setting
server.port=9090
server.servlet.context-path=/naver
server.servlet.encoding.charset=UTF-8
server.servlet.encoding.force=true
# DB source
spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe
spring.datasource.username=NAVERCLONE
spring.datasource.password=naver
server.port=9090 #Tomcat port 설정
server.servlet.context-path=/naver #접근 경로
server.servlet.encoding.charset=UTF-8 # 한글 깨짐 방지
server.servlet.encoding.force=true #한글 깨짐 방지
spring.datasource.url=jdbc:oracle:thin:@localhost:1521:xe #JDBC URL
spring.datasource.username=NAVERCLONE #JDBC USER
spring.datasource.password=1234 #JDBC PWD
3. 패키지 및 파일 생성
* 패키지 생성
src/main/java/com/naver/clone/controller
src/main/java/com/naver/clone/mapper
src/main/java/com/naver/clone/dto
* 파일 생성
src/main/java/com/naver/clone/controller/UserController.java
src/main/java/com/naver/clone/mapper/UserMapper.java
src/main/java/com/naver/clone/dto/UserDto.java
4. XML 매퍼 수정
src/main/resources/mapper/UserMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.naver.clone.mapper.UserMapper">
<select id="getUserById" resultType="com.naver.clone.dto.UserDto">
SELECT USER_ID, USER_NAME, EMAIL
FROM USERS
WHERE USER_ID = #{id}
</select>
</mapper>
5. index 파일 생성
src/main/resources/static/index.html
<!DOCTYPE html>
<html>
<head>
<title>Naver Clone</title>
</head>
<body>
<h1>네이버 클론 코드</h1>
</body>
</html>
결과
6. Vite 설치
Vite 란?
Vite는 Vue.js나 React 같은 프론트엔드 프레임워크를 실행시키는 빌드 도구이다.
우선 Vite 를 생성하기 위해선 node.js를 설치해야 한다.
이전에 node.js를 이미 설치하여서 다음 단계로 바로 진행하였다.
https://velog.io/@gdgocgachon/react-vite-fast-start-usestate-counter
React 첫걸음: Vite로 10초 만에 시작해서 useState로 카운터 만들기
"React를 시작하고 싶은데, 뭐부터 해야 할지 막막하신가요?"웹 개발의 세계에 발을 들이면 가장 먼저 듣게 되는 이름 중 하나가 바로 React입니다. 하지만 시작하려면 복잡한 환경 설정과 따라하기
velog.io
관련 정보는 여기서 확인하였다.
npm create vite@latest naver-frontend -- --template vue-ts
--template vue-ts는 Vue 프레임워크에 TypeScript가 적용된 템플릿으로 만들어줘! 라는 의미이기 때문에 따로 선택지는 나오지 않았다.
'Project' 카테고리의 다른 글
| [NAVER CLONE #1] 네이버 클론코딩 Vue 화면 띄우기 (0) | 2026.01.28 |
|---|---|
| [바이브 코딩] 비개발자 AI 바이브코딩 강의 #00 (1) | 2025.09.08 |
| [javascript] 네이버 클론 코딩 + 블로그 5: 게시글 수정 (0) | 2025.03.13 |
| [javascript] 네이버 클론 코딩 + 블로그 5: 답글 & 공감 (0) | 2025.03.12 |
| [javascript] 네이버 클론 코딩 + 블로그 4: JWT 발급 (0) | 2025.03.12 |