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

한달전에 리액트 포폴 만드는 과정을 이 티스토리에 기록해보자 하며 리액트 환경세팅 : 프로젝트 생성 후 뜨는 에러npx create-react-app test00 --template typescripttest00 이라는 프로젝트 폴더를 만든 명령어참고로 나는 자바스크립트가 아닌 타입스크립트로 프로젝트를 만들었다.만약 타입스크립트가 아니라 자바스크립s-notee.tistory.com 이런 포스팅을 작성했었는데...밥먹다 알게 된 사실...cra로 프로젝트를 생성할때, 에러가 많이 떴던 이유는 이제 리액트를 만든 페이스북에서 더이상 라이브러리 업데이트를 해주지 않는다고???22년부터 더이상 릴리즈가 되고 있지 않고...24년 말부터 cra로 리액트 프로젝트를 생성하면 무.조.건에러가 뜬다는 커뮤니티 게시글이..

정말이지 티스토리에 리액트 파일, 폴더 정리하는 것만 몇 번 썼을지 모르겠다.물론 지금 다 비공개 상태지만 ㅎㅎ이번 기회에 확실하게 공부하지 뭐,,,ㅎㅎ .├── README.md├── node_modules├── package-lock.json├── package.json├── public│   ├── index.html│   └── (기타 등등...)└── src    ├── App.tsx    ├── assets    ├── components    ├── index.tsx    ├── pages    └── styles리액트 프로젝트를 생성하면 자동으로 위와 같은 폴더 및 파일 구조가 생성된다.(임의로 생략한 파일 및 폴더도 있다.) 📍 폴더에 대한 간단 설명☑️ node_modules패키지 코..

npx create-react-app test00 --template typescripttest00 이라는 프로젝트 폴더를 만든 명령어참고로 나는 자바스크립트가 아닌 타입스크립트로 프로젝트를 만들었다.만약 타입스크립트가 아니라 자바스크립트 프로젝트를 만들거라면 뒤에 (--template typescript)는 생략하면 됨. 하지만 해당 명령어를 터미널에 실행하면, 위의 이미지와 같은 에러가 쭉 뜬다.해당 에러에 대해서 열심히 구글링해보니 12월에 리액트 19버전이 릴리즈 된 이후로 create-react-app이 제대로 실행되지 않는다는 글을 보았다. ➡️ 그래도 test00폴더로 진입(cd test00)해서 npm start를 하면 프로젝트가 실행이 되긴 한다. 😡하지만...이렇게 컴파..

보호되어 있는 글입니다.

✅ 폴더는 크게 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..