팀프로젝트_기록일지/React_이정환_감정일기장_프로젝트4 (16).이정환_react.js강의_감정일기장_프로젝트_3강_폰트,이미지,레이아웃 설정 ● 1_ Font 사용하기 : 전체 페이지에 font 적용하기▶순서1_ 위의 파일을 다운 받은 뒤, [public] 폴더에 font 파일을 저장한다.▶순서2_ 그리고 전체 페이지에 적용해야 하므로, [index.css]에 아래와 같은 스타일 시트 추가하기-index.css#font-face{ font-family : "NanumPenScript"; //니가 적고싶은 명을 자유롭게 적으셈 src : url(`폰트파일의 상대경로`);}body * {//전체 웹페이지에 적용하기 font-family : "NanumPenScript";}● 2_ 이미지 적용하기 : import로 불러와 변수로 사용한다.▶순서1_ 위의 파일을 다운 받은 뒤, [src] 폴더내의 [assets]에 이미지 파일들을 저.. 2025. 1. 20. (15).이정환_react.js강의_감정일기장_프로젝트_2강_Link태그 ● 1_ Link 컴포넌트 태그 :○ 복습 : Rouutes 컴포넌트 + Route태그 : Route태그의 path={"경로"}, element 속성 = {컴포넌트}- App.jsimport {Routes , Route} from 'react-router-dom';function App(){ return ( }> )}○ Link 태그 사용 : to속성={"경로"}- App.jsimport {Routes , Route, Link} from 'react-router-dom';//import에 Link 컴포넌트 추가function App(){ return ( Home .. 2025. 1. 20. (14).이정환_react.js강의_감정일기장_프로젝트_1강_페이지라우팅(작성중) ● 1_ 이론_페이지 라우팅 :○ 정의 : React || Html 에서 경로에 따라 알맞은 페이지 렌더링 하는 과정좀 더 자세히 말하면, 사용자가 브라우저에 접속 시, 페이지 요청 버튼을 통해, 다른 페이지 이동 시,서버에서 반환된 페이지를 서버 => 브라우저 => 사용자 경로로 페이지 렌더링을 볼 수 있게되는 과정을 일컫는다.○ React와 일반적인 웹의 페이지 라우팅 차이- 일반적인 웹 페이지 라우팅 (MPA방식 + 서버 사이드 렌더링) :=> 사용자가 특정 페이지를 서버에게 요청할 때, 서버는 이미 모든 페이지를 갖고 있으므로, 순회하며, 사용자가 요청한 페이지를 찾아 브라우저에 렌더링한다. // 여기서 핵심은 서버가 모든 페이지를 갖고있다는 것=> 한계 : 사용자가 다른 페이지를 요청할 때, 기.. 2025. 1. 20. (14).이정환_react.js강의_감정일기장_프로젝트(작성중) 프로젝트를 통해 얻을 수 있는 React 기술들초기 셋팅 법 :①. 프로젝트 생성할 폴더 위치로 Vscode 접속 후, 터미널 창에 react 프로젝트 생성npm create vite@latest②. 명령어 후에 생성된 폴더로 vsCode 위치를 옮긴 뒤, 아래의 명령어를 통해, react 나머지 파일들 생성npm i③. [eslint.config.js] 파일 코드 내 ruls 수정import js from "@eslint/js";import globals from "globals";import react from "eslint-plugin-react";import reactHooks from "eslint-plugin-react-hooks";import reactRefresh from "eslint-p.. 2025. 1. 19. 이전 1 다음
