no image
리렌더링 최적화 - 2편
안녕하세요~~👋👋 여러분 잘 지내고 계신가요? 이제 슬슬 봄이 다가오고 있어요..!!! 🎉모두들 따뜻한 봄을 지내시길 바랄게요~ 문제상황저는 회사에서 경기 기록에 선수 정보를 추가/수정할 수 있는 기능을 맡게 되었어요!이미 구현된 부분이 있었고, 해당 부분에 추가적인 기능을 넣는 상황이었어요. 하지만, 왜인지 모르게 경기 기록 수정 모달이 굉장히 늦게 띄워졌어요..!!! --> 문제 상황 아래 영상을 확인해보시면 아시겠지만, 2초정도 늦게 모달이 띄워졌어요!  콘솔을 찍어보면서 원인을 찾아보기 시작했어요..! (6번이 모달, 7번이 경기로그입니다.) 문제는 모달이 열릴 때와 닫힐 때, 모든 기록들이 찍히는 것을 확인할 수 있었어요..!!!모든 기록들이 리렌더링이 되는 상황이었습니다! 결론부터 얘기하..
2025.02.17
no image
[JavaScript] k진수에서 소수 개수 구하기
k진수에서 소수 개수 구하기 - 프로그래머스 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/92335 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr  문제 복기1월 5일에 풀고, 한 달이 지나서야 풀이를 남기게 되어서 정확한 맥락을 놓쳤을 수도 있기 때문에최대한 꼼꼼히 다시 보고, 저의 그 당시 생각들을 떠올려가며 정리해보겠습니다. 문제를 읽어보시면 아시겠지만,   문제 조건 아래 바로, 아래의 예시가 나옵니다.위의 조건에 맞는 소수는 211, 2, 11로 총 3개가 됩니다.  마지막 조건과 위의 예시를 잘 읽고 생각하면, 결국은 0을 ..
2025.02.08
no image
Next.js의 서버
안녕하세요~모두들 잘 지내고 계신가요?  오늘은 디프만 활동을 하면서 제가 부족하다고 느낀 부분을 제대로 정리해보기 위해서 왔어요!! 디프만 활동을 하면서 저희 팀은 서비스의 빠른 초기 렌더링과 팀원들의 Next.js 역량 증진을 위해서Next.js 프레임워크를 선택하게 되었어요. 백엔드 팀원들과 얘기를 나누던 중, Next.js의 "서버"는 백엔드 개발자들이 흔히 얘기하는 서버와 어떤 차이가 있고, 왜 존재하는지 질문을 했었어요. 저는 이 내용을 자신있게 대답하지 못 했고,,, 바로 찾아보고 다시 머릿속에 넣고자 했어요..🥲🥲 Next.js우선 Next.js는 무엇일까요?Next.js는 React 기반의 프레임워크로, 클라이언트와 서버의 경계를 넘나들며 동작할 수 있는 풀스택 프레임워크입니다. 특히..
2025.01.27
no image
리렌더링 최적화 - 1편
저는 지금 다니는 회사에 올해 1월에 입사를 했습니다.입사하기 전, 저만의 목표를 잡았었습니다. 바로 저희 서비스의 성능을 개선하기..!! 였습니다. 성능을 개선해야 하는 부분은 여러가지가 있었습니다. LCP 최적화, 서버 사이드 렌더링으로 인한 일부 페이지 렌더링 속도 저하, 리렌더링 최적화 등이 있었습니다. 그 중에 오늘은 리렌더링 최적화 1편으로 찾아왔습니다.왜 1편이냐면.. 최적화해야하는 부분이 정말 여러곳이 있는데, 1편에는 스크롤과 관련된 리렌더링 이슈를 가져왔어요.     문제 상황바로 본론으로 들어가보겠습니다.아래의 영상은 문제 상황을 녹화한 영상인데요. 스크롤을 할 때마다, 최상단의 헤더(AppBar 컴포넌트)가 지속적으로 렌더링이 되는 문제가 있었어요.그리고 더 이상했던 점은 렌더링이 ..
2025.01.26
no image
디프만 16기 Web 합격 후기
안녕하세요! ~ 👋 여러분들은 2025년 잘 보내고 계신가요?벌써 1월이 마무리되어가고 있어요!!! 모두들 새해 복 많이 받고 하시는 일!!! 잘 되었으면 좋겠습니다 🔥🔥  본론으로 들어가면, 저는 작년에 인턴을 하면서 자소서와 지원서를 엄청 열심히 쓰지 못 했던 것 같아요.그래서 많은 기업에 지원하지 못 했던 것들이 조금 후회되네요..ㅠㅠ 그 중에 디프만도 지원했었는데 디프만만 합격했어요!!! 🥹🥹 (행운) 사실 디프만은 3학년 1학기 때, 정확히 1년 전에 지원했었는데요!아쉽게도 탈락했어요.. :(1년 동안 프론트엔드 개발자로서 역량을 쌓기 위해 정말 열심히 달려왔어요. 🚗 대학교 생활을 하면서 졸업작품으로 Web 서비스를 기획부터 배포까지 진행했었구요!AWS Cloud Club 동아리 활..
2025.01.22
no image
토스페이먼츠 결제 연동하기
안녕하세요..!!여러분 잘 지내고 계신지 궁금하네요^^ 짧은 휴가에서 복귀하고 회사에서 토스페이먼츠 결제 연동 업무를 할당받았어요! ☺️☺️ 사내 서비스 중에서 티켓을 구매할 수 있는 기능이 생겨서 이를 토스페이먼츠 SDK를 활용해서 구현하기로 결정했었어요. 결제 위젯과 결제창이 있는데요! 저희는 결제창을 선택했어요..!결제창으로 토스페이먼츠 결제 연동하기 카드/간편결제 통합결제창 연동하기 | 토스페이먼츠 개발자센터토스페이먼츠 카드/간편결제 통합결제창을 연동하는 방법이에요. 구매자가 결제창에서 결제수단, 결제 정보를 선택한 뒤에 카드 또는 간편결제 앱으로 이동해요.docs.tosspayments.com토스에서 아주 친절하게 가이드라인을 제공해줘서 정말 쉽게 구현할 수 있었어요!! 😎😎 하지만, 중간에..
2025.01.14
no image
[TIL] 4학년 2학기 인턴 회고
모두들안녕하세요~ 👋 코딩 외적인 얘기로 오랜만에 찾아왔습니다!! ^^ 저는 이제 4학년 2학기 인턴을 3일 남겨두고 있는데요!저의 인턴 생활을 기록으로 남겨두고 싶어서 끄적끄적 해봅니다..📝 저는 올해 2024년 7월 1일부터 2024년 12월 31일까지 한 모 서비스 기업에서 인턴 활동을 하게 되었어요. 6개월 인턴 경험이 얼마 안 되는 시간의 경험이라고 생각했는데, 그래도 막상 해보니생각보다 긴 시간이었고, 다양한 업무를 처리하기에 충분한 시간이었어요! 제가 인턴 기간동안 했던 작업들을 정리해봤어요..!  그 외에도 성능개선이나 코드 리팩토링도 꽤 진행했어요.선임 개발자분들에게 코드 리뷰도 받고, pair programming도 하고, 저를 잘 키워(?)주셨어요!! Next.js에 대한 경험이 ..
2024.12.31
no image
[JavaScript] 방문 길이 - 프로그래머스
방문 길이 - 프로그래머스 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/49994 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr  문제 복기경로 문제는 예전에 Dynamic programming을 공부할 때, 자주 접한 케이스이다.경로 문제는 대부분 유사한 형식을 가지고 있는 것 같다. 이번 문제도 동일하다.방향 정보를 담고 있는 move 객체dirs을 순회하면서 move[dir]을 구조 분해하여 각각의 좌표를 업데이트해주는 로직경계를 벗어났는지 판단해주는 예외처리적어도 위의 3가지는 자주 등장하는 코드이니 익숙하지 않다면 익혀주는게 ..
2024.12.15
no image
[JavaScript] n진수 게임 - 프로그래머스
n진수 게임 - 프로그래머스 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/17687 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr  문제 복기지난 문제와 마찬가지로 이번 문제도 2018 카카오 3차 코딩테스트 문제 중 하나인 것 같다.지난 문제와 조금 더 쉽게 느껴졌다. 지난 문제는 재귀함수로 문제를 풀었다면,이번에는 단순 반복문으로 문제를 해결해서 그런 것 같다. 매개변수가 많아서 당황할 수 있지만, 단계별로 어떻게 매개변수를 써야하고,어떤 작업을 순차적으로 할 것인지 정리하여 쉽게 문제를 해결할 수 있었다.  문제 풀이1단계처음으로..
2024.12.14