유니의 개발일지

react-router-dom 의 BrowseRouter, Routes, Route 컴포넌트 구성하기 Link 컴포넌트와 useNavigate Hook을 이용한 페이지 전환 화면 헤더 구성 -> 내부 바의 아이템마다 각각에 맞는 페이지 전환 가능!! 잘못된 URL 입력 시, not found 출력 영화 페이지에서 각각의 영화 포스터 클릭 시, 영화 상세 페이지 구현 1. CRA project 생성 npx create-react-app react-routing-demo 2. 화면 전환을 위한 Routing 처리 -> 필요한 화면 생성 pages 폴더 생성 후 Home, Movies, Celebrity, NotFound, Tv pages 생성 3. App.js 에서 routing 작업 진행 - routing..

- asx 프로세스를 모두 활용해 보는 간단한 실습 진행 - 각각의 영화 데이터를 표현하는 movie component를 만들고 함수를 이용해 각각의 컴포넌트에 데이터를 전달하여 웹페이지 구성 예정 1. 영화 데이터 GET!! - 직접 데이터 통신 X / 영화 정보 오픈 데이터만 가져와서 사용 - tmdb api 발급받기 https://developer.themoviedb.org/reference/movie-now-playing-list Now Playing Get a list of movies that are currently in theatres. developer.themoviedb.org -> tmdb 홈페이지의 변동으로 인하여 현재 상영중인 영화 데이터를 가져올 수 있는 link 올립니다. - ..

- Landing Page 첫 화면 생성 1. 전체적인 Template 간단하게 만들기 src > components > views > LandingPage.js에 코드 작성 -> 웹화면 구성 import React from 'react' import { FaCode } from "react-icons/fa"; function LandingPage() { return ( {/* Main Image */} Movies by latest {/* Movie Grid Cards */} Load More ) } export default LandingPage 2. Movie API에서 가져온 모든 데이터 STATE에 넣기 import React, { useEffect, useState } from 'react' ..

- 만들 웹 사이트에 있는 영화 정보들을 "The MOVIE DB" 사이트에서 API를 통해서 그 정보를 제공받을 예정 API 사용 방법 1. https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org - api 사용을 위해 key를 받아야 하며 회원가입 진행 - 회원가입 후 Settings > API > Request an API Key > Create > Developer 로 클릭 > API key 발급 - 영화 최신순 데이터 - 영화 세부사항 데이터 - 영화 리뷰 데이터 - 영화 포스터를 불러올 ..

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..