Dev Diary

배포된 Storybook 링크https://66d67775c0992d1453a0cffc-ibohkiaiwr.chromatic.com/ storybook - Storybook 66d67775c0992d1453a0cffc-ibohkiaiwr.chromatic.com 지금까지 한 작업물의 결과이전에 Storybook 설정에 관한 토이프로젝트 글 작성 후 Github에 Issue를 생성하여 할 일을 하나씩 꾸준히 해오고 있었다. 이제 필요한 UI 컴포넌트들을 대부분 구현 완료했으니 비록 다른 프론트엔드 팀원은 없지만 1명뿐인 백엔드 친구도 구현된 UI를 구경할 수 있게 하기위해 배포를 진행하기로 했다. Chromatic이란 것을 활용해 배포를 진행했는데, 이전에 Visual Test 연동을 하며 이미 Chrom..

지금까지의 프로젝트는 기능 구현에만 집중하여 진행했었다. 결과적으로 나중에 새로운 기능의 추가 혹은 기존 기능에 대한 수정 요청이 들어오면서 코드를 변경하게 되고 코드를 변경하면서 사소한 버그들이 자주 발생했던 경험을 겪었기 때문에 이번 프로젝트는 개발 시작 전 초기 설정 관련하여 시간이 훨씬 많이 걸리더라도 Storybook과 Testing Library 등을 도입하여 중요하거나 수정사항이 많이 발생할 것 같은 부분에 테스트 코드등을 추가하여 나중에 리팩토링을 진행하게 되었을때 사소한 버그가 출몰하여 그것도 수정하고 기존 코드도 수정해야하는데에 대한 스트레스를 줄이고 안정감을 느끼고 싶었다. Storybook과 Testing Library를 도입했을때의 전체적인 작업 흐름은 다음과 같다고한다.Story..

백준 15903 카드 합체 놀이 문제 바로가기 카드 합체 놀이는 가지고 있는 카드 모음(자연수로 이루어진 배열)중에서 2장의 카드 1) x, y를 뽑고 2) 뽑은 2장의 카드를 각각 x+y값으로 변환시키는 과정을 문제에 주어진 합체 가능 횟수만큼 반복하는 게임이다. 이 게임을 진행하며 만들 수 있는 가장 작은 점수를 계산하는 프로그램을 구현하는 것이 목적이다.주어진 예제를 가지고 문제 이해하기문제에서 주어진 예제 중 맨 처음 카드 상태가 4 2 3 1인 예제 가지고 문제에서 해결법을 찾아보자. 해당 예제는 카드 합체를 2번 수행한다. 먼저, 해당 숫자 배열에서 뽑을 수 있는 2개의 숫자 종류는 아래와 같다. (4,2), (4,3), (4,1), (2,3), (2,1), (3,1) 각 케이스의 숫자들이 뽑..

서문K-paas 공모전에 참가하며 Docker image를 빌드하여 배포를 시도해야하는 상황이 생겼다. 지금까지 나름 다수의 프로젝트를 진행해봤지만 DevOps라 해봤자 겨우 AWS의 S3와 CloudFront를 활용해서 프론트엔드 배포를 진행하거나 Vercel를 이용하고, Github Action을 이용해 간단한 배포 자동화를 구현해본 경험이 전부였는데 갑자기 Docker와 Kubernetes를 사용해야했다. 잘되었다. 마침 새로운 공부가 하고싶었는데 이김에 Docker에 대한 공부를 해보자!일단 도전Docker란 것을 사용해본 경험이 전무했지만, 일단 검색을 통해 Docker Desktop 버전을 설치하고 계정도 생성하였다. 여기까지 왔다면 이미지를 빌드하는건 생각보다 간단해보였다.먼저, Docker..

백준 11501 주식 문제 바로가기 간단히 말해, 날짜별 주식 가격이 주어져있을때 최대 이익을 구하는 문제이다. 단, 할 수 있는 행동은 아래와 같다.주식 하나를 산다.원하는 만큼 가지고 있는 주식을 판다.아무것도 안한다.처음 풀이- 오늘 주식 가격과 내일 주식 가격을 비교했을때 내일이 더 높다면 오늘자 주식을 산다.- 오늘 주식 가격과 내일 주식 가격을 비교했을때 내일이 더 낮다면 이전에 산 주식이 있을경우 판다.import sys input=sys.stdin.readline T = int(input()) for \_ in range(T): N = int(input()) stocks = list(map(int, input().split())) count = 0 ..

1. 공통 타입 분리하기// 분리, 인터페이스명 수정 @types/Building.tsinterface BuildingData { id?: number; name?: string; floorsUp?: number; floorsDown?: number; description?: string; latitude?: number; longitude?: number; uniqueNumber?: string;}interface EditBuildingResponse extends BuildingData { success: boolean;}interface FloorImage { buildingId?: number; description?: string; floorValue?: number; i..

지금까지 다수의 프로젝트를 진행했었지만, 실제 운영하는 서비스가 아닌 이상 지난 프로젝트 코드를 다시 열어본적은 거의 없었다. 하지만, 내가 그동안 얼마나 성장했는지 예전 코드를 보고 무언가 불편한점을 느낄 수 있는지 확인해보기 위해 1년전 프로젝트를 다시 열어보기로 했다. 타겟 프로젝트는 1년전에 대학교 재학 당시 코로나의 여파로 인해 처음 대면 활동을 시작하면서 학교 캠퍼스 지리를 잘 알지 못하는 재학생들과 신입생들을 대상으로 학교 내 건물과 강의실 위치를 제공해주기 위해 개발했던 서비스로 안타깝게도 지금은 운영하고 있지 않지만, 이를 내 나름대로 리팩토링을 진행해보기로 했다.어떤 것을 리팩토링할까?코드를 열어본 뒤 수정하면 좋을 것 같은 부분들을 생각해보았다.1. 공통 타입 분리하기api 요청시 요..

위 이미지처럼 달력을 구현해야했는데, 오른쪽 상단에 x 아이콘(누르면 달력이 닫힌다)을 넣으려고 Stack과 Positioned 위젯을 사용했다.아래처럼 작성했는데, 아무리 x 아이콘을 눌러보아도 "닫기"가 터미널에 출력이 되지 않았다. Stack( children: [ Positioned( top: 24, right: 20, child: GestureDetector( onTap: () { print("닫기"); Navigator.pop(context); }, child: SvgPi..