IT/React 2019. 1. 8.
[React.Js/JavaScript] 간단 리엑트 스타일( CSS ) 적용하기
[React.Js/JavaScript] 간단 리엑트 스타일( CSS ) 적용하기 React 저번 포스팅에서는 간단하게 컴포넌트를 생성하고 추가하는 작업을 진행하였습니다.오늘은 간단하게 리엑트에 CSS를 입히는 작업을 하도록 하겠습니다.바로 SCSS 를 이용하여 작업을 진행하려고 합니다. * SASS를 알아오도록 합시다.React 2.0 이 나오기 전까지 이 SCSS는 Webpack 작업을 통해서 추가하였습니다만현재는 그냥 node-sass 을 설치하고 사용하면 됩니다. 이렇게요yarn add node-sass매우 쉬워졌습니다.까먹고 실행을 해도 아래와 같은 메세지와 함께 설치를 권유합니다.이후 scss 파일을 생성합니다./src/Components/Display/styles.scss 생성 이후 간단한 c..
IT/React 2018. 11. 4.
[React.Js] 리엑트 간단 컴포넌트 만들기
[React.Js/JavaScript] 간단 리엑트 컴포넌트 만들기 React 저번 포스팅에서는 create-react-app 을 통해서 앱을 실행시키는 방법까지 진행했습니다. npx 또는 yarn 을 통해서 만들었습니다. 이 외에도 Reactjs 용 프레임워크가 존재합니다. 예를 들자면 python -> django , java -> spring 같은 느낌입니다.하지만 지금은 그저 그런게 있구나 정도로만 알아두시면 좋겠습니다. 알아야할것 이번글에서는 리엑트를 통해서 컴포넌트를 생성하고 생성한 컴포넌트를 사용해 보도록 하겠습니다.시작하기 전에 우선적으로 알아야 하는 것은 바로 React의 컴포넌트 개념입니다. https://medium.com/little-big-programming/react 블로그 글..
IT/Html 2018. 10. 13.
[HTML/CSS] HTML, CSS를 이용하여 간단 메인 페이지 만들어보기
HTML, CSS를 이용하여 간단 메인 페이지 만들어보기 문제가 있을경우에는 댓글 달아주시면 페이지를 삭제하도록 하겠습니다. 동영상을 보며 공부한 내용을 바탕으로 간단한 사이트를 html과 css를 이용하여 비슷하게 만들기를 시작하였습니다. 크롬이나 다른 개발자도구, 검사를 이용하여 위와 같은 방법으로 html 태그와 CSS 확인이 가능합니다. 이 포스팅을 보기전에 전에 포스팅한 CSS Flex 와 Grid를 먼저 보시는것을 추천드립니다. 2018/09/05 - [IT/프로그래밍] - [CSS/Grid/Flexbox] CSS, 그리드( Grid ), 플렉스박스 ( Flexbox )에 대해서 알아보자 자 그럼 간단하게 홈페이지를 만들어 보도록 하겠습니다. Visual Studio Code 를 이용하여201..
IT/DataBase 2018. 10. 4.
[MySQL] MySQL Characterset 옵션 변경 방법
[MySQL] MySQL Characterset 옵션 변경 방법 Mysql을 사용하면서 자주 Characterset을 변경할 일이 있어 자주 들어가서 확인하는 사이트가 있어 소개 차 글을 쓰고있습니다. 출처 : https://www.lesstif.com/pages/viewpage.action?pageId=20775198 MySQL 5.5 부터는 default-character-set 옵션이 제거되었고 character-set-server 만 설정해 주면 된다고 합니다.skip-character-set-client-handshake 가 빠지면 client 의 시스템 encoding 을 사용하는데 윈도의 경우 euckr 로 설정 될수 있으므로 필요합니다.위치RHEL/CentOS /etc/my.cnfUbunt..
IT/Environment 2018. 9. 27.
[Lombok/롬복] lombok 사용법 설치하기 및 적용하기 및 예제
[Lombok/롬복] lombok 설치하기 및 적용하기 오늘 소개해 드릴 것은 바로 Lombok (롬복)입니다. Java 기반에서 작성하는 VO, DTO, Entity 관련 작업을 쉽게 도와주는 도구입니다.Getter, Setter, ToString 등... 관련 메소드들을 깔끔하게 작성할 수 있습니다. 홈페이지 https://projectlombok.org/ maven repositotyhttps://mvnrepository.com/artifact/org.projectlombok/lombok/1.16.18 위 사이트에서 메이븐을 통해서 다운로드를 받을 수 있습니다. org.projectlombok lombok 1.16.18 provided1.16.18 버전 기준 메이븐을 통해서 프로젝트에 적용 시키기 ..
IT/Spring Boot 2018. 9. 22.
스프링 부트 ( Spring boot ) Mybtis(마이바티스) 를 이용하여 DB에 접근하여 데이터를 활용해보자
스프링 부트 ( Spring boot ) Mybtis(마이바티스)를 이용하여 DB에 접근하여 데이터를 활용해보자 오늘은 Mybtis(마이바티스)를 이용하여 DB에 접근하여 데이터를 가져오는 방법에 대해서 알아보도록 하겠습니다. 마이바티스는 자바 퍼시스턴스 프레임워크의 하나로 XML 서술자나 어노테이션을 사용하여 저장 프로시저나 SQL 문으로 객체들을 연결시켜줍니다. 스프링 부트에서는 JPA 를 이용하여 DB에 접근하는 방법을 권유하고 있습니다. 이애 대해서는 나중에 따로 포스팅을 하도록 하겠습니다. 우선은 Mybatis로 접근을 하도록 하겠습니다. 우선 mybatis를 이용하기 위해서는 maven (메이븐) 을 이용하거나 gradle(그레들) 을 이용하여 패키지를 관리합니다. 여기서는 maven을 이용하..
IT/Spring Boot 2018. 9. 10.
스프링 부트 ( Spring boot ) 컨트롤러 생성과 활용, MVC에 대해서 알아보기
스프링 부트 ( Spring boot ) 컨트롤러 생성과 컨트롤러의 종류 알아보기 및 생성하기 오늘은 스프링 부트에서 컨트롤러를 생성하고 해당 컨트롤러를 활용하는 방법을 알아보도록 하겠습니다. 컨트롤러는 생성한 모델과 뷰간에 상호동작을 조정합니다. 더 자세하게 이해하기 위해서는 Spring MVC 에 대해서 이해하셔야 합니다. MVC란 Model, View, Controller 의 약자로 사용자 인터페이스와 비지니스 로직을 분리하여 웹 개발을 하는 것을 가장 큰 장점이라고 생각하고 계발을 진행하는 방법입니다. Model : 모델은 데이터로 애플리케이션의 정보를 나타냅니다. View : 뷰는 화면으로 사용자에게 보여주는 인터페이스를 말합니다. Controller : 컨트롤러는 위에서 말했듯치 비지니스 로직..
IT/Html 2018. 9. 5.
[CSS/Grid/Flexbox] CSS, 그리드( Grid ), 플렉스박스 ( Flexbox )에 대해서 알아보자
CSS 그리드( Grid ) , 플렉스박스 ( Flexbox ) 에 대해서 알아보자 오늘 소개할 것은 바로 그리드(Grid)와 플렉스박스(Flexbox)입니다. CSS(종속형 시트 or 캐스케이딩 스타일 시트)의 종류 입니다. 레이아웃과 스타일을 정의할 때의 사용되는 언어로 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역활을 담당한다고 할 수 있습니다. 즉 HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다는 뜻입니다. 그중 Flexbox 와 Grid 에서 많이 사용하는 언어를 알아보도록 합시다.이론보다는 한번 보는 것이 빠릅니다.보시죠! 아래와 같은 html 파일을 만듭니다. 물론 이 외에도 헤더와 바디가 있어야겠죠?우선 class..
IT/React 2018. 8. 24.
[React.Js] 리엑트 소개와 간단 앱 실행하기(create-react-app)
[React.Js/JavaScript] 간단 리엑트 소개와 실행하기 React 소개 React는 사용자 인터페이스를 조금 더 쉽게 작성하기 위한 JavaScript 라이브러리 입니다. 페이스북에서 개발하여 현재는 인스타그램, 넷플릭스 등... 여러 유명 서비스에서 사용되고 있는 라이브러리 입니다. React의 컴포넌트 기반의 방식이고 이 컴포넌트 로직은 JavaScript 로 작성하여 React 프로그램을 만들경우 DOM을 이용하여 데이터를 쉽게 전달이 가능하게 합니다. DOM 이란 Document Object Model의 약자로 HTML, XML 문서의 프로그래밍 인터페이스 입니다. 문서의 구조화된 표현을 제공하며 프로그램밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 쉽게 변경할 수 있게 도..
IT/Javascript 2018. 8. 16.
[javascript] 자바스크립트를 이용하여 IP변환 (long to IP, IP to long)
[javascript] 자바스크립트를 이용하여 IP변환 (long to IP, IP to long) 자바스크립트를 이용하여 ip 를 long 으로 or long을 ip로 변환하기입니다. 아래와 같은 함수를 사용하여 변환합니다. var ip; ip = {}; ip.toLong = function toInt(ip){ var ipl=0; ip.split('.').forEach(function( octet ) { ipl>0);}; ip.fromLong = function fromInt(ipl){ return ( (ipl>>>24) +'.' + (ipl>>16 & 255) +'.' + (ipl>>8 & 255) +'.' + (ipl & 255) );}출처https://gist.github.com/monkeym4s..
IT/Spring Boot 2018. 8. 9.
스프링 부트 ( Spring boot ) 프로젝트 생성하기 부터 실행하기
첫 Spring boot 프로젝트 생성하기 부터 실행하기 Spring boot 카테고리가 생성되었습니다!!! 그런 의미에서 몇 단계로 나누워 스프링 부트를 사용하면서 알게된 정보들과 사용법들을 남기고자 카테고리를 생성하게 되었습니다. 우선 인텔리제이 IntelliJ IDEA를 이용하여 프로젝트를 진행하도록 하겠습니다. 인텔리제이가 없으신 분들은 STS를 사용하셔도 전혀 지장이 없습니다. sts 홈페이지https://spring.io/tools IntelliJ IDEA를 실행하게 되면 아래와 같은 화면이 보이게 됩니다.새로운 프로젝트를 실행하기 위해서는 Create New Project 를 선택해야합니다그 외 선택지는 프로젝트가 이미 있으신 분들이 사용하시면 되는 기능입니다. 제가 선택한대로 프로젝트를 만..
IT/Javascript 2018. 8. 1.
[javascript/jquery] Jquery 를 사용하여 이메일, 이름, 비밀번호 체크하기
Jquery 를 사용하여 이메일, 이름 체크하기 jquery를 이용하여 이름, 이메일, 비밀번호 체크해봅시다. 정규표현식 확인하는 사이트 https://regex101.com/ Online regex tester and debugger: PHP, PCRE, Python, Golang and JavaScript Please wait while the app is loading... regex101.com var passCheck = false; var emailCheck = false; var getMail = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/); var getCheck = RegExp(/^[a-zA-Z0-9]{4,12}$/); // ..
IT/DataBase 2018. 7. 28.
[MongoDB] 몽고DB ( MongoDB ) 에서 로그스태시 ( logstash ) 를 이용해 데이터를 받아보자
[MongoDB] 몽고DB ( MongoDB ) 에서 로그스태시 ( logstash ) 를 이용해 데이터를 받아보자 엘라스틱서치를 사용하고자 몽고디비에서 데이터를 받아 올 일이 생겼습니다.그래서 열심히 찾아본 결과 몽고DB의 _id 값이 엘라스틱서치에 _id 값을 넣을때 문제가 생긴다는 것을 알게되어몽고DB의 ID값을 제거하고 받았더니 되었습니다. 엘라스틱서치 5버전대를 사용하려고 하다보니 input mongodb 플러그인이 없었습니다.그래서 로그스태시(logstash) 에서 몽고DB 의 데이터를 받아오려면 엄청난 분들이 만들어 놓은 logstash-input-mongodb 를 받아야합니다.그래서 5버전 이상에서 사용가능한 logstash-input-mongodb-0.4.1.gem 을 설치하여 사용하였습..
IT/Java 2018. 7. 27.
[Java/Socket] UDP 를 이용한 다중 채팅 프로그램 만들기
UDP 를 이용한 다중 채팅 프로그램 만들기 최종적으로 만들 채팅 프로그램은 와 같은 구조를 가집니다. 우선 UDP를 이용하여 만들기 위해서는 TCP와 UDP를 알아야합니다. TCP(Transmission Control Protocol)연결형 서비스를 지원하는 전송계층 프로토콜인터넷 환경에서 기본으로 사용한다.호스트간 신뢰성 있는 데이터 전달과 흐름제어 및 혼잡제어 등을 제공하는 전송계층 UDP(User Datagram Protocol)비연결형 서비스를 지원하는 전송계층 프로토콜사용자 데이터그램형 프로토콜인터넷상에서 서로 정보를 주고받을 때 정보를 보낸다는 신호나 받는다는 신호 절차를 거치지 않고,보내는 쪽에서 일방적으로 데이터를 전달하는 통신 프로토콜보내는 쪽에서는 받는 쪽이 데이터를 받았는지 받지 않..
IT/BigData 2018. 7. 4.
Apache Hue ( 아파치 휴 ) 4.0.1 소개 및 설치하기
Apache Hue ( 아파치 휴 ) 소개 및 설치하기 아파치 휴는 데이터를 탐색, 쿼리 및 시각화를 하기위한 오픈 소스 Analytic Workbench 입니다. 최근 Hue 4 버전 이상이 나왔습니다.4 버전으로 바뀌면서 에디터, 브라우져, 대시보드 그리고 스케쥴러 UI가 바뀌었다고 합니다.Hue 4 이전 버전을 설치하시고 싶으시다면 Hue 홈페이지에 Install란에 자세히 나와있습니다. Apache Hue 홈페이지주소 : http://gethue.com/ 우선 다운로드를 해줍시다.http://gethue.com/hue-4-and-its-new-interface-is-out/ 4.0.1 버전을 설치하겠습니다. 설치하기 전 필요한 의존성 패키지를 설치해줍니다. yum install libtidy li..
IT/DataBase 2018. 6. 20.
[DB/Mysql] 유저 권한 생성하기 및 권한주기
- mysql 서버 로그인하기 $ mysql -uroot -prootpassword mysql - 다른 PC에서 mysql 서버로 접속을 하기 위한 사용자 추가 mysql> create user 'userId'@'%' identified by 'userpassword'; - 위 사용자에게 모든 것을 할 수 있는 권한 주기mysql> grant all privileges on *.* to 'userid'@'%'; - 위 사용자에게 특정 DB를 관리할수 있는 권한 주기 mysql> grant all privileges on dbname.* to 'userid'@'%'; - 로컬PC에서 mysql로 접속하기 위한 사용자 추가 mysql> create user 'userId'@'localhost' identif..
IT/Algorithm 2018. 6. 17.
[JAVA/자료구조] DoublyLinkedList 더블링크드리스트 코드 알아보기
[JAVA/자료구조] DoublyLinkedList 더블링크드리스트 코드 및 알아보기 https://visualgo.net/en/list 그림으로 알아보기 위와 같은 구조가 더블링크드리스트 ( DoublyLinkedList ) 입니다. 노드와 노드가 서로 연결되어 있다는 점이라는 장점이 있습니다. 단순열결리스트와는 다르게 이전 노드와 다음 노드로 구성되어 있습니다. 단점으로는 이전 노드를 지정하기 위한 변수를 하나 더 사용해야 합니다. 메모리를 더 많이 사용한다는 의미이기도 하죠 왜그런지는 코드를 통해서 알아보도록 하겠습니다. public class DoblyLinkedList {private Node head;privateNode tail;private int size = 0;private class ..
IT/Algorithm 2018. 5. 12.
[Java/알고리즘] 1부터 100까지의 소수의 합을 구하자! (에라토스테네스의 체)
[Java/알고리즘] 1부터 100까지의 소수의 합을 구하자! (에라토스테네스의 체) 1부터 100까지의 소수의 합을 구하기 위해서는 우선 소수에 대해서 알아야 합니다. 소수는 1과 자기자신만으로 나누어지는 수를 소수라고 합니다. 예를들어 17은 1과 17만으로 나누어집니다.하지만 15는 1,3,5,15 로 나누어 지죠그럼 17은 소수라고 할 수 있습니다. 아래는 그냥 에라토스테네스의 체를 사용하지 않은 소수 구하기 입니다.public class Prime {public static void main(String args[]){ // 합을 구하기 위한 변수int sum = 0;// 1은 제외해야 하기 때문에 2부터 시작 for(int num=2; num
IT/BigData 2018. 4. 26.
Apache Spark ( 아파치 스파크 ) 2.2.0 Standalone 소개 및 설치하기
Apache Spark ( 아파치 스파크 ) 2.2.0 소개 및 설치하기 아파치 스파크(Apache Spark)는 오픈 소스 클러스터 컴퓨팅 프레임워크이다. 원래 캘리포니아 대학교 버클리의 AMPLab에서 개발된 스파크의 코드베이스는 나중에 아파치 소프트웨어 재단에 기부되었으며 그 이후로 계속 유지 보수를 해오고 있다. 스파크는 암시적 데이터 병렬성과 장애 허용과 더불어 완전한 클러스터를 프로그래밍하기 위한 인터페이스를 제공한다. 우선 다운로드를 진행합시다. https://spark.apache.org/downloads.html 들어가서 원하는 버전을 다운로드 합시다 지금 소개하고 있는 스파크는 2.2.0 버전 기준 설명입니다. Install Spark 스파크를 다운받으셨다면 원하는 곳에 압축을 푸시면 ..
IT/Algorithm 2018. 4. 21.
[JAVA/알고리즘] factorial 팩토리얼 코드 알아보기 (재귀, 기본)
[JAVA/알고리즘] factorial 팩토리얼 코드 알아보기 오늘은 factorial 를 코드를 통해서 알아보도록 하겠습니다. 5! = 5 * 4 * 3 * 2 * 1 을 만족하는 것이 팩토리얼( ! ) 입니다. 코드를 보겠습니다. public class factorial {public static void main(String[] args) {int n = 1;int result = 0;int end = 5;for(int i = n; i
