IT's Time

요즘 AI를 사용해서 효율성 향상을 위한 방법을 많이 고민하고 있는데 개인적으로 CS 및 개념 공부 외에도 실제로 향상성을 높이기 위해 노력해야한다는 것을 절실히 느끼고 있다. 그래서 cursor ai를 사용해서 사이드 프로젝트를 해보려고 하는데 여기서 가장 큰 목표는 두 가지로 잡았다.1. 개발 속도 향상2. AI를 활용하여 빠른 개발 지식 습득  그래서 사이드 프로젝트의 일환으로 이전에 사수분께서 프론트엔드 개발자가 자기 블로그쯤은 만들어봐야 한다는 말씀이 생각나 내 블로그 제작을 목표로 시작 했다.  그 중 첫 번째로 프론트엔드와 백엔드 모두 경험해보고 싶었고 Next.js로 프론트,백 둘다 하는 것도 고려해봤으나 (사실 제일 적합한 방식이라고 생각한다.) 이왕 사내에서 express도 차후 사용해..

1. 개발 개요cursor ai에 익숙해지기 위해 사이드 프로젝트의 일환으로 블로그를 만들던 중 Next.js로 프론트엔드를 구성했는데 아래와 같은 에러를 보았다. 보아하니 블로그 상세 페이지 즉,  id를 params로 받아오는 곳의 타입 문제가 발생했는데 예전에 Next.js를 사용할 때와 동일한 코드와 로직이였는데 pwa 도입 후 테스트를 위해 build 하던 도중 발생한 에러였다. 한 번도 본 적이 없던 에러라 구글링을 해보니 Next.js 15버전부터 params와 searchParams의 접근 방식이 바뀌었다고 한다.Type error: Type '{ params: { id: string; }; }' does not satisfy the constraint 'PageProps'. Types ..

회사에서 주로 필요로 하는 요구사항이 데이터를 웹에서 시각화 해야 한다는 점이기 때문에 이 점을 집중적으로 찾다 보니 차트 라이브러리를 계속 찾게 되었는데 기존 회사 서비스에선 Python 에서 Dash로 만든 웹 사이트에 Plotly.js를 사용 했기 때문에 처음에 나도 이걸 토대로 진행 하게 되었다. 비록 현재는 다른 차트 라이브러리들을 사용하고 있지만 Plotly.js 설치 방법과 사용 방법에 대해 자세히 알아보고자 한다.  1. Plotly.js란? JavaScript로 구현된 오픈 소스 시각화 라이브러리 중 하나이다. 특히 Python Dash 같은 곳에서 함께 사용되기 좋다. 인터랙티브 시각화 도구이기도 하다. 현재는 recharts. d3.js , chart.js 등에 밀려 주류로 사용하는 ..

회사에서 만든 웹 서비스를 Github Actions와 S3 + Cloudfront 로 배포를 했는데 이 때 새로 오신 사수 개발자분께서 개발용 서버와 실제 서버를 분리해주셨고 그에 맞춰 배포도 다르게 가야 한다고 말씀해주셔서 배포 했던 것을 간단히 수정하고자 했다.  1. 기존 구조gitflow를 사용하고 있었기 때문에 dev를 default로 잡고 이 곳에 push 해주었다. 그리고 main에 PR을 올릴 때 CD actions가 수행되어 배포가 되게 하였다.1) branch 구조feature/#123 -> dev (default branch) -> main 2) CD Scriptname: CDon: push: branches: - main pull request: branch..

이전에 AWS S3와 CloudFront로 배포했었는데 자동 빌드 및 배포를 위해 CI/CD를 구축해보고자 한다. CI/CD를 구축하는 법은 다양하게 있는데 흔히 Jenkins 와 Github Actions 두 가지 방법 중 하나를 사용하는 것 같았다. 난 이 중에서 Github Actions를 선택 했다. 이유는 Jenkins보다 초기 설정이 간단하다는 장점이 있고 현재 회사에서 프론트엔드 업무를 혼자 맡다 보니 시간이나 일정을 고려했을 때 조금이라도 빨리 구축해두는게 낫겠다 싶어서 Github Actions를 선택 했다. 1. IAM 권한 설정 : AWS S3와 CloudFront 로 배포했기 때문에 IAM 권한 설정을 해준다. 나는 회사 AWS 계정 중에서 CI/CD 전용 계정을 새로 만들어서 IA..

회사에서 프로젝트를 진행하던 중 배포를 먼저 해달라는 대표님의 요구사항이 있었고 이를 위해 배포를 먼저 진행하게 되었는데 어차피 프론트엔드 나 혼자이기 때문에 내가 배우고 싶었던 AWS S3와 Cloudfront를 활용해서 배포를 하고 추후 Github Actions로 CI/CD를 구축해보았다. CI/CD 구축은 2번째 포스팅때 하기로 하고 일단 AWS S3와 CloudFront를 활용해서 배포를 해보고자 한다. 1. AWS S3 + Cloudfront를 선택한 이유 : 현재 회사의 프로젝트는 Vite 기반 React로 이루어져 있고 CSR 기반이기 때문에 정적 리소스를 대규모로 특화 되어 있는 S3를 선택했고 또한 회사에서 이미 AWS 환경을 구축한 상태이기 때문에 한 곳에 모아두는 것이 나중에 유지 ..