안녕하세요~~👋👋 여러분 잘 지내고 계신가요? 이제 슬슬 봄이 다가오고 있어요..!!! 🎉모두들 따뜻한 봄을 지내시길 바랄게요~ 문제상황저는 회사에서 경기 기록에 선수 정보를 추가/수정할 수 있는 기능을 맡게 되었어요!이미 구현된 부분이 있었고, 해당 부분에 추가적인 기능을 넣는 상황이었어요. 하지만, 왜인지 모르게 경기 기록 수정 모달이 굉장히 늦게 띄워졌어요..!!! --> 문제 상황 아래 영상을 확인해보시면 아시겠지만, 2초정도 늦게 모달이 띄워졌어요!  콘솔을 찍어보면서 원인을 찾아보기 시작했어요..! (6번이 모달, 7번이 경기로그입니다.) 문제는 모달이 열릴 때와 닫힐 때, 모든 기록들이 찍히는 것을 확인할 수 있었어요..!!!모든 기록들이 리렌더링이 되는 상황이었습니다! 결론부터 얘기하..

안녕하세요~모두들 잘 지내고 계신가요?  오늘은 디프만 활동을 하면서 제가 부족하다고 느낀 부분을 제대로 정리해보기 위해서 왔어요!! 디프만 활동을 하면서 저희 팀은 서비스의 빠른 초기 렌더링과 팀원들의 Next.js 역량 증진을 위해서Next.js 프레임워크를 선택하게 되었어요. 백엔드 팀원들과 얘기를 나누던 중, Next.js의 "서버"는 백엔드 개발자들이 흔히 얘기하는 서버와 어떤 차이가 있고, 왜 존재하는지 질문을 했었어요. 저는 이 내용을 자신있게 대답하지 못 했고,,, 바로 찾아보고 다시 머릿속에 넣고자 했어요..🥲🥲 Next.js우선 Next.js는 무엇일까요?Next.js는 React 기반의 프레임워크로, 클라이언트와 서버의 경계를 넘나들며 동작할 수 있는 풀스택 프레임워크입니다. 특히..

저는 지금 다니는 회사에 올해 1월에 입사를 했습니다.입사하기 전, 저만의 목표를 잡았었습니다. 바로 저희 서비스의 성능을 개선하기..!! 였습니다. 성능을 개선해야 하는 부분은 여러가지가 있었습니다. LCP 최적화, 서버 사이드 렌더링으로 인한 일부 페이지 렌더링 속도 저하, 리렌더링 최적화 등이 있었습니다. 그 중에 오늘은 리렌더링 최적화 1편으로 찾아왔습니다.왜 1편이냐면.. 최적화해야하는 부분이 정말 여러곳이 있는데, 1편에는 스크롤과 관련된 리렌더링 이슈를 가져왔어요.     문제 상황바로 본론으로 들어가보겠습니다.아래의 영상은 문제 상황을 녹화한 영상인데요. 스크롤을 할 때마다, 최상단의 헤더(AppBar 컴포넌트)가 지속적으로 렌더링이 되는 문제가 있었어요.그리고 더 이상했던 점은 렌더링이 ..

안녕하세요..!!여러분 잘 지내고 계신지 궁금하네요^^ 짧은 휴가에서 복귀하고 회사에서 토스페이먼츠 결제 연동 업무를 할당받았어요! ☺️☺️ 사내 서비스 중에서 티켓을 구매할 수 있는 기능이 생겨서 이를 토스페이먼츠 SDK를 활용해서 구현하기로 결정했었어요. 결제 위젯과 결제창이 있는데요! 저희는 결제창을 선택했어요..!결제창으로 토스페이먼츠 결제 연동하기 카드/간편결제 통합결제창 연동하기 | 토스페이먼츠 개발자센터토스페이먼츠 카드/간편결제 통합결제창을 연동하는 방법이에요. 구매자가 결제창에서 결제수단, 결제 정보를 선택한 뒤에 카드 또는 간편결제 앱으로 이동해요.docs.tosspayments.com토스에서 아주 친절하게 가이드라인을 제공해줘서 정말 쉽게 구현할 수 있었어요!! 😎😎 하지만, 중간에..

Next.JS에서는 특별한 기본 제공 이미지 컴포넌트가 있습니다.바로 컴포넌트입니다! 이미지를 보여줄 때, 단순히 태그를 사용하는 것이 아니라,Next.JS에서 제공하는 컴포넌트를 사용하면 이미지를 더 최적화된 방식으로 출력하도록 도와요. 예를 들어, lazy loading을 적용하여 보일 때만, 불러옵니다. 위의 동작은 추가적인 설정없이 자동으로 해줍니다.lazy-loading이 되면 안되는 이미지도 있습니다! 예를 들면, header에서 항상 보이는 이미지/아이콘 같은 경우에는priority 속성을 추가해서 항상 우선적으로 보이도록 설정할 수 있습니다. 반응형 이미지를 적용하는 과정도 단순화할 수 있어요. 그래서 컴포넌트를 사용하는 것이 좋습니다. 그리고, Image를 사용하면 이미지의 확장자..

타입스크립트 레벨을 높이기 위해 연습문제를 풀어볼건데요! 함께 하시고 싶은 분들은 아래의 링크에서 연습문제들을 풀어보실 수 있습니다..!  https://typescript-exercises.github.io/#exercise=1&file=%2Findex.ts TypeScript ExercisesA set of interactive TypeScript exercisestypescript-exercises.github.io  저는 1단계부터 차근차근 풀어보고 부족한 부분을 채워나아가려고 해요!!정답도 있어서 확인해보실 수 있어요^^  1단계 문제/*Intro: We are starting a small community of users. For performance reasons, we have..

NextJs Essentials반드시 알아야 할 핵심 개념 Routing, Pages, ComponentsFetching, Sending DataStyling, Images, Metadata  Next.JS 설치// 설치npx create-next-app@latest// 실행npm run dev   폴더 구조 분석app 폴더는 가장 중요하다.app 폴더로 전체 웹사이트에 두고 싶은 다양한 페이지를 설정하는 곳이다.해당 폴더에 page.js, layout.js가 존재한다. page.js와 layout.js는 예약어이다.page.js는 페이지를 렌더링해야한다는 것을 알려준다.React 구조를 보인다.서버 컴포넌트라는 것이 주목할 점이다.  Components which require a special "en..

회사에서 타이머를 개선하던 중, setInterval 호출 주기에 따른 메모리 비용을 분석하면서,JS Heap과 가비지 컬렉터에 대해서 공부하고 정리해보게 되었어요! 😎😎    1. 메모리 관리란 무엇인가?자바스크립트가 어떻게 메모리를 관리하는지 알아보려면, 먼저 메모리 관리가 무엇인지 이해해야 해요. 컴퓨터 프로그램은 데이터를 처리하기 위해 메모리라는 공간을 사용하고, 이 메모리에는 변수를 저장하거나 객체를 생성하는 등의 작업이 이루어집니다. 메모리를 효과적으로 관리하지 않으면, 프로그램의 성능이 떨어지거나, 메모리 누수가 발생할 수 있어요.자바스크립트는 자동 메모리 관리를 제공합니다. 즉, 프로그래머가 직접 메모리를 할당하거나 해제하지 않아도, 자바스크립트 엔진이 이를 자동으로 처리합니다. 그 과..

어느 날, 저는 저희 팀 백엔드 개발자에게 연락을 받았습니다.  백엔드 개발자: "형, 우리 웹 사이트 LCP 부분에서 시간을 너무 많이 소모하는 것 같아. 웹 페이지 처음 로딩할 때, 너무 느려! 확인해줘~"본인: "그..그래!! 고마워..!!" 백엔드 개발자님이 주신 https://www.webpagetest.org/ 를 바탕으로 저희 사이트를 분석해보았습니다.확실 LCP 부분에서 빨간색 경고가 있었어요..ㅠㅠ  이를 개선하고자, LCP에 대해서 마구마구 찾아봤어요..!!   LCP란 무엇인가?LCP (Largest Contentful Paint)는 웹 페이지 로딩 속도와 사용자 경험을 측정하는 중요한 지표 중 하나입니다.LCP는 페이지의 가장 큰 콘텐츠 요소가 화면에 표시되는 데 걸리는 시간을 측정..