음향, 보안, 프로그래밍까지! 잡동사니 블로그

MongoDB는

데이터 베이스 중 하나로,

NoSQL의 개념이 적용되어 있다.

기존의 데이터베이스는 복잡한 관계성을 바탕으로 DB를 구성했지만,

요즘에는 대량의 데이터를 단순화 시키다보니, 새로운 저장 기술의 개념으로 NoSQL을 도입했다.

TMI

NoSQL != Not SQL

NoSQL == Not Only SQL

SQL을 안쓴다는게 아니라

SQL만 쓰지 않는다는 의미이다. 

명령어 정리

show dbs

- 만들어둔 db의 목록을 보여준다.

use [DB명]

- 해당 DB를 사용한다.(이후 사용하는 명령어는 모두 해당 DB속에서 작동) / 없던 이름이면 새 DB를 만들어준다.

show collections

- 해당 DB에 있는 collection들을 보여준다. 

db.[Collection명].insert({[key] : [value]})

- 해당 collection에 document를 추가한다.

db.[Collection명].remove([조건],[매개변수])

- collection속의 document를 지울때 사용하며, 특정 조건을 통해 대량 삭제를 하거나, 하나씩 제거할 수도 있다.

db.createCollection("[만들고자 하는 collection명]")

- 해당 DB에 속하는 collection을 만든다.

CLI환경에서도 사용할 수 있지만, 

GUI환경에서도 사용 가능하다.

다만 원래의 목적은 타 서버에서 돌아가는 DB를 읽어오고 관리하는 용도 인 것 같다.(필자는 로컬에서 mongo가 돌아감.)

응용프로그래밍 화면구현 과목 프로젝트를 진행하면서, 수업시간에는 HTML의 기초적인 태그의 사용법을 알려준다.

그러나 처음 설계한 웹사이트를 구현하기에는 수업만으로는 조금 부족할 것 같아서 추가적으로 공부하고 정리한다.

정규수업 + 교내 DETS활동(DETS활동은, 학생이 강사가 되어 다른 학생들을 가르치기도 하고, 수업을 들을 수 있는 활동)

DETS명은 "당신도 이제 불가능 없는 프론트엔드"이다.(물론 전 강사가 아니라 수업들으러 간 학생입니다 ^오^!)

구현 방법은 크게 3가지이다.

1. 깡 HTML

- 정말 HTML에 다 뚜드려 박는 방법이다. 실제로 같은 동아리 친구나, 반 친구 중에서도 이런 친구들 가끔 있다.디자인 구려요!

2. HTML은 거들 뿐, CSS파티!

- 필자는 이 방법을 사용하고 있고, 앞으로도 한 동안 사용할 것이며, 아마 가장 많이 사용하는방법(실무자 X, 학생기준) 일 것이다.

3. 프레임워크 사용(bootstrap, React, 등...)

- 사실 이런 프레임워크를 사용하는 단계라면 보통 프론트엔드에서 개발이 끝나는 것이 아니라, 백엔드까지 고려하기 때문에, 사실상 Node, DB(MySQL, MariaDB, MongoDB 등)가 따라 붙는다고 봐야 한다.TMI : 외주뛰는 친구는 거의 프레임워크 위주로 쓰는 듯.

일단 필자가 선택한 방법도 대세에 따라 바뀐다는 것 같다.

첫 번째로 정말 예전부터 써오던 방식(div파티?)을 사용하면서, 거의 정해진 해상도만 지원하고, 다른 해상도로 가거나 브라우저 크기를 줄여버리면, 난장판이되거나 일부 구역이 가려지는 방법으로, 요즘은 이런방식은 잘 사용하지 않는다고한다. 

두 번째로는 흔히 한 두번쯔음 들어봤을, 반응형 웹사이트이다. 반응형 웹사이트도 정말 다양한 종류가 있지만, 필자가 말하고자 하는방식은, 흔히 display: flex; 로 사용하는, Flexible Box이다.

display: flex;

직역하자면, 유연성있는, 탄력적인 박스(배치)로, 웹사이트의 크기가 변화하면 그에 따라 유동적으로 배치되는 것을 볼 수 있다. 

사실 Flexible Box 하나만 있어도, 대부분의, 적어도 배치에 한해서는 걱정거리가 사라진다.

그러나, 아직 HTML, CSS를 배운지 얼마 안된 웹린이의 입장에서는 아무리 Flexible Box를 써도 태생적으로 구린 디자인을 볼 수 있을 것이다.아님 말고..

구-린 디자인을 해결하기 위한 방법으로는 여러가지가 있는데, 우선 디자인 테마를 잡는것이 중요하다.

https://neumorphism.io/#55b9f3

필자는 neumorphism이라는 요즘 대세라는 디자인을 사용하기로 결정했다.

마치 종이와 같은 느낌을 주기도 하고, 매우 깔끔한 점도 있지만, 확실하게 사용자에게 피드백을 주기 쉬운 디자인이라 가장 좋았다. 

이제 디자인의 방향성을 정했다면?

웹사이트의 테마색을 정해야 한다. 아무리 좋은 디자인이여도 색감이 구리면, 구리게 보인다. 암튼그럼.

https://color.adobe.com/ko/create

위 사이트는 어도비에서 운영하는 사이트로, 원하는 색상 조합을 찾을 때 사용한다.

ex)파스텔톤 컬러..

본래 이런 용도로 쓰게하려 만든 것인지, 각 색상별로 클릭하면 RGB코드가 클립보드로 복사된다.

이제 테마도 정했고, 색도 골랐겠다! 남은 건?

폰트다!

https://noonnu.cc/

눈누 사이트처럼 상업용으로도 이용할 수 있는 폰트를 모아둔 사이트가 있다.

물론 일부 폰트에 대해서는 상업용 사용 불가능일수도 있으니 주의해서 보도록하자.근데 아직까진 본적없음.

참고로 웹폰트라 해서, 웹사이트에서 사용할 수 있도록, CSS코드에 넣을수 있는 형태로 폰트를 제공하니 유의하기 바란다.

@font-face { 
    font-family: 'BMJUA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff')format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face { 
    font-family: 'MaplestoryOTFBold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff')
     format('woff');
     font-weight: normal; font-style: normal; 
     
    }

대충 이런식으로 가져와서 사용할 수 있다.

그 외의 디자인은 스스로 사용하면서 배우는 편이 빠르다. 

정확히 말하자면, 정말 CSS에 있는구문 없는구문 다 배우기에는 시간이 부족하기 때문에, 그때그때 찾는 편이 효율이 좋다고 할 수 있다. ex) margin은 사실 방향별로 조절할 수 있으며, 상하 or 좌우값을 각각 지정해줄 수 있다.(안쓰면 필요없듯..)