해나아부지 개발일지

온 프레미스(On-Premise) 직접 서버를 설치, 유지 관리 클라우드 기업이 관리해야 하는 영역들을 서비스 1. Iaas (Infrastructure as a service) - 가상화(VM), 서버, 스토리지, 네트워크 제공 - 물리적 자원을 제공 2. Pass (Platform as a service) - Iaas 제공항목 + 런타임, 미들웨어, 운영체제 추가 제공 - 소프트웨어 개발을 돕는 플랫폼을 제공 ex) 도커, 쿠버티네스 특징 : 이식성(재사용) 3. Saas (Software as a service) - Pass 제공항목 + 애플리케이션, 데이터 추가 제공 - 고객을 대신해 소프트웨어와 데이터를 제공 서버리스 1. Baas (Backend as a service) - 백엔드에 필요한 기..

원인 디자인 리뉴얼 상품 리스트 개발 중에...! div 안에 img를 넣어보면 padding을 주지 않았는데도 하단 여백이 생기는 걸 발견한다 디자이너 분께서 아주 중요한 부분이라며 여백을 없애줄 것을 요청하셨다! 이번 문제를 해결하기 위해서는 타이포그래피(Typograpy)에 대해서 알고 있어야 한다. 타이포그래피란? 타이포그래피(Typography)는 활자 서체의 배열을 말하는데, 특히 문자 또는 활판적 기호를 중심으로 한 2차원적 표현을 가리킨다. 활판으로 하는 인쇄술을 가리키는 용어이기도 하다. 오늘날에는 뜻이 바뀌어 사진까지도 첨가하여 구성적인 그래픽 디자인 전체를 가리키고 일반의 디자인과 동의어 같이 쓰이는 일도 있다. 즉, 편집 디자인 분야에서는 활자의 서체나 글자 배치 따위를 구성하고 표..

지금까지 여러가지 비동기 액션을 처리할 때 Promise.all()만 쓰셨다면 주목! 1가지 메서드가 더 있다는 것 두 메서드의 차이점을 알아봅시다. 우선 MDN 공식 문서를 봅시다. Promise.all(iterable) Promise.allSettled(iterable) 1. Promise.all()은 input에 대한 결과값만을 담은 array result를 return 합니다. const promise1 = Promise.resolve(3); const promise2 = 42; const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([promise1, promise2, p..

소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다. NextJS App을 개발하고 있다면 next.confing.js 파일에 옵션을 적용해 볼 수 있다. // next.config.js module.exports = { productionBrowserSourceMaps: true, } 출처 소스맵이란? - 웹팩 핸드북 S..

현재 부분적으로 회사의 React App을 NextJs App으로 마이그레이션 중이다. 회사 NextJs App의 React 버전을 16.8.0 -> 17.0.39로 업데이트를 하고 난데없는 에러가 발생하였다. 에러의 발견 [Type Error] 'ReactElement | Component | null' is not a valid JSX element. 빌드 중 아무 문제 없던 아이콘 컴포넌트에서 에러가 발생한 것이다. 해당 컴포넌트는 동적으로 필요할때만 컴포넌트를 import 하여 App의 성능을 높여줄 수 있는 NextJs의 dynamic()을 활용한 Icon 컴포넌트였다. 아무 문제 없이 사용해왔기에 더 당황스러웠다. 문제 해결과정 오류 메세지를 기본으로 구글링에 들어갔다. dynamic()의 r..

공통 brew node 설치 & watchman 설치 brew install node brew install watchman 안드로이드 세팅 jdk 11 설치 brew tap homebrew/cask-versions brew install --cask temurin11 안드로이드 스튜디오 설치 더보기 Android SDK Android SDK Platform Android Virtual Device 새로운 버전의 안드로이드 스튜디오(범블비)는 설치 후 sdk manager로 들어가 추가해줘야 한다. os 카타리나 미만은 bash, 이상은 zsh을 이용하여 path 설정 nano ~/.zprofile // 추가 후 저장 export ANDROID_SDK_ROOT=$HOME/Library/Android/sd..