기술 블로그

[React&Typescipt] chapter_01 ~ 04

React와 TypeScript은 웹 애플리케이션을 개발하기 위한 기술 스택으로 Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 만들기 위한 도구, TypeScript는 Microsoft에서 개발한 자바스크립트의 슈퍼셋(Superset) 언어를 말합니다. 함께 사용하면 React 컴포넌트와 관련된 데이터와 이벤트 처리에 대한 타입을 명확히 정의할 수 있으며, 이는 대규모 프로젝트에서 특히 유용합니다. REACT_Typescipt 폴더 생성하기 - 로컬 폴더에서 직접 새로운 Typescipt 상위 폴더를 생성하고 VSCode로 열기를 진행하여 하위 폴더 로프로젝트를 생성하고 통합 터미널창을 열어 아래 내용을 입력하여 어플리케이션을 설치 진행한다. * Create Re..

[React] chapter_09

./public/index.html 부트스트랩 js cdn : 드롭다운 메뉴들 사용 코드 추가 ./pages/index.js 메뉴 라이브러리 import ./components/Header.js 부트스트랩 코드를 이용하여 공통 머리말에 드롭다운 메뉴 설정 공통 컴포넌트 ./components/NotFound.js (불법 접근 또는 url 없는 주소 접근) 공통 컴포넌트 ./utils/http-common.js 가짜 백엔드에 주소 데이터 접근 license.txt 라이센스 더보기 DOCTYPE html> React App You need to enable JavaScript to run this app. 더보기 import React from "react"; import ReactDOM from "reac..

[React] chapter_08

더보기 // TODO : 부모 컴포넌트 메인 : App.js // TODO : App.css import (기본 : 중앙정렬) import "./App.css"; // TODO : 자식 컴포넌트 가져오기(import) import Home from "./pages/Home"; function App() { // TODO : 변수/함수를 정의하는 부분 // TODO : 화면에 보이는 부분 : return 안에 있는 html 태그 화면에 보임 return ( {/* TODO: 컴포넌트와 메뉴 url 연결 : 라우팅(Router) */} ); } export default App; 메뉴 라이브러리 설치 # 메뉴 라이브러리 설치(오픈소스, MIT 라이센스) - npm i react-router-dom # 벡엔드..

[React] chapter_07

컴포넌트와 메뉴 url 연결 : 라우팅(Router) 네비게이션 바를 이용한 상단 메뉴 만들기 더보기 DOCTYPE html> React App You need to enable JavaScript to run this app. 더보기 import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; // TODO: 리액트 메뉴 라이브러리 import {BrowserRouter} from "react-router-dom"; const root = ReactDOM.createRoot..

[React] chapter_06

더보기 // TODO : 부모 컴포넌트 메인 : App.js // TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트) // TODO : 웹브라우저 확인(주소창) : http://localhost:3000 // TODO : App.css import (기본 : 중앙정렬) import "./App.css"; // TODO : 자식 컴포넌트 가져오기(import) import A_SignUp from "./pages/A_SignUp"; import B_SignUp_Exam from "./pages/B_SignUp_Exam"; import C_object_Signup from "./pages/C_Object_SignUp"; import D_SpreadOperator from "./pages/D..

[React] chapter_05

더보기 // TODO : 부모 컴포넌트 메인 : App.js // TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트) // TODO : 웹브라우저 확인(주소창) : http://localhost:3000 // TODO : App.css import (기본 : 중앙정렬) import "./App.css"; // TODO : 자식 컴포넌트 가져오기(import) import A_Accommodate from "./pages/A_Accommodate"; import A_Accommodate_Exam from "./pages/A_Accommodate_Exam.js"; import A_Accommodate_Exam2 from "./pages/A_Accommodate_Exam2.js"; impor..

[React] chapter_04

빈 이미지와 함께 화면에 출력해보기 import css파일 가져오기 set변수 : setter 함수 (변수 값 저장 용도 함수) 사용해 보기 화면 바인딩 용도 : useState() 함수 (훅(hook) 함수 : useXXX()) 사용해 보기 더보기 // TODO : 부모 컴포넌트 메인 : App.js // TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트) // TODO : 웹브라우저 확인(주소창) : http://localhost:3000 // TODO : App.css import (기본 : 중앙정렬) import "./App.css"; // TODO : 자식 컴포넌트 가져오기(import) import A_Comment from "./pages/A_Comment"; functio..

[React] chapter_03

리액트 컴포넌트의 생명주기(라이프사이클) : 생성/수정 변수 정의 : 바인딩 변수 set변수명 사용법 : let [변수명, TODO:set변수명] = useState(초기값) 함수 정의 : 컴포넌트 생성 함수 : 자동 실행(또는 Mount함수라고 불림) 1) 생명주기 생성 함수(컴포넌트 생성) : 화면이 뜰 때 자동 실행 사용법 : useEffect(()=>{실행문}, []); 2) 생명주기 생성 -> 수정 함수 : 1) 생성 함수에 변수 값이 바뀔 때 자동 실행 사용법 : useEffect(()=>{실행문}, [감시할변수명]); 더보기 // TODO : 부모 컴포넌트 메인 : App.js // TODO : 리액트에서 처음으로 실행되는 js(최상위 부모 컴포넌트) // TODO : 웹브라우저 확인(주소창..