스파르타코딩클럽 내일배움캠프 13일차

오늘 일과 간단 요약

1. 웹퍼블리싱 강의 3주차 완강
2. JS 로 하는 SPA 특강
3. 알고리즘 강의 5주차 1차시~4차시
4. 프로그래머스 Level 0 5문제 (풀이 링크)
5. database 특강
6. SPA 연습 페이지 만들어보기

 

 

 

 

 

웹퍼블리싱 강의 3주차

저번 2주차에 이어 페이지를 만드는 작업을 했는데,

오랜만에 swiper 복습하는 시간을 가졌다.

 

1학기 때 현장 실습으로 다녔던 회사에서 회사 홈페이지를 만들기 위해서

부트스트랩을 이용했었는데, 그때 swiper에 대해 처음 알게 되었다.

그 때는 잘 알지도 못하면서 일단은 만들어야 하니까 복사해서 조금만 수정하고, 오류나면 다시 수정하고...

이걸 반복하면서 어설프게 만들었었는데,

제대로 설명을 듣고 실습을 해보니까 그 때의 기억이 다시 떠올랐다.

 

비록 내가 만든 홈페이지를 올리진 못했지만,

그 때의 경험을 되살려보는 경험이었다.

물론 그 때도 지금도 무에서 유를 창조하지는 못하지만, 그래도 적어도 있는 툴을 잘 사용할 수는 있을것 같다.

실습도 직접 따라해서 실행시켜보니 참 신기했다.

 

네이버 페이지는 간단해보이는데, 실제로 보면 간단하지 않으니까.

웹개발에 대해 전혀 모를 때는 아무 생각 없었는데, 지금 다시 보면 엄청 복잡해 보인다.

아는 만큼 보이는 걸까...ㅋㅋㅋㅋ

오늘 배운 것 중에 기억할만 것들만 기록하기...!

 

 

swiper.js

• 가로 또는 세로 형태의 slider를 만들 때 사용하는 대표적인 플러그인 중 하나
• 데모 보러가기

Swiper Demos

 

탭 구조

네이버 우측 하단에 보면 "트렌드쇼핑" 섹션이 있고 이 우측에 상품, 쇼핑몰, MEN 이라는 3개의 메뉴가 존재하는데,

이 메뉴는 비활성화된 메뉴를 클릭했을때 하단의 컨텐츠 영역을 바꿔주는 역할을 한다.

이처럼 N개의 버튼과 1개의 컨텐츠 영역을 가진 구조 =  "탭 구조" 

• N 개의 버튼을 가진다.
• 1개의 컨텐츠 영역을 가진다.
• 버튼을 통해 컨텐츠 영역의 내용을 변경한다.

 

 

 

 

 

JS로 하는 SPA (Single Page Application)

• MPA vs SPA 개념 이해
  • MPA (Multi Page Applicaiton)
  • page reload
  • SPA (Single Page Application)
  • JSON 파일을 받아서 client 내에서 자바스크립트 로직으로 화면을 재구성 (새로고침 X)
  • (예시)
    처음에 index.html 파일 하나만 다운로드 받음
    router.js 파일이 실행되면서 동적으로 home을 클릭하면 main-page 안에 삽입이 된다
    client에서 입맛에 맞게 넣었다 뺏다 하는 것 (훨씬 화면 회전이 부드럽다)
  • 개발자 도구 > 네트워크창  을 통해 두 가지 차이를 알 수 있다

---

• Hashed url path VS Non-Hashed url path
  • 해시(#) 이전까지의 url을 브라우저에서는 호스팅 서버에서 데이터 또는 문서를 GET 받아오는 것으로 인식
  • #가 붙으면 서버 요청을 안하고 해쉬만 남기고, #가 붙지 않으면 서버로 요청함

---

• 304 >> 브라우저가 갖고 있는 캐싱된 값을 보여주는 것
• 브라우저 url에서 새로고침 > GET 요청을 서버에게 하게 된다
• https:/example.com/abc/#def   (#def는 서버에서 요청이 되지 않음)
• window.location >> location의 위치를 알수 있다
• hash 값이 무엇인지 #을 포함해서 알수 있음
• hasehd 안 쓰면 새로고침하면 에러가 발생할 수가 있다

---

강의 들으면서 정리해봤는데,

생각해보니까 저번 프로젝트가 MPA이니까 나중에 SPA에 대해 조금 더 잘 알게 된다면 SPA로 바꿔볼 수 있을 것 같다.

튜터님이 예제를 제공해주셔서, 저녁에 직접 그 예제를 clone해서 실행시켜봤다.

 

 

 

 

 

알고리즘 강의 5주차 1차시~4차시

5주차는 실전 문제 풀이였는데, 사실 시간도 없고 해야 할게 많아서 그냥 해설 강의 보는 것처럼 들었다.

권장 진도표대로 4차시까지만 듣고 내일 완강하려고 했는데,

사실상 5주차는 그냥 흘려보내는 듯한 느낌이다.

아직 알고리즘에 대한 깊은 이해가 없는데 실전 문제를 풀 수 있을 리가...ㅋㅋㅋ

게다가 다른 해야할 것들도 있어서 그냥 실전 문제는 어떻게 나오고 어떤 식으로 접근해야 하나 정도로만 들었다.

확실히 LINE, 카카오 문제라 그런지 몰라도 어려워보였다.

아직은 내가 저런 문제를 풀 수 있을까, 라는 생각도 들고...뭐 미래의 나는 풀 수 있겠지.

간단하게 적어놓은 실전 문제 대비 팁만 적어 놓어야겠다.

 

실전 문제 풀이에 앞서서 마음가짐

• 실전에서는 어떤 개념으로 풀 건지 알려주지 않기 때문에 어떤 자료구조를 쓰는게 좋을지, 어떤 알고리즘이 좋을지 고민해야 한다.

• 실전 문제는 문제의 일부분씩 이해하거나 예제를 써보면서 이해하는 게 좋다
• 최소 10~20분은 문제를 이해하고 푸는 것이 좋다

 

 

 

 

 

 

DataBase 특강

데이터베이스란

• 구조화된 정보 또는 데이터의 조직화된 모음 (= 데이터의 모음)
• 일반적으로 컴퓨터 시스템에 전자적으로 저장
• 이 데이터베이스가 데이터베이스 관리 시스템(DataBase Management System, DBMS)에 의해 제어된다
• DBMS와 데이터베이스를 하나로 묶어 데이터베이스 시스템이라고 하고, 단축해서 데이터베이스라고 한다

 

데이터베이스 관리 시스템(DBMS) 

• 데이터의 제어뿐만 아니라 모니터링, 튜닝, 백업, 복구 등 다양한 과닐 작업을 한다
• MySQL, Oracle Databse 등이 있다
• 이 데이터 베이스를 만들고 관리하고 데이터를 저장하는 방식에 따라 데이터베이스 유형이 구분된다

 

관계형 데이터베이스(RDBMS)란?

Relation DBMS

• 데이터가 열과 행으로 저장되어 데이터 구조를 쉽게 파악하고 이해할 수 있도록 사전에 정의한 관계로 데이터를 구성하는  데이터베이스 시스템
• 테이블에 사전에 정의된 내용에 부합하는 형태의 데이터만 삽입할 수 있다
• 장점: 직관적이고 테이블 간의 관계도 파악하기 쉽다. 아주 정확하다
• 단점 : 성능을 향상시키려면 아주 비싸다. 사전에 데이터베이스 설계를 잘못하게 되면 큰일남
• 종류: MySQL, Oracle, SQLite, MariaDB, PostgresSQL

+ 제대로 된 설계를 위해 하는 것들

요구 분석 - 개념적 설계 - 논리적 설계 - 물리적 설계 - 구현

 

+ Scale Up 과 Scale Out (잠깐 보고 넘어가는)

• Scale Up
  • 서버의 성능을 늘려 처리 능력을 향상
  • 하드웨어 발전의 한계가 있음
  • RDBMS
• Scale Out
  • 서버의 대수를 늘려 처리 능력을 향상
  • 정확성의 한계가 있음
  • NoSQL

 

RDBMS와 상호작용하기 위해 꼭 필요한 언어
→ SQL (Structured Query Language) (구조적 질의 언어)

• 관계형 데이터베이스 시스템에서 자료를 관리하고 처리하기 위해 설계된 언어
• 사전에 잘 정의하여 잘 구조화된 관계형 데이터베이스를 조작할 때 사용
• 대부분 관계형 데이터베이스에서 SQL 문법을 지원하고, 때로는 관계형 데이터베이스를 sQL라고도 부른다

 

비관계형 데이터베이스 (NoSQL)

• RDBMS를 제외한 나머지를 비관계형 데이터베이스라고 한다
• Not only SQL 이라고도 한다
• 유연하게 데이터를 쓰고 읽을 수 있다
• 다양한 데이터를 축적하게 되면서, 데이터의 복잡도와 양이 늘어나게 되고, 기존 RDBMS의 장점인 정확성이 그렇게 중요하지 않게 되었다

 

NoSQL 데이터베이스 유형

• Key-Value 타입
  • Redis, AWS DynamoDB
• Document 데이터베이스
  • 데이터를 문서(JSON과 비슷)처럼 저장하는 데이터베이스
  • MongoDB, Firebase(Firestore)
• Column DB
  • 데이터 베이스의 열(column)에 대한 데이터를 집중적으로 관리하는 데이터베이스
• Cassandra, HBASe
• 그외 다양한 데이터베이스가 있다

 

 

 

 

 

Vanila JS-SPA-Practice

튜터님이 특강하면서 알려주신 예제를 직접 실행시켜봤다.

깃허브에서 찾았는데, 알고보니 강의도 있었다. 영어 자막만 되고 잘 못알아들을것 같아서 듣진 않았지만...ㅋㅋㅋ

아무튼 튜터님 깃허브에서 보고, 내가 직접 실행시켜봤는데,

확실히 좀 더 부드럽게 페이지가 넘어간다.

 

내일은 이걸 가지고 직접 따로 만들어보는 연습을 해봐야겠다.

웹퍼블리싱에서 배운 <네이버 로그인-로그인한 화면> 넘어가기

욕심으론 이거 해보고 싶은데...될 지 안될지 모르겠다 ㅋㅋㅋㅋ

 

일단 보고, 안되면 구글링해보고...아님 튜터님한테 질문해야지.

뭔가 새로운 방식을 알아서 신기하다. 직접 적용시켜보고 싶고. 내일 꼭 해봐야겠다.

 

 

 

 

 

짧은 일기

너무 어려워서 영원히 완강하기 힘들 것 같던 알고리즘 강의가 어느덧 완강을 앞두고 있다.

내용을 100% 이해한 것도 아니고, 5주차에 나온 코딩 테스트 문제를 풀 수 있는 것도 아니지만,

나중에 다시 강의를 보면 지금보다 훨씬 더 이해가 잘 될 것 같은 기분이다.

아직은 level 0을 풀고 있지만 천천히 난이도를 높여서 풀어봐야지.

알고리즘 종류라도 알고 있는게 어디람. 그렇게 생각하기로 했다...ㅋㅋ

 

자바스크립트로 문제를 푸는데, 문법을 완전히 숙지한게 아니라 그런가 자주 구글링하게 된다.

이럴 때는 한 번 간단히 훑고 넘어가야 하나 고민인데, 시간이 없어서 주말에나 할 듯 싶다. 아니면 다음주에...?

파이썬으로 문제 풀기도 한 번 해보고 싶은데, 이것도 프로젝트 다음에 해야겠다.

뭔가 파이썬으로 푸는게 훨씬 쉬워서 그런가 (파이썬이 쉽다는 말이 아님) 문제가 어려워지면 파이썬으로 풀어야겠다.

 

그거 말고도 새로운 지식을 많이 얻는 하루였다.

SPA에 대해서도, database에 대해서도...

firebase는 에전에 인프런에서 한번 얼핏 스쳐지나가면서 봤던 것 같은데 직접 써보질 않아서 내일 특강을 기다리는 중이다.

튜터님들의 특강은 짧은 시간 내에 설명을 잘 해주시고 이해가 아주 잘 되는 특강이었다.

 

그래서 내일 SPA에 대해 조금 더 공부해볼 생각이다.

내가 계획한 진도를 꼭 끝내고 싶어서 특강 공부를 대강 예제 훑어보고, 복습만 해봤는데

프로젝트에서 쓰일 거라 생각하니 갑자기(?) 더 공부하고 싶은 열의가 생긴다.

 

오늘은 특강을 들어서 그런가 유달리 시간이 더 빨리 지나간 것 같다. 정작 특강은 약 2시간정도였는데...

계획한 만큼 그래도 해서 다행이다. 계획을 적게 세웠나? 그건 아닌것 같은데...

아무튼. 그래도 오늘도 열심히 했다고 믿으며...ㅋㅋㅋㅋㅋ