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

나는 유일하게 해본 리액트 실무의 형태가각 컴포넌트가 독립된 폴더를 가지며, 관련된 파일(스타일, 타입, 테스트 등)을 모두 같은 폴더에 두는 구조로 작업하는 방식이었다!노마드 코딩을 들으면서 다른 방법도 배우긴했지만, 위의 방법이 뭔가 나에게 매력적이랄까...? 아무튼 뭐 아래의 구조처럼 컴포넌트를 만들계획이다.component의 폴더 안에 컴포넌트명을 모두 폴더로 먄들고 각 컴포넌트 폴더의 구조는 아래와 같다./Nav component.tsx styles.module.css index.ts types.ts 오늘 내가 만들어볼 컴포넌트는 스타벅스 사이렌오더 앱에 들어가면 나오는 하단 고정 nav바!일단 얘를 만드려면 아이콘이 필요해서 flaticon가서 비슷한 아이콘으로 최대한 주워왔다. F..

작년 이맘때쯤 호기롭게 클론코딩을 해보자며 CRA로 리액트 프로젝트를 생성했었는데 그것이 어느덧 1년...ㅠㅠ올해가 끝나기전에 완성은 못하더라도 큰 틀은 만들어두고 싶으니 다시 시작!! 일단 나는 눈에 보이게끔 세팅하고 작업하는걸 좋아한다!그것이 프론트엔드의 매력 아닐까요? ㅎ-ㅎ그러므로 App.tsx파일이 Home.tsx를 라우터로 불러올수 있게 끔 세팅하겠다! 📁 폴더 구조오늘 작업한 폴더의 구조는 이렇다.├── ./src│ ├── ./src/App.tsx│ ├── ./src/Routes│ │ └── ./src/Routes/Home.tsx│ ├── ./src/index.tsx│ └── ./src/styles│ ├── ./src/styles/_fonts.scss│ ..

한달전에 리액트 포폴 만드는 과정을 이 티스토리에 기록해보자 하며 리액트 환경세팅 : 프로젝트 생성 후 뜨는 에러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임을 확인 할 수 있다. ✅ 불필요한 파일 삭제하단 이미지에 있는 파일만 ..