All

[우당탕탕한 첫 사이드 프로젝트] - My-Rss-Feed 회고

🤔프로젝트 기획 및 시작 개발에 대한 공부를 하다보면 개인적으로 흥미롭고 유익한 정보들이 많은 블로그나 회사 공식 페이지들이 많지만 뉴스 피드처럼 한 곳에 모아서 보는게 아닌 꾸준히 찾아가서 최신 글이 나왔나 봐야하는 번거로움이 있다. 이러한 귀찮음을 해결하기 위해서 RSS 방식으로 XML 주소만 등록시켜 놓으면 매번 사이트를 방문하지 않아도 신착정보를 볼 수 있게 자동으로 업데이트 해 주는 개인 개발 구독 사이트를 만들어 보면 어떨까 생각했다. 본격적으로 Next를 공부하면서 기존 React에 적응했던 나로서는 알아야 할 다양한 개념과 처음 써볼려고 하는 기능들에 공부를 해야 했기 때문에 수많은 구글링과 공식 문서를 보다보니 시간이 생각보다 오래 걸렸다. 우당탕탕한 첫 개인 사이드 프로젝트 회고를 시작..

[Next.js] 정적 사이트에 다크 모드 구현하기

굳이 다크모드를?? 대부분의 웹사이트는 다크모드를 지원하지는 않지만 요즘 들어 많은 사이트들이 다크모드를 지원하기 시작했다. 굳이 어두운 테마를 추가하는 이유가 뭘까? 우리가 어두운 곳에서 핸드폰을 볼 때 핸드폰 밝기를 낮추면서 보는 이유는 우리의 눈이 예민하기 때문이다. 계속해서 밝은 빛을 어두운 환경에서 비추게 되면 눈이 쉽게 피로해지며 눈 건강에도 좋지 않다. 또한, 나부터도 어두운 테마를 조금 더 선호하기 때문에 웹 접근성을 높이기 위해서 추가적인 리소스를 넣으면서까지 다크 모드를 설정할 수 있도록 구현해야 한다. 이 글은 Next.js에서 다크모드를 적용한 방법에 대해 정리할려고 한다. Next.js + Typescript + Styled-Components를 사용하여 어떻게 구현했는지 보자. ..

[Next.js] Sentry.io로 프론트엔드 모니터링 하기

가볍게 사용할 수 있지만 다양한 에러를 직관적으로 분석해주며, 알림 설정을 통해 어떤 문제가 생겼는지 알려주고 처리 할 수 있는 Sentry를 알아보자 프론트엔드 모니터링 프론트엔드에서의 오류는 크게 데이터 영역 과 화면 영역 이 두 가지 영역에서의 오류, 그리고 예상할 수 없는 네트워크 이슈나 다양한 런타임 오류로 나눌 수 있다. 이러한 오류는 언제든지 발생할 수 있는 오류이지만 개발자에게 이런 오류를 모두 예측하는 것은 거의가 아니라 불가능 한 일이다. 웹 사이트가 더욱 강력해지고 복잡해짐에 따라 성능 유리 관리가 점점 더 어려워지고 있다. 사용자는 사이트에서 경험하는 것을 기반으로 그 기업의 품질을 평가하기 때문에 사이트가 중단되거나 오류가 발생한다면 그 기업의 신뢰가 떨어질 수 있다. 프론트엔드 ..

[Next.js] Next with React-Query

리액트에서 엄청 유용하고 매 프로젝트마다 사용했던 React-Query. React-Query는 아직도 가장 핫한 라이브러리라고 생각한다. React-Query를 통해 get과 post 방식의 query를 손쉽게 사용할 수 있으면서 데이터를 손쉽게 cache 할 수 있다는 점에서 많은 기업들이 상태관리를 위해 도입하는 무척이나 매력적인 라이브러리라고 할 수 있다. 계속 강조하지만 Next.js를 유명하게 만든 가장 큰 요소 중 하나는 SSR이라고 생각하는데, 아쉽지만 React-Query의 hook의 경우 SSR이 아닌 CSR 방식으로 데이터를 가지고 온다. 이번 글에서는 React-Query의 데이터를 SSR로 사용할 수 있는 2가지 방식을 지원한다. 직접 데이터를 prefetch해와서 initialD..

[Next.js] Pre-Rendering

Pre-Rendering에 들어가기 전, SPA의 특성을 먼저 생각해보자. SPA (Single Page Application)은 처음이 느리고 그 다음부터 빠르다. SPA에서는 사용자가 실제 컨텐츠를 보려면 서버로 요청을 한 뒤에 HTML, JS, ASSETS 파일을 다 다운 받기 전 까지 대기해야한다. 그리고 다 다운받고 난 뒤 JavaScript를 이용해서 매 화면의 컨텐츠를 동적으로 바꾼다. 이러한 것들이 SPA를 느리게 하는 이유가 되는데, 이런 문제를 해결하기 위해서는 SSR위에 HTML 파일을 반환해줄 서버를 둬야한다. Next.js에서는 이런 문제를 Pre-Rendering으로 SSR보다 복잡하지 않은 비용으로 해결할 수 있다. Next.js의 Pre-Rendering React는 CSR로..

20장 코드 최적화 기법

마지막 장에서는 코드 최적화 기법 몇 가지를 소개한다. 다음의 사고 전력 (mental strategy)은 지난 몇 년간 코드를 더 효율적으로 바꾸는 데 큰 역활을 했다. 20.1 전제 조건: 현재 빅 오 파악하기 최적화 기법으로 들어가기 전에 알고리즘 최적화에 앞서 반드시 해야 할 일은 현재 코드의 효율성을 파악하는 것이다. 즉, 현재 얼마나 빠른지 알아야 알고리즘을 더 빠르게 만들 수 있기 때문이다. 20.2 시작점: 상상할 수 있는 최상의 빅 오 “상상할 수 있는 최상의 빅 오”(가능한 최상의 실행 시간)를 생각하는 것은 모든 알고리즘에 유용하며, 반드시 최적화 프로세스의 첫 단계여야 한다. 배열의 각 항목을 출력하는 함수라면 항목 N개를 각각 처리해야 하므로 최상의 빅 오는 O(N)이다. 알고리즘..

19장 공간 제약 다루기

알고리즘의 효율성 척도에는 알고리즘이 얼마나 빠른지 시간 복잡도만 있는게 아니라 공간 복잡도 또한 존재한다. 즉, 알고리즘이 얼마나 많은 메모리를 소모하는가가 유용할 수 있다. 메모리 제한이 있다면 공간 복잡도가 중요한 요인이다. 대량의 데이터를 다루거나 메모리가 제한된 작은 장치를 프로그래밍할 때는 정말 중요하다. 19.1 공간 복잡도의 빅 오 시간 복잡도를 표현할 때와 마찬가지로 빅 오 표기법을 사용해 공간 복잡도를 표현한다. 공간 복잡도, 메모리 소모 관점에서 핵심 질문은 **“데이터 원소가 N개일 때 알고리즘은 메모리 단위를 얼마나 소모할까?”**이다 function makeUpperCase(array) { let newArray = []; for(let i = 0; i < array.length..

[NextJS] Hydrate?

Next.js 프레임워크의 동작원리를 알고있다면 Hydrate에 대해서는 이미 익숙하게 들었을 거다. 하지만, 놓치기도 쉬운 개념인 만큼, 이번에 제대로 공부하고 정리 해보려고 한다. 일단 React에서 렌더링 되는 과정과 Next에서 렌더링 되는 과정의 차이점에 대해서 정리 해 보자. React.js HTML과 JS파일을 한꺼번에 보내고 클라이언트에서 JS 코드를 통해 웹 화면을 렌더링한다. React는 JS파일만을 이용하여 웹 화면을 구성하는 원리를 가지고 있기 때문에 실제 HTML 코드는 안에 내용이 하나도 없는 상태이다. (CSR이 SEO에 적합하지 않은 원리) // public/index.html 단순 뼈대만 있는 HTML document와 Js 파일들을 클라이언트로 모두 보낸 뒤, 클라이언트 ..

18장 그래프로 뭐든지 연결하기

페이스북 혹은 인스타 같은 소셜 네트워크에서 친구 관계는 상호적이다. 이를 구현하기 위해 2차원 배열을 사용한다면 특정 유저의 친구를 찾기 위해 목록 내 관계를 일일히 확인해야 하고, 이는 O(N)이 걸리는 매우 느린 방법이다. 이때 그래프라는 자료 구조를 사용하면 O(1) 시간 만에 찾을 수 있다. 18.1 그래프 그래프는 관계에 특화된 자료 구조로서 데이터가 서로 어떻게 연결되는지 쉽게 이해시켜 준다. 소셜 네트워크의 예시에선 한 사람은 한 노드로, 사람 간 친구 관계는 선으로 표현한다. 18.1.1 그래프 대 트리 트리도 그래프의 한 종류다. 두 자료 구조 모두 서로 연결되는 노드로 구성된다. 모든 트리는 그래프지만, 그래프가 모든 트리는 아니다. 트리로 규정되는 그래프는 사이클이 있을 수 없으며,..

17장 트라이(trie)해 보는 것도 나쁘지 않다

스마트폰의 자동 완성 기능이 어떻게 동작하는가? 단어들 모두를 배열에 저장했다면 O(N)으로 느릴 것이고, 해시 테이블은 단어를 통째로 해싱해서 키로 삼아야 하므로 사용할 수 없다. 정렬된 배열을 사용한다면 O(logN)로 빨라질 것이다. 하지만 특수한 트리 기반 자료 구조를 사용하면 O(1)의 속도로 원하는 단어에 접근할 수 있다. 트라이는 자동 완성이나 자동 수정 같은 중요한 기능을 지원한다. 17.1 트라이 트리의 한 종류인 트라이는 자동 완성 같은 텍스트 기반 기능에 이상적이다. 트라이는 추출을 뜻하는 retrieval에서 왔으니 트리로 발음해야 옳지만, 트리라는 발음이 모든 트리 기반 자료 구조에 보편적으로 쓰이므로 혼동을 막고자 트라이라고 발음한다. 17.1.1 트라이 노드 대부분의 트리처럼 ..