어제보다 더 나은 오늘

를 사용하는 가장 흔한 패턴은 다음과 같이 to 속성으로 경로를 지정해주는 것이다. 로그인 회원가입 이제 다음과 같은 경우를 생각해보자. 상품 목록 페이지가 있고, 상품 카드를 클릭하면 상품 상세 페이지로 넘어간다. 상품 목록 페이지에서 상세 페이지로 넘어갈 때 보통 router에서 /:productId와 같은 형태로 url parameter로 상품의 ID를 넘기고, 상세 페이지에서는 const { productId } = useParams(); 로 product ID를 받아 상품 상세 정보를 다시 fetch한다. {products?.map((product) => ( {product.name} → ))} 상품 상세페이지의 소제목이나 브라우저의 탭의 정보를 상품명을 렌더링하고 싶다면 productId로 다..

프론트에서 가장 많이 쓰는 JavaScript 내장 자료구조는 단연 배열과 객체일 것이다. 하지만 객체에 비해 Map이 가지는 장점이 있다. - key에 다양한 자료형을 허용한다. - map.size를 통해 map의 크기를 O(1)의 시간복잡도로 구할 수 있다. - map은 삽입 순서를 기억해 삽입된 순서대로 순회한다. - map은 그 자체가 iterable하기 때문에 내장 메소드 forEach나 for of를 써서 순회할 수 있다. (object는 먼저 key나 value를 구하고, 그것들을 통해 순회해야 한다.) 프론트 내에서만 사용하는 데이터라면 상관없지만 서버와 통신하는데 사용하는 데이터라면 JSON.stringify()를 통해 직렬화 과정을 거쳐야 한다. Map을 JSON.stringify에 넣..

input 요소의 focus 여부에 따른 스타일 속성을 정의하던 중 input 안의 placeholder가 미세하게 튀는 현상이 나타났다. input의 border 속성이 레이아웃에 영향을 주는 reflow를 유발하기 때문이었다. - reflow가 일어나는 속성: border - repaint만 일어나는 속성: border-radius, border-style, outline 📍 outline의 특징: - 요소의 콘텐츠 밖에 그려지며 절대 공간을 차지하지 않는다. - border와 달리 상하좌우 모든 테두리에 적용된다. (border-top 등 한쪽 부분에만 적용할 수 있는 것과 대비됨) - IE7 이하에서 지원되지 않는다. 📍 해결책: outline으로 제어가 가능한 경우라면 reflow를 일으키는 b..

우리의 벗, 우리의 학습백과사전 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 아키텍처가 일반적이다. - 마이크로서비스와 서비스 지향 아키텍처를 비교하..

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는 한 개의 노션 페이지에 한해서 무료로 웹 페이지 도메인을 생성할 수 있다. 카드 정보를 일체 입력할 필요 없이 로그인한 다음 사이트 생성만 클릭하면 바로 웹페이지를 만들 수 있다. 구직 중이라 이력서를 노션으로 업..

팀 프로젝트에서 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. 어느 손이 더 가까운지 알..