Random33 네트워크 패널 사용법 개발을 처음 배울 때는 그냥 기능이 잘 작동하는 데에만 초점을 맞춰 프로젝트를 진행했었지만, 이런저런 경험이 쌓이다 보니 자연스럽게 유저의 입장에서 개발을 진행하게 되는 듯하다. 그중 중요한 한 가지 고민되는 부분은 이렇게 코드를 짜면 유저입장에서 느리다고 생각되지 않을까? 와 같은 고민이다. 예를 들어 지금 진행하고 있는 토이프로젝트에서 화면을 새로고침 할 때마다 데이터를 새롭게 가져오는 방식이 과연 유저한테 좋은 방식일까? 이런 방식이 유저 입장에서 느리다고 생각되지는 않을까? 등과 같이 고민에 고민을 더하게 되는 듯하다. 오늘은 과연 내 웹앱이 느린지 안느린지 판별하는 방법에 대해 알아보려고 한다. How to Effectively Inspect Network Activity in Chrome De.. 2022. 4. 24. [Firebase] 소셜로그인 후 비동기적 처리 오늘 토이 프로젝트를 진행하다 결국 우려하던 일이 발생하고 말았다. Firebase의 구글 로그인 기능을 구현해 사용자가 로그인하면 사용자의 단어장 데이터를 받아오는 기능을 구현해야 했는데, 사실 관련 부분은 나중에 생각해야지~ 하고 미뤄두었다가 오늘 사용자 로그인을 하며 단어장을 보려고 하니 문제가 생겼다. 내가 의도했던 단어장 데이터를 가져오는 절차는 다음과 같았다. 1. 사용자가 google 로그인 버튼을 클릭한다. 2. google 로그인 페이지로 리디렉션 된다. 3. 로그인을 한다. 4. 다시 애플리케이션의 화면으로 돌아온다. 5. 사용자의 auth/state를 업데이트한다. 6. 사용자의 단어장 데이터를 firestore로부터 가져온다. 문제가 생긴 원인으로는 5번과 6번이 동기적으로 처리되었.. 2022. 4. 16. [Firebase] signOut API로 로그아웃 해야하는 이유 오늘 토이 프로젝트를 진행하면서 firebase 인증 기능을 이용하다가 로그아웃 기능도 함께 구현을 시도했다. 그러다가 문득 드는 생각 그냥 firebase로부터 얻은 token 데이터만 없애버리면 로그아웃이지 않을까? firebase api 문서에는 signOut api가 있는데 이걸 굳이 써야 할 이유가 있을까? 그래서 같이 프로젝트를 진행하고 있는 동료분께 아주 우매한 질문을 드려봤다. Firebase로 부터 인증토큰을 얻는데 성공했습니다. 근데 Firebase api 문서에 signOut api가 별도로 있는걸 발견했습니다. 사용자가 로그아웃 하도록 하려면 반드시 해당 api를 사용해야 하나요? 이전 프로젝트에서는 그냥 로컬에 있는 토큰 데이터를 삭제시켜서 로그아웃 했거든요. 우매한 질문이지만 친.. 2022. 4. 14. 데스크탑 local 환경 모바일로 접근하기 토이 프로젝트를 하면서 카드가 플립 되는 애니메이션을 적용을 했다. 그런데 이게 웬걸 데스크탑 브라우저에서는 이상 없이 잘 작동이 되는데, 모바일 환경(사파리)에서는 애니메이션에 문제가 발생했다. 아무래도 CSS 키워드가 사파리에서는 다른 부분이 있는 듯한데... 이를 찾아내려면 코드를 수정할 때마다 디플로이를 해서 작동 여부를 확인해야 하는 번거로움이 발생했다. 그래서 그냥 로컬 호스트에 모바일로 접근할 수 없을까? 라고 생각하던 와중 잘 설명된 블로그를 발견하여 번역해 옮겨본다. Dev Tip: How to view localhost web apps on your phone 필자는 웹 어플을 만들 때 항상 모바일 최적화를 한다. 배포 이전에 모바일로 프로젝트를 확인하는 것은 필수적인 절차다. 종종 크.. 2022. 4. 14. 메모리 누수란 무엇이고 어떻게 해결할까 이번 주 기술면접을 보면서 들은 질문 중에 메모리 누수가 발생하면 어떻게 찾아낼 건가요?라는 질문이 있었는데, 한 번도 생각해본 적 없는 주제라 많이 당황했던 기억이 난다. 생각해보니 대규모 애플리케이션 서비스를 제공하는 업체 입장에서는 사소한 메모리 누수도 민감하게 작용할 수 있을 테니 주의해서 개발할 텐데 그 부분에 대해 미처 생각해보지 못했다니 앞으로는 좀 더 능동적인 학습이 필요할 것 같다. 여하튼 오늘은 메모리 누수가 발생하면 어떻게 찾는가에 대해 알아보자. 우선은 메모리 누수 발생원인과 고의적으로 메모리 누수를 만드는 법에 대해 잘 설명된 글을 번역해 옮겨본다. The Secrets of Memory Leaks in JavaScript You Don’t Know 혹시 인터뷰 도중 이런 질문을 .. 2022. 4. 6. MVC 모델이란 MVC 아키텍처 패턴은 복잡한 애플리케이션 개발을 훨씬 다루기 쉽도록 해준다. 그리고 많은 수의 개발자들이 동시에 일할 수 있도록 한다. 내가 처음 MVC 패턴에 대해 배울때에는 관련 영역에 대해 상당히 위화감을 느꼈었다. 그리고 실제로 적용하면서 더욱 그러한 느낌을 받았다. 하지만 조금 뒤로 물러나 MVC에 대해 집중해서 그것이 어떤 목적을 가지고 있는지 이해한다면 이 패턴을 실제 어플에 적용하기 훨씬 쉬워질 것이다. MVC 모델이란 MVC는 모델-뷰-컨트롤러의 줄임말로 아래와 같이 정의할 수 있다. Model: 모든 데이터 로직을 가지고 있는 백엔드 View: 프론트엔드 혹은 GUI Controller: 어떻게 데이터가 디스플레이되어야 할지 컨트롤하는 애플리케이션의 뇌 MVC의 개념은 데스크탑 애플리.. 2022. 3. 29. [Web] SSR과 CSR SSR과 CSR 개념은 사실 이해하기 간단해서 그렇게 줄줄이 나열해서 작성하기보다 아래와 같이 정리해서 보는 게 더 편할 것 같다. SSR Server Side Rendering 서버로부터 완전하게 만들어진 HTML 파일을 받아와 페이지 전체를 렌더링하는 방식 장점: SEO 최적화/ 최초 페이지 렌더링 속도가 빠름 단점: 화면 깜빡임/ 서버 부담 CSR Client Side Rendering 최초 로딩시 HTML을 비롯한 CSS, javascript 등 각종 리소스들을 받아와 자바스크립트를 통해 동적으로 렌더링 하는 방식 장점: 필요한 부분만 데이터를 요청해 받아오기 때문에 서버 부담이 낮고 페이지 전환이 빠름 단점: 최초 로딩이 오래 걸림/ SEO 문제 2022. 3. 28. [CORS] CORS 뽀개기 CORS Cross-origin resource sharing (CORS)란 외부 도메인의 자원에 제한적으로 접근할 수 있도록 하는 브라우저 메커니즘을 뜻한다. SOP에 유연성을 더하는 역할을 한다. 하지만 만약 웹사이트의 CORS 정책이 조악하게 설계되었다면 잠재적으로 크로스 도메인 공격을 받을 가능성이 있다. CORS는 CSRF와 같은 공격을 막는 용도가 아니다. Same-Origin Policy SOP란 외부 소스 도메인 자원과 교신하는 것을 막는 정택을 말한다. SOP는 다른 유저의 개인정보를 탈취하는 등 악의적 크로스 도메인 상호작용의 위험성을 막기 위해 고안되었다. Relaxation of the SOP SOP는 CSRF와 같은 공격을 막는 데는 효과적이었지만, 다른 도메인 리소스 접근을 막아.. 2022. 3. 25. [Big O] 데이터 크기에 따른 시간 복잡도 코테를 준비하면서 꼭 알아야할 개념 Big O! 자세한 개념은 이미 알고 있을테니 시험장에 이것만 알고가자! 데이터 크기 제한 예상되는시간 복잡도 n ≤ 1,000,000 O(n) or O (logn) n ≤ 10,000 O(n2) n ≤ 500 O(n3) [표] 데이터 크기에 따른 시간 복잡도 2022. 3. 24. 자바스크립트 파일을 브라우저에 한번에 로딩하면 어떻게 될까? 자바스크립트 파일을 브라우저에 한 번에 로딩하면 어떻게 될까? 답은 위의 짤이 잘 설명해주는 듯 하다. 정답은 "자바스크립트를 읽어들이느라 자바스크립트 아래의 HTML 파싱을 중단하게 되어 DOM구성을 차단당한다". 이렇게 되면 두 가지 문제가 발생한다. 1. 유저입장에서는 웹사이트가 반응을 하지 않으니 에러가 난 줄 알고 이탈을 한다. 2. 만약 자바스크립트가 아직 구성되지 않은 DOM을 이용해야 하는 경우이거나 아직 파싱 되지 않은 자바스크립트 코드에 의존적이라면 에러가 발생한다. 하지만...! 이런 상황을 해결하는데 도움이 되는 async와 defer 속성이 있다! async 위처럼 async 속성을 부여하면 스크립트를 읽어들이는읽어 들이는 동안 DOM 구성을 멈추지 않는다. 그리고 스크립트를 읽어.. 2022. 3. 19. Axios 요청과 fetch 요청의 차이 현재 작업 중인 프로젝트에서 우리 팀은 클라이언트 서버 간 요청 방식을 axios로 통일하기로 합의하였다. 그러다 문제를 겪고있던 기능을 stack overflow에서 친절하게 설명한 글을 읽게 되었다. 해당 코드를 사용하면 모든 것이 해결되는 것이었으나... 문제는 fetch함수를 사용해 설명을 했기 때문에 작업 중인 어플에서 사용하려면 axios로 변경을 해줘야 하는 상황이었다. 사실 그냥 fetch로 사용해버릴까... 하다가 fetch를 axios로 변경하는 방법을 몰라서 fetch를 사용한다면 자존심이 용납을 못하는 것이기에 이번 기회에 한번 fetch와 axios의 차이점과 변환 방법을 알아보았다. fetch 예시 const upload = await fetch (url, { method:"PU.. 2022. 3. 5. [AWS] https 배포하기 이전 프로젝트를 진행하면서 로컬 환경에서는 https를 이용해 웹 애플리케이션을 제작했었는데, 막상 AWS를 통해 https로 배포를 하려고 하니 여러가지 문제가 발생하면서 단체 멘붕에 빠진 적이 있었다. 결국 코드를 뜯어고쳐 http로 배포를 한 슬픈 기억이... 또르르 그래서 이번 프로젝트는 아예 프로젝트 초반부터 미리 배포를 진행하며 어플리케이션 제작과 배포를 같이 병행해 나가는 방식으로 프로젝트를 진행하게 되었다. HTTPS 이해 배포에 있어서는 통신프로토콜에 대한 이해가 절대적으로 필요하다. 만약 https에 대한 전체적인 이해가 없다면 아무리 다른 사람의 블로그를 읽으며 따라 하더라도 결국 멘붕에 빠지는 순간이 올 것이다. 필자가 그랬다. 그래서 일단은 https에 대한 간단한 이해를 하고 넘.. 2022. 2. 12. 이전 1 2 3 다음
