전체 글30 최적화를 위한 Next.js 코드 스플리팅 코드 스플리팅이란?특정페이지에서 JS, 라이브러리, 페이지, 컴포넌트를 비동기적으로 렌더링을 해줍니다. 초기 렌더링시 초반에 불필요한 JS, 라이브러리, 페이지 등은 코드 스플리팅을 통해서 나중에 들고오기 때문에 성능적인면에서도 아주 매력적으로 다가오게 됩니다. 코드 스플리팅은 말그대로 이다. 코드를 분리시킨다 의미가 강하게 내포되어 있는거 처럼, 이 기능은 코드를 비동기적으로 로딩하는 방법을 만들어 줍니다. 나는 주로 차트 개발을 하면서 한번에 데이터를 들고와 chart를 뿌리는 작업을 하면서 렌더링 이슈를 많이 접하곤 했었다. (물론 한참 오래전인 2022년 이야기이다.)이러한 차트를 뿌리기 위해서는 데이터도 그만큼 상당하기도 하고 UI 차트들이 많이 차지하는 만큼 렌더링이 버벅 거리는 이슈와 느린 .. 2024. 5. 22. Dockerfile? 우선 우리는 Dockerfile을 알기 전에 Docker에 대해서 간단하게 알아야 됩니다. 물론 이 블로그 앞에서 Docker 내용을 다룬적이 있습니다. 그래도 새로운 내용을 다루는 것 처럼, 다시 설명을 해보겠습니다. Docker란?도커는 우선 컨테이너 기반의 오픈소스 가상화 플랫폼이라고 부릅니다. 여기에서 컨테이너라고 이야기하는 부분은 우리가 물건을 다른나라로 보낼 때나 화물 운송할 때 컨테이너를 사용하곤 하는데요? 그 Container이라는 의미와 같습니다. 컨테이너마다 내용물이 다른거처럼 Docker 컨테이너 안에 내용도 격리된 공간에서 프로세스가 동작하는 기술입니다. 가상머신처럼 비슷한 느낌을 받을 수 있지만, 실제 내부에는 다른 방식으로 되어있습니다. 주로 Linux kernel의 컨테이너로.. 2024. 5. 22. 개발자 워밍업 단계 - 개발자 일기 오랜만에 블로그를 다시 올렸다. 한동안 이력서를 위한 개인서비스 완료, 포트폴리오 문서 준비, 이력서 준비, 정보처리기사 필기시험, 책 공부 등을 준비하고 실천한다고 블로그에는 신경을 한동안 쓰지 못했다. 그런 결과 나는 드디어 아래와 같은 목표들을 달성했다. 정보처리 기사 필기 (합격) 이력서 문서 (완성) 포트폴리오 문서 (완성) : 피그마를 이용한 포트폴리오 문서 작성 (디자인) 책 : 일은 배신하지 않는다-김종민, 우아한타입스크립트 with 리액트, 프론트엔드 최적화(복습), 미움받을 용기 개인 서비스을 위한 기획 AI 뉴스 정보를 통한 구글링 위에 대한 작업과 학습은 거의 한 달도 안 되어서 내가 목표하던 것을 달성할 수 있었던 거 같다. 기억하고 싶은 날, 정보처리 기사 필기 (합격) 이 .. 2024. 3. 9. bundle-analyzer 이용한 Bundle size 최적화 저는 개인적으로 공부하다가 최적화 이슈를 발견하게 되었습니다. 그러다 보니 어떻게 성능을 잘 개선하면 되는지 연구를 계속하게 되었습니다. 그러다 보니 저는 bundle size를 최적화를 하여 조금더 필요없는 모듈을 정리 해야되겠다는 마음이 들어 모듈을 시각적으로 표현을 도와주는 bundle-analyzer 라는 것을 발견하였습니다. bundle-analyzer란? 우선 bundle-analyzer을 들어가기 앞서 bundle과 모듈이라는 용어는 미리 다 알고있다는 상태에서 말씀드리겠습니다. 잘 모르시겠다면, 각각 단어에 링크를 연결 해두겠습니다. bundle-analyzer는 정확히 프론트엔드 개발에서 사용하는 도구이며, 웹 어플리케이션에서 번들 사이즈를 분석하여 시각적으로 표현을 해줍니다. 번들안에서.. 2024. 1. 28. React Native (EXPO): 네이티브로 빌드 (Mac) + 세팅 React Native (Expo)프레임 워크에서 Prebuild 하기 Expo 를 사용하면, EAS를 이용하여 바로 앱을 앱스토어나 빠른 어플 등록과 배포를 도움을 줍니다. 정확히 EAS는 Expo Application Services약자로 앱 바이너리 빌드 프로세스를 단순화하고 최적화 하기위한 서비스중 하나라고 이야기합니다. 저는 개인 프로젝트를 위해서 Expo 를 사용하고있는데, 앱스토어에 올리기전에 미리 네이티브 코드로 변환을하고 싶어서 prebuild라는 명령어를 통해서 작업을 하기 시작했습니다. 문제의 시작 or 세팅 단계 npx expo prebuild 저는 위에서 이야기한 prebuild 세팅을 위해서 위의 명령어를 사용했습니다. 하지만 아래에 같은 오류가 발생하여 세팅하는 과정을 밟게 되.. 2024. 1. 20. Ubuntu에서 MYSQL 세팅 나는 lambda에서 mysql의 세팅을 하기 위해서 AWS에서 제공해주는 RDS를 사용하면 되지만, 혼자 프로젝트하기 위한 서버로써 사용하기가 버겁다는 생각이 들었습니다. 옛날에 RDS를 사용한적이 있는데, 나에게는 사용하기 버거운 금액 단위라고 기억하고 있었습니다. 그래서 어떻게 하면 이것을 조금더 저렴하게 사용할까? 고민하던찰나 AWS lightsail 안에 mysql을 세팅해버리고 그걸 이용해서 lambda에 세팅하면 좋을거같다 라는 생각이 들었습니다. aws lightsail에 대한 기초적인 세팅은 가볍게 넘어가고 이야기를 하겠습니다. AWS Lightsail ubuntu에서 가볍게 mysql을 세팅하는 내용만 가볍게 적어 나갑니다. MYSQL 설치 ## 기본 환경 세팅 - ubunut 20.0.. 2024. 1. 13. AWS 서버 비용과 성능에 대한 느낌 점? (개발일기) 나는 개인 프로젝트를 배포를 하는 과정에서 어떻게하면, 더 저렴하게 사용할 것인지 그리고 어떻게 하면 조금더 효율적으로 할수있는지 방법을 생각을 해보았다. 옛날에 EC2, AWS lightsail, AWS RDS, S3 등 여러가지 사용해보았지만, 그때는 여유가 있어 그냥 막 사용했지만, 지금 생각해보면 너무 많은 비용을 내고있었던거 같다. 심지어 나는 EC2로 마인크래프트 서버를 사용했다. ㅎㅎ 기억상 한달에 11만원 정도 나왔던거 같다. AWS에서 무엇을 사용하는가? 보통 AWS에서 EC2, RDS를 서버를 세팅할때 vcpu라고 이야기를 많이하는데 여기에 2vcpu라고 되어있으면, 보통은 2쓰레드를 의미한다. m4.4xlarge를 예시를 들었을때 아래 사진을 참고해보시면, 거기에서 코어당 쓰레드수가 .. 2024. 1. 3. Domain[ 도메인 ], DNS [ 네임서버 ] 개인 웹 프로젝트를 제작하면서 도메인을 만들고있는 중 어떻게 도메인이 만들어지고, 세팅이 되는지 궁금한 부분이 있었습니다. 그래서 여기 블로그에 DNS를 어떻게 세팅하며, Domain과 DNS는 무엇인지 자세히 정의를 해보려고 합니다. Domain 란? 항상 인터넷 창 위에 xxx.com, xxx.net, xxx.kr 등 이런 문자들이 나타나는데, 이런걸 도메인(Domain) 이라고 부르고 다른말로는 URL이라고합니다. 도메인이 있기전에는 컴퓨터주소를 110.10.111.321, 192.168.0.1라는 숫자로 기억을 했으며 사람들이 이 주소를 외우기가 힘들며 사용하기가 불편한점이 있었습니다. 그래서 나오게된게 도메인인데 쉽게 설명하자면, 도메인은 110.10.111.321 주소를 test.com이나 x.. 2023. 12. 2. [ Next.js ] a tag, Next/link, route 다르게 작동된다고? 저는 회사에서 Next.js를 사용하면서 페이지 이동할때 사용하는 a태그, next/link, route 부분을 많이 다루고 있었습니다. 하지만 나는 여기에서 중요한 핵심 포인트를 정리하기 위해서 다시 블로그에 글을 적게 되었습니다. 우선 다양한 페이지 이동을 하는거에 바라보면 모두 비슷하고 다른점이 없다고 느끼는 경우도 많았습니다. 하지만 계속 아무런 의미없이 개발을 하게되었을땐 정말 실속없는 개발자가 되기가 뻔해 정리를 하였습니다. Next.js 의 Router https://nextjs.org/docs/app/building-your-application/routing/defining-routes Routing: Defining Routes | Next.js Learn how to create yo.. 2023. 11. 20. 이전 1 2 3 4 다음
