전체 글 썸네일형 리스트형 Fullstack React Apps with Next.JS Next.js에 대해 알아보자!! What is Next.JS & Why Would You Use it?Routing, Pages & Server ComponentsFetching & Sending DataStyling, Image Upload & Managing Page Metadatanpx create-next-app@latest * 필자는 Next.js, ts기반으로 사용했다는 것을 알려드립니다. (jsx -> tsx) 파일 기반 라우팅과 리액트 서버 컴포넌트의 이해 보호된 파일명중요: 이 파일명들은 app/폴더(부 폴더 포함) 내부에서 생성될 때만 보호됩니다. app/폴더 외부에서 생성될 경우 이 파일명들을 특별한 방식으로 처리하지 않습니다.다음 목록은 NextJS에서 보호된 파일명이며 이 섹션.. 더보기 React - 차트 그리기 (ECharts) React환경에서 여러 그래프를 그리는데, Rechart, Chart.js를 쓰다가 ECharts를 사용하기로 했다.처음 들어보는 라이브러리였기에, 조사해보고자 한다. Apache Echarts란?데이터 시각화를 위한 오픈 소스 자바스크립트 라이브러리로, Apache Software Foundation에서 제공한다. 다양한 차트 유형을 지원하며, 대량의 데이터를 빠르게 렌더링하기에 적합하다.반응형 디자인을 지원하며, 여러 상호작용 기능을 추가할 수 있다.다만 러닝 커브가 높다는 단점이 있다. React 환경에서 ECharts 설치npm install --save echarts-for-reactnpm install --save echarts `echarts` is the peerDependence of .. 더보기 비동기 통신 - Ajax, Axios, Fetch 비동기 작업과 자바스크립트 비동기 통신에 대해 알아보자.비동기 통신이란?비동기 통신이란 데이터를 주고받는 동안 다른 작업을 수행할 수 있도록 하는 방식이다.자바스크립트에서는 다양한 비동기 통신 방법을 제공하여 개발자가 원하는 방식으로 서버와의 데이터를 주고받는다.AJAX, jQuery, Axios, Fetch API특성AjaxAxiosFetch복잡도복잡, 콜백 지옥간단, Promise 기반간단, Promise 기반에러처리콜백에서 처리try catchtry catchCross-Origin 지원제한적 (CORS문제)자동적으로 CORS 설정CORS 설정 필요모듈 설치 여부내장된 XMLHttpRequest 설치 필요내장된 API Ajax란 Asynchronous Javascript And Xml(비동기식 자바.. 더보기 08. 좋은 리액트 코드 작성을 위한 환경 구축하기 [모던 리액트 Deep Dive] ESLint를 사용해서 좋은 코드를 작성할 수 있는 환경을 구축하고, 리액트 테스트 라이브러리를 사용해보자! ESLint를 활용한 정적 코드 분석버그와 예기치 못한 작동을 방지하기 위한 가장 쉬운 방식 : 정적 코드 분석 정적 코드 분석이란?코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(버그를 야기하는 코드)를 찾아내어 사전에 수정하는 것을 의미. ESLint : JS 생태계에서 가장 많이 사용되는 정적 코드 분석 도구 ESLint 살펴보기ESLint 동작과정자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화한다. (기본값으로 espree parser를 사용)2번에서 구조화한 트리를 AST(Abstract Syntax Tree)라 하며, .. 더보기 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)를 실행한다. 빈 배열을 준다면, 최초 컴포넌트 실행 완료 후 .. 더보기 이전 1 2 3 4 5 6 7 다음
