Poetic Code＃시적인코드

[Git] Rebase 여러개의 commit들을 합쳐보자. git rebase -i HEAD~N 명령어를 사용한다. 여기서 N은 현재 commit 에서 몇번째까지 선택할지 정하는 숫자이다. git log --oneline 명령어로 commit 이력을 간략하게 볼수 있다. 다음과 같이 test1~3 까지 커밋이 존재한다. PS C:\Users\MSYNC-ICJ\workspace\vsc\git_test> git log --oneline 91155bc (HEAD -> master, origin/master) test4 954a86d test3 dff257a test2 dfc1d9a test1 361a5cb init comiit 현재 헤드부터 지난 3개의 커밋을 합쳐보겠다. git rebase -i HEAD~3..

[React] Developer Tools 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React React 공식 홈에서 Community 탭에 TOOLS를 눌러보면 React를 사용할때 같이 쓰면 좋은 도구들이 나와있다. 그중에서 Debugging을 클릭. (본인의 경우 Chromium을 사용하기 때문에 Chrome를 선택함.) React Developer Tools이라는 Chrome 확장 기능을 설치 받을수 있다.

[React] Event 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React 이전에 만들었던 화면에서 WEB 이나 HTML, CSS, JavaScript 를 클릭하면 아래의 내용이 달라지도록 하고 싶다. step1 /src/components/Subject.js ... {this.props.title} ... render 함수는 화면을 그려주는 함수이다 props, state가 변경되면 render 함수는 다시 호출된다. App.js를 다음과 같이 변경해주자. /src/App.js import React, { Component } from 'react'; import Subject from './components/Subject'; i..

[React] State 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React Component를 사용자가 조작할 수 있도록 하는 것은 Props이다. 사용자는 알 필요 없고 보여줄 필요없이 내부에서 사용하는 속성은 State이다. /src/App.js ... ...우리는 이전에 props를 통해 title 과 sub 라는 속성을 통해 값을 주고 동적인 컴포넌트를 만들었다. 우선은 state를 통해 기본값을 줘보자. /src/App.js ... class App extends Component { constructor(props){ super(props); this.state = { subject:{title:'WEB', ..

[React] 컴포넌트 제작 그리고 Props 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React 컴포넌트화 /pulbic/pure.html WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 위 코드를 React를 사용하여 일부를 컴포넌트화 시켜보자. /src/App.js import React, { Component } from 'react'; import './App.css'; class Subject extends Component { render(){ return( WEB world wide web! ); } } // 1 class Ap..

연산자(Operator) 연산자란? 수학에서 두 수를 가지고 더하고 빼듯이 프로그래밍에서도 연산자는 어떠한 데이터를 가지고 새로운 결과를 도출해냅니다. 연산자의 대상이 되는 데이터를 피연산자 라고 합니다. 산술연산 말고도 다양한 연산자가 있으며, 때로는 피연산자를 문자로 사용할 수도 있습니다. 연산자의 종류 MDN 표현과 연산자 에 있는 내용을 요약한 것입니다. 보다 상세한 설명은 해당 사이트를 참조하세요. 아래 모든 내용은 MDN 에서 가져왔음을 밝힙니다. 대입 연산자 비교 연산자 산술 연산자 비트단위 연산자 논리 연산자 문자열 연산자 조건 (삼항) 연산자 콤마 연산자 단항 연산자 관계 연산자 1. 대입 연산자 = 를 사용하여 오른쪽 피연산자의 값을 왼쪽 피연산자에 대입합니다. x = y 는 y의 값을..

[React] 개념 및 개발환경 구축 생활코딩의 [React] 를 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 React HTML의 사용자 정의 태그(컴포넌트) 단위로 쪼개어 관리하면 다음과 같은 장점이 생긴다. 가독성 재사용성 유지보수 리액트란? 프론트엔드 라이브러리 복잡한 UI를 캡슐화된 컴포넌트로 관리 설치 Node.js 설치 npm 설치 react-create-app 설치 -g : global 옵션, 어디서든 설치한 프로그램을 사용할 수 있다. @2.1.8 : 버전 명시 npm install -g create-react-app@2.1.8 설치 이후 디렉토리 생성 mkdir react-app cd react-app create-react-app . 참조 npx ..

JavaScript 객체 지향 프로그래밍 생활코딩의 [JavaScript 객체 지향 프로그래밍] 을 학습하고 정리한 글입니다. 일부 이미지는 영상의 이미지를 캡처하였습니다. 생활코딩 JavaScript 객체 지향 프로그래밍 [TOC] 물건을 보관한다. 물건이 많아지면 정리가 필요하다. 이때 각각의 특성에 맞게 정리해서 보관한다면? 코드들도 마찬가지다. 처음에는 그냥 보관하면 된다. 하지만 많아지면 정리해서 보관하면된다. 복잡한 코드들이 정리된다. 객체란? 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인것. 객체 vs 배열 // 배열 var memberArray = ['egoing', 'graphittie', 'leezhce']; console.log("memberArray[2]", memberArray..

주석(Comments) 주석은 설명을 덧붙일 때 사용합니다. 참고로 주석은 브라우저에 표시되기 때문에 중요정보를 포함하지 않는것이 좋습니다. 다음과 같이 단일행 주석, 다중행 주석, 문서화 주석을 사용할 수 있습니다. 용어는 때에 따라 한줄 주석, 여러줄 주석 등 다양하게 표현하니 사용법에 집중합시다. // 이건 단일행 주석입니다 /* 문단을 주석 처리할 수 있는 다중행 주석입니다. */ /** * 문서화 주석입니다. */ 문서화 주석의 경우 JSDoc 등 사용하여 자바스크립트를 문서화 시킬 경우 사용합니다. 따라서 당장은 사용하지 않고 추후에 설명하도록 하겠습니다.

자료형(Data Type) 자료형이란 변수에 데이터가 저장될때 변수가 어떤 타입의 데이터를 저장할 수 있는지 표현한 것이 자료형입니다. 자바스크립트는 이 모든것을 통틀어서 var 키워드를 사용하지만 (let 과 const 는 지금 생각하지 않겠습니다) 어떤 자료의 형태가 있는지는 아는 것은 어느 언어를 공부하든 필수라고 생각됩니다. 자료형의 종류 자료형은 다음과 같이 7가지 형태가 있습니다. 기본 자료형 (Primitive) Boolean - true 또는 false 중 하나를 값으로 가집니다. Null - 어떤 값이 의도적으로 비어있음을 표현한 것입니다. Undefined - 값을 할당하지 않은 상태를 표현한 것입니다. Number - 숫자를 값으로 가집니다. String - 문자를 값으로 가집니다. ..

변수(Variable) 변수의 선언과 초기화 메모리에 데이터 공간을 할당하는 것을 변수의 선언이라고 합니다. 선언된 공간에 값을 넣는것을 대입이라고 합니다. 자바스크립스트는 느슨한 타입(loosely typed) 언어이며 동적(dynamic) 언어이기 때문에 변수의 타입을 미리 선언할 필요가 없습니다. 자바스크립스트에서는 다음과 같이 var 키워드[^1]를 사용하여 변수를 선언합니다. [^1]: 키워드는 제어문의 시작과 끝, 특정한 조작 목적 등에 쓰입니다. 키워드와 예약어 참조. var man; // 변수의 선언 var num = 123; // 변수의 선언과 초기화 변수의 선언은 데이터 공간을 man 이라는 변수명으로 사용하겠다는 것을 의미합니다. num 은 이라는 공간에 123 이라는 값을 변수의 선..

자바스크립트(JavaScript) 란 웹 페이지를 구성요소에는 HTML, CSS, Javascript 가 있습니다. HTML 은 구조를 만들어 주고 CSS 는 HTML에 의해 만들어진 요소들에 스타일을 지정합니다. JavaScript는 이렇게 만들어진 웹페이지를 동적으로 컨텐츠를 바꾸기도 하고 이벤트도 걸어주며 나아가 이제는 서버사이드 언어로 사용되고 있습니다. 자바스크립트는 가장 활발한 웹 기술 중 하나이고, 이것을 잘 활용할 수 있게되면 여러분의 웹사이트는 새로운 차원의 힘과 창의성을 가지게될 것입니다. -MBN web docs 넷스케이프 커뮤니케이션스가 발명하고 모질라 재단과 같은 독립 기관의 라이센스 하에 사용됩니다. 참조 사이트 생활코딩 zerocho MDN 위키백과

HTML 개념 및 총정리목차HTML 개념 및 총정리HTML 이란요소(Elements)란html 기본 구조DTD(Doctype)참조사이트HTML 이란HyperText Markup Language 의 약자로 웹 브라우저 위에서 동작하며, 웹 페이지의 구조를 표현하는 언어입니다.요소(Elements)란HTML 은 요소(Elements) 혹은 태그(tag)라 불리는 것으로 이루어져 있습니다. 와 같이 요소는 여는 요소와 닫는 요소로 구성됩니다. 와 같이 닫는 요소가 없는 요소도 있습니다.끝에 붙는 /는 선택사항입니다.닫는 요소가 없는 요소를 빈 요소라고 합니다.또한, href 와 같이 요소의 추가적인 정보를 넣을때 사용하는 것을 속성(attribute) 이라고 합니다. HTML 기본 구조 Document 위 예..

Google Place API 사용하기목차Google Place API 사용하기들어가기 전에Google API 키 발급HTML에 Google API 추가들어가기 전에사용 요금 정책을 먼저 확인하도록 합니다.구글 콘솔에 사용할 프로젝트를 만들어야 합니다.API 를 사용하기 위해서는 [2] 에서 만든 프로젝트의 해당 API의 Key를 발급받아야 합니다.(API키 활성화)서버쪽에서 사용하는 API 와 클라이언트(Javascript) 에서 사용하는 방식이 다릅니다.즉, 다른 Documentation 을 찾아봐야 합니다.Place Searches 라이브러리를 예시로 사용하였습니다.Google API 키 발급구글 로그인'place api javascript' 또는 'maps javascript api' 검색http..

민트에서 SSH & SFTP 연결Key 생성 및 사전 작업내 공개키를 접속하려는 호스트가 가지고 있어야 합니다.순차적으로 진행하자면키 생성 및 복사클라이언트(접속하는 컴퓨터)에서 작업cd ~/.ssh/ ​ ssh-keygen -t rsa -b 4096 -C "icj@icj0409"-t : Type-b : Bit 수-C : Comm키 붙여넣기서버(연결을 허용하는 컴퓨터)에서 작업생성된 공개키 (id_rsa.pub) 의 내용을~/.ssh/authorized_keys 에 붙여넣으면 SSH 접속이 가능해집니다.SSH터미널에서 아래와 같이 SSH 접속가능ssh 유저@IP주소 ​ #example ssh devb@192.168.0.26SFTP파일(파일시스템)을 열어 상단 메뉴에서 파일 -> 서버에 연결 클릭포트: (..