TIL_221116 🍀✅JS_SPA, Database

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. JS로 하는 SPA 특강

• MPA와 SPA의 차이

  • SPA(Single Page Application): client side rendering
    -> 더 빠르고 사용감이 좋다
  • MPA(Mulit Page Application) : server side rendering

• JS SPA에서 Hashed Routing이 필요한 이유

  • Hashed url path: 주소+#
    -> # 뒷 부분 : 호스팅 서버에서는 로컬로 취급
  • 브라우저의 디폴트 기능 : 새로고침을 하면 GET 요청
    -주소#about 로 첫 랜딩 혹은 새로고침
    -> 브라우저는 index.html 파일 하나만 로드
  • 주소/about 로 첫 랜딩 혹은 새로고침
    -> 브라우저는 호스팅 서버에 /about에 해당하는 별도의 페이지를 요청하며 오류가 난다(404 Not Found)
    

• 공유받은 코드 보면서 이해하기
  

  ① route(event)함수가 실행

  

  ②preventDefault(): 새로고침 방지
  주소에 ①의 a 태그에 있는 hash가 붙음

  

③ 해쉬가 변경 되면 handleLocation 함수 실행
④ #를 공백으로 만들고 경로를 설정
⑤ routes에서 경로에 따라 html 파일을 가져온다.
text()함수로 data를 문자로 설정
⑥ main-page에 해당 html을 가져와 보여준다
temp_html을 이용한 것과 비슷
⑦ 새로고침 시 ④에서 path = "/" -> routes에서 해당 html을 가져온다

• 상식
  • vscode에서 html 파일을 연 상태로 'go live' 하지 말 것
    -> html을 제외한 파일을 선택한 상태에서 'go live'해야 도메인(127.0.0.1)주소만 뜬다!
  • Loopback
    -> 브라우저가 자신의 서버에 접근하는 경우
    -> Loopback IP address = 127.0.0.1
• 질문&답변
  • 한 html에 여러 컴포넌트 넣어도 됨(React에서)
  • 컴포넌트별로 js, css파일이 분리되어 있을 경우 초기에 한 번에 요청을 해야 하는가?
    -> 별도의 조치를 취하지 않으면 컴포넌트 별로 js, css 파일을 분리를 하든 안 하든 처음에 다 다운받는다.
  • 네이버 페이지라고 한다면 크게 로그인창 컴포넌트, 검색창 컴포넌트 등으로 나눠 볼수 있다.
• SPA vs MPA와 SSR vs CSR 장단점
  https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/
  

2. SP_웹 퍼블리싱 강의

• 3주차
  • 가로 슬라이더 만들기
  • 호환성이 필요한 코드는 앞에 -webkit- 붙임
    -webkit-border-radius
  • Box를 먼저 만든 뒤 Swiper 적용
    -> container(+class) - wrapper - slider 구조

---

✅

문제

• 카드 슬라이드 내용이 가로로 길게 모두 보이는 상태
  • .sc_timesquare .card_wrap에서
    overflow: hidden이 주석처리 되어 있었음
    -> hidden으로 하니 해결됐지만
• 슬라이드의 좌우 버튼에 다음 카드 뉴스 일부가 보임
  • 네이버 페이지와 비교해가며
  • slider.js를 만들지 않아서 그런 거였음. 파일이 없고 html내에서도 주석으로 처리되어서 네이버 페이지처럼 잘 보이지 않은 것...
  • 이것 때문에 또 시간 엄청 썼네ㅜㅜ
  • 결국 overflow: hidden 주석처리 되어 있는 것도 그대로 두는 게 맞았던 것 같다!

---

• 4주차, 5주차
  • 전체적으로 강의가 그냥 만들어진 코드를 강사가 이건 뭐고 이건 뭐고 하면서 간단하게 얘기하고 숙제로 해 보라고 하는 건 좀 복잡해서 설명을 보니 역시 이것도 그냥 대충 설명하고 넘어가는 느낌이라 크게 남는 게 없다.
  • 강의에서 가져온 코드를 내가 하나 하나 뜯어보고 내가 처음부터 코드를 다시 짜는 걸로 복습을 해야 할 것 같다.

3. Youtube 페이지 만들기_1

• 웹 퍼블 강의를 들었는데 남는 게 없다는 게 너무 아쉽고 뭐라도 코드를 치고 싶어서 페이지 만드는 유튭을 보고 코드를 쳤다.
  • https://youtu.be/67stn7Pu7s4
  • Figma 이용해서 WireFrame부터 만드니 div로 어떻게 나눠야 할지 감이 잡힘!!

4. Databse 특강

• DB
  • 데이터 모음 + DBMS(DataBase Management System)을 의미
• RDBMS(Relational DBMS)
  • 데이터가 열과 행이 있는 테이블로 저장
  • 사전에 정의된 내용에 부합하는 형태의 데이터만 삽입
  • 종류: MySQL / Oracle / SQLite / MariaDB / PostgresSQL
• SQL(Structured Query Language)
  • RDBMS에서 사용되는 언어
  • RDBMS를 SQL이라고도 함
  • Scale up(수직 확장) : 서버의 성능을 늘림. RDBMS. 하드웨어 발전 한계
• NoSQL
  • 사전에 구조를 정의하지 않고 유연하게 데이터를 읽고 씀
  • 다양한 데이터 베이스 유형 有
  • Scale Out(수평 확장) : 서버의 대수를 늘림. NoSQL. 정확성의 한계

---

🍀

친구들 조언

• 내가 사랑하는 개발자 친구들이 요즘 나 잘하고 있는지 물어봤다.
  • 요즘 복습도 밀렸고 할 것도 많은데 새로운 할 일들이 계속 생겨서 너무 벅차다고 했더니 친구들이 지금 잘 하고 있다며 우선순위를 알려줬다.

  ⭐JS + 배운 것 복습, 포트폴리오에 적용

  • 미니프로젝트 개인페이지를 수정하고 싶었지만 계속 다른 일에 우선순위가 밀렸다. 내 욕심대로 더 예쁘고 많은 기능을 넣기 보다는 일단 내가 배운 것을 모두 구현한다는 것을 목표로 삼고 해보기!!!
  • 배운 걸 포폴에 적용하는 것 자체가 코드를 계속 치는 공부가 된다.