Web

Storybook 이란? 스토리북(Storybook)은 컴포넌트의 다양한 경우를 정리할 수 있도록 도와주는 시각화 도구(tool)입니다. 예를 들어, 버튼 컴포넌트가 있다고 하면 상태(데이터)에 따라서 UI나 액션이 달라질 수 있습니다. variant 값이 primary이면 일반 버튼, dashed이면 점선이 있는 버튼으로 버튼 UI를 표현할 수 있습니다. 스토리북과 같은 도구 없이도 컴포넌트를 개발할 수 있지만, 점점 늘어나는 컴포넌트들을 한 눈에 정리하는 것은 쉽지 않습니다. 스토리북은 컴포넌트들을 시각적으로 정리할 수 있게 도와줄 뿐만 아니라, 컴포넌트의 구현 코드를 문서화해줍니다. 디자이너와 협업할 때 컴포넌트의 UI가 잘 구현되었는지 피드백을 받을 수 있으며, 다른 개발자와 협업할 때는 컴포넌트..

Github이나 Gitlab 등의 원격저장소에 git push 하거나 git fetch or git pull하는 경우가 많습니다. 그런데 로컬저장소의 브랜치가 원격저장소의 브랜치를 추적하지 않으면 위의 명령어를 사용할 수 없습니다. git push 원격저장소명 브랜치명 형태로 사용해야 합니다. 조금 귀찮을 수도 있습니다. 그래서 로컬 브랜치가 원격저장소 브랜치를 추적할 수 있는 방법을 찾아보았습니다. 편의상 로컬저장소의 브랜치를 로컬 브랜치, 원격저장소의 브랜치를 원격 브랜치로 부르겠습니다. git clone 시 git clone을 이용하면 main브랜치는 자동으로 원격저장소의 main브랜치를 추적합니다. 원격 브랜치를 추적하는 로컬 브랜치를 생성할 경우 git fetch를 통해서 원격 브랜치를 가져왔다..

Gitlab-runner를 CI/CD를 위해서 사용하는 데, 종종 다시 설치하거나 특정 명령을 실행시켜줘야 하는 경우가 있었습니다. 그래서 사용하는 명령어를 정리해줄 필요를 느꼈습니다. gitlab-runner - list List all configured runners Runner 목록 보여주기 - run run multi runner service 여러 개의 Runner를 실행 - register register a new runner 새로운 Runner를 등록 - install install service Runner 서비스를 설치 명령어 이름이 install 이어서 조금 헷갈릴 수 있는데, service를 설치해주는 명령어입니다. gitlab-runner를 설치하는 것과는 별개라고 보시면 됩니다..

Gitlab CI 를 이용하기 위해서는 gitlab-runner를 설치해줘야 합니다. 리눅스 종류가 다양하지만, 여기서는 Amazon Linux 2 (Centos) 에 대한 설치를 진행해보도록 하겠습니다. AWS Linux 2에 Gitlab-runner 설치하기 1. AWS 서버에 접속합니다. 2. 다음 명령어를 이용해서 패키지 매니저(yum)에 Gitlab 저장소 위치를 저장시킵니다. curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh" | sudo bash 3. yum 을 이용해서 gitlab-runner를 설치합니다. sudo yum install gitlab-runner * 설치하겠냐..

* Emotion.js를 사용해서 스타일 컴포넌트를 생성하려고 합니다. * React 디자인 패턴인 Presentational - Container 패턴을 사용한 기준으로 설명하였습니다. 고민 Native하게 HTML Element + CSS or Sass를 사용할 수도 있겠지만, CSS in JS의 편리함 때문에 스타일 컴포넌트를 많이 사용하고 계실 겁니다. 스타일 컴포넌트는 페이지 / 컨테이너 / 컴포넌트 어느 곳이든 사용할 수 있을 텐데요. 개발을 진행하면 할수록, 계속 쌓여가는 스타일 컴포넌트를 어떻게 관리해야 할지? 에 대한 고민이 생깁니다. 1. 페이지 Level // Page.js import styled from '@emotion/styled'; import Container from '@..