[23.06.12.] 내배캠 5주차 1일
강의중 기억하고싶은 내용 작성
1. SEO가 무엇인지?
SEO(Search Engine Optimization,설치 엔진 최적화)
2. 리액트의 단점 : SEO가 약하다. index.html파일 하나뿐이고 내용이 없어서 (SPA, single page a. )
후에 next.js를 배워 보완하는것이 좋다
3. SPA프레임워크의 종류
React JS - 많은 자료보유, 페이스북 만들고 유지보수
Vue JS - 배우기 쉽지만 자료가 적음
Angular JS - 안정적, 배우기어려움
NPMtrends
4. 컴포넌트 = 벽돌
렌더링 = 컴포넌트 단위로 변경사항부분만 반영 하므로 깜빡임이 없다.
5. ES6문법
상수와 변수
상수 : const(constant : 변함없는 수)
변수 : let
6. JS에서의 Object
key-value pair
{
key : 'value',
key1 : 'value1',
}
7. 객체를 선언하는 방법
const testObj = {
name : 'Hee',
age : 20,
company : 'home',
doSomething : function () {},
}
value에는 어떠한 것도 올수 있다.
위에 상수 선언된 것과 객체의 key와 같으면 한단어로 생략가능
8. 복사 주의!!!(얕은 복사)
spread operator
map
filter
배워보면서 지킬것은 지킬것
9. 배열/객체 비구조화(Array/Object Destructuring) = 구조분해할당
10. 전개연산자(Spread Operator)
... 전개연산자
11. 함수
function (매개변수) {
내용
return 내용2
}
기본에 충실하고 변경하기
화살표함수에서 내용2가 한줄일경우 return생략가능 그러나 {}중괄호도 생략을 반드시 해줘야한다.
12. 리액트 들어가기
리액트 초기개발환경 설치하기
(1) 크롬브라우저 설치
(2) VScode 설치
(3) git 설치
(4) node js 설치
- npm 자동설치 (Node Pakage Manager)
(5) yarn 설치하기
npm install -g yarn (-g : global 내 컴퓨터 전반에 yarn 명령어 사용가능)
에러 해결하기
Error: EACCES: permission denied mkdr 'usr/loca/~~'
''내부 파일에 대한 권한이 없어서 생기는 오류 메시지입니다.
가장간단한 해결방법은 권리자 권한인 sudo로 설치하면되지만
npm 공식사이트에서는 npm기본 경로를 변경해서 사용할 것을 권장함.
참고 : npm 사이트
해결방법
홈디렉터리에서 전역 설치를 위한 디렉터리를 만든다.
mkdir ~/.npm-global새 디렉토리 경로를 사용하도록 npm구성한다.
npm config set prefix '~/.npm-global'텍스트 편집기에서 ~/.profile 파일을 열거나 만들고 다음 줄을 추가한다.
export PATH=~/.npm-global/bin:$PATH시스템 변수를 업데이트 합니다.
soursce ~/.profile
테스트, 전역적으로 패키지 설치
npm install -g yarn설치완료, 해결
yarn 과 npm 과 패키지매니저 : 패키지를 설치할수 있는 명령어
npm install ~
yarn add ~
형태로 패키지 설치가능
* npm과 yarn의 차이점 :
npm install --save dev[패키지명]
모든 프로젝트에는 package.JSON파일 있음
npm은 이 프로젝트에 담겨있는 dependency(프로젝트가 의존하고있는 패키지 들의 목록)을 넣어주기 위해 --save를 입력해줘야 하는데
yarn은 add만 해도 안에 모두 담겨있으므로 따로 --save를 할 필요가 없다
주로 yarn을 사용할 예정이다
* JS런타임 환경의 종류
런타임이란? 프로그래밍언어(JS)가 구동되는 환경을 말한다.
2가지의 종류
(1) 브라우저(ex: Chrome. Microsoft Edge, Firefox)
(2) node환경
즉, javascript파일을 실행할 수 있는 방법이 2가지가 있다는 것
alert() : 브라우저에서 동작하는 함수, 노드환경에서는 동작하지않는다.
우리는 브라우저 환경을 이용합니다.
개발자 도구 열기 option + cmd + i
5강. CRA(Create React App)
한줄의 명령어 입력으로 React프로젝트 개발에 필요한 필수요소를 자동으로 구성하는 방법
보일러플레이트 : 똑같이 사용하는 코딩을 한꺼번에 찍자
CRA프로젝트 만들기(terminal)
ls 모든 폴더 보여줌
mkdir sparta : 스파르타 폴더만들기
(참고 rm -r sparta 폴더지우기)
/Desktop/sparta/react 폴더 만들고
cd sparta : 스파르타폴더로 가기
yarn create react-app week-1 입력
에러
zsh: command not found: yarn
1. npm으로 설치하기
위에서 yarn설치 한것과 같이
npm install --global yarn 다시실행
다시 에러
2. brew로 설치하기(node 설치되어있는 상태)
brew install yarnyarn 실행됨 해결완료
만약 node가 설치되어있지 않다면
brew install yarn --without-node
VScode에서 week-1파일열고 확인
cd week-1
yarn start
리액트 프로젝트 웹사이트가 열림
* public 아래 index.html
SPA이므로 SEO가 약하다고 위에서 설명
원리
index.html 31번째줄 <div>태그의 id="root
index.js 7번째~13번째줄 App.js를 그려줘라
App.js 여기가 우리의 playground
선택사항
app.js 에서 상대경로가 아닌 절대경로로 세팅할수 있는 방법
root경로에 jsconfig.json 파일만들기
src폴더 밑에 있는것은 다 절대경로로 써주세요
6강. 컴포넌트 소개
1.React Component란?
함수형 컴포넌트
클래스형 컴포넌트
주로 함수형 컴포넌트 사용
컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
개년적으로는 컴포넌트는 JavaScript함수와 유사합니다.
"props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React엘리먼트를 반환한다.(input 과 output)
1)함수형 컴포넌트
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
//훨씬 쉬운 표현
function App () {
return <div>hell</div>
}
2) 클래스형 컴포넌트
app.js에서
function App() {
//여기가 자바스크립트 쓸 수 있는 영역
return (
//JSX문법 (JavaScript + XML - HTML) : 쟉스~
//html요소들을 return문 안에서 쓸수있다.
//{JS요소들도 쓸수있다 중괄호 내에서}
);
}
주의! 컴포넌트의 이름 첫번째는 무조건 대문자!
terminal 다시 실행
ctrol + c
yarn start
에러 : app.js에서 실습중 <button onclick = {function(){alert("클릭")}>
에서 onclick 을 카멜케이스로 작성하지 않아 alert실행이 안되었음
작성에 주의!! onClick으로 작성할 것!!!
7강. 부모자식 컴포넌트
8강.
react snippets 확장프로그램 설치
app.js에서 rfc(또는 rfce) 쓰면 저절로 만들어짐