어제보다 더 나은 오늘

기술 과제를 진행하면서 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. 어느 손이 더 가까운지 알..

Frontend Mentor | Social media dashboard with theme switcher coding challenge This challenge will be a perfect chance to practice your Grid skills. The color theme switcher also adds a nice additional test. www.frontendmentor.io - 깃헙 레포지토리: https://github.com/Ah-ae/social-media-dashboard - 배포 링크: https://social-media-dashboard-frontend-challenge.vercel.app/ 다크 모드를 구현해 보고 싶어서 sns 대쉬보드 챌린지를 선택했다. ..

redux toolkit을 사용해 전역 상태를 관리하고 있는 프로젝트에서 새로고침을 해도 전역 상태가 유지되게 하기 위해 웹 브라우저의 스토리지에 직접 상태를 저장하고 제거하는 로직을 걷어내고, redux persist 패키지를 사용해 리팩토링을 했다. 1. store.ts 파일 Before const store = configureStore({ reducer: { isLogin: isLogin.reducer, userInfo: userInfo.reducer, tokens: tokens.reducer } }); export default store; After const rootReducer = combineReducers({ isLogin: isLogin.reducer, userInfo: userInf..

1. 음수일 때 Math.floor()는 양수일 때와 마찬가지로 내림을 하는데, parseInt는 올림을 한다. parseInt는 소수점을 버리고 정수를 반환하는 메소드이기 때문이다. 2. 문자열 파싱 parseInt는 문자열을 파싱해서 정수로 변환하는 작업을 수행하기 때문에 일반적으로 Math.floor()보다 느리다. 하지만 대부분의 경우에는 성능 차이가 미미한 정도이다.

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 💡 접근 방식: 1. 1부터 number까지의 배열을 만들고, 각 숫자의 약수의 개수를 구한다. 2. limit보다 큰 요소가 있는지 체크한 후, 있다면 해당 요소를 power로 갈음한다. 3. reduce로 최종 합계를 구한다. 이 문제의 핵심은 '약수의 개수를 구하기'라고 생각한다. 약수란 모름지기 나눠서 떨어지는 수가 있느냐가 관건이기에 나머지가 0이 되는 수를 찾아야 한다. 모듈로(%) 연산을 쓰면 간단히 해결할 수 있다. 약수를 구하는 3가지 방식이 있다. 첫번째: 1부터 number까지 모든 수를 나눠..

css 코드를 작성할 때 styled-components의 최대 장점은 상태 변수를 그대로 활용할 수 있기 때문에 동적 스타일링이 쉽게 가능하다는 점이라고 생각한다. css 코드를 javascript로 작성하기 때문에 한 파일에 jsx 컴포넌트와 css 컴포넌트를 동시에 작성할 수도 있다는 게 '장점'이라고 하는데, 막상 코드를 작성하다보면 한 파일이 너무 길어지고, 특히 리액트 컴포넌트의 return 문을 볼 때 어느 게 스타일 컴포넌트고, 어느 게 리액트 컴포넌트인지 구분이 안 되어서 불편할 때가 많았다. 그래서 부트캠프에서 메인 프로젝트를 할 때에도 프론트 팀원 분들에게 css 파일 분리를 제안했는데 결론적으로 기각되었다. (하지만 프로젝트 후반에 styled-components 쓰는게 왜 불편한지..