본문 바로가기

전체 글

07. 크롬 개발자 도구를 활용한 애플리케이션 분석 [모던 리액트 Deep Dive] 리액트에서 발생하는 문제가 아닌 버그와 디버깅 이슈를 관리하는 방법.js 코드를 잘못 작성하거나, 메모리, 네트워크, 소스등 일반적인 웹 애플리케이션 관련 디버깅    => 브라우저 개발자 도구  크롬 개발자 도구란?마우스 우클릭 후 "검사" 클릭크롬 개발자 도구에서 웹사이트를 제대로 디버깅하고 싶다면 시크릿 모드를 권장. (브라우저 확장 프로그램이 디버깅에 방해가 될 수 있기에) 요소 탭좌측에서는 현재 웹 페이지를 구성하고 있는 HTML, CSS등의 정보를 확인할 수 있다.직접 코드를 수정하여 웹페이지에서 어떻게 보이는지 빠르게 확인할 수 있다.코드에 의해 클래스나 속성값이 동적으로 제어된는 DOM이 있다면, 중단점을 사용해 디버깅 가능 우측에서는 요소 정보들을 확인할 수 있다. (DOM관련 모든 정보.. 더보기
06. 리액트 개발 도구로 디버깅하기 [모던 리액트 Deep Dive] 리액트로 개발된 애플리케이션의 디버깅을 돕기 위한 리액트 개발 도구인 react-dev-tools에 대해 살펴보자. 리액트 개발 도구란?웹 개발 환경에서 가장 편리하게 사용할 수 있는 방법은 브라우저 확장 프로그램을 사용하는 것이다. 리액트 개발 도구 설치본인이 주로 개발하는 브라우저에 설치 (필자는 chrome기준으로 이야기하겠다.)  React Developer Tools - Chrome 웹 스토어Adds React debugging tools to the Chrome Developer Tools. Created from revision ccb20cb88b on 7/3/2024.chromewebstore.google.com   우측 상단에 리액트 로고를 확인해 볼 수 있다.리액트 개발 도구가 접근할 .. 더보기
05. 리액트와 상태 관리 라이브러리 [모던 리액트 Deep Dive] 상태 관리가 왜 필요한가? 상태 관리 라이브러리의 필요성과 작동 방식에 대해 알아보자.  상태 관리는 왜 필요한가?웹을 개발할 때 이야기하는 상태란 ? 어떠한 의미를 지닌 값. 애플리케이션 시나리오에 따라 지속적으로 변경 가능 예시UIURLform - loading, submit, disabled, validation 서버에서 가져온 값애플리케이션 전체적으로 관리해야 할 상태가 있다면?각 상태에 따라 다양한 요소들이 그에 맞는 UI를 보여주어야 함상태를 어디에 둘것인가? (전역변수/클로저)상태가 유효한 범위는 어떻게 제한할것인가?상태의 변화에 따라 변경되는 자식 요소는 어떻게 상태의 변화를 감지할 것인가?Tearing 현상 ( 상태의 일관성이 깨져서 UI가 정상적으로 동기화되지 않는 문제)를 어떻게 방지.. 더보기
Side Effects & useEffect [React - The Complete Guide 2024] Side effects are "tasks" that don't impact the current component render cycle. 사용자의 위치는 브라우저의 메소드로 부터 받을 수 있다. navigator.geolocation.getCurrentPosition position 객체를 통해 경도나 위도를 포함한 데이터를 넘겨준다. 이러한 작업들은 jsx를 반환하는 것이 아니며, 컴포넌트의 주 목적과는 다르기에, 부수효과 (side effect)라고 불린다. useEffect는 반환값이 없으며, 2개의 인자를 필요로 한다. 1. 부수효과 + 묶어줄 함수 2. dependency(의존성) 배열 의존성 배열이 변할 때, 1 (Effect)를 실행한다. 빈 배열을 준다면, 최초 컴포넌트 실행 완료 후 .. 더보기
CNN 이란? 오늘은 이미지 및 영상 인식을 위한 딥러닝의 기본 모델인 CNN에 대해 알아보도록 하겠다.(다만, 필자는 시계열 데이터를 분석하기 위한 사전 조사이다.) CNN Convolutional neural network의 약자로, 합성곱 계층을 쌓아 만들어낸 모델.주로 이미지와 같은 시각적 데이터를 처리하는 데 탁월한 성능을 보이는 신경망 모델이며, 시계열 데이터 분석이나 자연어 처리에도 적용할 수 있다. (데이터 패턴을 찾는데 최적화)  CNN의 구조 CNN은 입력계층과 출력계층, 그리고 그 사이의 여러 은닉 계층으로 이루어져 있다.각 계층이 영상 및 시계열 데이터에서의 서로 다른 특징을 검출해낼 수 있다. 은닉 계층에서는 해당 데이터의 고유한 특징을 학습한다는 의도로 데이터를 변경시키는 연산을 하는데, 주로.. 더보기
Grafana 설치 및 InfluxDB 연동 Grafana란?" Grafana is the open source analytics & monitoring solution for every database."라고 공식 홈페이지에서 소개하고 있다.InfluxDB, Prometheus, Elasticsearch, MySQL등과 연동하여 실시간 데이터를 시각적으로 표현할 수 있다.주요 기능으로는 대시보드 생성, 알림 설정등이 있으며,  이를 통해 시스템 성능 모니터링, 지표 추적 등에 활용한다.Grafana는 커스터마이징이 가능하고 다양한 플러그인도 지원하고 있다. (Grafana의 Frontend는 typescript, Backend는 Go언어로 작성되었다고 한다.) Grafana 설치 Download Grafana | Grafana LabsOvervi.. 더보기
04. 서버 사이드 렌더링 [모던 리액트 Deep Dive] 서버 사이드 렌더링이란 무엇인지, 싱글 페이지 어플리케이션이란 무엇인지.그리고 최근 React 개발자들이 가장 많이 쓰는 Next.js에 대해 간단히 알아보자. SPA vs SSRSPA란?Server-Side Rendering : SSR Single Page Application : SPA 서버 사이드 렌더링에 반대되는 개념인 싱글 페이지 어플리케이션에 대해 먼저 살펴보자.  Single Page Application이란렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식최초 페이지를 불러온 이후 페이지 전환이 history.pushState와 history.replaceState로 이루어짐. 즉, 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 .. 더보기
Context API & useReducer [React- The Complete Guide 2024] 더 복잡한 상태관리를 해보자...! 리액트 개발자는 주로 다수의 컴포넌트로 이루어진 앱을 만들어야 하는데, 앱이 복잡할수록, 더 많은 컴포넌트를 사용하게 된다. 보통 컴포넌트 트리로 구성이 되어있는데, 이 과정에서 상태관리가 필요하다..!! Prop Drilling을 통해 다수의 컴포넌트를 거쳐 속성을 전달할 수 있다.하지만 대부분의 컴포넌트가 그 데이터를 직접적으로 필요로 하지 않고, 하위로(목표까지) 전달해주는 역할만 수행한다.=> 원하는 공유데이터를 얻기 위해 여러 컴포넌트를 거치게 되고,     이러한 방식은 컴포넌트들의 재사용성을 어렵게 한다! (+코드도 더 많이 작성해야 함..) 해결방식Component CompositionContext APIuseReducerComponent Composit.. 더보기

티스토리툴바