유니의 개발일지

Boiler-plate 이용 이유 1. 더 빠르게 개발을 완성하기 위해 2. 이 프로젝의 중요한 부분을 더욱 집중할 수 있기 위해서 3. Boiler-Plate 안에는 전체적인 Layout, Login 기능, 회원가입 기능이 이미 들어있음 Boiler-Plate 다운로드 GIT HUB에서 다운 받기 1. Download ZIP으로 다운 받고 VS Code에서 파일 열기 2. VS code에서 Terminal 열고 root directory 안에 "npm install" 타입해서 server 다운 받기 3. "cd clinet"로 이동해 "npm install" 작성해 client directory 설치하기 4. dev.js 파일을 config folder 안에 생성하기 -> localhost에서 개발하기..

이번 섹션 목표 - 민감한 비밀 정보를 관리하는 env 환경 변수 설정하는 방법과 GPT API 키를 발급하는 방법 학습 프로젝트에서 환경 변수가 필요한 이유 - 프로젝트에서 민감한 정보들을 관리해야 할 경우, 민감한 정보들을 env 파일에서 따로 관리를 진행해야 함 - 환경 변수 설정은 Vite에서 확인 가능 - 환경 변수 설정 시, VITE_ 라는 접두사를 붙여야 함 1) .env 라는 파일을 생성 VITE_SOME_KEY = 123 2) .gitignore 안에 .env라고 작성 - 이 env 파일은 깃허브에 env란 파일을 올리지 않도록 무시를 하는 설정임 3) Google에 gpt api 검색하여 GPT OPEN API KEY 값을 받음 - env 파일에 코드 작성 VITE_GPT_API_KEY..

1. 리액트 개발환경 설정 - vs code 다운로드 - node.js 다운로드 이미 다운로드 완료!! 2. 리액트 설치하기 vite 설치 완! / styled-components antd @ant-design/icons 설치 리액트 프로젝트 구조 vite.config.js -> server 관련 변동 https://vitejs.dev/config/ import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], }) import { defineConfig } from 'vite' impor..

더보기 Prompt란? - 사용자가 GPT와 상호작용 할 때 입력하는 텍스트 GPT Prompt 사용법 1. 역할 설정을 전제로 잘 깔아주는 것 - 전제를 깔아주는 것 = 시스템 설정 2. 해야할 일 순서를 정해주기 - "순서대로"의 의미가 불분명!! 3. 출력 형식을 명시해주는 것 - 웹 연동을 위해 GPT의 출력을 json형식으로 명시해주기! - json : java script object notation의 줄임말 4. 변수 지정하기 - 7가지의 명령지시 사항에 대괄호를 이용해서 출력물에 대한 별칭를 지정 - key 값은 임의로 지정, value 값은 chapt gpt가 변수를 잘 이용할 수 잇도록 []을 활용해서 명시 GPT AI 회고록 서비스 기획 1. 기획 문제 : SNS / 블로그에 회고록을..

인프런 강좌 "처음 만난 리액트(react)" 강의 수강을 마치고.. "React + GPT API로 AI회고록 서비스 개발" 강의를 수강!! ChatGPT prompt 웹개발(기초) React (Vite, Styled-component, Antd) GPT API 연동 를 배울 수 있다고 한다..! 만들 웹 애플리케이션

routing : app.js 파일에 포함되어 있는 app 컴포넌트에 구현 -> app 컴포넌트가 가장 처음으로 렌더링 되는 컴포넌트이기 때문 index 경로인 /(slash) 로 접속 -> 메인 페이지 컴포넌트를 보여줌 slash-post-write으로 접속 -> post-write 페이지 컴포넌트 보여줌 slash-post-post-id로 접속 -> post-view 페이지 컴포넌트 보여줌 colon-post-id -> 동적으로 변하는 파라미터를 위한 값 app.js 파일 수정 코드 import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import styled from "styled-comp..

main page 컴포넌트 : 우리가 만들 미니 블로그에 사용자가 처음 접속했을 때 보게 될 페이지 글을 작성할 수 있는 버튼과 글 목록을 보여주어야 함 MainPage.jsx 코드 작성 import React from 'react'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import PostList from '../list/PostList'; import Button from '../ui/Button'; import data from '../../data.json'; const Wrapper = styled.div` padding: 16px; width: calc(100% - 32px..

데이터베이스와 서버를 구축하는 부분까지 다룰 수 없기 때문에 가짜 데이터를 생성해야 함. data.json 코드 작성 [ { "id": 1, "title": "리액트에서 리스트 렌더링하기", "content": "안녕하세요, 소플입니다.\n이번 글에서는 리액트에서 리스트를 렌더링하는 방법에 대해서 배워보겠습니다.\n리스트를 렌더링하기 위해서는 자바스크립트 배열에서 제공하는 map함수를 사용합니다.", "comments": [ { "id": 11, "content": "실제로 개발하다보면 map함수를 진짜 많이 쓰는 것 같아요😄" }, { "id": 12, "content": "적용해보니 코드가 정말 간결해지네요ㅎㅎ" }, { "id": 13, "content": "key를 꼭 넣어줘야 하는군요~" }, ..

- 미니 블로그에서 글(post), 댓글(comment)라 이름을 정함 글 목록 보기 기능(리스트 형태) - PostList, PostListItem 글보기 기능 - Post 댓글 보기 기능 - CommentList, CommentListItem 글 작성 기능 - PostWrite 사용자로부터 입력받음 댓글 작성 기능 - CommentWrite 사용자로부터 입력받음 3) 폴더 구성하기 - 폴더를 구성하는 이유는 각 컴포넌트들을 적당한 폴더에 모아서 관리함으로써 개발의 편의와 향후 유지 보수가 용이하게 하기 위해서이다 component 폴더 하위에 page 폴더, list 폴더, ui 폴더를 생성 4) UI Component 구현하기 UI component : 버..

미니 블로그 기획하기 - 실제 서버 구현은 어려우나 화면을 react 컴포넌트로 만들어 보고 각 컴포넌트를 연결하여 겉모습만 블로그 형태로 구현 1) 개발을 시작하기 전에 정해야 할 것들 : 기획, 필요한 기능, 전체 디자인에 대해서 간단하게나마 정리해야 함 글 목록 보기 기능 (리스트 형태) 글 보기 기능 댓글 보기 기능 글 작성 기능 댓글 작성 기능 - 메인 화면 : 글 목록을 보여주고 글 작성 버튼을 누르면 글을 작성할 수 있는 화면 2) 실제 개발 시작! //create-react-app을 사용해 프로젝트 생성 npx create-react-app mini-blog //프로젝트 디렉토리에 들어가서 앱 실행하기 cd mini-blog npm..