Notice
Recent Posts
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- JS setTimeout
- JS classList
- JS 삼항연산
- JS 타이머기능
- JS setInterval
- HTML기초
- JS 숫자
- JS null undefined
- js 변수
- JS localStorage
- JS 화살표함수
- JS value속성
- JS typeof연산자
- JS 연산
- JS preventDefault
- JS 형변환
- CSS기초
- JS 스코프
- JS 데이터타입
- JS appendChild
- git 협업셋팅
- JS form action
- JS 함수
- JS prompt
- JS clearInterval
- JS append
- JS 기초
- JS form
- CSS속성정리
- JS redirection
Archives
공부기록용
React입문 1주차(초기셋팅) 본문
React.js
‘React.js’는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용합니다. 비슷한 프레임워크인 AngularJS, VueJS보다 선호도가 좋다.
SPA(Single Page Application) 아키텍쳐
Single Page Application, 한 개의 페이지로 이루어진 애플리케이션이라는 의미로 MPA(Multi Page Application)과는 상반된 개념이다.
기존 MPA의 문제점(super easy version)으로 리렌더링(re-rendering) 즉, 페이지가 갱신되는 상황이 엄-청나게 많기 때문에 사용감에 불편함이 있을 수 있는데 이를 보완하는 방안으로써 SPA를 사용할 수 있다.(부분적인 요소만 살짝 바꿔주는 개념으로 이해)
특징과장점
딱 한개의 페이지(Single Page)로 구성된 웹 앱이다
서버에 1회 리소스를 요청한다.
-> 그 이후에는 필요할 때, 필요한 데이터만 받아와서 기존 페이지를 ‘수정’해주는 방식으로 화면을 수정
자연스러운 UX(User Experience)를 구현할 수 있다.
비슷한 기술들로는 Angular, Vue있다.(구현의 차이는 각각 존재해요)
단점
SEO(Search Engine Organization)을 위해서 html페이지 전체가 필요한데, SPA의 html은 단 하나로 검색엔진 즉, 로봇이 찾을 수가 없다.(페이지가 많은 MPA는 가능한 부)
SPA 프레임워크의 종류
ReactJS
VueJS
AngularJS
node 설치 확인하기
node -v
npm 이란?
NPM(Node Package Manager)은 무수히 많은 third-party 패키지들이 모여있는 집합소이다. 우리는 npm에서 여러 패키지를 다운받아 활용할 수 있다.
터미널에서 yarn 설치하기
npm install -g yarn # -g : global
yarn 설치 확인하기 (=== 버전 확인하기)yarn -v
npm install [설치할 패키지 이름] yarn add [설치할 패키지 이름] # 예시: yarn add react-router-dom
<npm과 yarn 공통적 특징>
둘다 자바스크립트 런타임 환경인 노트(Node.js)의 패키지 관리자
애플의 앱스토어, 구글의 플레이스토어처럼, 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓는. 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자
<차이점>
NPM
node.js를 설치할 때 자동으로 생성(npm을 가지고 yarn을 설치한 것)
Node Package Manager의 약자로 NPM platform 자체이다.
YARN
2016년에 페이스북에서 개발한 패키지 관리자
npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 월등히 좋다.
요약
속도 : Yarn👍
보안 : Yarn👍
런타임이란
프로그래밍 언어가 구동(running)되는 환경(environment)
1. 브라우저(ex : Chrome, Microsoft Edge, Firefox, Internet Explorer)
2. node환경
즉, javascript 파일을 실행할 수 있는 방법이 2가지가 있다는 이야기
CRA(Create React App)
한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법
React 프로젝트를 구성하기 위해 필요한 것들은 상당히 많은데 WebPack, babel, eslint 등 이러한 것들을 신경쓰지 않아도 됨 → 보일러플레이트
💫CRA로 프로젝트 생성하기
리엑트로 프로젝트를 생성하고 싶은 폴더에 해줘야
ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요.
cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.
yarn create react-app week-1 # week-1프로젝트 생성!
yarn create react-app . # 현 위치에 프로젝트 생성!
이런식으로 구조가 갖춰져 있어야함 파일 경로 잘 확인할 것
cd week-1 # week-1 폴더로 이동
yarn start # 프로젝트 시작
👌준비완료! 이제는 src/App.js 파일을 수정하고 저장하면 새로고침이 없어도 UI가 자동 업데이트 된다.
public > index.html
→ src > index.js
→ src > App.js
결국, 중요한 것은 [우리의 플레이그라운드는 ‘App.js’라는 것]
절대경로 설정하기
상대경로 : . / ->
절대경로 :
root 경로에 jsconfig.json 파일을 만들고,
해당 코드를 작성하면 src폴더 밑에 있는 것들은 절대경로로 보겠다는 의미
{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] }
경로 설정시,
cd # 맨 처음의 경로로 돌아감
cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어감
yarn create react-app 폴더이름 #프로젝트를 시작할 폴더와 프로젝트 생성이 동시에 진행됨
yarn create react-app # 폴더 생성과, 경로가 올바르게 지정되었다면 바로 프로젝트를 생성
'📚강의록📚 > 스파르타)React' 카테고리의 다른 글
React입문 1주차(Props 추출) (0) | 2023.06.24 |
---|---|
React입문 1주차(Props Children) (0) | 2023.06.24 |
React입문 1주차(Props) (0) | 2023.06.24 |
React입문 1주차(JSX) (0) | 2023.06.24 |
React입문 1주차(React Component) (0) | 2023.06.24 |
Comments