패스트캠퍼스 react 강의 학습후기 6주차

 

왜 리액트 부분부터 강사가 바뀌는거지? 사전에 안내된 사항도 없었던것 같은데... 

아무튼 그렇다. 리액트 부분 부터는 강사가 바뀌고 만다... 헤로피 선생님 감사했습니다.ㅠ

 

 

 

lodash 

- js의 인기있는 라이브러리 중 하나

- Array, Collection, Data 등 데이터의 구조를 쉽게 다루고 싶을 때 사용한다. _를 사용하여 이용하기 떄문에 lodash라는 이름이 되었다. 

 

lodash 사용법 공식 문서 : https://lodash.com/docs/4.17.15

Lodash Documentation

 

import _ from 'lodash'     // default 통로를 통해 가져온다. 이때 import 키워드 뒤의 이름이 중괄호 { } 로 감싸져 있지 않으면 default 통로로 가져온다는 뜻이다.

 

_.uniqBy(중복을 제거할 배열 이름,'중복을 구분할 속성 이름') // 구분 속성을 기준으로 중복을 제거한다. 

_.unionBy(합칠 배열 이름 1, 합칠 배열 이름 2, '고유값으로 사용할 속성 이름') // 중복 없이 배열을 합해준다.

_.find(배열 이름, 찾을 기준) // 배열에서 데이터를 찾아 반환한다.

_.findIndex(배열 이름, 찾을 기준) // 배열에서 데이터를 찾아 해당 데이터의 배열 인덱스를 반환한다.

_ .remove(배열 데이터, 지울 내용 기준) // 배열에서 데이터를 찾아 삭제한다.

 

 

JSON : Java Script Object Notation. 속성-값 쌍으로 되어있는(키-값 쌍) 개방형 표준 포맷. .json 파일 확장자를 사용하며,파일에서 사용할 수 있는 따옴표는 오직 쌍따옴표 뿐이다. json은 하나의 문자 데이터이다.

 

.json 확장자를 사용해 내가 필요한 데이터를 작성한 뒤, 라이브러리처럼 import 키워드를 사용하여 가져온다.

 

JSON.stringify(데이터) // JavaScript 값이나 객체를 JSON 문자열로 변환한다. 즉, 전달된 데이터를 모두 문자열로 간주하여 json 데이터를 생성한다.

JSON.parse(데이터) /  JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다. 즉, number, null, string을 구분하여 json파일 형식으로 해석한다. 

 

 

Sotrage

 

 

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage 

 

localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다. 

 

 

- 예시 코드

const user = {     name: 'Chali',     age : 3,     sex : 'male',     emails : [         'ainwithcat@gmail.com',         'withtom5639@gmail.com'     ] } localStorage.setItem('user', JSON.stringify(user)) console.log(`최초로 저장한 찰리 데이터 = ${localStorage.getItem('user')}`) const str = localStorage.getItem('user') const obj = JSON.parse(str) obj.age = 22 console.log(`수정한 찰리 나이 : ${obj.age}`) localStorage.setItem('user',JSON.stringify(obj)) console.log(`수정한 뒤의 찰리 데이터 = ${localStorage.getItem('user')}`)

 

- 결과

 

 

Lowdb 

lodash를 활용해 로컬 스토리지를 하나의 db처럼 사용할 수 있게 해주는 패키지. 

https://github.com/typicode/lowdb 

 

 

 

Query String

주소?속성=값&속성=값&속성=값

 

axios 

: http 요청을 처리해주는 패키지. npm i axios 명령어를 사용해 설치한다.

깃허브 주소 : https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

import axios from 'axios' function fetchMovies() {     axios     .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen') //주소의 내용을 받아와     .then( (res) => {         console.log(res) //콜백함수로 로그 출력 해본다         const h1E1 = document.querySelector('h1')          const imgEL = document.querySelector('img')         h1E1.textContent = res.data.Search[0].Title         imgEL.src = res.data.Search[0].Poster     } ) } fetchMovies()

 

 

 

---

 

리액트부터는 강사가 바뀐다. (예고없이..)

듣다보니 느낀건데 그냥 대학생도 아니고 대학생 1학년 발표자 정도의 강의력이다... 참으로 처참하다. 발음도 버벅거리고 ppt를 읽는 것 밖에 못하고 했던말을 또하거나, 적혀있는 내용이 아니면 말을 하질 못한다. 즉석에서 뭔가 말해주고 싶은게 많은것 같은데 그걸 말로 표현하는 능력이 많이 매우 몹시 떨어진다. 본인이 설명하고 있는 내용에 대해서 확실히 알고 있는게 맞는지 의심이 생길 정도다. 그리고 뭐든지 대충 넘어간다. 사회성이 없는 남자가 강의를 했을때 일어나는 꼬라지를 여실하게 보여주고 있다. 제 값 주고 들었더라면 소비자원에 신고했을 것이다. 

 

바뀐 강사분. Wappalyzer을 어떻게 읽는지 모른다고 하신다.

 

Wappalyzer 이라는 확장 프로그램을 사용하면 현재 접속한 사이트가 어떤 프레임워크나 언어 등을 사용해 만들어졌는지 파악할 수 있다.

 

강의하다말고 혼잣말을 한다. 평소에도 이러는걸까?

 

Dom

- 문서 객체 모델. Document Object Moel. 메모리에 웹 페이지 문서 구조를 표현한다. 컴퓨터가 이해하는 elements의 원형. 이라고 강사가 설명했다ㅎㅎ... 

REACT와 RAECT DOM의 차이를 아무래도 강사가 잘 모르는 것 같다. 그래서 내가 찾아보았다. 

REACT 

- 유저 인터페이스를 만드는 자바 스크립트 라이브러리.

 

REACT DOM 

- 웹의 인터페이스. 실제 HTML 요소를 화면에 불러오는 역할을 한다. 

 

즉, React로 컴포넌트를 만들고 관리한 뒤, Dom을 사용해 html에 띄워주는 것이다. React-Dom은 브라우저의 Dom(Document Object Model)에서 React를 사용하기 위한 라이브러리이다. 

 

 

JSX 

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. react의 고유 방법을 사용해 엘리먼트를 추가하는 것은 너무나 번거롭기 때문에, jsx를 많이 이용한다.

 

Babel

JS를 위한 컴파일러. 언어 해석기. JSX라는 표기를 자바스크립트도 이해할 수 있는 자바스크립트로 바꾼다.(강사님 말 그대로 옮겨적은 것임.) 그만 쩝쩝대라 좀 ㅋㅋ... 사탕을 쳐먹으면서 강의를 하는듯 하다.