이번엔 쇼핑몰 만들기 실습 하면서 배운 개념 정리 ~!
📍 yarn 이란 ?
- npm 대신 쓸 수 있는 명령어 같은 걸 제공하는 일종의 sw임.
- npm, npx보다 훨씬 빠른 설치 환경 제공.
📍 Bootstrap 이란 ?
- html, css를 직접 짜지 않아도 웹 UI들을 쉽게 만들어 낼 수 있는 라이브러리.
📍 import / export
- export) 어떤 특정한 파일을 다른 파일에서 쓸 수 있게 내보내는 문법.
export default 변수명/함수명 - import) export로 내보내진 파일을 가져오는 문법.
import 변수명 from 경로
- if 내보낼 변수가 많다면 ? ) export는 한 파일 내에서 한번만 쓸 수 있으므로 { } 로 엮어서 내보내면 됨 !
export { 변수1, 변수2 }
📍 서버에서 받아온 데이터를 왜 굳이 반복문 돌려서 뿌리는지 ?
- 우리가 뿌릴 데이터가 3개인 걸 '미리' 알고 있으면 3번 손수 복붙해도 OK
- 근데 갑자기 데이터가 4개 날아오면 .. ? 대처할 수 없음.
- 그래서 반복문 이용하는게 훨씬 유용하다 !
📍 라우팅이란 ?
- 페이지를 여러 개 만들자는 것.
- ex) 쇼핑몰 같은 경우엔 주문 확인 페이지, 상세 페이지 등이 있음.
react-router-dom라이브러리 이용!
npm install react-router-dom@5명령어 입력.
👉 BrowserRouter vs HashRouter )
- HashRouter는 라우팅을 조금 더 안전하게 할 수 있음.
사이트 주소 뒤에 #이 붙는데, # 뒤에 적는 것은 서버로 전달이 되지 않기 때문. - BrowserRouter는 # 기호 없이 동작.
그래서 라우팅을 리액트가 아니라 서버에게 요청할 수도 있어서 위험.
(서버가 "어라 그런 페이지 없는데요?" 할 수 있으므로 서버에서 서버 라우팅 방지하는 API 작성이 필요.)
📍 React Router 특징
- 페이지마다 다른 HTML 파일이 아니다.
- html은 index.html 하나만 있음. 근데 url을 입력하면 안에 있는 html 내용물을 바꿔주세요. 라고 페이지 이동을 흉내내고 있을 뿐 !
📍 URL 파라미터 문법
/detail/:id: 아무 문자나 받겠다는 URL 작명법
- 콜론 뒤에 맘대로 작명
- 여러 개 사용 가능 (
/detail/:id/:id2)
📍 styled-components
- 컴포넌트를 많이 만들다 보면 css를 짜기 난감한 경우들이 있음.
- 컴포넌트가 매우 많고 다양한 파일에 분리되어 있는 경우 한군데 다 몰아넣으면 난감해짐.
- 클래스 명을 실수로 중복으로 만들어놓기도 하는 등의 실수들을 방지하기 위함.
CSS in JS라고도 함.
📍 SASS
- css를 조금 더 프로그래밍 언어스럽게 작성가능한 전처리기
- css에서 변수, 연산자, 함수, extend, import 이런 것들 사용 가능.
- 브라우저는 SASS 문법 모르기 때문에, 다시 css로 컴파일 해주는 라이브러리가 필요한데 node-sass 설치하면 알아서 해줌 ~ (
npm install node-sass)
- 변수에 데이터를 저장해서 쓰자.
if) 자주 사용하는 색상이 있다면,$메인컬러: #ff0000이런식으로 변수에 저장해놓고 css 내에서$메인컬러로 사용 가능. - @import 파일경로를 이용해서 모든 속성에 필요한 공통적인 css의 경우 import해서 사용 가능.
- nesting
비슷한 셀렉터가 많거나, 셀렉터가 길어지는 경우에 유용하게 사용.
ex) 아 h4, p가 div.container와 관련 있는 속성들이구나.
div.container {
h4 {
color : blue;
}
p {
color: green;
}
}- 어떤 요소의 css 코드를 다른 요소에서도 사용하려면,
@extend 클래스명을 { }안에 해주면 복사 붙여넣기 처럼 사용 가능 !
그 여러 줄의 css 코드를 다시 작성하지 않아도 되며, 변경 혹은 추가하고 싶은 요소만 다시 작성해주면 됨. @mixin 함수명은 긴 css 코드들을 함수로 만들어 사용할 수 있도록 함.
사용하는 곳에서는@include 함수명을 { } 안에 입력해주면 해당 함수에 있는 css 코드들이 적용됨.
📍 컴포넌트 Lifecycle & Hook
컴포넌트는
1. 생성이 될 수도 있고
2. 삭제가 될 수도 있고
3. 관련된 state가 변경되면 재렌더링(업데이트)이 일어날 수도 있음.
- 우리는 그 라이프 사이클 중간 중간에 hook을 걸 수 있는데, 이를 통해 뭔가 명령을 줄 수 있음.
ex) Detail 컴포넌트 등장 전에 이것 좀 해주세요. - 그래서 Hook의 정확한 명칭은 Lifecycle Hook 이라고 함.
- Hook들은 원래 class로 만든 컴포넌트에서 사용 가능함.
componentDidMount(),componentWillUnmount()이 두 개가 가장 유용한데, 각각컴포넌트 첫 등장 후 실행할 코드와다른페이지로 넘어가는 등의 사유로 컴포넌트가 사라지기 전 실행할 코드를 자유롭게 담으면 됨.
📍 useEffect 훅
- function 컴포넌트에서는 useEffect 훅을 많이 사용함.
- 컴포넌트가 mount 되었을 때, 컴포넌트가 update 될 때 → 특정 코드를 실행할 수 있음.
- 그래서 위의 라이프사이클에서 설명한 명령을 줄 수 있다는 게, useEffect를 이용한다면 Detail 페이지 방문 후 alert 창이 2초 후에 사라지게 해주세요 ~ 같은 효과를 줄 수 있음.
useEffect(() => {
setTimeout(() => {
changeAlert(false);
}, 2000);
});- 컴포넌트가 사라질 때(unmount) 코드를 실행시킬 수도 있음.
return function 함수명() { 사라질 때 실행할 코드 }
혹은return () => { 사라질 때 실행할 코드 }
👉 useEffect는 컴포넌트가 업데이트(재렌더링) 될 때 항상 실행됨.
- 근데 그러면 안되겠지 !
useEffect(() => {}, [실행조건]);이렇게 실행 조건을 지정해주면 됨. - 만약, 실행 조건을 비워둘 경우
[]해당 컴포넌트 등장 시 한번만 실행하고 끝남.
👉 setTimout 타이머를 쓰면 제거까지 해줘야 버그가 덜 생김.
- useEffect 내에
return () => { clearTimout(타이머) }코드 입력.
📍 Ajax
- 원래 GET / POST 요청 시 항상 페이지가 새로고침됨.
- 서버에 새로고침 없이 요청을 할 수 있게 도와줌.
👉 서버 )
- 사용자가 페이지 요청을 하면 페이지를 갖다주는 프로그램
👉 요청 )
GET: 브라우저의 주소창에 url을 직접 넣는 요청 (특정 페이지 / 자료 읽기)POST: 로그인 같이 서버로 중요한 정보를 숨겨서 전달하고 싶을 때 사용하는 요청
📍 Ajax 사용 방법
1. jQuery 설치해서 $.ajax() 사용
2. axios 설치해서 axios.get() 사용
(리액트, 뷰 등의 환경에서 가장 많이 사용되는 라이브러리)
3. 자바스크립트 문법인 fetch() 사용
(axios와 사용법은 거의 같지만, 호환성 같은 부분에서의 차이가 발생.)
- 우리가 요청한 자료는 따옴표가 있는 JSON인데, axios라는 라이브러리는 JSON을 보기좋게 Object로 알아서 바꿔줌.
- 근데 fetch는 잘 바꿔주지 않아서 우리가 따로 Object로 바꿔주는 작업이 필요.
👉 axios 이용
1. axios.get(데이터 요청할 URL)
2. 성공하면 .then()
3. 실패하면 .catch()
- 서버에 데이터를 보내고 싶을 때 POST 요청하는 법
axios.post('서버 URL', { 보낼 데이터 });
📍 Context API 혹은 redux
- 만든 컴포넌트 갯수만큼 앱이 복잡해짐. 그럴 때 사용.
아자아자