Pmos programming records Pmos programming records

use use [database name] insert db.[collection name].insert({"name": "~~", "email":"~~", "password": "~~"}); find db.user.find() -> 전체 조회 db.user.find().pretty() -> 깔끔한 형태로 전체 조회 db.articles.find( { “writer”: “Velopert” } ).pretty() -> writer가 Velopert인 document들을 조회

데이터 모델링 schema 설계 시, 고려사항들은 다음과 같다. - 사용자 요구에 따라 schema를 디자인한다. - 객체들을 함께 사용하게 된다면 한 Document에 합쳐서 사용한다(예: 게시물-덧글). 그렇지 않으면 따로 사용한다 (그리고 join 을 사용하지 않는걸 확실히 해둔다.) - 읽을 때, join 하는게 아니라 데이터를 작성 할 때 join 한다. 예제 위의 그림은 RDBMS로 게시판 기능을 구현하는 것이다. 3개의 테이블로 나눠져있지만, NoSQL에서는 하나의 Document에 넣는다. 실제 프로젝트 위의 그림을 NoSQL 모델링을 해보았다.

mongoDB란? C++로 작성된 Document-Oriented Cross Platform의 nosql 데이터베이스이다. Nosql 방식은 관계형 데이터베이스가 아님을 의미한다. Document RDBMS의 record와 비슷한 개념인데 json 처럼 key-value 형식의 데이터라고 볼 수 있다. 샘플 데이터를 보면 쉽게 이해할 수 있다. _id는 12바이트 크기의 16진수 값이며 유일함을 보장하는 값이다. 첫 4바이트는 timestamp, 3바이트는 machine id, 2바이트는 mongoDB 서버의 프로세스 id, 마지막 3바이트는 순차번호이다. 또한, 같은 collection 안에 document 끼리 다른 schema를 가질 수 있다. Collection RDBMS의 Table과 같은 개념..

문제 협업 중, 키워드의 불일치 문제로 한 단어를 수정해야하는 상황이 발생했다. 그러나, 그 단어가 많은 곳에 쓰이고 있어 수정 작업이 번거롭다. 해결 VS Code의 단축키를 이용해 손쉽게 해결했다. 수정하고자 하는 단어를 드래그한다. fn + F2 를 누르면 입력 칸이 나오는데 여기서 수정할 단어를 입력하면 된다. 수정 결과는 다음과 같다.

prop-types 전달받은 props가 내가 원하는 props인지 확인해 주는 모듈이다. 만약에 String을 기대하고 있던 변수에 Number가 들어가면 Warning message가 나타난다. app.js 위의 코드는 prop-types의 사용 예제이다. Warning message 동작에는 문제가 없지만 inspect로 들어가서 console을 확인하면 기대하지 않는 타입이라는 것을 알 수 있다.

Component component는 HTML을 반환하는 함수이다. react에서는 Javascript와 HTML 사이에 조합을 JSX하고 부른다. index.js 일반적으로 '' 이것을 컴포넌트라고 부른다. src/Potato.js 내가 만든 Potato라는 component이다. src/app.js react application은 하나의 component만 render할 수 있다. 그래서 potato component는 app.js 안에서 호출할 것이다. 출처 https://academy.nomadcoders.co

브라우저의 workflow - HTML 브라우저가 HTML 을 전달받으면, 브라우저의 render engine이 이를 파싱하고 DOM 노드로 이뤄진 트리를 만든다. 각 노드는 각 HTML 엘리먼트들과 연관되어있다. - CSS 외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱한다. 스타일 정보를 사용해 DOM 트리에 따라 새로운 트리인 렌더트리를 만든다. - attachment Webkit 에서는 노드의 스타일을 처리하는 과정을 ‘attachment’ 라고 부른다. DOM 트리의 모든 노드들은 ‘attach’ 라는 메소드가 있는데 이 메소드는 스타일 정보를 계산해서 객체 형태로 반환한다. 이 과정은 동기적 작업이며 DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행된다. ..

div 태그 Division의 약자로 웹사이트의 레이아웃을 만들때 주로 사용한다. 웹 페이지에서 논리적 구분을 정의하는 태그이다. div 태그를 사용하여 각각의 공간을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있다. index.html div id = root는 비어있다. app.js 실행 시, 코드 캡쳐화면 react는 자바스크립트로 요소들을 생성하고, html에 밀어넣는다. 그래서 html 코드에는 보이지 않지만 실제로 구동하면 보이는 것을 알 수 있다. 출처 https://coding-factory.tistory.com/188 [Html] Div 태그 사용법 & 예제 오늘은 div태그에 대해 알아보겠습니다. div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때..