dada's

MVC가 만들어진 계기 1979년 제록스 팔로 알토 연구소에선 IT컴퓨팅 기술의 수많은 원형을 개발하고 있었는데 그 중 최초의 태블릿 PC로 불리는 다이나북을 개발하고 있던 다이나북팀은 사용자들이 쉽게 사용할 수 있는 컴퓨터를 만들고 싶어했다. 그 당시에는 컴퓨터는 현재처럼 쉬운 GUI(그래픽 유저 인터페이스)가 없었다. 💡 GUI : 사용자가 컴퓨터와 정보를 쉽게 교환하고 상호작용 하기 위해 아이콘과 같은 그래픽을 이용한 인터페이스 그렇기 때문에 다이나북 팀은 GUI를 만드는데 심혈을 기울였고 GUI를 잘 만들어야 일반 사용자들이 사용할 수 있다고 생각했다. GUI를 만들던 중 한가지를 깨닫게 되는데 사용자가 인식하는 방법과 컴퓨터가 정보를 인식하고 처리하는 방식이 다르며 그렇기 때문에 둘을 잘 분리해..

class란 자바스크립트에서 클래스란 함수의 한 종류이다. 동일한 종류의 객체를 여러개 생성해야하는 경우 new 연산자와 생성자 함수, 클래스를 사용할 수 있다. [ 기본 문법 ] class User { constructor(name) { this.name = name; } sayHi() { alert(this.name) } } // 사용법 let user = new User("Kim"); user.sayHi() // Kim 출력 » new User호출시 일어나는 일 새로운 객체 생성 → 넘겨받은 인수와 함께 constructor가 자동으로 실행된다. 이때 인수 'kim'이 this.name에 할당 » class User{...} 문법 구조가 진짜 하는 일 User라는 이름을 가진 함수를 만든다 → 함수..

React Hook : react 16.8버전부터 react요소로 추가되었다. Hook을 이용하여 기존 class바탕의 코드를 작성 할 필요 없이 함수형태에서 상태 값과 여러 react의 기능을 사용할 수 있는 기술들 [ React Hook종류 ] • useState : 컴포넌트의 상태값을 관리할때 사용된다. 기본적으로 상태값과 상태값을 변경할 수 있는 set함수를 정의해준다. // 불러오기 import React. { useState } from 'react' // useState선언 const [count, setCount] = useState(0) • useEffect : 컴포넌트가 마운트 됐을때 (처음 나타났을 때), 언마운트 됐을때 (사라질 때), 그리고 업데이트 될 때(특정 props가 바뀔 ..

라우팅(routing)이란? : 네트워크에서 사용되는 용어로 네트워크 안에서 통신 데이터를 보낼 최적의 경로를 선택하는 과정을 말한다 웹에서의 라우팅은 웹페이지간 이동을 뜻한다 예를 들어 브라우저의 url이나 링크를 클릭하면 해당 페이지로 이동되는 것이 라우팅이다 vue router : vue.js의 공식 라우터이다 vue.js를 사용한 SPA를 쉽게 만들 수 있도록 vue.js의 코어와 긴밀히 통합되어 있다 화면간 이동시 깜빡거림 없이 매끄럽게 전환할 수 있다 📌 vue router의 기능 - 중첩된 라우트/뷰 매핑 - 모듈화된 컴포넌트 기반의 라우터 설정 - 라우터 파라미터, 쿼리, 와일드카드 - vue.js의 트랜지션 시스템을 이용한 트랜지션 효과 - 세밀한 네비게이션 컨트롤 - active CSS..

alert, prompt, confirm = 브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능 alert : 사용자가 확인 버튼을 누를때까지 메세지를 보여주는 창이다 메세지가 있는 작은 창은 모달 창(modal window)라고 부른다 prompt : 텍스트 메세지와 입력 필드(input field), 확인 및 취소 버튼이 있는 모달 창을 띄워준다 prompt함수는 두개의 인수를 받는다 사용자가 prompt의 입력 상자에 원하는 값을 입력하고 확인을 누르면 사용자가 입력한 값이 출력된다 값을 입력하길 원하지 않는 경우는 취소버튼을 누르거나 ESC을 눌러 대화상자를 빠져나갈 수 있다 사용자가 입력을 취소한 경우는 null이 반환된다 // 문법 result = prompt(title, [defaul..

HTML에 실제 데이터를 넣어서 보내주기 위해서는 EJS, Pug같은 템플릿 엔진을 사용한다 EJS는 서버 데이터를 HTML에 쉽게 넣을 수 있게 도와주는 HTML 렌더링 엔진이다 이것을 사용하여 DB의 데이터를 HTML에 넣어보자 1. EJS설치 터미널에 npm install ejs를 하고 server.js 상단에 이 코드를 넣어준다 app.set('view engine', 'ejs'); 2. EJS파일 만들기 EJS는 HTML과 똑같이 만들어 쓰면 된다 주의할점 : 작업폴더 내에 views라는 이름의 폴더를 하나 만들고 거기에 ejs파일을 만들어야함 나는 list.ejs라는 파일을 하나 생성했다 3. MogoDB에서 데이터 꺼내기 db.collection('post').find() db.collect..

프로그래밍에 있어서 기본적인 개념 = 데이터 데이터란 정보이고 프로그래밍에선 데이터(정보)에 따른 타입이 있다. 자바스크립트의 기본 데이터 타입에는 숫자와 문자가 있다. 1. 숫자 (Number) 💡자바스크립트에서는 큰따옴표("")나 작은따옴표('')가 붙지 않은 숫자는 숫자로 인식하며 숫자를 인식하여 계산 할 수 있다. ✓ 숫자의 연산 종류 alert( 1+1 ); // 결과 : 2 alert(2 * 5); // 결과 : 10 alert(6 / 2); // 결과 : 3 사칙연산 외에 자바스크립트로 여러가지 연산을 하고 싶을때 Math라는 객체를 사용 할 수 있다. 2. 문자 (String) 💡문자는 큰따옴표("")나 작은따옴표('')로 감싸야한다. 그리고 큰따옴표로 시작하면 큰따옴표로, 작은따옴표로 시..