본문 바로가기

Programming181

[Git] Github 기본 개념 명령어 사용법 정리 Github 개발자들의 SNS 2018년 마이크로소프트는 $860,000,000에 Github을 인수했습니다. Git이란 버전관리 시스템으로 Repository를 관리하는 Github은 수많은 오픈소스 프로젝트들이 올라와 있고 개발자들은 contribution을 하면서 점점 생태계의 범위를 키워가고 있습니다. Git을 이용해서 로컬에서 작업하고 있는 프로젝트 폴더를 Git의 remote repository와 연결해서 로컬 컴퓨터가 날라간다 하더라도 remote repository에서 백업을 할수도 있고 새로운 버전으로 업데이트를 할수도 있습니다. 또한 소스 공유를 하면서 동시 작업이 가능합니다. Git 시작하기 Git 설치하기 // git 설치 $ sudo apt install git // 설치 확인 $.. 2022. 5. 11.
[Programming] CLI 기본 명령어 (feat GUI vs NUI) CLI 기본 명령어 컴퓨터에는 CPU, 저장장치, 입출력 소스가 필요합니다. 리눅스에서는 대표적으로 CLI 터미널 환경을 사용합니다. 리눅스의 shell은 커널과 사용자 사이의 인터페이스 역할을 합니다. 현재는 대부분 GUI 환경의 컴퓨터를 사용하지만 Windows DOS 시절을 기억하시는 분들이라면 터미널 환경에 익숙하실 겁니다. CLI 환경은 아직도 사용됩니다. 대량의 서버들이 몰려있는 데이터 센터에서 GUI를 이용해서 서버 컴퓨터 한땀한땀 조작한다면 미쳐버릴 겁니다. AWS의 데이터센터 규모는 4천평이 넘는 규모의 데이터 센터가29개나 있습니다. 즉 CLI를 이용해서 마우스나 모니터 없이 서버 컴퓨터에 접속하고 클라우드 서비스를 제공할 수 있게 되었습니다. CLI는 기본적인 명령어로 컴퓨터를 조작할.. 2022. 5. 11.
[Javascript] 조건문 분기 내에서 아무것도 하지 않는 로직 Python pass 처럼 사용 Javascript If 조건문 내의 아무것도 하지 않는 로직 Python에 익숙한 개발자라면 if 조건문 분기 내에서 pass를 사용해본 경험이 있을 것이다. 특정 로직에 걸릴 때 아무것도 하지 않는 로직을 작성해서 새로운 분기로 넘어가게 만든다. Javascript에서 아무것도 하지 않는 로직은 아무것도 넣지 않는 것이다. 그저 if 조건문 내를 비워두면 {} Python의 pass와 같은 동작을 기대할 수 있다. 예시 코드 아무것도 하지 않는 로직을 확인하기 위해 임의의 자연수로 구성된 evenArr 배열을 생성해준다. evenArr를 순회하면서 짝수인 경우 '아무것도 하지 않고', 홀수인 경우 newArr에 추가해준다. const evenArr = [2,3,4,5,6,11,24]; var newA.. 2022. 5. 11.
[Javascript] 객체 안에 특정 KEY 값이 존재하는지 확인하는 방법 How Can I check whether the KEY exists in Object? Javascript Object KEY 존재유무 확인 Object 내의 키값이 존재하는지 여부를 체크해서 기존 Value를 덮어쓰는 작업을 해야 할 때가 있다. 이 때 특정 KEY값이 Object 내의 존재하는지 true / false 값을 가져와야 한다. Javascript에서 KEY값을 확인하기 위한 방법은 크게 두가지가 있다. ① in 키워드 사용 in 키워드를 사용해서 KEY값 존재를 확인하는 방법이다. 가장 확실한 방법이지만 가장 느린 방법이기도 하다. in 키워드는 타깃 객체의 프로토타입 체인을 모두 따라가면서 KEY가 존재하는지 확인하는 방법이다. var targetObj = {}; const arr =.. 2022. 5. 11.
[Javascript] 객체 새로운 속성 추가하는 방법 Javascript Object.assign() Javascript 객체에 새로운 속성을 추가하기 위해서는 assign() 메소드를 사용한다. assign() 메소드는 객체들의 속성을 복사에 타겟 객체에 붙여넣게 된다. 이후 타겟 객체를 반환한다. Syntax Object.assign(target, ...source); target : 새로운 객체를 추가받아 반환하는 객체. source : 타겟 객체에 반영하고자하는 새로운 객체. targetObj를 먼저 빈 객체로 만들어 준다. 2차원 배열을 선언하고 초기값을 할당해준다. 각 국가들의 주요 도시들을 담고 있는 2차원 배열을 Key~Value 형태의 객체로 변환해 줄 예정이다. 2차원 배열을 forEach()로 iterator 한 다음 Object.ass.. 2022. 5. 11.
[React] props vs state React props vs state 기본 개념 React Functional Component props, state state hooks? what is props, state, state hook in react and How can I use them? 리액트 컴포넌트 사이에 데이터 교환을 하기 위한 방법이 필요하다. 리액트에서 사용하는 JSX 문법으로 HTML DOM과 CSS DOM을 만들어내기 때.. about-tech.tistory.com React props vs state React로 프로그래밍을 할 때는 데이터 흐름을 잘 관리해야 한다. 리액트 내에서 사용할 수 있는 데이터는 props와 state로 나뉘게 된다. 정보를 어떤 형태로 관리할 지 고민이 필요하다. Props 컴포넌트들의 .. 2022. 5. 10.
[Javascript] 고차함수 map, reduce, filter 사용방법 Javascript High Order Function Javascript에서 map, filter, reduce 함수는 고차함수에 속합니다. 고차함수란 함수를 인자로 전달받고, 함수 형태로 리턴이 가능한 함수를 의미합니다. 함수에 매개변수 형태로 전달되는 함수를 콜백(callback) 함수라고 합니다. 고차함수는 매개변수로 함수를 전달받아 함수의 몸통 안에서 콜백함수를 호출할수 있습니다. 함수를 호출하는 함수는 이를 개발한 하스켈 커리(Haskell Curry)의 이름을 따서 '커리 함수'라고 부릅니다. 즉, 고차함수는 커리함수에 속하게 되는 것입니다. 고차함수를 테스트하기 위해서 Dummy Data를 randomly하게 생성했습니다. 랜덤데이터 생성 웹 사이트 // Random Data const p.. 2022. 5. 9.
[React] 페이지 뒤로가기 앞으로가기 구현, useHistory() 사용 방법 React 페이지 뒤로가기 useHistory React는 최초 HTML를 받아와서 페이지를 렌더링 합니다. React-Router를 이용하면 URL 별로 다른 컴포넌트를 렌더링할 수 있게 되는데, 그 중에서도 페이지 뒤로가기는 useHistory state를 이용합니다. useHistory는 React 16.02 이상 버전에서 작동합니다. useHistory() 사용방법 뒤로가기 앞으로가기 구현방법 React-Router 공식 문서 함수형 컴포넌트에서 state는 useState를 사용합니다. 동일한 로직으로 페이지에 관한 정보는 useHistory를 이용해서 관리할 수 있습니다. ① useHistory를 import 합니다. import {useHistory} from 'react-router-dom.. 2022. 5. 9.
[React] React Router 란? How Can I Change View Regarding to URL(How to use React Router)? [Programming] SPA(Single Page Application)이란? 장점과 단점 SPA는 왜 쓰는 걸까요? SPA란 한 페이지에서 작동하는 애플리케이션을 의미합니다. 과거의 웹사이트에서는 사용자가 웹 사이트를 방문할 때 웹 브라우저는 서버로 부터 HTML 전체 페이지를 요청받 about-tech.tistory.com React Router란? SPA라 하더라도 한 개의 페이지만 사용하는 것은 아닙니다. Header, Navigator, Footer 처럼 중복되는 컴포넌트를 제외하더라도 사용자 정보, 컨텐츠 정보, 컨텐츠 세부정보 등의 컴포넌트들의 페이지 주소를 다르게 구성해야.. 2022. 5. 9.
[React] Wireframe 이란? Wireframe이란? React로 컴포넌트를 작성하고 전체적인 틀을 짤 때는 미리 고민이 필요합니다. 어떤 곳에 어떤 컴포넌트를 배치할지 대략적인 밑 그림을 그릴 필요가 있습니다. Wireframe은 디자인에 들어가기 전 선(wire)를 사용해서 대략적인 윤곽(frame)을 잡는 작업을 의미합니다. 개발자는 애플리케이션의 디자인 컨셉과 사이트 기능에 대한 이해도를 올릴 수 있습니다. Wireframe을 토대로 작성된 Mockup은 데스크톱과 스마트폰의 프레임에 맞춰 데모나 시연을 위한 목적으로 최소한의 기능만을 담은 임시 애플리케이션을 만들어냅니다. 프로그래밍의 격언 중 '바퀴를 만들지 마라'는 말이 있습니다. Wireframe 또한 개발자가 한땀한땀 만들 필요는 없습니다. 구글에 Wireframe T.. 2022. 5. 9.
[Programming] SPA(Single Page Application)이란? 장점과 단점 SPA는 왜 쓰는 걸까요? SPA란 한 페이지에서 작동하는 애플리케이션을 의미합니다. 과거의 웹사이트에서는 사용자가 웹 사이트를 방문할 때 웹 브라우저는 서버로 부터 HTML 전체 페이지를 요청받아와야 했습니다. 현재 페이지와 중복되는 부분이 존재함에도 불구하고, 전체 페이지를 로딩해야 하는 '비효율'이 존재하고 있었던 것입니다. 이런 비효율적인 통신은 서버와 클라이언트의 상호작용이 늘어나면서 자연스럽게 트래픽 과부화로 이어지게 됩니다. 매번 같은 페이지를 로딩하면서 사용자의 대기시간은 늘어났고, 서버의 부담도 클 수 밖에 없습니다. 이러한 문제를 해결하기 위해 Javascript의 AJAX 기술이 도입됩니다. JS에서 동적으로 페이지를 요청하고 받아오는 방식으로 애플리케이션이 대체되기 시작하였고, 현재.. 2022. 5. 9.
[Javascript] 일급 객체(First-class Object)란 무엇인가? What is first-class function in Javasript? 일급 객체(fisrt-class Object)란? Javascript에서 함수는 객체로 사용 가능하다. 객체는 값을 가진 데이터 이므로 함수를 데이터로 사용가능하다는 말이다. Javascript가 함수형 프로그래밍을 가능하게 하는 가장 큰 장점 중 하나다. 함수를 객체로 사용한다는 말이 무엇일까? 일급 객체의 조건은 다음 4가지 조건을 충족하면 된다. Javascript는 아래의 조건에 더해 직접 호출을 할 수도 있고, 고유 property를 소유하고 있는 특별한 존재다. 일급 객체(first class Object) 조건 ① 무명의 리터럴로 생성가능하다. (런타임에 생성 가능) ② 변수나 자료구조(배열, 객체)에 저장 가능하다.. 2022. 5. 8.
[Node.js] Javascript runtime 환경이란? NPM NVM 간단 사용방법 런타임이란 프로그램이 실행되기 위한 환경을 의미합니다. 웹 브라우저에서 HTML, CSS, Javascript를 실행하기 위한 런타임 환경을 제공하고 있습니다. Node.js는 Javascript를 위한 런타임 환경입니다. 이전에는 Javascript가 실행되기 위한 런타임 환경은 웹 브라우저에 제약되었습니다. 하지만 Node.js가 출시되고 난 후 더 이상 웹 브라우저 뿐만 아니라 외부로 Javascript가 나갈 수 있는 길이 열렸습니다. python, JAVA, C 언어 처럼 말이죠. 따라서 Javascript를 이용한 데스크탑 애플리케이션을 Electron.js로 만들 수 있고, 웹 서버도 Express를 통해 만들 수 있게 되었습니다. nvm을 이용한 Node.js 설치 방법 nvm(Node V.. 2022. 5. 8.
React Functional Component props, state state hooks? what is props, state, state hook in react and How can I use them? 리액트 컴포넌트 사이에 데이터 교환을 하기 위한 방법이 필요하다. 리액트에서 사용하는 JSX 문법으로 HTML DOM과 CSS DOM을 만들어내기 때문에 컴포넌트 사이에 개발자가 원하는 데이터 교환은 필수적인 과정이다. 데이터를 교환하고, 저장하면서 동적인 웹 브라우저의 렌더링이 가능하다. 리액트에서 컴포넌트 간 데이터 교환을 도와주는 요소는 state와 props 두가지가 있다. ① State : 컴포넌트 내에서만 사용가능한 Private Data ② props : 다른 컴포넌트로 넘길 수 있는 Public Data 아래 그림으로 살펴보면 외부에서 전달되는 props를 받아서 컴포넌트 .. 2022. 5. 6.
React FontAwesome Icon 사용하는 방법 How to use FontAwesome ICON in React Project? FontAwesome은 웹 애플리케이션에서 다양한 아이콘을 사용할 수 있는 서비스를 제공한다. HTML에서 코드를 작성할 때는 FontAwesome CDN을 head 태그에 삽입 후 HTML용 태그문법을 사용하면 되지만 아이콘을 React에서 사용한다면 얘기가 조금 달라진다. FontAwesome Install npm을 사용해 React 프로젝트를 수행중이라면 아래 명령어로 react-fontawesome 설치가 가능하다. npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install -.. 2022. 5. 6.

티스토리툴바