![]()
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..
![]()
* 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 '@..
![]()
프론트엔드 개발을 하다 보면 정말 많이 들어본 개념일 것입니다.무의미하게 무수하게 발생하는 이벤트를 막기 위한 기법들입니다.타이머 함수, setTimeout을 통해서 간단하게 구현할 수 있습니다. 쓰로틀링(Throttle)throttle은 영어로 조르다, 목을 조르다라는 의미를 가지고 있습니다.이벤트의 목을 조른다(?)라고 볼 수 있는데요.이벤트가 무수하게 발생하더라도, 일정 시간 동안 이벤트가 1번만 발생하도록 처리하는 것을 의미합니다.스크롤 이벤트에 쓰로틀링을 적용해서 이벤트 최적화를 해볼 수 있는데요.스크롤을 할 때 최적화하지 않으면, 이벤트가 무수히 많이 발생하기 때문입니다. 한 개의 버튼이 있고, 이 버튼을 누르면 로그인 기능이 동작한다고 가정해볼까요?클릭방지를 하지 않는다면 유저가 버튼을 ..
![]()
import dynamic from 'next/dynamic'; import { Suspense } from 'react'; const LazyComponent = dynamic( () => import('@/components/LazyComponent') ); export default function MainPage() { return ( ); } 위와 같이 Next.js에서 제공하는 dynamic(Dynamic Import)을 이용하면, 컴포넌트를 지연 로딩할 수 있어서 Suspense와 같이 사용하려고 했었는데요. 계속 테스트를 진행해도, Suspense의 fallback 컴포넌트가 보이질 않았습니다... next/dynamic is a composite extension of React.lazy..
![]()
회사에 새로 입사하신 분이 오셔서, GitLab 그룹에 초대했는데요. 새로 오신 분이 GitLab에 커밋을 push하니까 GitLab 파이프라인이 실행되지 않는 현상이 발생했습니다. GitLab runner 문제인 줄 알고, 삽질하다가... 파이프라인 에러에 마우스를 올려보니... 아래와 같은 오류 메시지를 확인할 수 있었습니다. 오류 메시지 The pipeline failed due to the user not being verified 원인 명확한 원인인지는 모르겠습니다. 추측되는 것은... GitLab에서 Shared Runner에 대한 일정 시간을 무료 제공하는데요. 그 이상부터는 결제가 필요한데, 카드등록을 안해서 발생하는 오류인듯 합니다. 그래서 Shared Runner를 Off하면 문제가 해..
![]()
큐의 모습 큐의 특징 탐색 시, O(n) 만큼 소요됩니다. 추가, 삭제 시, O(1) 만큼 소요됩니다. 맨 앞의 노드를 head, 맨 뒤의 노드를 tail로 기억합니다. 식당에서 순서를 기다리는 대기열과 비슷합니다. 데이터 노드 구현하기 class Node { value: number; prev: Node | null = null; next: Node | null = null; constructor(value: number) { this.value = value; } } prev, next 프로퍼티가 있습니다. value 프로퍼티로 데이터를 받고 있고, 숫자 데이터만 받기로 정했습니다. * 큐를 이중 연결 리스트를 이용해서 구현했습니다. [ 이중 연결 리스트 개념 ] [Typescript] 자료구조 : ..
![]()
스택의 모습 스택의 특징 탐색 시, O(n) 만큼 소요됩니다. 추가, 삭제 시, O(1) 만큼 소요됩니다. 최상위 노드를 top을 통해 기억하고 있습니다. 접시 쌓는 것과 비슷한 모양을 가지고 있습니다. 데이터 노드 구현하기 class Node { value: number; prev: Node | null = null; next: Node | null = null; constructor(value: number) { this.value = value; } } prev, next 프로퍼티가 있습니다. value 프로퍼티로 데이터를 받고 있고, 숫자 데이터만 받기로 정했습니다. * 이번 글에서는 스택을 이중 연결 리스트를 이용해서 구현하기로 했습니다. * 스택은 단방향 연결 리스트로도 구현 가능합니다만, 편..
![]()
단방향 연결 리스트에 이어서 이번엔 이중 연결 리스트입니다. 단방향 연결 리스트 개념을 보고 오시는 것이 좋습니다 :) [Typescript] 자료구조 : 단방향 연결 리스트 (Singly-LinkedList) 자료구조를 공부할 때, 처음 등장하는 녀석입니다. 연결 리스트. 말 그대로, 데이터 (노드)를 연결해 놓은 것입니다. 단방향 연결 리스트의 모습 단방향 연결 리스트의 특징 탐색 시, O(n) 만큼 소 cheolsker.tistory.com 이중 연결 리스트의 모습 이중 연결 리스트의 특징 탐색 시, O(n) 만큼 소요됩니다. 추가, 삭제 시, O(1) 만큼 소요됩니다. 메모리 상으로 인접하지 않은 데이터들을 연결할 수 있습니다. (공간 효율성이 뛰어남) * 단방향 연결 리스트와 특징이 유사합니다..
![]()
자료구조를 공부할 때, 처음 등장하는 녀석입니다. 연결 리스트. 말 그대로, 데이터 (노드)를 연결해 놓은 것입니다. 단방향 연결 리스트의 모습 단방향 연결 리스트의 특징 탐색 시, O(n) 만큼 소요됩니다. 추가, 삭제 시, O(1) 만큼 소요됩니다. 메모리 상으로 인접하지 않은 데이터들을 연결할 수 있습니다. (공간 효율성이 뛰어남) 다음 노드의 위치(next)를 잃어버린다면, 데이터 손실이 일어날 수 있습니다. 배열과의 비교하기 배열의 특징 탐색 시, O(1) 만큼 소요됩니다. (인덱스로 데이터에 접근 가능) 추가, 삭제 시, O(n) 만큼 소요됩니다. (데이터 추가 or 삭제 후, 모든 데이터를 이동시켜야 하기 때문) 데이터들이 메모리상으로 인접한 위치에 있습니다. 탐색할 일이 많다면 배열, 추..
![]()
팩토리 패턴은 이름처럼, 객체를 생성해주는 패턴을 의미합니다. 공장에서 제품들을 찍어내듯이, 코드 상으로 비슷한 객체를 조건에 맞게 찍어냅니다. 팩토리 패턴의 특징 - 상위 클래스는 클래스의 뼈대를 제공한다. ( 추상 클래스를 사용하곤 합니다. ) - 하위 클래스에서 구체적인 정보를 전달해줍니다. - 팩토리 함수 or 팩토리 클래스에서 조건에 맞게 객체를 생성해줍니다. - 상위 클래스에서 주로 로직을 관리하기 때문에 유지보수하기 쉽다는 장점이 있습니다. 타입스크립트를 이용해서 팩토리 패턴 사용해보기 1 ( 추상 클래스 ) type LectureType = 'Database' | 'Algorithm' | 'SelfStudy'; // 상위 클래스 (추상 클래스) abstract class Lecture { ..
![]()
디자인 패턴에서 가장 먼저 배우게 되는 싱글톤 패턴입니다. 객체를 생성할 때, 매번 새로운 참조값을 가진 객체를 생성할 수 있는데요. 만약, 같은 객체를 사용해야 한다면 비효율적인 방법이 될 수 있습니다. 싱글톤 패턴을 이용하면, 몇 가지 장점이 있습니다. 싱글톤 패턴을 사용하는 이유 - 하나의 인스턴스를 사용하기 때문에 불필요한 메모리 낭비를 방지 - 하나의 인스턴스로 불필요한 코드를 덜 작성 - 데이터베이스 연결 모듈에 많이 사용한다고 합니다. 타입스크립트를 이용해서 싱글톤 패턴을 만들어보기 2가지 방법을 이용해서 싱글톤 패턴을 코드로 표현해봤습니다. 1. static 변수를 이용해서 구현 2. 일반적인 클래스로 구현 // static 변수를 이용해서 구현 class Singleton { privat..
![]()
[ 목차 ]사용자에게 최신 데이터를 보여주려는 노력useQueryuseMutationqueryClient.invalidQueries 사용자에게 최신 데이터를 보여주려는 노력React-Query는 사용자에게 새로운 정보를 보여줄 수 있는 옵션을 제공합니다. 1. Remount컴포넌트 또는 페이지를 다시 mount 했을 때, 새로운 데이터를 갱신합니다.refetchOnMount 옵션을 통해 설정할 수 있으며, default 값은 true입니다. 2. Window refocus윈도우 창을 다시 focus 할 때, 새로운 데이터를 갱신합니다.refetchOnWindowFocus 옵션을 통해 설정할 수 있으며, default 값은 true입니다. 3. Network reconnect네트워크가 다시 연결되면, 새..
![]()
[ 목차 ]Query 상태 (Status)StaleTime과 CacheTime 정리 Query 상태 (status)아래 다섯 가지 상태로 정의되어 있습니다. 1. fetching2. fresh3. stale4. paused5. inactive 1. fetchingQueryFn을 이용해서 데이터를 요청하는 상태입니다. 2. fresh새로운 데이터를 받은 상태입니다.default로 staleTime이 0으로 정의되어 있는데요.default일 때는, 순간적으로 fresh 상태로 유지됩니다. 3. stale데이터의 상태가 최신이 아님을 뜻하는 상태입니다.이 상태일 때는 특정 조건 (windowFocus, remount 등...) 이나 백그라운드 상황에서 QueryFn을 통해 새로운 데이터를 가져와 데이..
![]()
[ 목차 ] Introduction Mapped Type 사용하기 Pick 유틸타입 살펴보기 Introduction 매핑된 타입(Mapped Type)은 제네릭을 사용해서 다른 타입을 바탕으로 새로운 타입을 만드는 것을 의미합니다. 특징으로는, 1. 중복을 방지할 수 있고, 2. 다른 타입을 참조해서 사용하며, 3. 제네릭과 인덱스 시그니처를 사용한다는 것입니다. Mapped Type 사용하기 /** 예제1 **/ type StudyRoom { name: string; cost: string; availablePeople: number; startTime: Date; endTime: Date; } // StudyRoom 타입을 바탕으로 새로운 타입을 생성 type NewStudyRoom = { [K in..
![]()
[ 목차 ] Introduction 먼저 간단한 클래스 작성 생성자의 타입 표현하기 Introduction 리액트를 사용하면서 클래스를 거의 사용하지 않고, 함수 위주로 사용했었는데요. 그래서인지, 생성자 함수를 타입으로 표현하는 방식이 너무 생소하게 다가왔습니다. 몇 가지 시행착오를 통해, 알아낸 바를 정리하고자 합니다. 먼저 간단한 클래스 작성 class Person { constructor(private name: string, private age: number) {} getName() { return this.name; } getAge() { return this.age; } } const person = new Person("Rabbit", 10); person.getName(); // "Ra..
![]()
[ 목차 ] TS에서의 keyof 연산자 TS에서의 keyof 연산자 자바스크립트에서는 keyof 연산자가 존재하지 않습니다. keyof 연산자는 타입의 키 값들을 유니온 타입으로 반환해줍니다. keyof 연산자 는 객체 타입에 사용할 수 있습니다. interface Rabbit { name: string; age: number; place: string; move: () => void; } type KeyofRabbit = keyof Rabbit; // 테스트 const rabbit1: KeyofRabbit = "age"; // ok const rabbit2: KeyofRabbit = "food"; // error!
