어제보다 더 나은 오늘

기술 과제를 진행하면서 styled-components를 사용해 공통 ui 컴포넌트를 만들던 중 input 입력란의 텍스트 정렬을 다르게 가져가야 할 필요가 생겼다. 아래의 화면 이미지와 같이 우편번호 input은 중앙정렬, 그 외에 input은 일반적인 좌측 정렬로 화면 디자인이 구성되어 있었다. 이를 위해 input ui 컴포넌트에서 prop으로 textAlign 값을 줘서 제어하려고 시도했다. // 공통 ui 컴포넌트 선언부 export const Input = styled.input` box-sizing: border-box; width: ${(props) => props.width || 'inherit'}; height: 40px; padding: 9px 13px; border: 1px soli..

우리의 벗, 우리의 학습백과사전 mdn 문서의 localization이 오픈 소스라는 것을 얼마 전에 알게 되었다. 무한스크롤 UI를 스크롤 방식으로 구현하던 중 scrollTo() 메소드 관련한 mdn 문서의 영문 버전과 한국어 버전에 차이가 있음을 발견했다. mdn 문서 번역에 기여할 수 있는 방법은 상세 가이드에 잘 나와있어서 해당 가이드의 순서대로 따라가기만 하면 된다. 기본적인 git 사용법과 github의 fork, pull request 등에 대한 개념, 마크다운 작성법을 알고 있다면 아래의 가이드만 보고도 작업을 할 수 있다. 도움이 되었던 링크들은 아래와 같다. MDN 번역 콘텐츠에 대한 일반 안내서 https://github.com/mdn/translated-content/blob/ma..

프로젝트 규모가 커지면 시스템의 각 부분을 도메인 별로 분리해서 마이크로 서비스로 구성하기 시작한다. 이때 시스템의 각 모듈을 개별 레포지토리에서 관리하는 것을 모노레포(monolithic repository의 준말), 나눠서 관리하는 것을 멀티레포(multirepo) 또는폴리레포(polyrepo)라고 한다. 장점 단점 멀티레포 - 강한 오너쉽 확보: 레포 별로 오너 지정 - 마스터 코드가 깨질 여지가 적음 * 코드 베이스가 아예 나뉘어져 있음 * 서로 간의 작업 충돌로 마스터 코드가 깨질 가능성이 적음 - 형상 관리, CI 속도가 빠름 - 코드 재사용이 쉽지 않아 중복 코드 가능성이 높아짐 - 관리 포인트 증가 - 일관성 없는 개발자경험(DX) - 하나의 feature 개발을 위해 여러 레포지토리에 m..

기술 과제를 진행하면서 Antd 라이브러리를 처음으로 사용해봤다. UI 라이브러리 사용 자체가 처음인데, 디자인이 굉장히 깔끔했고 공식 문서도 잘 작성되어 있어서 사용하기 편리했다. 하지만 DatePicker 컴포넌트를 쓰면서 localization 이슈를 겪어서 그 과정을 간단하게 기록해 두고자 한다. 1. locale 변환 import { DatePicker, Space, ConfigProvider } from 'antd'; import type { DatePickerProps } from 'antd'; import koKR from 'antd/locale/ko_KR'; import dayjs, { Dayjs } from 'dayjs'; interface DateSelectorProps { // ....

1. 마이크로서비스 아키텍처(Microservice Architecture)란? - 애플리케이션이 서비스 모음으로 개발되는 애플리케이션 아키텍처의 한 유형 - 마이크로서비스를 사용하면 대규모 애플리케이션을 각각 담당 영역을 가진 소규모의 독립적인 구성요소로 구분할 수 있다. - 마이크로서비스 기반 애플리케이션은 단일 사용자 요청을 처리하기 위해 여러 내부 마이크로서비스를 호출하여 응답을 작성할 수 있다. 2. 마이크로서비스 아키텍처의 용도 - 일반적으로 개발 속도 및 성능을 지속적으로 높여 나갈 수 있어서 변화하는 비지니스 요구를 충족할 수 있다. - 자바를 사용하여 빌드된 마이크로서비스 아키텍처 중에서도 특히 Spring Boot 아키텍처가 일반적이다. - 마이크로서비스와 서비스 지향 아키텍처를 비교하..

지난 여정을 먼저 간단하게 소개해 보면 아래와 같다. 2022. 10. - 2023. 04. 부트캠프(코드스테이츠) 6개월 과정 2023. 04. (3주) 포르투갈 여행 (부트캠프 수료식 바로 다음날 비행길에 올랐다) 2023. 05. (2주) 병원 투어 (부트캠프 막바지 프로젝트 때 무리한 벌을 달게 받았다) 2023. 05. (2주) 이력서 준비: 커리어 코칭 및 이력서 멘토링 서비스 참가 2023. 05. 30. 서류 지원 시작 2023. 06. 29. 최종 합격 통보 및 처우 협상 2023. 07. 10. 첫 출근 예정 신입이 발디딜 곳 없는 험난한 취업 시장에서 감사하게도 딱 한 달만에 구직 과정을 끝냈다. 여러 채용 플랫폼을 다 합치면 최종적으로 160건 가량을 지원했고, 그 중에 서류 통과를..

Super — Create Websites with Notion Create a website in less than a minute with instant page loads, SEO optimization, and no-code theming. All your content is kept and managed in Notion so you can focus on creating while Super handles the rest. super.so 기존 oopy.io와 달리 super.so는 한 개의 노션 페이지에 한해서 무료로 웹 페이지 도메인을 생성할 수 있다. 카드 정보를 일체 입력할 필요 없이 로그인한 다음 사이트 생성만 클릭하면 바로 웹페이지를 만들 수 있다. 구직 중이라 이력서를 노션으로 업..

온라인 셀러 계산기 사이트: https://seller-calculator.vercel.app/ 개인 프로젝트로 마진, 판매가, 행사가 환원 등을 구할 수 있는 온라인 셀러 계산기를 뚝딱 만들어 보았다. 요구사항에는 없었지만 지난주 기능 구현 챌린지에서 만들었던 다크 모드 토글 컴포넌트를 가져와서 적용해 보았다. 그 과정에서 생긴 이슈와 해결책을 정리해 보기로 한다. 1. useEffect hook tailwind css를 사용하면 다크 모드를 굉장히 손쉽게 구현할 수 있다. 새로고침 시에도 테마가 유지될 수 있도록 사용자가 선택한 테마를 로컬 스토리지에 저장하기로 했다. 그리고 공식문서에서 알려준 대로 시스템 설정도 체크할 수 있도록 window.matchMedia() api를 사용했다. if ( lo..

팀 프로젝트에서 import 구문의 순서에 대한 코드 컨벤션이 있었다. 컨벤션을 정해놓기는 했지만 일부 파일에서는 지켜지고 다른 파일에서는 지켜지지 않았다. 후반부로 갈 수록 시간에 쫓기다보니 더 신경쓰지 못했다. 프로젝트가 끝난 후 이런 아쉬움을 달래줄 수 있는 방법이 있다는 걸 알게 되었다! import 구문 순서 규칙을 정할 수 있는 eslint 플러그인이 있었다. 역시 개발의 세계에서 그냥 노가다로 때워야 하는 건 없는 법이다. 이미 선배(의 선배의 선배...)들이 다 만들어놨어. GitHub - import-js/eslint-plugin-import: ESLint plugin with rules that help validate proper imports. ESLint plugin with ru..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘 문제를 풀 때면 항상 다음과 같은 순서를 따른다. 1) 입출력 예시를 보면서 구체적인 예시를 통해 일반적인 법칙을 찾는다. 2) 일반적인 법칙을 코드로 옮긴다. 아래는 문제를 풀 때 적은 노트를 캡처한 화면이다. 1. 입력값인 numbers 배열을 number 값에 따라 "L" 또는 "R"로 리턴한다. 2. 2, 5, 8, 0 값의 경우, 현재 왼손과 오른손의 위치 정보에 따라 더 가까운 손으로 입력을 해야 하기에 '현재 손의 위치 정보'를 변수로 만들어 갱신해 준다. 3. 어느 손이 더 가까운지 알..