뭐라도 기억하기 위한 블로그

✅ 폴더는 크게 node_modules / public / src로 나뉜다.리액트 프로젝트를 처음 생성했을 때의 폴더구조는 대략 이렇다.   📍 node_modules패키지 코드가 존재하는 폴더   📍 public가상 DOM을 구성하는 index.html 파일이 들어있다.이 폴더의 index.html은 마치 알맹이가 없는 껍데기와 같은 파일이랄까...?실제 서버에 배포가 되는 폴더  📍 srcindex.js(typescript의 경우에는 index.tsx) 파일이 들어있는 폴더 index.js 파일은 React 애플리케이션의 중심이며, 애플리케이션을 실제 DOM에 렌더링하는 역할을 함. ✅ 폴더 이외의 파일  📍 package-lock.json작업자가 따로 관리할 필요가 없다. (npm 또는 ya..

✅ VSCode 실행하기이제 VSCode를 열어서 해당 폴더 경로를 terminal로 들어가기이때,  terminal은 Git Bash로 설정해준다.    클론 후 제일 먼저 할 건 npm install근데 설치가 안된다...?그건 바로 node를 설치하지 않았기 때문  ✅ Node.js 설치 Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  위의 사이트에서 node.js를 설치한 뒤 터미널에 다시 npm install을 실행시키면 설치가 진행된다.   옆에 이 node_modules 디렉토리가 생성되면 설치가 잘 되고 있는것.  ✅ npm s..

📌 토이프로젝트 기록회사다니고 노느냐고 바빠서 잊고있었던 나만의 토이프로젝트 재시작!반년 사이 노트북을 포맷했기 때문에 깃에 커밋해놓았던 코드들을 다시 풀받아야하는 상황!  일단 나는 git bash를 유용하게 사용하고 있기 때문에, 초기화 된 컴퓨터에 git bash부터 다시 깔아주었다. [React clone coding] #1. gitlab 설치 및 연결 / SSH Key 생성하기📌 토이프로젝트 기록리액트로 스타벅스 사이렌 오더 클론코딩 하기본 프로젝트는 학습을 위해 스타벅스 사이렌 오더 어플을 리액트로 재구성 한 것입니다.  ✅ GitLab 계정 만들기 The most-comprs-notee.tistory.com ✅ 내 로컬에 레포지토리를 pull 받을 폴더를 생성- 나는 대충 c드라이브에 p..

📌 토이프로젝트 기록리액트로 스타벅스 사이렌 오더 클론코딩 하기본 프로젝트는 학습을 위해 스타벅스 사이렌 오더 어플을 리액트로 재구성 한 것입니다. ✅ node를 먼저 설치 ✅ 원하는 폴더명으로 리액트 프로젝트를 생성해준다.나는 js가 아닌 ts로 작업할거라서 두번째의 명령어로 리액트 프로젝트를 생성했다.//js로 작업할 경우 npx create-react-app 프로젝트폴더명 //ts로 작업할 경우 npx create-react-app 프로젝트폴더명 --template typescript ✅ 설치 후 src폴더에서 파일 확장자 확인ts 템플릿으로 리액트 프로젝트를 만들었기 때문에 App, index등의 확장자는 js가 아닌 tsx임을 확인 할 수 있다. ✅ 불필요한 파일 삭제하단 이미지에 있는 파일만 ..

📌 토이프로젝트 기록리액트로 스타벅스 사이렌 오더 클론코딩 하기본 프로젝트는 학습을 위해 스타벅스 사이렌 오더 어플을 리액트로 재구성 한 것입니다.  ✅ GitLab 계정 만들기 The most-comprehensive AI-powered DevSecOps platformFrom planning to production, bring teams together in one application. Ship secure code more efficiently to deliver value faster.about.gitlab.com  ✅ GitLab에 프로젝트 생성하기프로젝트를 생성하는 과정은 아래와  같음. 프로젝트의 이름과 프로젝트 공개 설정을 Private / Public인지 체크 ✅ SSH key 설정..

//App.tsx import React from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import { hourSelector, minuteState } from './atoms'; // useRecoilState는 atom의 값에 더해서 atom을 수정할 함수를 전달 function App() { const [minutes, setMinutes] = useRecoilState(minuteState); const [hours, setHours] = useRecoilState(hourSelector); const onMinutesChange = (event:React.FormEvent) => { setMinutes(+event..

☑️BrowserRouter(v5) vs. createBrowserRouter BrowserRouter는 버전 5에서 사용 createBrowserRouter라는 API 버전 6에 등장 ☑️Route들이 errorElement를 가지게 된다. npm i react-router-dom@6.4 🔎 폴더 및 파일 생성 src/screens/About.tsx src/screens/Home.tsx src/components/Header.tsx : 어떤 페이지로 가도 불러올 수 있는 헤더 페이지 src/Router.tsx 📌 V5. BrowserRouter //About.tsx function About() { return About } export default About; //Home.tsx function H..

🔎 전체코드 한번에 보기 //index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render( ); index.tsx 기본 세팅 //App.tsx import Circle from "./Circle"; function App() { return ( ); } export default App; App.tsx에는 Circle 컴포넌트를 불러와줘야한다. 에서 bgColor는 필수로 들어가야하는 요소이므로 지우면 에러가 뜸 //..

🔎TypeScript란 JavaScript를 기반으로 한 프로그래밍 언어 strongly-typed : 언어가 작동하기 전에 type을 확인 코드에 문제가 있으면 프로그램이 실행 전 오류 문구를 띄움 브라우저는 타입스크립트를 이해할 수 없기 때문에 컴파일을 통한 자바스크립트 변환 과정이 필요 📌TypeScript Playground https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescri..

🔎 전체코드 한번에 보기 //index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import styled, { ThemeProvider } from 'styled-components'; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111" } const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke" } const root = ReactDOM.createRoot(document.getElementById('root')); root.render..