해나아부지 개발일지

IT업계에 관심을 가지게 된 계기가 빅데이터 였는데 R이라던가 빅데이터 공부할 수 있는 방법을 딱히 찾지 못해 개발자가 된지도 벌써 2년... '캐글(Kaggle)'에서 데이터 분석 및 AI 공부를 너무 쉽게 할 수 있는 세상이 된 것 아닌가 ??? 캐글에서 데이터분석 실습을 해보려면 노트북(Notebook)을 사용해야 하는데 구글링 해보니 죄다 옛날 글들이라.. 새로운 버전의 노트북 사용법이 약간 달라져서 처음 사용하는데에 어려움을 해소하고자 간단한 튜토리얼을 시작해봅니다.(필자부터 헤맴) 1. 상단 Nav의 Code 클릭 2. + New Notebook 눌러줍니다 3. 1) 코드 실행 버튼 2)코드 실행 셀 추가 버튼 3)데이터셋 추가 버튼 2) 하기 이미지와 같이 코드 셀이 추가됩니다 3) 추가할 ..

온 프레미스(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..