전체 글93 [Electron] Electron에서 코드 변경사항 빠르게 적용하기 (feat. electron-reload) Electron을 사용하며 불편했던 것 중 하나는, 웹 개발을 하던 때와 달리 자동으로 변경사항이 적용되지 않는다는 것이었다. 때문에 코드를 고치고, 이미 열려있는 Electron 창을 닫고, 커맨드 창에서 다시 Electron을 실행하는 불편함이 있었다.이를 개선하기 위한 방법을 알아보고, 실제 적용해본 내용을 공유한다.electron-reload 적용하기 Electron에 자동 리로드를 추가할 때 자주 거론되는 방법. 공식 문서에서 설명하는 사용방법도 비교적 간단하다. 간단하다면 간단한데, 나는 프로젝트에서 타입스크립트를 사용하고 있어서 이런 저런 추가 설정을 더했고, 만족스럽지 못한 부분이 있다. // 설치npm install electron-reload npm 등으로 라이브러리를 설치하면 e.. 2024. 6. 30. [React] Windowing으로 렌더링 성능 최적화하기 최근 렌더링 이슈를 경험했었다. 수 천개쯤 되는 다수의 데이터를 한 번에 렌더링했기에 발생하는 이슈였다. 이 이슈를 통해 알게 된 Windowing 기법과, 이를 구현할 수 있게 해주는 라이브러리에 대해 기록한다.Windowing 기법이란? React 공식 페이지에서도 소개하고 있는 Windowing 기법이란, 간단히 말해 전체 목록의 일부만 렌더링하는 기법이다. 수백, 혹은 수천개의 항목을 한 번에 렌더링 하는 건 큰 부하를 일으킬 뿐더러, 페이지에 보이지 않는 요소까지 렌더링하는 경우가 많기 때문에 비효율적이다. 따라서 Windowing 기법은 화면에 보이지 않는 요소들을 렌더링에서 제외하고 일부만 렌더링함으로써 성능을 최적화할 수 있게 해준다. 사실 이 개념은 아주 어렴풋하게 알고 있었는데.. 2024. 6. 2. Next.js SSRF 취약성 이슈 GitHub 보안 알림 이메일이 오다 어느 날 갑자기 깃허브가 이메일을 보냈다. 뭔가 하고 살펴봤더니, 블로그 레포지터리에 보안 관련 이슈로 온 이메일이었다. 이메일로 보내진 링크를 확인해보니, 아래와 같이 깃허브 Security 탭에 새로운 항목이 생겨있었다. 사실 한 번도 Security 탭을 사용해본 적이 없어서 뭔가 했는데, 내용을 읽어보니 대강 아래와 같았다.Next.js에서 Server-Side Request Forgery(SSRF)에 대한 취약점이 제기되었다.아래의 조건을 만족할 시 Next.js 어플리케이션이 보낸 것처럼 보이는 요청이 공격자에 의해 만들어질 수 있다.14.1.1 버전 미만의 Next.js를 사용하고 있다.Next.js 어플리케이션이 Server Actions 기능을.. 2024. 5. 12. [Electron] input이 focus되지 않는 이슈 해결하기 (+ IPC 통신을 곁들여서) 최근에 잠깐 Electron을 써볼 기회가 있었는데, 그 때 접한 이슈 해결방법에 대해 기록한다. 최근 Electron을 사용해 개발을 하던 중 이상한 이슈에 부딪혔다. 그것은 돌연히 input 태그가 먹통이 되면서 아무런 입력이 되지 않는 문제였다. 이 현상은 Electron에서 크롬 개발자 모드를 열거나 잠시 Electron 프로그램 창을 최소화 후 여는 것으로 해결이 되었지만, 매번 이와 같은 문제가 일어났을 때 개발자 모드를 열 수도 없는 노릇이었기에... 원인을 찾아 나섰다. 원인 - window.alert()의 호출 알고 보니 이 이슈는 꽤 오래된 이슈였다.(관련 GitHub 이슈) the input-box lose focus after call window.alert('...') · Is.. 2024. 5. 6. Monotonic Stack에 대하여 알고리즘 문제를 풀다가 처음 마주하는 개념을 알게 되었다. 이름을 알게 된 김에 가볍게 내용을 정리해보았다. Monotonic Stack이란 : 스택 내의 요소들이 단조적으로(Monotonic) 증가/감소하는 스택을 말한다. 아래와 같은 특징을 갖는다고 한다. 한 번 pop된 요소는 다시는 재사용 되지 않는다. 요소를 스택에 추가할 때마나 단조성을 유지한다. → 이러한 특징 때문에 주로 다음/이전의 최소값/최대값(Next/Previous smaller/larger Problem)을 구하는 문제에서 잘 쓰인다. Monotonic Stack의 구현 Monotonic Stack의 구현에는 아래의 과정을 거친다. 아래는 감소하는(Decreasing) 스택을 구하는 과정이다. 기본적으로, 주어진 숫자 목록을 순회.. 2024. 4. 14. 2024 토스뱅크 FE 과제 후기 좋은 기회로 1월에 토스뱅크에 지원하여 과제전형을 진행하는 경험을 하게 되었었다. 떨어진 후 벌써 2개월이 지났는데, 과제에 대해 자세히는 작성할 수 없지만 어떤 경험을 했는지, 무엇을 느꼈는지 간단히 기억 회상 겸 기록 겸 남겨본다. 서류 합격 ~ 과제 준비 이래저래 도전해보자는 마음으로 넣은 서류가 운좋게 합격되어 과제 전형을 진행했었다. 과제 전형을 진행하는 것이 처음이었기에 긴장도 많이 하고, 과제가 어떤 식으로 진행되는지 많이 찾아봤었던 것 같다. React 기반으로 이루어지는 과제였기에 React 및 토스뱅크에서 사용하는 라이브러리까지 이것저것 살펴보며 과제를 준비했다. 과제 진행 과제는 주어진 시간 내에 제시된 요구사항들을 구현한 후 PR을 올리는 것이었다. 과제 내에는 요구사항이 제대로 구.. 2024. 3. 13. 이전 1 2 3 4 ··· 16 다음
