티스토리

사전처럼 찾아쓰는 IT

검색하기

블로그 홈

사전처럼 찾아쓰는 IT

5789.tistory.com/m

사전처럼 찾아쓰는 IT

구독자: 0

방명록 방문하기

주요 글 목록

OpenJDK설치 CentOS 7 1. 설치 가능한 자바 버전 확인 yum list java*jdk-devel 조회된 결과 중 아무거나 설치 yum install java-1.8.0-openjdk-devel.x86_64 3. 설치 완료 후 버전 확인 javac -version rpm -qa java*jdk-devel 4. 환경변수 설정 echo $JAVA_HOME // 없으면 설정 안된것 which javac //javac의 심볼릭 경로 나옴. readlink -f /bin/javac //readlink 에 심볼릭 경로를 줘서 진짜 파일위치 찾아내야 함 vi /etc/profile //환경변수 등록 파일 export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.161-0.b14.e.. 공감수 0 댓글수 0 2019. 3. 24.
윈도우에서 리눅스로 SSH를 이용한 파일 전송 C:\> scp /windows_file_path linux_user_id@linux_ip:linux_folder_path 예)C:\> scp c:\test\test.txt root@192.168.0.5:/opt/var/test 공감수 0 댓글수 0 2019. 3. 24.
특정포트 열기 firewall-cmd --zone=public --permanent --add-port=9000/tcp //9000번 포트 열기 frewall-cmd --reload //변경 적용 firewall-cmd --zone=public --list-all //열린 포트 확인 공감수 0 댓글수 0 2019. 3. 24.
SSH 포트 열기 CentOS 7 1. grep으로 SSH 설치되어 있는지 확인 rpm -qa | grep openssh-* Public 존을 열어 service에 ssh가 등록되어 있는지 확인 vi /etc/firewalld/zones/public.xml 3. ssh가 dmz에 영구등록 되었는지 확인 firewall-cmd --permanent --list-all --zone=dmz 4. 22번 포트 추가 firewall-cmd --permanent --zone=public --add-port=22/tcp 5. 가상머신 NAT로 사용중이라면 포트포워딩 해야함 공감수 0 댓글수 0 2019. 3. 24.
CentOS7 설치 1. CentOS7 설치 - tutorial을 시 준비물 - Oracle VM VirtualBox : https://www.virtualbox.org/ - centOS7 iso 파일 : http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-DVD-1810.iso VirtualBox 실행 ether ad : 5? txqueuelen IBBB (Ethernet) RX packets 7424 bytes 18383784 (18.4 MiB) RX errors e dropped e c".erruns e frate e rx packets ZZZZ bytes 15971? (147.1 KiB) errors e dropped e c".erruns e car.. 공감수 0 댓글수 0 2019. 3. 24.
[Tutorial]6.마무리 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※ 드디어 다음과 같은 tic-tac-toe 게임을 만들었다.플레이 가능한 tic-tac-toe.승자를 판별할 수 있다.턴 내역을 저장할 수 있다.턴 내역을 리뷰하고 이전 턴으로 이동할 수 있다.잘 했습니다! 이제 React가 어떻게 동작하는지 어지간한 것은 알게 되었을 거라고 믿습니다.여기서 최종 결과를 확인해 보자. 시간이 좀 남거나 React에 대해 더 공부해 보고자 한다면, 여기 조금 더 난이도 있는 tic-tac-toe 게임을 만들어 보자. 1) 턴 내역에 (열,행) 포맷으로 표시해보자. 2) 보드에서 최근 턴을 굵게 표시해보자. 3) 중첩 반복문을 사용하여 하.. 공감수 0 댓글수 0 2019. 2. 15.
[Tutorial]5.Time Trave 기능 추가 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※1. 플레이 내역 저장하기2. 다시 State 끌어올리기3. 이동내역 보여주기4. Key 고르기5. Time Travel 구현하기 마지막 단계로 게임 플레이 내역을 볼 수 있는 Time Travel 기능을 구현해보자. 1. 플레이 내역 저장하기 우리가 만약 squares 배열을 직접 수정했다면, Time Travel 기능을 구현하기 어려웠을 것이다. 그러나 우리는 slice() 함수를 통해 플레이 할때마다 새로운 복사본을 만들어서 원본 데이터를 보존했다. 이는 게임 플레이 내역을 저장할 수 있게 해주고, 현재 턴과 과거 턴을 비교할 수 있게 해준다. 이제 과거 Squa.. 공감수 0 댓글수 0 2019. 2. 15.
[Tutorial]4.게임 완성하기 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※1. State 관리하기2. 불변의 중요성3. 함수 컴포넌트4. 턴제로 전환하기5. 승자 판단하기 tic-tac-toe 게임을 만들기 위한 기본은 마련되었다. 이 게임 개발을 끝내기 위해 X와 O가 교차로 board에 표시되게 해야 하고, 승자를 결정하는 작업이 남아있다. 1. State 관리하기 현재, 각 Square 컴포넌트는 게임의 상태를 유지한다. 승자를 가리기 위해, 9개 Square의 value를 유지하고 하나로 모아야 한다. Board가 그냥 각 Square에게 상태를 물어볼 수도 있고 React에서 실제로 그것이 가능하다. 그러나 코드가 이해하기 어려워지.. 공감수 0 댓글수 0 2019. 2. 15.
[Tutorial]3.개요 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※1. React는 무엇인가?2. tic-tac-toe 초기 코드 분석3. Props로 데이터 전달4. 컴포넌트에 기능 만들기5. 개발도구 1. React는 무엇인가? - React는 유저 인터페이스 개발을 위한 선언적, 효과적, 유연한 자바스크립트 라이브러리다. "컴포넌트"라고 부르는 작고 독립된 코드조각으로 복잡한 UI를 구성할 수 있다. React는 몇가지 종류의 컴포넌트를 갖고 있으며 지금은 React.Component부터 시작하겠다. XML 형태의 태그를 사용할 것이다. 우리는 화면에 보여줄 것을 React에게 전달하기 위해 컴포넌트들을 사용한다. 데이터가 변경.. 공감수 0 댓글수 0 2019. 2. 15.
[Tutorial]2.Tutorial 환경설정 △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※ 이 tutorial을 진행하는 2가지 방법이 있다. 하나는 browser에 코드를 입력하는 것이고, 또 하나는 PC에 개발 환경을 설치하는 것이다.1. Browser에 코드 입력 - tutorial을 시작하는 가장 빠른 방법이다. 우선 여기로 이동한다. 비어있는 tic-tac-toe 게임보드와 React code가 나타날 것이다. 이 tutorial에서 이 코드를 수정할 것이다. 2. PC에 환경 설정(1번이 쉽게 때문에 2번은 넘어가도 상관없다.) 1) 최신 버전의 Node.js가 인스톨 되어 있어야 한다. (6버전보다 높은 Node, 5.2이상의 npm) 2) r.. 공감수 0 댓글수 0 2019. 2. 15.
[Tutorial]1.Tutorial을 시작하면서... △ ▽ ※ React.org의 공식문서( https://reactjs.org/tutorial/tutorial.html ) 번역본입니다. ※ 이 tutorial을 통해 작은 게임을 만들어 볼 것이다. 게임 개발자가 아니기 때문에 넘어가고 싶을 수도 있지만 한번 해보는 것을 권장한다. 이 tutorial을 통해 React 앱을 빌드하는데 필요한 기초적인 기술들을 익히게 될 것이며 마스터한 후에 React에 대해 더 깊이 이해할 수 있을 것이다. Tip 이 tutorial은 개발하면서 배우는 것을 좋아하는 사람을 대상으로 만들어졌다. 개념을 처음부터 배우고 싶다면 step-by-step 가이드를 확인하기 바란다. 이 tutorial과 step-by-step 가이드는 서로 부족한 내용을 보충해 줄 수 있다. 이.. 공감수 0 댓글수 0 2019. 2. 15.
8.CSS Filter △ ▽ 1. CSS Filter 함수 - drop-shadow - grayscale - sepia - saturate - hue-rotate - invert - opacity - bright - contrast - blur 1. CSS Filter 함수1. CSS3 Filter 속성을 사용하면 블러나 색상 변경같은 효과를 요소에 적용할 수 있다. 필터는 일반적으로 이미지, 배경, 테두리의 효과를 조정하는데 사용된다. 이미지 필터링 같은 경우는 어떤 이미지에 대해 다른 스타일을 줄 수 있다. 웹사이트에 여러개의 이미지를 업로드하는 대신 하나의 이미지로 필터 속성만 바꿔가면서 시각적인 효과를 줄 수 있다. 필터 함수는 blur(), brightness(), contrast(), drop-shadow(), g.. 공감수 0 댓글수 0 2019. 1. 29.
7.CSS3 Animation △ ▽ 1. Transitions 2. transform : rotate() 3. transform origin, translate(), skew() 4. scale(), 동시 적용. 5. Keyframes & Animations 6. Animation 속성 7. 3D 변환 1. Transitions1. CSS3는 하나의 property 값을 일정시간동안 다른 값으로 변경하는 것이 가능하다. - transition-property : 변환 적용할 property를 지정한다. - transition-duration : 변환 시간을 설정한다. - transition-timing-function : 지속 시간동안 어떻게 변환되는지 설정한다. - transition-delay : 변환 효과의 지연시간을 설정한다.. 공감수 0 댓글수 0 2019. 1. 29.
6.CSS3 그라데이션&배경 △ ▽ 1. 선형 그라데이션 만들기 2. 방사형 그라데이션 만들기 3. background-size 속성 4. background-clip 속성 5. 투명 경계선 6. 멀티 배경 7. opacity 속성 1. 선형 그라데이션 만들기1. CSS3는 두개 이상의 특정한 색을 부드럽게 변환하는 그라데이션을 가능하게 한다. CSS3에는 Linear 와 Radial 타입 두가지의 그라데이션이 있다. 선형 그라데이션을 만들기 위해 적어도 두가지 색상지점을 선택해야 한다. 색상지점이란 부드럽게 표현하려고 하는 색상이다. 또한 시작점과 방향, 그라데이션 효과를 정할 수 있다. 색상은 색이름, 16진수값, RGB, HSL까지 사용 가능하다. 모질라 계열 브라우저에 사용하기 위해 접두어 -moz가 붙는다. div { wi.. 공감수 0 댓글수 0 2019. 1. 29.
5.CSS3 기본 △ ▽ 1. CSS3 소개 2. CSS3 접두어 3. border-radius 속성 4. box-shadow 속성 5. 투명 효과 6. text-shadow 속성 7. 유사 클래스 (Pseudo-Classes) 8. 유사 요소 (Pseudo-Elements) 9. word-wrap 10. @font-face 1. CSS3 소개1. CSS3는 하위 버전들과 완벽하게 호환되는 CSS의 최신 표준이다. 새롭게 달라진 주요 기능들 - Border radius : 요소들 코너를 둥글게 하는 것이 가능해졌다. - Border images : 경계선에 이미지를 넣는 것이 가능해졌다. - Multiple backgrounds : 여러가지 배경을 요소에 넣을 수 있다. - Animations and effects : 애.. 공감수 0 댓글수 0 2019. 1. 29.
4.레이아웃 △ ▽ 1. display 속성 2. visibility 속성 3. position 속성 4. float 속성 5. clear 속성 6. overflow 속성 7. z-index 속성 1. display 속성1. display : block HTML의 모든 요소는 직사각형의 박스다. display 속성은 직사각형 상자의 위치, 크기 등을 결정한다. block 요소는 시작과 끝에 줄바꿈을 취하고 block의 가로 길이는 가능한 최대로 한다. 대표적으로 span 태그는 block의 반대 개념인 inline 요소인데 display 속성으로 block으로 변경할 수 있다. span { display: block;} 2. display : inline inline 요소는 필요한 만큼만 가로 길이를 가져가고 줄바꿈.. 공감수 0 댓글수 0 2019. 1. 29.
3.Properties △ ▽ 1. CSS 박스 모델 2. Border 속성 3. Width, Height 속성 4. Background 5. LIST 6. TABLE 7. LINK 8. 마우스 커서 1. CSS 박스 모델모든 HTML 요소들은 박스로 간주된다. CSS 박스 모델은 웹페이지의 디자인과 레이아웃을 나타낸다. Margins, borders, padding, 컨텐츠로 구성된다. Properties는 같은 순서로 동작한다 : top, right, bottom, left HTML 요소의 전체 가로길이 : left right 마진 + left right 테두리 + left right 패딩 + 컨텐츠 가로 HTML 요소의 전체 세로길이 : top bottom 마진 + top bottom 테두리 + top bottom 패딩 .. 공감수 0 댓글수 0 2019. 1. 29.
2.텍스트 스타일 △ ▽ 1. Font-family 속성 2. Font-size 속성 3. Font-style 속성 4. Font-weight 속성 5. Font-variant 속성 6. Font-color 속성 7. Text-align 속성 8. Vertical-align 속성 9. Text-decoration 속성 10. Text-indent 속성 11. Text-shadow 속성 12. Text-transform 속성 13. Letter-spacing 속성 14. Word-spacing 속성 15. White-space 속성 1. Font-family 속성1. Font-family 속성은 태그 내용의 font를 정의한다. 2가지 타입의 font family 이름이 있다. - font family : 특정 글자체 그룹.. 공감수 0 댓글수 0 2019. 1. 29.
1.기본 △ ▽ 1. CSS 개론 2. CSS의 3가지 다른 사용방법 3. CSS의 규칙과 선택자 4. CSS 주석 5. Style Cascade와 상속 1. CSS 개론1. CSS란 무엇인가? CSS는 Cascading Style Sheets의 약자이다. - Cascading은 CSS가 다른 스타일 위에 또 다른 스타일을 적용하는 계단형 방식이다. - StyleSheet는 웹 문서의 모양을 담당한다. CSS와 HTML은 함께 동작한다. - HTML은 페이지 구조를 정리한다. - CSS는 HTML 요소들이 어떻게 보일지 결정한다. 2. 왜 CSS를 사용하는가? - CSS는 특정 스타일을 특정 HTML 요소에 적용할 수 있게 한다. - 가장 큰 이점은 컨텐츠의 스타일만 뽑아 분류할 수 있다는 것이다. - HTML만.. 공감수 0 댓글수 0 2019. 1. 23.
Gavin English 공감수 0 댓글수 82 2019. 1. 14.
Fridge 공감수 0 댓글수 2 2019. 1. 14.
FridgeForResume 공감수 0 댓글수 3 2019. 1. 14.
Ash2nd 공감수 0 댓글수 0 2019. 1. 14.
さよ日本 공감수 0 댓글수 3 2019. 1. 14.
민수빈한국어 공감수 0 댓글수 7 2019. 1. 11.
라우터 분리 NodeJS 라우터 분리방법 main.js sub.js (분리할 라우터 파일) 메인 JS파일 ( main.js )123456789var express = require('express');var app = express();//분리할 라우터 파일 경로 설정var sub = require('./routes/sub.js');//해당 라우터로 접근할 접근자 지정 app.use('/',sub);app.get('/', function(req, res){ res.sendFile(__dirname + '/chat.html');}); cs 분리한 JS파일 ( sub.js )1234567var express = require('express');var router = express.Router();router.get('.. 공감수 0 댓글수 0 2018. 12. 18.
Visual Studio Code 단축키 File - Preferences - Keyboard Shortcuts에서 편집 가능 행 잘라내기 : 블락 설정 안하고 Ctrl + X 행 복사 : 블락 설정 안하고 Ctrl + C 행 삭제 : Ctrl + Shift + K 아래 행 삽입 : Ctrl + Enter 위 행 삽입 : Ctrl + Shift + Enter 행 이동 : Alt + ( Down or Up ) 선택된 행 위로 복사 : Shift + Alt + Down 선택된 행 아래로 복사 : Shift + Alt + Up 다음 선택 찾기(복수선택) : Ctrl + D 다음 선택 찾기 : Ctrl + ( K + D ) 반복 선택 취소 : Ctrl + U 현재 선택된 텍스트 전부 찾아 선택Ctrl + Shift + L 같은 단어 전부 찾아 선택 :.. 공감수 0 댓글수 0 2018. 12. 13.
WeddingParallax 공감수 0 댓글수 3 2018. 11. 28.
인텔리J단축키 1. 인터페이스, 추상클래스 오버라이드 메소드 껍데기 만들기 : Ctrl + I 2. 생성자, 게터, 세터 만들기 : Alt + Insert 3. 블락선택 : Alt + 마우스 왼쪽버튼 공감수 0 댓글수 0 2018. 11. 27.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.