React

리액트에서 Form 요소의 내부 구성 요소는 Input, Textarea, select 요소 등 어떠한 데이터를 입력하거나 선택하는 요소들로 이뤄진다. 그렇다면 입력하거나 선택된 데이터를 접근하는 방법에는 어떠한 방법들이 있을까?데이터 입력, 선택 요소들의 값에 접근하

리액트 라이브러리를 사용한 브라우저의 렌더링은 어떤식으로 동작할까? 1. Reflow, Repaint로 인한 성능 저하 기존에 HTML, CSS, 순수 JS를 이용한 웹 사이트를 렌더링 할 때 가장 문제가 된 점이 무엇이 있을까? 바로 웹 사이트의 구성 요소를 업

React 프로젝트를 진행하다보면 컴포넌트의 상태관리 혹은 데이터를 저장하기 위한 변수로 useState훅을 자주 사용한다. 이번 포스팅에서는 useState가 내부적으로 간략하게 어떻게 동작하고 Closure과 어떤 관련이 있는지 알아보자.useState훅은 컴포넌트

useState 뜯어보기 1편에서는 ReactCurrentDispatcher.current의 값으로 인해서 useState의 반환값이 정해진다는 걸 알 수 있었다. 그럼 ReactCurrentDispatcher.current에는 어떠한 값들이 정의된 것이고 내부 로직은

React프로젝트를 진행하다보면 사이드 이펙트(Side Effect)를 위한 useEffect훅을 자주 사용할 것이다.예를 들면 서버에서 데이터를 받아오거나, 혹은 함수 내에서 전역변수나 정적 변수를 수정하는 등의 작업을 할 때 useEffect훅 내부에서 사용하는 케

React에서 1개의 부모요소를 반환해야 한다는 조건으로 인해 이를 위한 다양한 방법이 존재하는데 해당 방법들을 배워보고 React하면 빠질수 없는 Fragment개념을 이번 포스팅에서 배워보자.JSX는 컴포넌트에서 반환하는 HTML코드이다.하지만 JSX에는 제한사항이

React에는 컴포넌트를 실제 DOM에 연결시켜주는 Portals기능이 있다. 이번 포스팅에서는 해당 기능에 대해서 알아보고 어떤 용도에 사용하는지 배워보자.컴포넌트 안에 중첩된 요소를 다른 곳으로 옮길 수 있는 React의 기능이다.장점으로는 더 간결한 코드를 작성할

저번 프로젝트에서 유저의 이미지를 업로드 하기 위해 유저로부터 이미지 업로드 받고 해당 이미지를 리사이징하여 컴포넌트에 렌더링, 서버에 전송하였던 과정을 회고하기 위한 포스팅이다.서버부담과 db의 용량이 아주 넉넉하다는 전제가 깔려있다면 이미지 리사이징은 필수적인 과정

프로젝트를 하다보면 외부에 노출하지 맗아야 하는 변수들을 다뤄야 할 때가 있다. 예를 들면 토큰, 외부 서비스 URL, API 키, 데이터 베이스 연결 정보, 보안 키, 서버 구성 정보 등등 이러한 정보들은 외부로 공개될 시 굉장한 곤욕을 치를 상황이 발생할 것이다.

배열로 이루어진 데이터를 처리하다 보면 연속된 "li" 요소를 사용해서 데이터를 나열하여 보여줄 때가 생긴다. 이럴 때 map, filter메서드를 이용해서 데이터를 파싱 하여 사용하는데 "li"요소 안에 key옵션을 정의해 주지 않으면 "key 옵션을 고유한 값으로

React 프로젝트를 진행하다보면 원치 않은 컴포넌트가 재 렌더링 일어나거나 심할 경우 상상하기도 싫은 무한 재 렌더링이 발생할 수 있다. 재 랜더링이 발생하는 조건들이 다양하게 있는데 이번 포스팅에서는 React의 컴포넌트가 재 렌더링 일어날 조건들과 이에 대한 해결

React는 흔히 SPA(Single Page Application)라이브러리이다. 하나의 HTML를 통해서 페이지 전환관 다양한 콘텐츠를 제공하는데 이번 포스팅에서는 React에서 제공하는 Router기능과 Router를 정의하는 방법에 대해서 간단하게 알아보자.웹

만약 네비게이션 바 같은 모든 페이지에 공통적으로 렌더링 되어야하는 컴포넌트들을 처리할때 보통 어떻게 할까? 일반적으로는 레이아웃같은 컴포넌트들을 만들어서 전체 영역에 적용시키는 방법을 많이 선택할 것이다. 이번 포스팅에서는 만든 레이아웃을 Route에 한번만 적용시켜

웹 애플리케이션은 단순한 라우터 전환없이 도메인 자체로만 구성하여 단순한 컨텐츠를 제공할수도 대부분의 사이트는 다양한 경로를 통해서 여러가지 컨텐츠를 제공하게 한다. 다양한 경로에 접근하기 위해서 React는 Link라는 컴포넌트를 제공하는데 해당 컴포넌트에 대해서 알

React에서 이미지 파일을 저장하는 위치는 크게 "src", "public"디렉토리로 나뉜다. 이번 포스팅에서는 "src"디렉토리에 이미지를 보관할 때, "public"디렉토리에 이미지를 보관할 때 차이를 알아보도록 하자.npx create-react-app으로 Re

저번 포스팅에서는 JavaScript의 geolocation api를 이용하여 현재위치의 위도, 경도를 가져오는 작업을 하였고 이번 포스팅에서는 React에서 Naver Map api등록과 브라우저에 Naver Map 렌더링 하는 방법을 알아보자.Naver Map을 이

HTML요소들이 포함된 문자열을 데이터를 클라이언트로 보내줬을 때 해당 HTML요소들을 적용시킬 수 있는 방법이 뭘까?백엔드에서 보내준 뉴스 데이터에 위와같이 &앰퍼센트 문자와 <b>부동산<b>와같이 HTML요소를 포함한 문자열 데이터를 처리해야 하는 문제가

현재 진행하는 프로젝트에서 지도를 렌더링 하여 해당 지도 영역 안에 아파트 마커를 찍어야 하는 기능을 개발해야 한다. 다만 최근 면접에서 해당 기능에 대해 "네이버지도 API를 활용하지 않고 구현하는 방법"에 대해 질문을 받았으나 제대로 답변하지 못하여 해당 방법에 대