진수의 개발세계 진수의 개발세계

Queue(큐) FIFO(First In First Out / 선입선출) 원리에 따라 정렬된 자료구조 큐의 자료는 뒤로 들어가서 앞으로 빠져나가는 구조 프린터의 '출력물 인쇄 대기'에 큐가 응용됨 메소드 enqueue : 큐의 뒤쪽에 원소(들) 추가 dequeue : 큐의 첫 번째(맨 앞) 원소를 반환하고 큐에서 삭제 front : 큐의 첫 번째 원소를 반환 isEmpty : 큐가 비어 있으면 true를, 아니면 false를 반환 size : 큐의 원소 개수 반환 구현 class Queue { constructor() { this.items = []; } enqueue(item) { this.items.push(item); } dequeue() { return this.items.shift(); } fr..

Stack(스택) LIFO(Last In First Out / 후입선출) 원리에 따라 정렬된 자료구조 스택의 자료는 항상 꼭대기에서 추가/삭제 된다 변수 또는 메소드 호출을 컴퓨터 메모리에 저장할 때 사용됨 메소드 push : 스택 꼭대기에 새 원소 추가 pop : 스택 꼭대기에 있는 원소를 반환, 해당 원소를 스택에서 삭제 peek : 스택 꼭대기에 있는 원소 반환 isEmpty : 스택에 원소가 하나도 없으면 true, 하나라도 있으면 false를 반환 clear : 스택의 모든 원소를 삭제 size : 스택의 원소 개수 반환 구현 class Stack { constructor() { this.items = []; } push(item) { return this.items.push(item); } p..

1. html 문서 중 head 안에 script 태그를 그냥 포함하게 되면 일어나는 일 : 사용자가 html 파일을 다운 받으면 브라우저는 html 파일을 한 줄 한 줄 분석한다. (html을 파싱 한다고 함) 그렇게 한 줄씩 파싱하다가 js파일이 연결된 script태그를 만나면 파싱을 잠시 멈추고 필요한 js파일을 서버에서 다운 받고, 실행한 다음에 다시 파싱을 이어간다. -> 인터넷이 느리거나 js파일의 용량이 크면 사용자가 html파일을 보기까지 시간이 오래 걸린다. 2. body태그 안, 끝 부분에 script 태그를 넣으면 일어나는 일 : 브라우저가 html을 파싱 해서 화면에 보여질 페이지가 준비된 뒤에 script 태그를 만나기 때문에, js 파일을 다운받기 전에 사용자가 html페이지를 ..

1. 객체 : 속성과 행동으로 이루어진 모든 것 - 자동차 : 브랜드, 색깔, 가격 등의 속성, 시동이 걸리는 것, 전/후진하는 것 등의 행동을 가진 객체라 할 수 있음 - SNS 유저 객체 : 이메일 주소, 비밀번호, 친구 목록 등의 속성, 좋아요 누르기, 친구 추가하기 등의 행동을 가진 객체라 할 수 있음 2. 객체 지향 프로그래밍 : 프로그램을 여러 개의 독립된 객체들과 그 객체들 간의 상호작용으로 파악하는 프로그래밍 접근법 - 프로그램을 객체들과 객체들 간의 소통으로 바라보는 것 3. 객체 지향 프로그래밍의 4가지 특징 캡슐화(encapsulation) : 변수와 함수를 하나의 함수로 묶는 것을 말한다. 사용자에게는 사용법만 알려주고 내부가 어떻게 되있는지는 숨길 수 있다. 이런 컨셉을 정보의 은..

라우팅 라우팅은 에플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말한다. var express = require('express'); var app = express(); // 엔드 포인트를 '/'(root경로)로 정의하고, GET 요청이 왔을 때 'hello world' 메시지를 응답으로 주는 라우트. app.get('/', function(req, res){ res.send('hello world'); }); express.Router 클래스를 사용하면 모듈식 마운팅 가능한 핸들러를 작성할 수 있다. "아래 예에서는 라우터를 모듈로서 작성하고, 라우터 모듈에서 미들웨어 함수를 로드하고, 몇몇 라우트를 정의하고, 기본 앱의 한 경로에 라우터 모듈을 마운트 한..

1. 데이터베이스(Database) 데이터베이스를 간략하게 표현하자면 '정보를 저장하는 애플리케이션'이라 할 수 있다. 만일 데이터베이스가 없다면? 서버의 '메모리'나 어떤 '파일'에 정보를 저장하게 될 것이다. 1) 서버의 메모리에 저장한다면? - 서버를 끄면 데이터가 사라진다는 단점이 있다. 2) 파일에 저장한다면? - 상황에 따라 원하는 정보만을 가져올 수 없고, 항상 모든 데이터를 가져온 뒤 서버에서 필터링을 거쳐야 한다. - 성능, 보안, 편의성에 있어서 한계를 가지고 있다. 이러한 한계를 극복하기 위해 고안된 전문화된 소프트웨어가 바로 '데이터베이스'다. 데이터베이스의 장점은 데이터를 안전하고, 편리하고, 빠르게 보관하고 사용할 수 있다는 것! 데이터베이스에는 MySql, oracle, Mon..

어제오늘 이틀간 진행했던 스프린트에서는 React를 사용해서 클라이언트 사이드를 만들고, 빌드한 후 서버 사이드에서 React 빌드 결과물을 담는 폴더를 만들어서 웹 서버를 통해 사이트를 제공하도록 했다. 빌드가 뭔지 몰라서 빌드부터 하고 서버 사이드를 건드리다가 '이게 아닌 것 같은데...' 싶었는데 알고 보니 빌드는 클라이언트 세팅이 끝난 뒤에 해주면 되는 거였다. 빌드를 하게 되면 클라이언트 사이드에서의 작업물이 알아보기 힘든 형태로 압축된다. 이것은 기능적인 면이고, 빌드의 목적은 배포를 하기 위함이다. React-router Routing : 사용자가 어떤 주소로 들어왔을 때(URL), 그 주소에 해당되는 적당한 페이지를 사용자에게 보여주는 것. 이것을 '라우팅' 또는 '라우터'라고 한다. Re..

React - 사용자 인터페이스(User-Interface)를 만들기 위한 JavaScript 라이브러리 . - 언어의 구조가 사람의 생각 구조에 가깝게 직관적이라는 점이 큰 장점 - 단방향 데이터 흐름 (부모에서 자식으로 옮기는 것만 가능) JSX - JavaScript 확장 문법, React 엘리먼트를 생성한다. - JSX가 React를 사용하는데 필수는 아니지만, React의 구조를 보다 쉽게 작성할 수 있다. const element = Hello, world!; - 태그가 비어 있다면 />를 이용해 닫아주어야 한다 - js코드를 적용하고 싶다면 {}를 사용한다 - JSX 내부에서 if문을 사용할 수 없다(IIFE or 삼항 연산자 사용) - 클래스 이름 적용시 className 사용하기 엘리먼트..