전체 글

1. 문제 상황: 폰트가 적용이 안돼!Styled-components를 사용하여 프로젝트를 진행하면서 공통적인 CSS들은 GlobalStyle로 적용시키려고 하였다.import { createGlobalStyle } from 'styled-components';import PretendardLight from '../assets/fonts/Pretendard-Light.woff2';import PretendardMedium from '../assets/fonts/Pretendard-Medium.woff2';import PretendardBold from '../assets/fonts/Pretendard-Bold.woff2';const GlobalStyle = createGlobalStyle` * { ..

1. workflow는 정상 작동, 배포 페이지는 변경이 없다?기존 React 프로젝트를 AWS의 S3, CloudFront, Route53 을 활용하여 배포 환경을 구축하였다. 이 환경에서 GitHub Action을 통한 CI/CD 파이프라인을 아래와 같이 구성하였다. name: Front Deploymenton: pull_request: branches: - mainjobs: build: name: react build & deploy runs-on: ubuntu-latest steps: - name: checkout Github Action uses: actions/checkout@v3 - name: Get npm cache direc..

1. Tree(트리) 트리는 노드(node)들과 이들을 연결하는 간선(edge)들로 구성된 계층적 자료구조이다. 각 노드는 부모-자식 관계를 가지며, 사이클이 없는 연결구조를 형성한다. 트리는 데이터를 계층적으로 표현하기에 적합하며, 검색과 정렬에 효율적인 구조를 제공한다. 우리가 사용하는 폴더 구조도 트리라고 할 수 있다.   2. 트리와 그래프의 차이점트리에 대해 이해하기 위해서는 그래프와 트리의 차이점을 알아보면서 이해하면 보다 쉽다. 트리는 사실 그래프의 한 종류이다. 특별한 제약조건들을 가진 그래프라고 생각하면 된다. 하지만 설명의 용이성을 생각하여 트리와 그래프는 따로 구분지어서 말하도록 하겠다. 그래프에 대한 설명은 아래 글을 참고하길 바란다. [알고리즘] Graph 자료구조 개념 (JS)1..

1. Graph(그래프)그래프는 노드(또는 정점)와 이들을 연결하는 간선으로 구성된 자료구조이다. 그래프는 네트워크 구조를 표현하는데 매우 유용하다. 또한 최소 신장 트리(MST), 깊이우선탐색(DFS), 너비 우선탐색(BFS)과 같은 알고리즘에서 기본적으로 사용하는 자료구조 중 하나이다. 그래프는 G = (V, E)는 노드(정점)과 간선으로 이루어져 있다.V: 정점(Vertex) 집합E: 간선(Edge) 집합그래프는 방향 그래프, 무방향 그래프, 가중치 그래프로 크게 3가지 유형이 존재한다. 간선(Edge)에 방향의 존재 유무를 통해 방향그래프와 무방향 그래프로 나눌 수 있으며, 간선에 가중치가 있으면 가중치 그래프로 분류한다.방향 그래프에 가중치가 있는 경우 방향 가중치 그래프이고, 무방향에도 마찬가..

1. Map(맵)맵은 키(key)와 값(value)의 쌍으로 데이터를 저장하는 추상 자료구조이다. 맵의 특징으로는 '각 키는 맵 내에서 유일하게 존재.' , '각 키는 정확히 하나의 값과 연관' 와 같이 키의 유일성이다. 하나의 맵 안에서 동일한 키를 가진 두 개의 항목은 존재할 수 없다. 만약 이미 존재하는 키로 새로운 값을 저장하면, 기존 값은 새로운 값으로 덮어쓰기 된다. 이러한 특성 때문에 맵은 고유 식별자를 기반으로 정보를 구성해야 하는 상황에 이상적이다.맵의 기본 연산으로는 키-값 쌍의 삽입, 키를 이용한 값 검색, 키-값 쌍의 삭제, 특정 키의 존재 여부 확인 등이 있다.맵 자료구조는 이러한 연산들을 효율적으로 수행할 수 있도록 설계되어 있다. 구현 방식에 따라 성능 특성이 달라지지만, 일반..

1. Heap(힙)힙은 완전이진트리 구조를 기반으로 하는 자료구조로, 특정한 순서 속성을 만족한다. 주로 최댓값이나 최솟값을 빠르게 찾아야 하는 경우에 사용된다.힙에는 최대힙(MaxHeap)과 최소힙(MinHeap) 2가지 방식이 존재한다.최댓값 최솟값을 찾는 자료구조로써 우선순위가 높은 데이터를 빠르게 찾아야 하는 경우에 효율적인 자료구조이다.힙 자료구조는 우선순위 큐 구현, 다익스트라 알고리즘 등에 응용하여 사용되기도 한다.  2. Heap 작동 방식힙의 주요 연산은 push(삽입 연산), pop(최댓값/ 최솟값 추출), peek(최댓값/ 최솟값 확인), build Heap(힙 생성) 총 4개로 구분지을 수 있다.javascript로 기본적인 클래스를 생성하면 다음과 같다.class MinHeap {..

문제상황  Notion을 쓰던, vsCode를 쓰던 한글로 작성하면 마지막 글자가 2 글자씩 작성되는 경우가 흔히 발생한다.처음에는 그냥 한글자씩 지우면서 사용하는데, 계속되면 화가 굉장히 많이 난다.  설정하는데 금방이니 빠르게 해결하는 것이 속편 할 것이다.결론부터 말하자면 Microsoft IME설정이 활성화되어있지 않아서 그런데, 아래와 같이 속성을 변경해 주면 된다.  설정 -> 시스템 -> 시간 및 언어 -> 언어 및 지역 -> 한국어 언어옵션-> Microsoft 입력기 -> 키보드 옵션 -> 이전 버전의 Microsoft IME 활성화    해결방법 window버튼을 눌러서 시스템을 검색하여 설정-> 시스템으로 들어가줍니다.   시간 및 언어 -> 언어 및 지역 선택 한국어를 오른쪽에 점3..

1. 2024 공개SW 개발자 대회공개SW 개발자 대회는 2024년 18회를 맞이하는 국내 최대 규모 공개SW 관련 공모전이라고 볼 수 있다.과학기술정보통신부에서 주최했으며 정보통신산업진흥원이 주관한다.프로젝트 기획, 개발, 구현, 협업 등의 개발 경험과 기능테스트, 라이선스 검증을 통해 공개 SW의 전반적인 개발 과정을 경험할 수 있는 OpenSource관련 가장 큰 규모의 공모전이다.    2024 공개 SW개발자 대회는 자유과제, 지정과제, 지속발전과제 등 3가지 선택할 수 있는 주제 유형이 존재하며 각 주제에서 수상인원을 분배해서 뽑기에 주제 선택부터 중요하게 선택하여야 한다. 대회 일정은 예선인 1차평가, 2차 평가 전 멘토링과 출품작 검증, 라이선스 검증을 거치고 본선인 2차 평가를 통해 수상..

1. +AI 메이커톤 경진대회 충청북도에서 후원하는 +AI메이커톤 경진대회가 열려 참여하게 되었다.+AI메이커톤 경진대회는 'ChatGPT를 이용한 산업응용서비스 및 제품개발'의 주제로 열리게 되었다. ChatGPT를 활용하여 충청북도 지자체의 문제를 해결할 수 있는 아이디어가 필요한 과정에 기존에 개발하던 'Co-Labor: 외국인 근로자 고용 서포트 플랫폼' 프로젝트를 이어서 추가 구현하여 참가하게 되었다.   온라인 예선을 통하여 본선에서는 5팀~6팀 정도 참여하게 되었다. +AI 메이커톤 경진대회는 당일에 AI를 해커톤방식으로 구현하기에 당일에 기존 프로젝트에서 ChatGPT를 사용하는 부분이 존재하였기에, 이 부분을 파인튜닝으로 더 정확한 정답을 이끌어 내는 방식으로 진행되었다. 발표 중 이번에..

1. 새싹 해커톤 새싹 해커톤은 1년에 한 번 서울에서 열리는 해커톤으로 2024년에는 서울경제진흥원이 주관하여 열렸다. 일반적인 해커톤과 같이 당일날 주제가 발표되고 바로 만드는 방식은 아니고, 2주간 개발한 것을 가지고 예선을 치른 후 본선에서 2일 동안 추가적으로 구현 및 발표준비를 하며 진행하는 방식이다.  예선에서는 총 50팀이 선발되어 본선에 진출하며, 본선 중 8팀은 수상을 받게 된다.수상금액은 총 1500만원으로 상금이 꽤 큰 공모전이라 할 수 있다. 2. 예선부터 본선까지의 여정  새싹 해커톤의 일정은 아래와 같이 진행되었다.팀모집기간, 예선, 본선순으로 진행됐다. 팀 모집 기간에는 3인에서 5인정도 팀원들이 한 팀에 신청을 하고, 예선에서는 기획 및 개발을 하고 주제와 깃허브 링크를 게..