리액트를 배포하려면 npm run build 를 해야하고, 그 결과로 나온 build 된 js 파일이 생성되게 된다.근데... 이 번들이라고 하는 js 파일의 크기가 크면,SEO 의 단점이라고 할 수 있는 '첫 로딩 속도'가 부각되므로, 번들 사이즈 관리가 중요해지게 됨. 종종 이 번들 사이즈를 검토해주어야 하는데, 이게 얼마나 큰지 또 어디를 확인해야하는지를 어떻게 알 수 있을까? ...흔히 알려져 있는 빌드 파일 분석 툴인 webpack-bundle-analyzer 가 있다. 직관적인 시각 요소를 제공해주지만.. 이거는 또 eject 를 해야하는 위험이 있고,한 번 eject 를 해버리면 되돌리기가 어려워진다. 여기서 잠깐. Ejecteject 의 장점- CRA(Create-React-App) 에서 ..

https://yozm.wishket.com/magazine/detail/3029/?utm_source=stibee&utm_medium=email&utm_campaign=newsletter_yozm&utm_content=contents 1. Next.js2. Shadcn UI3. React Query 가볍게 공부해보기

APM(Application Performance Management/Monitoring)애플리케이션의 성능 모니터링과 장애 예측을 통해 최적의 애플리케이션 상태를 보장하고 유지하는 일련의 관리 체계.즉,애플리케이션의 성능을 모니터링하고 경우에 따라 발생할 수 있는 장애를 신속히 감지하고 대처하여 담당하고 있는 정보시스템의 성능을 최적의 상태로 유지하는 것이 APM의 핵심 역할. 미들웨어(WebLogic, Tomcat 등..)에서 일어나는 트랜잭션의 사용 시간을 분석하여 각 단계 별로 성능에 미치는 영향의 원인을 파악.   A(Application)Web Application을 의미.사용자와 웹 서비스 간에 상호 작용을 하며 성능을 관리해주는 서비스. P(Perforamance)애플리케이션 성능웹 서비스..

Springboot :: HikariCP 란?커넥션 풀(Connection Pooling)을 제공하는 JDBC Datasource의 구현체. 사전 지식JDBC(Java Database Connectivity)자바에서 데이터베이스에 접속할 수 있도록 해주는 자바 API.JDBC는 데이터베이스에서 자료를 쿼리bornatnoon.tistory.com 우선 들어가기 전에 앞서 HikariCP 가 뭔지 개념을 모르겠다면.위의 글을 참조하도록 하자. HikariCP 옵션  GitHub - brettwooldridge/HikariCP: 光 HikariCP・A solid, high-performance, JDBC connection pool at last.光 HikariCP・A solid, high-performanc..

커넥션 풀(Connection Pooling)을 제공하는 JDBC Datasource의 구현체. 사전 지식JDBC(Java Database Connectivity)자바에서 데이터베이스에 접속할 수 있도록 해주는 자바 API.JDBC는 데이터베이스에서 자료를 쿼리하거나 업데이트하는 방법을 제공한다. DB Connection Pool일반적인 데이터 연동 과정은 웹 애플리케이션이 필요할 때마다 DB에 연결하여 작업하는 방식→ 필요할 때마다 연동하여 작업할 경우 DB 연결에 시간이 많이 걸리는 issue 발생→ 웹 어플리케이션이 실행됨과 동시에 연동할 DB와의 연결을 미리 설정해두면 문제 해결 가능!그리고 필요할 때마다 미리 연결해 둔 상태를 이용해 빠르게 DB와 연동하여 작업을 하면 된다.. 이런 식으로미리 ..

보통 환경 변수를 사용할 때application.yml, application-dev.yml, application-local.yml으로 파일을 분기하여 작성하고 1. application.yml 에서 동작시킬 때 바꿔준다.spring: profiles: active: local 예를 들면 이런 식으로.. 2.  active profile 을 지정해둔다.. 여기서 우리는 intellij Community 버전을 사용하여 active profile 을 지정하는 방법을 알아볼 것이다.(application.yml 이 보기에는 직관적이나 개발을 진행하면서 챙겨야할 것들이 생기기 때문에..active profile 로 local 을 고정 값으로 두면 편할 듯 하다. (코드는 dev 로 두고) )방법 1...

https://yozm.wishket.com/magazine/detail/2919/?utm_source=stibee&utm_medium=email&utm_campaign=newsletter_yozm&utm_content=contents 내가 ‘차트 라이브러리’를 만들며 배운 것들 | 요즘IT“죄송하지만, 라이브러리에서 지원하지 않는 기능이라...” 프론트엔드 개발자라면 누구나 한 번쯤 이런 말을 해본 적이 있을 겁니다. 특히 데이터 시각화가 중요한 프로젝트를 진행할 때면 더yozm.wishket.com 작년에 사설 컴포넌트를 붙힌 라이브러리를 개발하였는데... 그때 느낀 생각들이랑 비슷한 것들이 기재되어 있어서 가지고 왔다.나는 비록 회사에 속해서 개발한 것이라 코드를 공개하지는 못하지만이 사람은 방법론..

// 객체 생성let dynamicVars = {};// 동적으로 변수명 생성for (let i = 0; i  이렇게 무지성 변수도 선언할 수 있고,${i} 대신 기존에 선언해두었던 변수들을 사용할 수도 있다. 나의 경우에는 배열 안의 값에 해당하는 데이터의 검증한 결과를 저장해둬야 해서 동적 변수를 구현하게 되었음. 예를 들면 그리드안에 배열[] 안에 있는 값과 이름이 같은 컬럼에 데이터를 확인하는 일이다.그때는 아래와 같이 변형해서 사용할수도 있다. const checkColumns = ['Nation', 'Dept', 'Name', 'Age'] _.forEach(dataList, (row, index) => { let dynamicVars = {}; // 동적으로 변수명 생성 for (let i ..

TCP 송신 옵션 중 하나.* TCP SACK 에 대한 RFC가 나온 것이 RFC 2018로 1996년도이고, RFC 2883이 2000년도에 나왔으니.. 지금 왠만한 시스템에는 이 옵션이 적용되어 있을 것이고, 사용하고 있어야 하는게 옳다. 근데 확인해보면 이 SACK 옵션이 enable 되어 있는 경우도 많음. 확인이 필요할 듯.  TCP/IP 에서 SACK 옵션을 주지 않은 경우 TCP/IP 에 대한 개념이 모호하다면 앞서 쓴 TCP/IP 글을 읽고 오도록 하자. 여기서 들었던 예시와 이어지게 예시를 들도록 할거니까..  네트워크 :: TCP/IP 란?인터넷에서 컴퓨터들이 서로 정보를 주고 받는데에 쓰이는 통신 규약인 인터넷 프로토콜 의 모음(set) 중 하나이자 현재 가장 많이 사용하고 있는 인터..

인터넷에서 컴퓨터들이 서로 정보를 주고 받는데에 쓰이는 통신 규약인 인터넷 프로토콜 의 모음(set) 중 하나이자 현재 가장 많이 사용하고 있는 인터넷 프로토콜 슈트(internet protocol suite)이다.* TCP/IP는 하나의 프로토콜을 부르는 단어가 아니라 가장 많이 쓰는 프로토콜 두 개를 한 번에 통칭하는 단어임. TCP/IPTCP/IP는 패킷 통신 방식의 인터넷 프로토콜인 IP (인터넷 프로토콜)와 전송 조절 프로토콜인 TCP로 이루어짐. TCP는 IP 통신을 기반으로 작동하기 때문에 따로 별도로 생각하기보다는 하나의 흐름으로 보는게 적절. IP (Internet Protocol)비 신뢰성(unreliability)과 비 연결성(connectionlessness) 의 특징이 있음IP의 ..

Public 디렉토리 와 src 디렉토리의 차이점 Public 디렉토리- 정적 파일을 넣는 디렉토리 (index.html을 비롯한 html 파일, img 파일 등..)   * 파일이 후처리(post-process) 되거나 경량화(minify) 되지 않는다.   * 파일 경로를 잘못 입력하거나, 파일이 존재하지 않을 경우에 컴파일 단계에서 오류가 발생하지 않고, 사용자가 접근할 때 404 오류를 응답하게 된다.   * 파일이 수정될 때 마다 직접 파일명을 수정하거나 매개변수 쿼리를 추가해야 함     => 환경 변수를 사용하면 어느정도 해결이 가능하긴 하다.. src 디렉토리- 개발하면서 작업하는 파일의 대부분을 넣는 디렉토리 (index.js, 그 외 리액트 컴포넌트 같은 js 파일, css 파일 등....

과격하게 레거시를 쇄신하는 세 가지 방법과 그 사례안녕하세요. 일본 최대 규모의 음식 배달 서비스 Demaecan(出前館, 이하 데마에칸) 프로덕트를 담당하는 김영재라고 합니다. 어느덧 프로덕트를 쇄신한 지 2년 반이 되어가고 있...techblog.lycorp.co.jp 어제 내가 작성한 코드는 레거시이다.사용자가 한 명이라도 있는 시스템은 레거시이다. 그 한 명이 바로 당신이다.레거시를 고칠 바엔 다시 만드는 게 더 빠르다. -  -"과감하게" 레거시를 해소하는 방법인프라 단절하기코드 재작성하기(Recode)사양 경량화하기한마디로 새로 만드는 의미가 강해짐.DB 설계 등 부터 다시 뜯어서 만든다.. 기존의 레거시 서비스/시스템은 그대로 유지하되새로 컨버전할 시스템을 같은 로직이 아닌 별도 로직에서 새..