개요 랜딩페이지가 어느정도 완성되어 다른 기능들을 하나 둘 개발 중, 메인 화면에 유독 컨텐츠들이 많아 실제 배포환경에서 렌더링이 늦거나 유저경험을 저해하는 해프닝이 생길까 하고 검사를 받아보고 싶었다.마침, 크롬 브라우저의 관리자 모드에서 제공하는 Lighthouse가 웹 페이지의 성능, 접근성, SEO(검색 엔진 최적화), 그리고 기타 웹 품질 지표를 분석하고 개선할 수 있도록 도와주는 오픈 소스 도구라고 해서 사용해보았다. Lighthouse 사용검사를 받고 싶은 페이지에서 개발자 모드를 킨 후, (윈도우는 f12, 맥은 cmd+option+i 또는 fn+f12) 하단의 요소들 중 Lighthouse를 선택한다.모드, 기기, 카테고리를 선택 후 페이지 로드 분석을 클릭 나의 경우 모드 : 기본 값,..
개요SW아카데미 수업 중 모니터링에 관한 수업을 들었다. 교수님께서 진행중인 서비스에도 모니터링 시스템을 도입하면 좋을 것 같았다.수업에서 들은 모니터링, 옵저빙 툴은 여러 종류가 있었지만, Datadog의 경우 많이 들어보기도 했고, 팀원의 강추가 있었다.또한, Next와의 연결 문서도 나름 잘 정리되어있는 Datadog을 선택했다. (비용이 세다는 말이 많아 좀 걸리긴 했다..) Datadog?클라우드 기반 애플리케이션과 인프라를 모니터링하고 분석하는 종합적인 모니터링 및 데이터 분석 플랫폼으로 주요 기능은 다음과 같다.1. 모니터링 및 관찰성 : 애플리케이션, 서버, 컨테이너, 데이터베이스, 네트워크 등 모든 인프라와 애플리케이션 계층에서 데이터를 수집하고 시각화2. 로그 관리 : 중앙 집중화된 로..
개요 : api가 개발은 됐는데 서버이슈로 요청을 못받는 경우엔 어떡해야할까 프로젝트 진행 중 제공받은 서버가 계속 변동되고 일정에도 차질이 생겨 api연동이 지체되고 있는 상황이다.프론트엔드의 경우 UI 제작은 어느정도 완료되어서 슬슬 api를 하나 둘 연결해나가야하는데,마침 api 명세는 상세하게 있어 해당 명세를 통해 api를 사전연결해 로직을 미리 구현하려했다. api 없이 내 생각으로만 미리 로직을 구현하는 것과 큰 차이가 있을지 싶지만 우리팀은 TypeScript를 사용해 개발하기에 props혹은 api 요청, 응답에 대한 타입 정의가 미리 이루어져야하기에 api 명세없이 독단적으로 로직을 짜기엔 향후 수정도 많이 해야한다. 다른 방법은 없을까?→ MSW, PostMan을 이용한 방법이 있지만..
개요 개발 기간이 약 한달 정도 되면서 어느정도 UI도 잡혀가고, api연결도 일부 완성했으나 정신이 없어 이제야 작성한다...개발 내용 현황에 대해선 여유가 될 때마다 바로바로 기록할 예정 일단 폴더구조가 초반에 비해 조금 바뀐면이 있어 이를 정리하고자 한다.프로젝트 폴더구조.github깃허브 Issue, PR 컨벤션 파일 .yml을 포함깃허브 액션에 관한 파일들을 담은 workflows폴더를 포함.huskycommit, push 이전 팀이 정한 코드 규칙을 강제하고자 위한 husky 규칙을 보관하는 폴더.NextNextJS 프로젝트 빌드 결과물 및 캐시파일을 보관하는 폴더(Next Build 시 해당 폴더에 생성).Node_modules프로젝트에서 사용하는 모든 NPM 패키지와 해당하는 의존성이 설..
개요 재테크 블로그의 기능 중 랜딩페이지, 모의투자, 주가예측 파트에서 여러 가지 주식 정보를 요하는 기능이 있어 주식정보를 제공하는 open api를 찾던 중 빈번히 사용되는 KIS에서 제공하는 api를 알게 되었고 이를 해당 파트 개발 전 미리 연결해 보기로 했다.1. 한국 투자 증권 계정 만들기나의 경우 한국투자 증권 계정, 계좌가 없기에 아이디, 비밀번호도 당연히 없었다. 그래서 KIS 페이지를 통해 인증 관련 소프트웨어를 설치하고(진짜 많다) 계정을 만든다.참고로 계좌가 없는 경우 오픈 api 사용이 불가하기에 계좌를 만들어준다. 본인의 경우 이미 주거래은행 및 주식거래 계좌가 있어 그냥 제일 기능이 협소한 계좌로 만들었다. 추가로 이 과정에서 인증하는 과정이 앱을 통해 QR로 인정하는게 간편해..
개요 이번 프로젝트 만큼은 기술 선정 이유를 정하고 시작하기로 계획 했기에 본격적 개발 직전에 프레임워크와 기타 기술들 선정 이유들을 정리하고자 한다.타이밍 좋게 학교 과제 중에서도 front-end 개발 기술스택을 정리해야하는 과제가 있다. TypeScript 이제는 선택이 아닌 필수가 되어버린듯한 타입스크립트 얼마 전 수업 중 리액트 실습하는 시간이 있었는데 일반 js로 파일을 작성하다보니 props 혹은 함수에 타입지정을 하지 않다보니 불러오거나 사용할 때 내부 요소가 뭐가 들어가야하고 타입 오타가 있는지에 대해 스스로 점검 해야하는 불편함이 있었다. 실습이니 망정이지, 프로젝트였다면 분명 엄청 번거로웠을 것이다. 그리고 이번 프로젝트의 경우 팀원 3명과 작업하기에 TypeScript가 필요한 ..
