Le carnet de Sean

Recents

• Docker & Kubernetes [Docker] 도커 Overview, 도커 이미지, 컨테이너 참고문헌 : 시작하세요! 도커/쿠버네티스 (https://wikibook.co.kr/docker-kube/) Docker & K8S 스터디 진행을 위한 TIL 요약본입니다. 도커 도커는 리눅스 컨테이너 기반의 가상화 기술입니다. 기존의 가상화 기술은 하이퍼바이저를 이용해 여러 개의 운영체제를 하나의 호스트에서 생성해 사용하는 방식이었습니다. 하이퍼바이저에 의해 생성되는 Guest OS는 각각 완전히 독립된 시스템 자원을 할당받습니다. 이 경우 시스템 자원을 가상화하고 독립된 공간을 생성하는 작업은 하이퍼바이저를 거쳐야 하기 때문에 성능 손실이 발생하며, 각 Guest OS는 독립된 라이브러리와 커널등을 전부 포함하고 있어야 하기 때문에 이미지의 크기가 커지는 단점이 있습니다. 반면 도커 컨테이너는 리눅스..
• React 프론트 입문 리액트 삽질기 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 라고 하는데..
• Tips 블로그에 광고를 달았을 경우 유의해야 할 알고리즘 문제 관련 저작권 블로그에 AdSense 등의 광고를 달아 수익창출을 하고 계신 경우 다음과 같은 알고리즘 문제 풀이 사이트의 저작권 라이센스에 유의하셔야 합니다. 아무래도 블로그에 광고가 달려 있다 보니 신경써야 할 부분들이 많습니다. 프로그래머스 (https://programmers.co.kr) Reference : https://programmers.zendesk.com/hc/ko/articles/360034546572-프로그래머스의-알고리즘-문제-풀이를-개인-블로그-GitHub-기타-사이트에-올려도-되나요- 코딩 테스트 연습 문제 코딩테스트 연습에 공개된 문제는 (주)그렙이 저작권을 가지고 있습니다. (지문 하단에 별도 저작권 표시 문제 제외) 코딩테스트 연습 문제의 지문, 테스트케이스, 풀이 등과 같은 정보는 비..
• React 프론트 입문 리액트 삽질기 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..
• React 프론트 입문 리액트 삽질기 5 - 배열을 활용한 컴포넌트 수정, 삭제 지난번 글에서 입력을 받아 카드들을 만들어 입력칸 밑에 배열로 쭈르륵 나타내 주는 페이지를 만들었습니다. 이제 이 컴포넌트에 수정, 삭제 버튼을 만들어 보려고 합니다. 이전 글에서 cardList 배열에 각 카드들의 정보를 삽입하고, CardInfoListView 컴포넌트에서 해당 배열을 받아와 CardInfo 컴포넌트로 map해 주었습니다. //App.js function App() { //... return ( React Array Example handleOnCreate(cardInfo)} /> ); } //CardInfoListView.js function CardInfoListView({ cardList = [] }) { return ( {cardList.map(card => ())} ); } ..
• React 프론트 입문 리액트 삽질기 4 - 배열을 활용한 컴포넌트 생성 지난번 글에서 컴포넌트를 동적으로 생성하지 못해 componentWillUnmount 훅을 만들지 못했습니다. 이제 배열을 통해 컴포넌트를 동적으로 생성, 업데이트, 그리고 제거해 보겠습니다. 이 글은 Veloport님의 블로그와 리액트 공식 문서를 참고하여 작성했습니다. 리스트와 Key – React A JavaScript library for building user interfaces ko.reactjs.org 누구든지 하는 리액트 7편: 배열 다루기 (1) 생성과 렌더링 | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 이번에는 리액트 프로젝트에서 배열을 다루는 방법을 알아보겠습니다. 리액트에서는 배열을 velopert.c..
• React 프론트 입문 리액트 삽질기 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) { ..
• React 프론트 입문 리액트 삽질기 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..
• React 프론트 입문 리액트 삽질기 1 - Create React App, Functional Component 안녕하세요, 백엔드 개발자로 근무하다 프론트가 어떻게 돌아가는지는 알고 협업을 하는게 좋지 않을까? 라는 생각이 문득 들어 리액트 스터디를 시작하게 되었습니다. JS에 아직 익숙하지도 않고, 프론트라곤 angular, php만 살짝 건드려본 백엔드 개발자의 프론트 삽질기(흑역사)를 공유하기 위해 블로그에 기록을 시작하게 되었습니다. 공부하는 단계다 보니 정확하지 않은 정보를 올릴 수도 있어 따끔한 지적과 조언을 소중히 귀담아 듣겠습니다. 개발환경은 Mac os Big Sur, Apple M1 Sillicon 입니다. 다음 명령어를 사용해 node를 설치해 줍니다. brew install node 다음 명령어를 사용해 yarn을 설치해 줍니다. npm install --global yarn 설치된 node..
• Tips package ... is not in GOROOT 해결법 goLang을 공부하던 도중, 점점 작업 디렉토리가 지저분해지는걸 보고 다른 언어들처럼 폴더를 만들어 소스를 관리하고자 했습니다. 그러면 import문을 사용해서 main.go에서 깔끔하게 불러올 수 있을테니깐요. 조금의 삽질을 거쳐 ,이럴 때 go에서 제공하는 디펜던시 관리 시스템인 go modules를 사용하면 해결할 수 있다는 것을 확인했습니다. https://blog.golang.org/using-go-modules Using Go Modules - The Go Blog Tyler Bui-Palsulich and Eno Compton 19 March 2019 Introduction This post is part 1 in a series. Note: For documentation on manag..
• Tips Apple Silicon M1 Mac에서 ARM Native homebrew 설치하기 안녕하세요! 이번에 애플 M1 맥을 구매하면서 새로운 ARM 환경의 맥에 개발 환경을 셋팅하는데 난항을 겪고 있었습니다.. 다름이 아니라 homebrew 홈페이지의 다음 명령어는 Intel Mac을 위해 빌드된 homebrew를 설치하도록 하기 때문입니다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" M1 맥을 위해 빌드된 homebrew는 다음 github gist의 스크립트를 통해 설치하면 됩니다. Install Native Homebrew on Apple Silicon M1 Install Native Homebrew on Apple Silicon M1. GitHub Gist..
• Tips 맥 쉘에서 java 버전 변경(스위칭)하기 개인 프로젝트를 진행하면서 JDK 버전을 11로 올려서 작업을 시작했습니다. 그런데 기존 관리하던 코드는 모두 JDK 8을 쓰고 있어 어떻게 각 버전으로 스위칭할지 고민하다가 다음 글을 보았습니다. advenoh님의 글 : 맥 환경에서 여러 JDK 버전 설치하고 변경하기 맥 환경에서 여러 JDK 버전 설치하고 변경하기 자바 개발을 하다 보면 하나의 JDK 버전이 아니라 여러 버전을 설치해야 할 때가 종종 있습니다. 진행하는 프로젝트마다 개발하는 JDK 버전이 조금씩 다를 수 있고 새로 릴리스한 버전을 설치해서 advenoh.tistory.com advenoh님의 스크립트를 사용하며 자바 버전을 스위칭하다가 $PATH가 쉘 세션 내에서 점점 비대해지는걸 보고 스크립트를 약간 수정하여 사용하고 있습니다. 해..