개발공부/React
-
[React] fetch와 axios개발공부/React 2024. 3. 25. 19:23
본 글은 리액트에서 네트워크 통신을 가능하게 해주는 fetch와 axios에 대해 다룬 내용입니다 목차 fetch axios fetch JS 내장 라이브러리 Promise 기반의 인터페이스를 사용해 비동기적으로 요청을 처리 try { let response = await fetch(url); if (!response.ok) { throw new Error('Network response was not ok'); } let data = await response.json(); console.log(data); } catch (error) { console.error('Fetch error:', error); } axios Promise 기반의 API를 사용해 비동기 요청 처리 HTTP 요청과 응답을 쉽게 ..
-
[React] useState, useReducer hook개발공부/React 2024. 3. 2. 16:24
본 글은 리액트에서 사용하는 hooks 중 useState, useReducer에 대해 다룬 내용입니다. 목차 차이점 useState란? useReducer란? 차이점 useState useReducer 용도 단순한 상태관리 복잡한 상태관리 인터페이스 하나의 상태 값, 그 값을 변경하는 함수 반환 리듀서와 디스패치 함수 반환 가독성과 유지 보수성 직관적이라서 단순한 상태 관리에 적합 코드 가독성을 향상 복잡한 상태 업데이트 로직 분리 가능, 유지 보수성 향상 액션에 따라 상태가 변경되어야 하는 경우 간단히 정리하면, useState는 단순한 상태 관리에 사용, 간단한 컴포넌트에서 유용, useReducer는 복잡한 상태 관리에 사용, 상태 업데이트 로직 분리가 가능해 코드 가독성과 유지 보수성 향상 가능..
-
실시간 채팅 구현개발공부/React 2024. 1. 24. 21:10
본 글은 React에서 Websocket & STOMP 를 사용해 실시간 채팅을 구현한 내용입니다. Websocket, STOMP 모두 프로토콜이다. (자세히 알고 싶다면 링크를 타고 들어가서 확인해보면 될 거 같다.) 두 가지 프로토콜이 어떤 특징을 가지고 있어서 실시간 채팅을 구현할 수 있는지 간단하게 정리해봤다. Websocket 양방향 통신을 지원하며, 지속적인 연결을 통해 실시간 데이터 전송을 가능하게 해줌 STOMP 메시지 기반의 프로토콜로 쉬운 구현과 클라이언트-서버 간의 효과적인 양방향 통신을 제공 실시간 채팅 구현 두 프로토콜의 특징을 알아봤으니 이제 실제로 활용해서 기능을 구현해보려고 한다. 먼저 단계를 설명하자면 아래와 같다. SockJS 객체를 생성합니다. (웹소켁 연결을 위한 객체..
-
상태 관리개발공부/React 2024. 1. 16. 20:36
여러 가지 프로젝트를 진행하면서 내가 제일 많이 했던 고민이 바로 "상태 관리"이다. 상태 관리를 신경써야 하는 이유는 다양하지만 내가 중요하게 받아드리는 이유는 아래와 같다. 중앙 상태 관리를 통해 컴포넌트 간의 데이터 흐름을 쉽게 관리 가능 코드 유지 보수성 향상 상태의 불변성을 유지함으로서 예측 가능하고 안정적인 어플리케이션 구현 가능 어떻게 상태를 관리하는지에 따라 프로젝트의 성능이 달라진다. 위와 같은 이유로 프론트엔드 개발자는 특히 상태 관리를 잘해야 한다고 생각한다. (직접적인 영향이 있기 때문에) 그래서 오늘은 상태 관리가 뭔지, 어떤 방법으로 하는지에 대해 자세히 알아보려고 한다. 상태란? 우선 상태에 대해 찾아봤다. 어플리케이션 내에서 변경 가능한 데이터 리액트에서는 컴포넌트 내에서 관..
-
DOM에 직접 접근하기 (useRef)개발공부/React 2023. 10. 26. 15:55
오늘은~! useRef에 대해 자세하게 공부해보자. 소분소분 프로젝트에서 회원가입을 담당했는데 정말 고민이 많았다. 실시간 유효성 검사하여 사용자에게 안내 메시지도 보여줘야 하고, input 태그가 각자 리렌더링 되도록 해야하고... 허헣.. 나름 신경써서 작업했는데 아쉽게도 라이트 하우스 90점을 넘지 못해 개선중이다. 일단 1차로 해결하고 싶은 부분은 리렌더링이다. 단순하게 컴포넌트를 상세하게 분류하거나, 아니면 커스텀 훅을 활용하거나 등등 여러가지 고민을 했지만 비밀번호 확인 때문에 쉽지가 않다. 사용자가 입력한 비밀번호와 일치하는지 확인하기 위해서는 같은 단에 선언해야 하는데.. 이 경우 하나만 변해도 다른 부분이 같이 리렌더링이 된다... 일단 객체를 활용해서 그나마 리렌더링 덜 하게 바꾸긴 했..
-
리액트 프로젝트 구조개발공부/React 2023. 10. 25. 14:56
오늘은 터미널에 yarn create react-app {프로젝트 이름} 을 입력 했을 때 생성되는 파일 및 폴더에 대해 공부할 예정이다. (중요한 것들 위주로만!) 일단 실행 순서는 index.js > index.html > App.js 이다 src 폴더 index.js: 진입점 JS 파일, 주로 DOM에 렌더링 하는 역할 App.js: 루트 컴포넌트로 여기에서 다른 컴포넌트를 조합 및 렌더링 public 폴더 index.html: 진입점 HTML, 리액트 어플리케이션이 렌더링 되는 곳 그 외 폴더 node_modules: 프로젝트의 의존성 라이브러리가 설치되는 폴더 package.json: 프로젝트에서 어떤 것 (모듈 등)을 사용하는지에 대한 정보가 기록된 파일 처음에 리액트 공부할 때 프로젝트 구조..
-
리액트에서의 메서드 (map, concat, filter)개발공부/React 2023. 10. 20. 11:49
리액트를 기초부터 다시 공부해보려고 한다. 우선 리액트에서 자주 사용하는 JS 메서드부터 시작해보자! :) Map 배열을 순회하면서 각 요소에 대해 주어진 함수를 호출, 반환 값으로 새로운 배열을 생성 원본 배열을 변경하지 않고 새로운 배열을 반환 -> 배열을 변환하거나 재구성할 때 유용~! 이제 위에 내용은 Map의 기본 내용이고, 리액트에서 map 메서드는 반복되는 컴포넌트를 렌더링 할 수 있게 해준다. 이 때, key 값을 넣어줘야지 경고 메시지가 뜨지 않는다. const names = ["눈사람", "얼음"]; const nameList = names.map((name, index)=> {name}); key를 설정해줘야 하는 이유 key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었..
-
동기와비동기_2 (Promise)개발공부/React 2023. 10. 18. 12:07
https://hani-develop-history.tistory.com/42 동기와 비동기_1 오늘은 동기와 비동기에 대해 공부했다. 예전 직장에 다닐 때 성능 개선을 위해 비동기 작업에 대해 공부 했던 적이 있었다. 당시에 자사 프로그램이 동기적으로 작동해서 성능 부분에서 문제가 hani-develop-history.tistory.com 위에 글에 이어서 비동기 공부한 내용을 정리하고자 한다. JS에서 비동기 작업을 도와주는 객체 중 하나인 Promise에 대해 공부해봤다. Promise - 비동기 처리를 도와주는 객체 장점 비동기 처리 시점을 명확하게 표현할 수 있음 연속된 비동기 처리 작업을 추가, 삭제, 수정하기 좋음 비동기 작업 상태 종류 Pending: 대기 Fulfilled: 이행 reso..