Project 9

[NAVER CLONE #1] 네이버 클론코딩 Vue 화면 띄우기

1. Vue 에 DB 정보 띄우기 vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/vue'// https://vitejs.dev/config/export default defineConfig({ plugins: [vue()], server: { proxy: { // 프론트에서 /api로 시작하는 요청을 보내면 백엔드로 전달함 '/api': { target: 'http://localhost:9090/naver', // 내 백엔드 주소 (Context Path 포함) changeOrigin: true, secure: false, } } }}) ..

Project 2026.01.28

[NAVER CLONE #1] 네이버 클론코딩 환경 설정

1. Frontend: Vue.js + TypeScript프레임워크: Vue 3 언어: TypeScript 상태 관리: Pinia 스타일링: SCSS 또는 Tailwind CSS빌드 도구: Vite2. Backend: Java + Spring Boot전통적으로 네이버는 Java 기반의 시스템이 매우 견고합니다.프레임워크: Spring Boot 3.5.10언어: Java 25API 설계: REST API인증: Spring Security + JWT 빌드 관리: Gradle3. Database: RDBMS + NoSQL (선택)메인 DB: OracleORM: Mybatis 검색(심화): Elasticsearch 원하는 건 Vue + TypeScript + 백엔드 Java + Mybatis 였고, 이에 맞..

Project 2026.01.26

[바이브 코딩] 비개발자 AI 바이브코딩 강의 #00

바이브 코딩이란?: 바이브 코딩은 대규모 언어 모델(LLM)을 활용해 자연어로 원하는 기능을 설명하면 AI가 코드를 생성해 주는 새로운 프로그래밍 방식으로, 코딩의 진입 장벽을 크게 낮추고 누구나 쉽게 소프트웨어를 개발할 수 있도록 돕는 혁신적 접근법입니다. 주제: 자기소개 페이지 생성형 AI 이용https://lovable.dev/via=bebee 로그인하여 이용 (하루에 5번정도 가능한 듯) LovableBuild software products, using only a chat interfacelovable.dev 2. 자기소개 페이지 생성 요청간단한 자기소개 웹사이트를 만들어줘.이름:직업:나이:취미: 해당 메시지를 Lovable에 요청 3. 수정해야 할 사항이 있다면 계속 요청 4. 생..

Project 2025.09.08

[javascript] 네이버 클론 코딩 + 블로그 5: 게시글 수정

🚀 현재 프로젝트 환경 정리✅ 네이버 스타일 로그인 & 블로그 시스템 구현 중✅ 사용된 기술 및 개발 도구 정리✅ 코드가 수정될 때마다 게시글 계속 업데이트 중📌 프로젝트 개요프로젝트명: 네이버 스타일 로그인 & 블로그 클론 코딩DB: 로컬 스토리지 (LocalStorage) 사용프레임워크: React (JSX 기반 UI 구성)백엔드: Node.js개발 언어: Javascript개발툴: Visual Studio Code 챗 gpt한테만 항상 의존해 코딩을 짜고 있다가,혼자 시도해보려니 도저히 머리가 안 굴러가서GPT에 의존하던 코딩 방식에서 벗어나, 참고만 하며 직접 고민하며 개발하려고 한다. 그렇기 때문에 개발 속도는 아주 느릴 예정이다.(이해가 안 가는 부분이 나올 때마다 하나씩 물어가며 이해하고..

Project 2025.03.13

[javascript] 네이버 클론 코딩 + 블로그 5: 답글 & 공감

🚀 현재 프로젝트 환경 정리✅ 네이버 스타일 로그인 & 블로그 시스템 구현 중✅ 사용된 기술 및 개발 도구 정리✅ 코드가 수정될 때마다 게시글 계속 업데이트 중📌 프로젝트 개요프로젝트명: 네이버 스타일 로그인 & 블로그 클론 코딩DB: 로컬 스토리지 (LocalStorage) 사용프레임워크: React (JSX 기반 UI 구성)백엔드: Node.js개발 언어: Javascript개발툴: Visual Studio Code 1. 디자인 구상  디자인은 실제 네이버 디자인을 참고해서 그렸다.     PostDetail.jsimport React, { useState, useEffect } from "react";import { useParams, useNavigate } from "react-router-..

Project 2025.03.12

[javascript] 네이버 클론 코딩 + 블로그 4: JWT 발급

🚀 현재 프로젝트 환경 정리✅ 네이버 스타일 로그인 & 블로그 시스템 구현 중✅ 사용된 기술 및 개발 도구 정리📌 프로젝트 개요프로젝트명: 네이버 스타일 로그인 & 블로그 클론 코딩DB: 로컬 스토리지 (LocalStorage) 사용프레임워크: React (JSX 기반 UI 구성)백엔드: Node.js개발 언어: Javascript개발툴: Visual Studio Code   JWT 발급을 위해 Node.js가 필요했다.Node.js를 설치한 후, server.js 파일을 생성하고 [node server.js] 명령어로 서버를 실행했다. server.jsconst express = require("express");const jwt = require("jsonwebtoken");const cors =..

Project 2025.03.12

[javascript] 네이버 클론 코딩 + 블로그 3: 블로그 댓글 구현

🚀 현재 프로젝트 환경 정리✅ 네이버 스타일 로그인 & 블로그 시스템 구현 중✅ 사용된 기술 및 개발 도구 정리📌 프로젝트 개요프로젝트명: 네이버 스타일 로그인 & 블로그 클론 코딩DB: 로컬 스토리지 (LocalStorage) 사용 (별도 백엔드 없이 클라이언트 측 저장)프레임워크: React (JSX 기반 UI 구성)개발 언어: Javascript개발툴: Visual Studio Code 게시글에 빠질 수 없는 댓글을 구현하려고 한다.원하는 디자인을 구상했을 때 이런 느낌이다.   PostDetail.jsimport React, { useState, useEffect } from "react";import { useParams, useNavigate } from "react-router-dom";..

Project 2025.03.11

[javascript] 네이버 클론 코딩 + 블로그 2: 글쓰기 에디터 + 경고 메시지

🚀 현재 프로젝트 환경 정리✅ 네이버 스타일 로그인 & 블로그 시스템 구현 중✅ 사용된 기술 및 개발 도구 정리📌 프로젝트 개요프로젝트명: 네이버 스타일 로그인 & 블로그 클론 코딩DB: 로컬 스토리지 (LocalStorage) 사용 (별도 백엔드 없이 클라이언트 측 저장)프레임워크: React (JSX 기반 UI 구성)개발 언어: Javascript개발툴: Visual Studio Code  블로그 디자인을 수정하려고 한다.최근에 적용했던 블로그 디자인은 블로그 들어가자마자 포스트를 작성하는 페이지가 나와,블로그 같지 않으며 스타일 자체도 어색하여 아래 사진과 같은 디자인으로 수정하려고 한다.게시글 제목을 클릭하면 상세 화면으로 이동할 수 있도록 만들 것이며, 댓글 기능도 추가하려고 한다.  1. ..

Project 2025.03.10

[javascript] 네이버 클론 코딩 + 블로그 1

디자인은 내가 안 하고 전부 gpt한테 시킬 예정 [물론 백,프론트도 그렇지만...]db도 따로 추가 안 하고 로컬 스토리지로만 진행하려고 하는데,중간에 막히는 부분이 있다 싶으면 oracle을 사용할 예정이다.  🚀 현재 프로젝트 환경 정리✅ 네이버 스타일 로그인 & 블로그 시스템 구현 중✅ 사용된 기술 및 개발 도구 정리📌 프로젝트 개요프로젝트명: 네이버 스타일 로그인 & 블로그 클론 코딩DB: 로컬 스토리지 (LocalStorage) 사용 (별도 백엔드 없이 클라이언트 측 저장)프레임워크: React (JSX 기반 UI 구성)개발 언어: Javascript개발툴: Visual Studio Code App.jsimport React from "react";import { BrowserRouter ..

Project 2025.03.06