Programming

[Docker] 도커 명령어 정리

docker 명령어 정리 1. 도커 이미지 검색 # docker images 현재 Host에 다운받은 이미지들을 출력하는 명령어 1-1. 도커 단일 이미지 삭제 # docker image rm 추가적으로 해당 이미지를 컨테이너에서 사용하고 있으면 이미지를 삭제할 수 없습니다. 1-2. 도커 모든 이미지 삭제 # docker rmi $(docker images -q) -f (docker image -q)라는 명령어는 이미지의 ID를 출력하는 명령어입니다. 2. 도커 컨테이너 생성 생성과 동시에 실행까지! # docker run --name 옵션 -i : 사용자가 입출력을 할 수 있는 상태 -t : 가상 터미널 환경을 에뮬레이션하겠다는 말 -d : 컨테이너를 일반 프로세스가 아닌 데몬프로세스(백그라운드) 형..

[Docker] 도커란? 도커 개념 정리

도커는 컨테이너 기반의 오픈소스 가상화 플랫폼입니다. 도커는 다양한 프로그램, 실행환경을 컨테이너로 추상화하고 동일한 인터페이스를 제공해 프로그램의 배포 및 관리를 단순하게 해줍니다. 백엔드 프로그램, 데이터베이스 서버, 메시지 큐등 프로그램과 관련된 모든 것들을 컨테이너로 추상화할 수 있고, 클라우드 서버에서도 이를 작동시킬 수 있습니다. 쉽게 말해서… 집에서 Maria db를 설치하고, Maria db port를 33306 같은 느낌으로 변경하고, 구성 정보를 기획한 프로그램에 알맞게 변경했다고 합니다. 이 db를 다른 곳에도 설치를 해야 하는데 만약 도커를 사용하지 않는다면 포트 번호를 33306로 변경하고, 구성 정보도 변경해야하고… 귀찮은 작업을 반복해서 해야하는 것이지요. 이를 해결하기 위해 ..

[React] React.js 강좌 10. map, slice, concat, spread 사용법

React map, slice, concat, spread 사용법 1. 기본적인 map() 사용법 map()함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용해 처리된 새로운 결과를 새로운 배열에 담아 반환하는 함수입니다! const numbers = [1, 2, 3, 4, 5]; const result = numbers.map((num) => num *2); console.log(result); numbers.map 안에 (num)이라고 되어있는 부분이 있는데, 이거는 함수 내부에서 임의로 지정한 변수이기 때문에 아무렇게나 작성하셔도 됩니다!(알기 쉬운 data나 param 등등…) 위 코드의 결과로는 각 요소의 2배인 값이 나옵니다! 2. 함수형 컴포넌트에서 map() 사용하기 이제 본격적으로..

[HTML/CSS] display 속성 inline과 block, span과 div

제작된 웹 페이지를 F12버튼을 눌러서 개발자 모드로 보다보면 HTML 태그의 display 속성을 자주 보게 됩니다. display는 보여준다는 의미인데... inline, block 이라는 속성은 대체 무엇을 의미하는지 궁금해서 찾아보았습니다! 1. inline, block, inline-block 예전에 웹 페이지를 공부했을 때, HTML을 처음 배웠을 때 span과 div 태그에 대해 공부했었던 기억이 있는데요. span과 관련된 태그가 무엇무엇이 있고, div와 관련된 태그가 무엇무엇이 있는지 나열된 것을 본 기억은 있는데 지금와서 생각해보니 머릿속에 잘 정리가 되질 않아서, 한번 다시 찾아보았습니다. 먼저 HTML은 문자 일부분만 선택해서 지정하는 Inline 방식과, 넓은 범위를 묶어서 지정..

[React] React.js 강좌 9. Input 상태 관리하기

React Input 상태 관리하기 1. Form을 사용한 컴포넌트 만들기 먼저 input을 다루기 위해 Form DOM을 사용한 컴포넌트를 만들어봅니다. import React, {Component } from 'react'; export default class FormTest extends Component{ state ={ id: '', name: '' } handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }) } render(){ return( {this.state.id} {this.state.name} ) } } 여기서 handleChange의 파라미터 e는 event의 줄임말로 input에서 입력한 값의 변화가 있..

[React] React.js 강좌 8. 함수형 컴포넌트 props 정리

React 함수형 컴포넌트 props 정리 react에서는 클래스형과 함수형으로 컴포넌트를 작성할 수 있는데, 리엑트 16버전에서는 함수형 컴포넌트가 성능이 조금 더 빠르다고 페이스북 개발자가 언급한 이유가 있어서 이러한 함수형 컴포넌트를 사용하는 것을 권장하는 편입니다. 1. 기본 Props 사용 // src/MyComponent.js import React from ‘react‘; const MyComponent = (props) => { return 안녕하세요, 제 이름은 {props.name}입니다.; }; // 부모 측에서 props를 전달하지 않을 경우 default로 설정되는 이름 MyComponent.defaultProps = { name: '기본 이름' }; export default M..

[React] React.js 강좌 7. 조건부 연산자

React.js 조건부 연산자 흔히 사용하는 if 조건부 말고도 여러 조건들을 JSX 안에서 인라인으로 처리할 수 있는 방법이 있습니다. 논리 && 연산자로 if를 인라인으로 표현할 수가 있는데요. JSX안에는 중괄호를 이용해서 표현식을 포함할 수 있습니다. 이때, 그 안에 Javascript의 논리 연산자 &&을 사용하면 쉽게 엘리먼트를 조건부로 넣을 수 있습니다. function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( Hello! {unreadMessages.length > 0 && You have {unreadMessages.length} unread messages. } ); } const messages = ..

[React] React.js 강좌 6. Error Catch

컴포넌트 에러 발생 render 함수에서 에러가 발생할 경우 리액트 어플리케이션이 종료가 됩니다. 이러한 상황에서 유용하게 사용할 수 있는 API가 있는데요, 생명주기 이벤트 중에 하나인 componentDidCatch라는 녀석입니다. componentDidCatch(error, info) { this.setState({ error: true }); } 에러가 발생하면 이런 식으로 componentDidCatch가 실행되게 하고, state.error를 true로 설정하게 하고, render 함수 쪽에서 이에 따라 에러를 띄워주시면 됩니다. 이때 주의할 점이 이 componentDidMount는 컴포넌트 자신의 render 함수에서 발생하는 에러는 잡아낼 수는 없지만, 컴포넌트의 자식 컴포넌트 내부의 에..

[React] React.js 강좌 5. 이벤트 처리, Bind

React 이벤트 처리 1. 기본 문법 React에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 거의 비슷하지만 아래와 같은 문법의 차이가 있습니다. React의 이벤트는 소문자대신 CamelCase를 사용해서 표기합니다. JSX를 사용해서 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. HTML Activate Lasers React Activate Lasers 2. action, onsubmit 또한 React에서는 false를 반환해도 기본 동작(form에서의 action 호출과 같은)을 방지할 수 없는데, 방지하려면 preventDefault를 명시적으로 호출해주어야 합니다. HTML Submit React function Form() { function handleS..

[React] React.js 강좌 4. 생명주기 이벤트

React 생명주기 이벤트 리엑트에서 사용되는 클래스에서도 일반 객체 지향에서 쓰이는 클래스와 동일하게 Life Cycle이 존재합니다. 많은 컴포넌트가 사용되는 애플리케이션은 리소스나 메모리를 많이 차지하기 때문에 이런 리소스나 메모리를 관리하기 위해 컴포넌트가 삭제될 때 사용중이던 리소스를 반환해주는 것이 중요합니다. 리엑트에서는 클래스가 DOM에 렌더링 될 때, 혹은 삭제 될 때 등과 같은 생명주기 이벤트가 존재합니다. 예를 들어 현재 시간을 표시해주는 기능을 구현한다고 합니다. function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } function tick() { ReactDOM.rend..