Zin0's 개발 기록 공간 Zin0's 개발 기록 공간

분류 전체보기

• 1. 운영체제 개요

  CS 지식/운영체제 2020. 11. 7. 23:58

  운영체재 개요 컴퓨터 시스템의 자원을 효율적으로 관리 (자원 관리자) 프로세서, 기억장치, 입출력 장치 등의 효율적 관리 형평성 있는 자원 분배 좁은 의미의 운영체제 커널(kernel) 운영체제의 핵심 부분으로 메모리에 상주하는 부분 넓은 의미의 운영체제 커널 뿐 아니라 각종 시스템 유틸리티를 포함한 개념 운영체제 분류 동시 작업 여부 다중 작업(multi tasking) UNIX, MS Windows 등에서 한 명령 수행이 끝나기 전에 다른 명령 or 프로그램 수행 사용자의 수 단일 사용자(single user) MS-DOS, MS Windows 다중 사용자(multi user) UNIX, NT server 처리 방식 일괄 처리(batch processing) 작업 요청의 일정량을 모아서 한꺼번에 처리..

  Read More
• React) styled-component

  Java Script/React 2020. 11. 4. 00:27

  styled-components props 값으로 전달 값을 스타일에 입힐 수 있음 import React from 'react'; import styled, { css } from 'styled-components'; const Box = styled.div` /* props로 넣어준 값을 직접 전달해줄 수 있음 */ background: ${props => props.color || "blue"}; padding: 1rem; display: flex; `; const Button = styled.button` background: white; color: black; border-radius: 4px; padding: 0.5rem; display: flex; align-i..

  Read More
• React) useMemo & useCallback

  Java Script/React 2020. 11. 4. 00:23

  useMemo 함수형 컴포넌트 내부에서 발생하는 연산 최적화에 사용 useMemo를 이용해서 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하도록 설정 의존성이 변경되었을 때만(배열로 전달한 값이 변경되었을 때만) 메모이제이션된 값만 다시 계산해준다. (반환한다) const colorMemo = useMemo(() => getColor(color), [color]); const movieGenreMemo = useMemo(() => getMovieGenre(movie), [movie]) ; 이 경우는, color값이 변경되면 getColor 함수만, movie값이 변경되면 getMovie함수만 호출된다. useCallback 렌더링 성능을 최적화 해야하는 상황에서 사용 ~> 이벤트 핸들러 함수를..

  Read More
• React Hooks 알아보기

  Java Script/React 2020. 11. 4. 00:20

  Hooks React v16.8에 새로 도입된 기능 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도움 리액트 매뉴얼에 따르면, 기존의 클래스형 컴포넌트는 앞으로도 계속해서 지원될 예정 하지만, 함수형 컴포넌트와 Hooks 사용 권장 ~> 첫번째 옵션으로 염두하기(미션 요구사항과 부합) 종류 useState, useEffect, useReducer, useMemo, useCallback, useRef, customHook useState : 컴포넌트에서 가변적인 상태를 핸들링하도록 돕는 Hook useReducer : 다양한 컴포넌트 상황에 따라 다양한 상..

  Read More
• React 컴포넌트 알아보기

  Java Script/React 2020. 11. 4. 00:05

  컴포넌트 컴포넌트의 기능은 단순한 템플릿 이상 함수형 컴포넌트, 클래스형 컴포넌트 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 장점 state 기능 및 라이프사이클 기능을 사용할 수 있음 임의 메서드를 정의할 수 있음 함수형 컴포넌트 const MyComponent = () => { const name = 'zin0'; return ( {/* 주석 맞지? */} 반갑다 {name} ); } export default MyComponent; 장점 컴포넌트 선언이 훨씬 편함 메모리..

  Read More
• JSX란 무엇인가

  Java Script/React 2020. 11. 3. 23:58

  JSX 프로젝트에서 컴포넌트를 렌더링하면, 함수에서 반환하는 내용을 나타냄. 함수 반환 값을 보면, HTML을 작성한 것 같지만, HTML도 아니고 문자열 템플릿도 아닌 JSX라고 부름 자바스크립트의 확장 문법, XML과 유사하게 생김 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태로 변환됨 가독성이 좋고 작성하기 쉽다는 장점이 있음 또한, component를 다른 component 안에 작성할 수 있음.(customize 가능) 주의사항 Component를 개발할 때는, DOM 트리 구조를 생각해야하기 때문에, 반드시 부모 태그(div, container, section 등)로 감싸서 return해야한다. 의미없는 div 대신 Fragment로 감싸서 이용할 수 있다. JS 문법을 이용할 수..

  Read More
• NCP(Naver Cloud Platform)와 Jenkins -3) CD 환경 구축

  기술 이야기/CI&CD 2020. 11. 2. 16:24

  Jenkins, Nginx, docker를 활용한 무중단 CD 보통은 Jenkins 서버와 배포하는 서버를 따로 두지만, NCP에서는 Jenkins가 탑재된 Server를 생성할 수 있고 프로젝트의 규모가 크지 않기 때문에, 하나의 서버에서 진행하는 것으로 전제한다. Docker 설치 패키지 저장소 추가 (도커의 공식 GPG 키와 저장소를 추가) sudo apt-get update && sudo apt-get install \ sudo apt-transport-https \ sudo ca-certificates \ curl \ sudo software-properties-common sudo: unable to resolve host라는 값이 console에 찍힌다면, /etc/hostname이 /etc..

  Read More
• NCP(Naver Cloud Platform)와 Jenkins -2) CI 환경 구축

  기술 이야기/CI&CD 2020. 10. 29. 01:01

  CI 환경 구축 Jenkins 설정 Jenkins는 기본적으로 보안 설정이 되어있지 않기 때문에, 보안 설정을 따로 해줘야한다. Jenkins url 접속 후 Configure Global Security 클릭 권한 설정 Security Realm은 default 설정인 Jenkins' own user db로 설정한다. 인증은 Matrix-based security로 설정 사용자나 그룹에 권한을 부여할 수 있는 strategy 젠킨스를 공동 작업하는 팀원이 있다면, 위에서 사용자의 가입 허용을 체크하고 계정을 생성해서 권한을 부여하면 된다. 하지만, 젠킨스 관련한 작업은 우선 혼자 진행할 예정이기 때문에 모든 유저에 READ만, 작업자인는 나에게 모든 권한을 부여했다. 필요하다면 나중에 팀원 계정..

  Read More