Joon's Space

생성자 함수 객체를 여러개 만들어야할 때 사용하는 함수 생성자 함수는 일반 함수와 크게 차이는 없지만 두 가지 관례를 따른다. 1. 함수의 첫 이름은 대문자로 시작한다. 2. 반드시 'new' 연산자를 붙여 실행한다. // 생성자 함수 이름 첫 글자는 대문자로 function User(name, age) { // this = {} this.name = name; this.age = age; // return this; } // new 연산자를 사용해서 호출 let user1 = new User("Mike", 30); let user2 = new User("Jane", 22); let user3 = new User("Tom", 17); 생성자 함수 작동 순서 new 함수명(); 으로 생성을 하면, 함수 ..

변수 - 한번 선언된 변수를 다시 선언할 수 있다. (let은 두 번 선언할 시에 error 발생) var name = "Mike"; console.log(name); // Mike var name = "Jane"; console.log(name); // Jane - 선언하기 전에 사용할 수 있다. -> 호이스팅(hoisting) 선언은 호이스팅 되지만, 할당은 호이스팅 되지 않는다. 호이스팅 이란? 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동 var name; console.log(name); // undefined 할당은 호이스팅 되지 않기때문에 값은 undefined name = 'Mike'; // 할당 console.log(name); // ReferenceError let na..

RESTful API REST 란? (Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다. HTTP 프로토콜을 의도에 맞게 정확히 활용하여 디자인하도록 유도하고 있기 때문에 디자인 기준이 명확해지며, 의미적인 범용성을 지니므로 중간 계층의 컴포넌트들이 서비스를 최적화하는 데 도움이 된다. REST의 기본 원칙을 충실히 지킨 서비스 디자인을 “RESTful”이라고 표현한다. Restful API 에서는 다음과 같은 규칙을 지킨다. URI는 정보의 자원을 표현해야 한다. 자원에 대한 행위는 HTTP Method(GET, POST, DELETE, PUT, PATCH)로 표현한다. HTTP Method는 아래과 같이 정리할..

Install packages npm install express ejs mongoose 예제 설명을 위해서 사용할 패키지 express 및 ejs, mongoose까지 설치 Express Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크이며 자유롭게 활용할 수 있는 수많은 HTTP 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API를 작성할 수 있다고 공식 홈페이지에 적혀있다. https://expressjs.com/ Express - Node.js web application framework Fast, unopinionated, minimalist web framework for Node.js $ np..

Query로 원하는 데이터 가져오기 query문을 사용하면 원하는 조건의 데이터를 가져올 수 있는데, firebase에서는 query() 함수를 사용한다. 이때, where() 함수를 사용하여 안에 조건을 작성해 주면 된다. userObj.uid 와 일치하는 정보를 갖고싶으면 다음과 같이 입력한다. const q = query(collection(dbService, "nweets"), where("creatorId", "==", userObj.uid)); 필드명이 "creatorId" 이고 값이 userObj.uid와 일치하면 query에 반환한다. query함수 안에 orderBy를 다음과 같이 작성하면 순서대로 반환하겠지만, firebase에서는 index를 추가하여야 하는데, const q = qu..

Form 게시글을 입력하고 submit 할 Form을 생성한다. // Home.js const Home = () => { const [nweet, setNweet] = useState(""); const onSubmit = (event) => { event.preventDefault(); }; const onChange = (event) => { const { target: {value}, } = event; setNweet(value); } return ( ); }; export default Home 게시글을 입력하고, 제출 버튼을 클릭하여 앞서 입력해서 제출한 정보글들을 저장할 공간이 필요한데, 이때 firebase의 database를 사용한다. Cloud Firestore firebase의 Clo..

※ nomadcoder twitter clone coding 강의 참고 React + Firebase setup - React 프로젝트 생성 npx create-react-app 프로젝트명 - firebase 모듈 설치 npm install firebase - Firebase 프로젝트 생성 src/firebase.js을 생성하여 홈페이지에서 생성된 firebaseConfig를 저장하고 initiallizeApp으로 실행 // src/firebase.js import * as firebase from "firebase/app"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AU..

H2 데이터 베이스 - 개발이나 테스트 용도로 가볍고 편리하게 사용할 수 있는 DB https://www.h2database.com H2 Database Engine (redirect) H2 Database Engine Welcome to H2, the free SQL database. The main feature of H2 are: It is free to use for everybody, source code is included Written in Java, but also available as native executable JDBC and (partial) ODBC API Embedded and client/server mo www.h2database.com 보통 실무에서는 mysql 같은 ..