Tech (37) 썸네일형 리스트형 [Docker] 도커 Overview, 도커 이미지, 컨테이너 참고문헌 : 시작하세요! 도커/쿠버네티스 (https://wikibook.co.kr/docker-kube/) Docker & K8S 스터디 진행을 위한 TIL 요약본입니다. 도커 도커는 리눅스 컨테이너 기반의 가상화 기술입니다. 기존의 가상화 기술은 하이퍼바이저를 이용해 여러 개의 운영체제를 하나의 호스트에서 생성해 사용하는 방식이었습니다. 하이퍼바이저에 의해 생성되는 Guest OS는 각각 완전히 독립된 시스템 자원을 할당받습니다. 이 경우 시스템 자원을 가상화하고 독립된 공간을 생성하는 작업은 하이퍼바이저를 거쳐야 하기 때문에 성능 손실이 발생하며, 각 Guest OS는 독립된 라이브러리와 커널등을 전부 포함하고 있어야 하기 때문에 이미지의 크기가 커지는 단점이 있습니다. 반면 도커 컨테이너는 리눅스.. 프론트 입문 리액트 삽질기 7 - 라우팅 : React router - 1 이 글은 Veloport님의 포스팅을 참조했습니다. react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG 이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. SPA 란? Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지 velopert.com 지난 글들을 통해 만든 프로젝트들은 모두 http://localhost:3000 경로에서만 동작했습니다. 리액트는 JavaScript 라이브러리로, 앵귤러같은 프레임워크와 달리 라우팅 기능이 기본적으로 탑재되어 있지 않습니다. 보통 리액트에서 라우팅 라이브러리로 많이 사용하는게 react-router, next.js 라고 하는데.. 블로그에 광고를 달았을 경우 유의해야 할 알고리즘 문제 관련 저작권 블로그에 AdSense 등의 광고를 달아 수익창출을 하고 계신 경우 다음과 같은 알고리즘 문제 풀이 사이트의 저작권 라이센스에 유의하셔야 합니다. 아무래도 블로그에 광고가 달려 있다 보니 신경써야 할 부분들이 많습니다. 프로그래머스 (https://programmers.co.kr) Reference : https://programmers.zendesk.com/hc/ko/articles/360034546572-프로그래머스의-알고리즘-문제-풀이를-개인-블로그-GitHub-기타-사이트에-올려도-되나요- 코딩 테스트 연습 문제 코딩테스트 연습에 공개된 문제는 (주)그렙이 저작권을 가지고 있습니다. (지문 하단에 별도 저작권 표시 문제 제외) 코딩테스트 연습 문제의 지문, 테스트케이스, 풀이 등과 같은 정보는 비.. 프론트 입문 리액트 삽질기 6 - Material UI 입혀보기 지난번 만든 간단한 카드 페이지에 Material UI를 입혀보려 합니다. 프론트에서 비주얼은 중요하니깐요! Material-UI: A popular React UI framework React components for faster and easier web development. Build your own design system, or start with Material Design. material-ui.com react 프로젝트에서 터미널을 열어 다음 명령어를 입력합니다. npm install @material-ui/core 일단 제일 보기 싫었던 button과 input부터 손봅니다. import { useState } from 'react'; import Button from '@materi.. 프론트 입문 리액트 삽질기 5 - 배열을 활용한 컴포넌트 수정, 삭제 지난번 글에서 입력을 받아 카드들을 만들어 입력칸 밑에 배열로 쭈르륵 나타내 주는 페이지를 만들었습니다. 이제 이 컴포넌트에 수정, 삭제 버튼을 만들어 보려고 합니다. 이전 글에서 cardList 배열에 각 카드들의 정보를 삽입하고, CardInfoListView 컴포넌트에서 해당 배열을 받아와 CardInfo 컴포넌트로 map해 주었습니다. //App.js function App() { //... return ( React Array Example handleOnCreate(cardInfo)} /> ); } //CardInfoListView.js function CardInfoListView({ cardList = [] }) { return ( {cardList.map(card => ())} ); } .. 프론트 입문 리액트 삽질기 4 - 배열을 활용한 컴포넌트 생성 지난번 글에서 컴포넌트를 동적으로 생성하지 못해 componentWillUnmount 훅을 만들지 못했습니다. 이제 배열을 통해 컴포넌트를 동적으로 생성, 업데이트, 그리고 제거해 보겠습니다. 이 글은 Veloport님의 블로그와 리액트 공식 문서를 참고하여 작성했습니다. 리스트와 Key – React A JavaScript library for building user interfaces ko.reactjs.org 누구든지 하는 리액트 7편: 배열 다루기 (1) 생성과 렌더링 | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 이번에는 리액트 프로젝트에서 배열을 다루는 방법을 알아보겠습니다. 리액트에서는 배열을 velopert.c.. 프론트 입문 리액트 삽질기 3 - Effect Hook으로 Lifecycle API 동작 구현하기 클래스형 컴포넌트에서 사용하던 state는 함수형 컴포넌트에서 State Hook으로 대체하여 사용할 수 있었습니다. 이제 특정 동작을 수행(?) 했을 때 동작하는 함수를 추가해 보려고 합니다. 기존 클래스형 컴포넌트에서는 Lifecycle API라는 컴포넌트의 생성, 업데이트, 제거 시 호출되는 API를 사용해 브라우저에 컴포넌트가 생성, 업데이트 혹은 삭제되었을 때 특정 액션을 수행하도록 작성할 수 있었습니다. import React, { Component } from 'react'; class Example extends Component { componentDidMount() { // 컴포넌트 생성 } componentDidUpdate(prevProps, prevState, snapshot) { .. 프론트 입문 리액트 삽질기 2 - Props, State Hook 지난번 글에서 Create-React-App을 통해 App 이라는 컴포넌트를 만들어 줬습니다. 이제 이 컴포넌트에 입력 상자를 하나 두고, 버튼을 누르면 환영 팝업이 나타나는 페이지를 하나 구성하려고 합니다. 컴포넌트 내부에 변수를 설정하고 넘기는 일련의 과정이 필요하겠죠? 일단은 아무런 인자도 받지 않고, 이름도 하드코딩 되어 있는 새로운 컴포넌트인 Greeting을 생성해 봅니다. function Greeting(){ return ( Hello, My name is Sean! ); } export default Greeting; 이제 이 Greeting 컴포넌트를 App 컴포넌트 내부에 배치해 봅니다. import { Fragment } from 'react'; import './App.css'; i.. 이전 1 2 3 4 5 다음
