![]()
Storybook 이란? 스토리북(Storybook)은 컴포넌트의 다양한 경우를 정리할 수 있도록 도와주는 시각화 도구(tool)입니다. 예를 들어, 버튼 컴포넌트가 있다고 하면 상태(데이터)에 따라서 UI나 액션이 달라질 수 있습니다. variant 값이 primary이면 일반 버튼, dashed이면 점선이 있는 버튼으로 버튼 UI를 표현할 수 있습니다. 스토리북과 같은 도구 없이도 컴포넌트를 개발할 수 있지만, 점점 늘어나는 컴포넌트들을 한 눈에 정리하는 것은 쉽지 않습니다. 스토리북은 컴포넌트들을 시각적으로 정리할 수 있게 도와줄 뿐만 아니라, 컴포넌트의 구현 코드를 문서화해줍니다. 디자이너와 협업할 때 컴포넌트의 UI가 잘 구현되었는지 피드백을 받을 수 있으며, 다른 개발자와 협업할 때는 컴포넌트..
![]()
이슈 발생 Storybook에서 SVG 아이콘을 사용하는 컴포넌트로 스토리를 만들고 있었는데요. 갑자기 위와 같은 오류가 발생했습니다. Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 구글링도 해보고, Github Issue를 여러 개 살펴본 뒤에 file-loader 관련 이슈라는 것을 알게 되었습니다. Storybook은 Webpack을 사용하고 있고 기본적으로 file-loader가 사용되고 있는데, SVG 파일을 import하는 과정에서 file-loader가 객체 형태로 변환한 것으로 보입니다. File-lo..
![]()
간단한 웹 페이지 기능 소개 쇼핑몰 기능 중 하나인 장바구니 기능을 구현한 웹 페이지입니다. 장바구니에 등록된 상품 중에서 결제할 상품을 선택하고, 상품 갯수에 따라 최종 금액을 유저에게 보여줍니다. 리액트 컴포넌트 설명 컴포넌트 2개가 있습니다. 1. 상품 컴포넌트 : 장바구니 상품 정보를 보여주는 컴포넌트 2. 상품 리스트 컴포넌트 : 상품 컴포넌트들을 보여주고, 필요한 비즈니스 로직을 제공합니다. 2번 컴포넌트는 컨테이너 - 프레젠테이션 패턴의 컨테이너라고도 볼 수 있을 텐데요. 컨테이너를 별도로 구별하려면, ~ 컨테이너라는 코드컨벤션이 생기고 별도의 디렉토리 폴더를 관리해줘야 하는데 개인적인 생각으로는 코드의 양이 늘어나고, 비즈니스 로직을 가지고 있는 컴포넌트들을 컨테이너로 엄격하게 구분하기 어..
![]()
Github이나 Gitlab 등의 원격저장소에 git push 하거나 git fetch or git pull하는 경우가 많습니다. 그런데 로컬저장소의 브랜치가 원격저장소의 브랜치를 추적하지 않으면 위의 명령어를 사용할 수 없습니다. git push 원격저장소명 브랜치명 형태로 사용해야 합니다. 조금 귀찮을 수도 있습니다. 그래서 로컬 브랜치가 원격저장소 브랜치를 추적할 수 있는 방법을 찾아보았습니다. 편의상 로컬저장소의 브랜치를 로컬 브랜치, 원격저장소의 브랜치를 원격 브랜치로 부르겠습니다. git clone 시 git clone을 이용하면 main브랜치는 자동으로 원격저장소의 main브랜치를 추적합니다. 원격 브랜치를 추적하는 로컬 브랜치를 생성할 경우 git fetch를 통해서 원격 브랜치를 가져왔다..
![]()
BFS에 대한 소개 BFS는 Breadh-First-Search의 약자로 너비우선탐색이라고 합니다. 그래프가 주어졌을 때, 노드(Vertex)를 가까운 노드부터 탐색하는 알고리즘입니다. BFS 알고리즘을 구현할 때는 큐와 배열을 사용합니다. 큐는 현재 노드로부터 인접한 노드들을 담아주는 역할을 해줍니다. 배열은 현재 노드를 방문했는지 체크하는 역할로 사용됩니다. 가까운 노드(인접 노드)부터 탐색하기 때문에 A노드에서 B노드까지의 최단거리를 구할 수 있습니다. DFS 알고리즘과 마찬가지로 그래프, 현재노드, 방문여부 정보를 넘겨줌으로써 알고리즘을 구현할 수 있습니다. 알고리즘 1. 시작 노드를 큐에 삽입합니다. 2. 방문하지 않았다면 방문했다고 체크합니다. 3. 큐에서 노드를 제거한 후, 해당 노드의 모든..
![]()
DFS에 대한 소개 DFS는 Depth-First-Search의 약자로, 깊이우선탐색이라고 합니다. 그래프가 주어졌을 때, 노드(또는 정점, Vertex)를 되도록 깊이 탐색하는 알고리즘입니다. DFS 알고리즘을 구현할 때, 스택과 배열을 사용합니다. 재귀함수로 구현하게 되면 재귀함수 자체가 스택 역할을 담당해줍니다. 배열은 노드를 방문했는지를 체크합니다. 노드의 갯수만큼의 크기를 가지고 있습니다. DFS 알고리즘 함수에 다음의 정보를 넘겨줌으로써, 그래프 탐색이 시작됩니다. 1. 2차원 배열로 노드와 간선(Edge)을 구현한 그래프 2. 탐색할 노드 번호 3. 방문 여부를 체크할 배열 알고리즘 1. 노드를 스택에 삽입한다. 2. 방문하지 않았으면 방문했다고 표시한다. 3. 해당 노드의 인접 노드를 탐색..
![]()
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 * 설치하겠냐..
![]()
Lv. 2 해결한 문제 (2023.04.08 기준) 총 27문제 문제 해결한 날짜 | 문제 이름 (2023.04.08) 다음 큰 숫자 (2023.04.06) [3차] n진수 게임 (2023.04.05) k진수에서 소수 개수 구하기 (2023.04.04) [3차] 압축 (2023.03.17) [1차] 뉴스 클러스터링 해결 k진수에서 소수 개수 구하기 k진수에서 소수 개수 구하기 문제해결 아이디어 정리 (노션) https://www.notion.so/Lv-2-717c25051fcb4c2c97a3ca06856dc6c8?pvs=4 Github 링크 https://github.com/CheolWoongChoi/Algorithms/tree/main/programmers/Lv2
![]()
개요 서비스를 운영하다 보면, 로그를 쌓을 일이 많이 생길 텐데요. 페이지별 로그도 쌓아야 하는 경우가 생깁니다. Next.js에서는 Custom App 페이지를 (_app.jsx 또는 _app.tsx) 제공하고 있는데요. Custom App 페이지에서 페이지에 공통적으로 사용할 로직을 적용할 수 있습니다. Next.js에서 제공하는 router를 통해 URL pathname을 파악할 수 있는데요. 페이지 path를 파일로 관리하여 router pathname과 비교하면, 어떤 페이지인지 알아낼 수 있습니다. 프로젝트 구조 예시 페이지 & 페이지 pathname 메인 : /main 메인 상세 : /main/[idx] About : /about 페이지 파일 생성 (pages.ts) // @/constan..
