본문 바로가기

전체 글153

효율적인 React Query 사용법 (Waterfall 방지와 병렬 처리) react query 의 성능과 waterfallreact query는 캐싱 측면에서 불필요한 API 요청을 줄여주기 때문에 많이 사용할수록 좋을 것 같습니다. 그러나 waterfall에 대해서 인지하고 있지 않으면 성능적으로 더 불리해질 수 있습니다. waterfall은 무엇일까요?네트워크에서 데이터 요청이 순차적으로 일어나면서 발생하는 성능 이슈를 의미합니다. 불필요한 순차적 요청으로 인해서 네트워크 요청이 지연되면 그만큼 느린 속도로 인해 성능이 저하될수도밖에 없습니다. 그래서 보통 이러한 waterfall 이슈를 없애기 위해서 병렬처리, prefetch, caching 등의 방법으로 해결합니다. react query를 클라이언트에서 사용할 때 발생할 수 있는 waterfall 케이스에 대해서 살펴.. 2024. 11. 17.
Next.js SSR accesstoken 개선(Localstorage에서 cookie로) 개요현재 제가 담당하고 있는 웹사이트의 accessToken은 Localstorage에 보관하여 사용자 인증을 처리하고 있습니다. 초기에 Server side rendering을 사용하지 않기도 했고, 사용자 인증에 따른 큰 기능이 없었기 때문에 큰 문제는 없었습니다. 그러나 페이지들을 SSR으로 바꾸고, 인증정보가 중요해지는 결제 서비스 출시를 준비하면서 Localstorage의 한계를 크게 느끼게 되었습니다. next.js에서 token을 Localstorage에서 관리했을 때의 불편함은 이렇습니다.- 첫 진입 or 새로고침시 로그인이 풀려있는 UI가 잠깐 보인다.- 인증이 필요한 페이지는 항상 로딩이 필요하다.   - 클라이언트단에서 인증 정보를 체크하는 잠깐의 텀이 항상 필요하게 됨.  - 항상 .. 2024. 11. 9.
Hash Table Hash table이란? key-value 쌍으로 데이터를 저장하는 자료구조입니다.key 자체를 특정 index로 저장하기 때문에 데이터 삽입, 삭제, 조회를 빠르게 수행할 수 있습니다.이때 저장할 위치인 index는 Hash function을 통해 생성하게 됩니다. Hash function(해시 함수)해시 함수는 key를 특정한 index로 매핑하며 해당 index는 메모리의 저장 위치가 됩니다.index를 통해 데이터에 접근하기 때문에 Array loop를 돌며 조회하는 것보다 더 빠르게 데이터 처리가 가능합니다.해시 함수가 얼마나 key를 균일하게 분산시키느냐에 따라 해시 테이블의 성능이 크게 좌우됩니다. 아래는 hash function의 간단한 pseudocode입니다. 소수를 사용해서 충돌 가.. 2024. 10. 8.
강남 스피치 학원에서 개발자 면접 불안 극복하기 왜 스피치 학원을 선택하게 되었는가?저는 평소 말하는 것에 자신이 없었습니다. 내 머릿속 생각을 말로 표현하는 것이 어려웠고, 사람들 앞에서 이야기하면 머릿속이 하얗게 되고, 발음이 좋지 않아 말을 버벅거리는 경우도 많았습니다. 스스로 약점이라고 생각하니깐 말을 할 때마다 긴장하고 불안했습니다.  사회생활을 시작하면서 말을 잘한다는 것이 얼마나 중요한건지 점점 깨닫게 되었는데요. 회사에서 의사소통을 할 때, 나의 의견으로 상대방을 설득해야 할 때, 연봉협상을 해야 할 때, 이직을 위한 면접을 보아야 할 때 모두 중요한 부분 중 하나가 바로 스피치입니다. 자신감 있는 태도로 나의 의견을 전달하는 것은 상대방에게 신뢰감을 주고 나의 능력을 어필할 수 있습니다. 그래서 저의 스피치 불안이라는 약점은 앞으로의 .. 2024. 10. 7.
[도서 리뷰] 딸아, 돈 공부 절대 미루지 마라 인생 혹한기, 돈 공부의 필요성을 느끼다저는 경제와 돈 공부에 대한 중요성을 잘 몰랐는데요. 전공도 이과 계열이었고, 개발자를 시작한 뒤부터는 개발공부에 전념하느라 다른 분야에 대해 관심을 쏟을 시간이 부족했습니다. 그래서 경제&돈을 알면 분명 도움이 되겠지만 우선순위에서 좀 많이 뒤에 있는 분야 중 하나였죠,,  인생 혹한기를 맞고 있는 지금, 왜 세상이 제게 이런 시련을 주는지 궁금해졌습니다. 24년 6월, 구독하던 도시락 서비스 위잇딜라이트가 망하면서 결제했던 현금포인트를 돌려받지 못하게 되었습니다. 남일이 아닌것같던 찰나 다니고 있던 회사의 재정상황도 악화되어 임금체불을 당하게 되었습니다. 지금은 회사를 나와 이직을 준비하고 있는데 채용시장도 꽁꽁 얼어붙어서 쉽지가 않습니다. 원인을 제대로 모르.. 2024. 10. 3.
Next.js를 AWS EC2에 배포하는 방법: 초보자를 위한 쉬운 가이드 처음부터 직접 해보는 AWS EC2 배포저는 이전 회사에서 이미 구축된 인프라 위에서 Next.js 프로젝트를 운영했습니다. Github Action 덕분에 버튼 한번 클릭으로 손쉽게 배포할 수 있었죠. 하지만 정작 제가 배포 중인 환경인 AWS EC2나 Docker에 대해선 잘 알지 못했습니다. 서버가 어떤 방식으로 돌아가고, 어떻게 배포가 진행되는지 궁금했습니다. 그리고 최근 이직을 준비하면서 프론트엔드 채용공고를 살펴보니, AWS 인프라 경험을 요구하는 회사들이 많다는 것을 알게 되었습니다. 경력이 쌓일수록 프론트엔드 개발자도 인프라와 CI/CD까지 이해하고 다룰 수 있어야 경쟁력을 갖출 수 있다는 생각이 들었습니다. 그래서 오늘은 직접 EC2를 활용해 Next.js 프로젝트를 배포하는 과정을 포스.. 2024. 9. 20.
반응형

티스토리툴바