Kani's Blog

앞서 계속 언급했던 jsx(javascript xml)를 알아보겠습니다. 컴포넌트를 만들 때 React.createElement() 함수를 사용해서 만들게 되면 다음과 같이 상당히 고통받게 됩니다. 1234567891011121314151617181920212223242526272829303132"use strict"; React.createElement( "div", { className: "App" }, React.createElement( "header", { className: "App-header" }, React.createElement("img", { src: logo, className: "App-logo", alt: "logo" }), React.createElement( "p", nul..

React 프로젝트 환경을 구축하기 위해서 node.js의 여러 라이브러리들을 이용하여 사용하겠습니다. 준비사항 React는 컴포넌트를 여러가지 파일로 분리하여 저장하고 js가 아닌 jsx라는 문법을 사용할 것입니다. - Webpack : 여러가지 분리된 파일 하나로 합쳐주는 라이브러리- Babel : jsx를 비롯한 새로운 js 문법을 사용하기 위한 라이브러리- Node.js : Webpack과 Babel 등 여러 라이브러리를 사용하기 위한 javascript 런타임- Yarn : 캐싱 시스템 등 조금 더 개선된 npm(node package manager)- Visual Studio Code : 실제 개발을 위해 필요한 에디터 (공짜) 다음 준비사항들의 설치 과정은 생략하겠습니다. CRA(create..

Front-end Framework / Library 최근 웹 애플리케이션 개발은 대부분 프론트엔드 프레임워크/라이브러리를 사용하여 만들어집니다. 그렇다면 왜 이런 프레임워크나 라이브러리를 사용할까요? 물론 프레임워크나 라이브러리를 사용하지 않고 HTML, CSS와 단순한 javascript만을 이용하여 웹 페이지를 개발할 수 있습니다. 하지만 최근의 웹은 유저의 행동에 따른 다양한 데이터 및 UI 변화를 요구하고 있습니다. 이런 부분을 프레임워크나 라이브러리 없이 한다고 하면 상당히 관리적인 측면에서 어려움을 겪을 것입니다. 이러한 이유로 웹 애플리케이션 개발에서는 프론트엔드 프레임워크/라이브러리를 채택하고 있습니다. 이 중에서 최근 핫한 3대장이 Angular, React, Vue 입니다. 개발에 필..

생성될 것으로 생각되는 페이지 별로 기능과 필요 데이터(모델)를 정리해봤습니다. 1. Main○ 스트리밍 목록○ 추천 스트리밍 목록○ 검색○ 카테고리별 분류 2. Login○ id○ password 3. Join○ id○ password○ password confirm○ nickname○ email 4. My Page○ 회원 정보 수정 / 탈퇴○ 구독 정보○ 후원 정보○ ... 5. Player○ 채팅- nickname(id), message, icon- 등급(스트리머, 관리자, 매니저, 구독자, 일반 시청자, 비회원)- 비회원은 채팅, 후원, 구독, 좋아요 등 사용 불가○ 후원○ 구독○ 좋아요○ 시청자 수 [6. Community] [7. Admin] 아래 []속 두 항목은 앞선 페이지들이 어느 정도 ..

처음으로 블로그로 정리하면서 진행할 프로젝트입니다. 웹 프론트엔드와 서버 백엔드에서 새로운 기술의 학습이 목적입니다. 주제는 스트리밍 플랫폼(유튜브, 트위치, 아프리카TV, 카카오TV 등)에서 제공해 줄 만한 기본적인 기능들입니다. 어디까지나 플랫폼(웹 프로젝트)이기 때문에 실제 스트리밍 자체를 구현하지 않을 것 같습니다. 전체 기능입니다. 1. 스트리밍 페이지○ 플레이어○ 채팅○ 후원○ 구독 2. 회원 / 비회원 / 관리자에 따른 상이한 페이지나 콘텐츠 3. 구독 / 알림 서비스 4. 커뮤니티 사실 페이지 자체가 많이 필요하지 않아서 기능이 중복된 곳이 많습니다. 이후 진행하면서 추가되는 내용이 있다면 추가하겠습니다.

Spring Boot를 개발하기 위한 개발툴은 여러가지가 있습니다. 그 중에서 Microsoft사의 Visual Studio Code를 이용한 Spring Boot 개발을 위해 필요한 설치 및 설정을 소개하려고 합니다. (Windows OS 기준) 이미 설치가 된 프로그램들이 있다면 그 과정을 건너뛰시면 됩니다. 1. 먼저 Spring Boot는 Java를 이용한 웹 개발 프레임워크입니다. 때문에 JDK(Java Development Kit)를 설치해줍니다. https://www.oracle.com/technetwork/java/javase/downloads/index.html 2. Java의 환경변수를 설정해 줍니다. 1) 제어판 - 시스템 및 보안 - 시스템 - 고급 시스템 설정 - 고급 - 환경 변..

- open_jdk 8u40-b25를 기반으로한 자료 - Vector 클래스 ● List 인터페이스를 구현한 클래스 중 하나로 내장 클래스이다.● 경로명은 java.util.Vector이다● 가변 배열을 사용하기 위한 클래스이다.● JDK 1.0에서 추가되었다.● 제네릭(Generic)을 지원한다.● 초기 배열 크기를 지정하지 않으면 초기 배열의 크기(initial capacity)는 10이다.● 초기 배열 크기 증가 값을 지정하지 않으면 배열의 크기가 2배씩 커진다. Vector 클래스의 연산 ● 삽입- 기본적으로 데이터가 순서대로 삽입된다.- 기존 배열이 가득차 있을 경우에 배열 크기가 더 큰 새로운 배열을 만들어 기존 배열의 내용을 복사한 후 데이터를 삽입한다.- 중간 삽입이 가능하다.- 중간에 삽..

개념(Concept) ● 키(Key) 값을 해시 함수(Hash Function)라는 수식에 대입시켜 계산한 후 나온 결과를 주소로 사용하여 바로 값(Value)에 접근하게 할 수 하는 방법이다. 해시 함수(Hash Function) ● 키(Key) 값을 값(Value)이 저장되는 주소 값으로 바꾸기 위한 수식이다. 해싱(Hashing) 사용 분야 ● 보안(Security) : 데이터의 위변조를 막기 위해 전자서명이나 보안 알고리즘에 사용● 자료 구조(Data Structure) : 기억 공간에 저장된 정보를 보다 빠르게 검색하기 위해 절대주소나 상대주소가 아닌 해시 테이블(Hash Table)을 생성하는 방식 해싱(Hashing) 구현 기법 ● 정적 해싱(Static Hashing)- 고정 크기의 배열을..

개념(Concept) ● 키(Key)를 이용하여 값(Value)를 저장하는 자료구조이다.● 키(Key)를 특정 해시 함수(Hash Function)를 통해 해싱한 후 나온 결과(정수)를 배열의 인덱스로 사용하여 값(Value)를 찾는다.● 검색 성능은 해시 함수의 성능과 해시 테이블의 크기에 좌우된다.● { "연필" : 200, "볼펜" : 300, "샤프" : 3000, "필통" : 15000 } 의 데이터가 있으면 키(Keys)를 특정 해시 함수(Hash Function)을 사용하여 다음과 같은 해시 테이블의 인덱스 형태로 만든 후 값(Values)을 저장한다. 장점(Advantage)과 단점(Disadvantage) ● 해싱된 키(Hash Key)를 가지고 배열의 인덱스로 사용하기 때문에 삽입, 삭..