본문 바로가기

전체 글

웹 브라우저에 URL을 입력하면 일어나는 일 by 널널한 개발자 URL과 URI의 차이에 대해 먼저 알아보자. 위치 지정자 vs 식별자 - URL (Uniform Resource Locator): 리소스의 위치를 지정하는 "위치 지정자"입니다.                                                          특정 서버나 데이터베이스 내의 파일 위치를 의미합니다.- URI (Uniform Resource Identifier): 리소스를 식별하는 "식별자"입니다. URI에는 URL과 URN이 포함됩니다.웹 주소 입력 시 URL을 사용하게 되며, 정확한 리소스 위치를 찾는 것이 목표입니다. www.naver.com  URL을 웹 브라우저에 입력한다면?가정1. pc 는 window 운영체제를 사용중이다.2. 공유기를 통해 Internet.. 더보기
Form & User Input What's Difficult About Froms?Handling Form Submission & Validating User InputUsing Built-in Form FeaturesBuilding Custom Solutions What's Difficult About Froms?Form Submission Handling submission is relatively easyEntered values can be managed via stateAlternatively, they can be extracted via refsOr via FormData and native browser features Input Validation Providing a good user experience is tri.. 더보기
Custom Hook Rules of Hooks Why custom Hooks?Creating Custiom HooksUsing Custom HooksRules of Hooks Only call Hooks in Component or Other Hook FunctionsReact Hooks must not be called outside of React component functionsOnly call Hooks on the top levelReact Hooks must not be called in nested code statements (e.g, inside of if-statements) Why custom Hooks?컴포넌트 함수에 들어가는 코드를 감싸고 재사용하기 위함여러곳에서 사용해야 하는 로직에 대해 함수로 .. 더보기
useMemo, useCallback & Data Fetching, HTTP Requests How Does React Update the DOM? and how are component functions executed? mian.jsx 루트 객체 생성 후 앱 컴포넌트를 화면에 렌더링 (리액트를 통해 실행) 모든 컴포넌트 함수는 렌더링 되는 것들만 반환하며,jsx는 결과적으로 js코드로 변환되고, 화면에 렌더될 수 있는 실제 요소로 변환된다.  코드 흐름에 따라 컴포넌트 트리에 순차적으로 추가되며 실행됨. memo() : 컴포넌트 함수를 감싸는데 사용이전값과 현재 값(내부상태)을 비교하여 함수의 재실행을 억제. Don't overuse memo() !Use it as high up in the component tree as possible-> blokcing a component execut.. 더보기
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)라 하며, .. 더보기

티스토리툴바