1. 웹개발/1_1_5 React JS 검색 결과

해당 글 52건

[React] styled-Components란?

styled-components란? React 애플리케이션에서 사용되는 CSS-in-JS 라이브러리 중 하나입니다. 이 라이브러리는 JavaScript 파일 안에서 컴포넌트 스타일을 정의할 수 있게 해 주며, 동적인 스타일링 및 컴포넌트 기반의 스타일링을 쉽게 구현할 수 있도록 도와줍니다. 장점 1. 간단한 사용 방법 템플릿 리터럴 (template literals) 문법을 활용하여 스타일을 정의할 수 있습니다. import styled from 'styled-components'; const Button = styled.button` background-color: #3498db; color: #ffffff; padding: 10px 20px; font-size: 16px; border-radius: ..
1. 웹개발/1_1_5 React JS 2024. 1. 13. 13:30

[React] REST API와 GraphQL 차이 및 예제

React 애플리케이션과 서버 간의 데이터 통신을 처리하는 방법은 주로 두 가지입니다. 서버와의 효율적인 데이터 통신을 위해 RESTful API 또는 GraphQL을 사용할 수 있습니다. 이러한 API는 데이터 엔드포인트와 데이터 스키마를 제공하며, 클라이언트는 이러한 API를 사용하여 데이터를 요청하고 업데이트합니다. 이 두 가지의 기본적인 개념과 차이를 알아보도록 하겠습니다. REST API (Representational State Transfer) - 구조적인 접근 방식 REST는 자원(리소스)을 URL 경로로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 자원을 조작합니다. 각 엔드포인트(URI)는 특정 자원 또는 컨트롤러를 나타내며, 각각의 HTTP 메서..
1. 웹개발/1_1_5 React JS 2024. 1. 1. 23:01

[React] axios를 사용하는 이유 (vs fetch)

Javascript에는 HTTP Request를 위한 방법으로 대표적으로 axios와 fetch가 있습니다. 이번 글에서는 각각의 장단점과 간단한 사용방법을 보면서 비교하고 차이를 알아보겠습니다. Fetch 간단하면서도 강력한 기능을 제공하며, 주로 모던 브라우저에서 사용되는 경향이 있습니다. [장점] ES6부터 도입된 Javascript 내장 라이브러리 브라우저 환경에서 사용 가능하며, import 하면 node.js에서도 사용 가능 Promise 기반 사용법이 간단하고 직관적이며, 간단한 요청에서는 불필요한 설정이 없이 사용 [단점] HTTP 에러(404, 500 등)를 자동으로 걸러내지 않음 응답 데이터가 바로 넘어오지 않아 JSON으로 파싱해야됨 IE11 및 구형 브라우저 지원은 추가 설정이나 폴..
1. 웹개발/1_1_5 React JS 2023. 12. 30. 19:27

[React] React Query를 사용하는 이유 (vs Redux)

저는 개인적으로 운영 중인 프로젝트에서는 API 통신과 비동기 데이터 관리를 위해 React Query를 적극적으로 활용하고 있습니다. 프로젝트를 처음 진행할 당시에는 Redux의 redux-saga를 주로 사용하여 서버와의 API 통신과 비동기 데이터를 관리하였습니다. 그러다가 불편함을 느끼고 React Query를 도입하여 Redux에서 React Query로 마이그레이션하였습니다. 이번 글에서는 왜 React Query도입을 결정하게 되었는지 정리하려고 합니다. Redux는 Global State Management!Redux는 모두가 알다시피 Redux의 기본 원칙이 존재합니다. 단일 스토어여야 하며, 상태는 불변성을 유지해야 하기 때문에 읽기 전용이어야 하며 순수함수로 상태를 변경해야 합니다. ..
1. 웹개발/1_1_5 React JS 2023. 12. 14. 21:22

[React] 카카오 로그인 구현하는 방법

안녕하세요. 이번 글에서는 카카오 로그인을 구현하는 방법에 대하여 알아보도록 하겠습니다. 요새 로그인이 필요한 웹, 앱이라면 너무 쉽게 접근할 수 있는데요, 널리 사용되는 만큼 어렵지 않은 것 같습니다. 예전에 안드로이드로 카카오 로그인을 구현한 적이 있었는데, 그 당시는 자료도 적고 개발 문서만 보고 작업하기에는 어려움을 느꼈었는데 요새는 개발 문서도 잘 나와있고 정리를 잘해주신 분들이 너무 많이 계시네요. 저도 개발자분들께 도움이 되고자 이번 글을 써봅니다. [개념] 카카오 로그인은 OAuth 2.0 기반의 소셜 로그인 서비스입니다. 카카오 로그인을 사용하면 사용자가 카카오톡 또는 카카오계정으로 손쉽게 서비스에 로그인할 수 있습니다. 서비스는 서비스 ID 및 비밀번호를 입력받고 검증하는 과정을 직접 ..
1. 웹개발/1_1_5 React JS 2023. 5. 22. 20:58

[React] S3를 이용한 파일 업로드 구현하기

이번 글에서는 React로 파일 업로드를 하는 방법을 알아보도록 하겠습니다. 저는 파일을 업로드하기 위해 AWS S3를 이용하였습니다. S3는 Simple Storage Service의 약자로 인터넷용 스토리지 서비스입니다. S3를 선택한 이유는 일반적인 파일 서버는 트래픽이 증가함에 따라서 장비를 증설하는 작업을 해야 하는데 S3는 이러한 작업을 대행해 줍니다. 트래픽에 따른 시스템적인 문제를 걱정할 필요가 없어지는 거죠. 또 접근 권한도 설정할 수 있어서 외부에서 사용하는 것도 방지할 수 있습니다. 이러한 S3에서 사용되는 주요 용어들은 다음과 같습니다. 객체(object), AWS는 S3에 저장된 각각의 데이터를 객체라고 명명하는데, 하나 하나의 파일이라고 생각하시면 됩니다. 버킷(bucket), ..
1. 웹개발/1_1_5 React JS 2023. 3. 8. 19:48

[React] useRef() 여러 개를 한 개로 관리하기

이번 글에서는 여러 개의 useRef를 사용했을 때 효율적으로 useRef를 관리하는 법에 대하여 알아보도록 하겠습니다. 우리는 보통 DOM요소에 접근하거나 저장공간으로 활용하기 위해 useRef를 사용하곤 합니다. 그런데 useRef()가 여러 개인 경우는 어떻게 사용하시나요? 한 개씩 추가하면서 사용하시나요? 아래를 한 번 보겠습니다. [문제 상황] useRef()를 일반적으로 사용하는 아래 코드입니다. input 폼요소에 각각 useRef로 선언을 해서 사용하였습니다. 이때는 사실 개수가 적어 별로 문제가 안된다고 생각이 드실 수 있습니다. const refTel = useRef(null); const refName = useRef(null); 하지만 아래처럼 폼요소가 많거나 계속해서 추가해야될 상..
1. 웹개발/1_1_5 React JS 2023. 2. 2. 20:40

[React] 파일업로드 이미지 미리보기 구현하기

이번 글에서는 React로 이미지 업로드를 하고 업로드한 파일을 미리 보기로 화면에 렌더링 하여 사용자에게 보여주는 작업을 구현하도록 하겠습니다. 간단하게 미리 보기를 구현할 수 있기 때문에 이 글만 읽어도 기능을 구현하고 이해하는 데는 어렵지 않을 것으로 생각이 듭니다. 이 기능은 실제로 정말 많이 사용되고 있고 저 같은 경우는 개인적으로 개발하고 있는 사이드 프로젝트에서 아래와 같이 사용해 봤습니다. 이번 글에서는 단순히 미리보기 기능만 있는 간단한 화면 하나를 개발하고 해당 코드를 보면서 미리 보기를 구현하겠습니다. [구현하기] 파일을 업로드하는 인풋버튼을 하나 만들고, 바로 올린 파일의 이미지를 미리보기로 보여주고 있습니다. 파일을 선택하여 업로드하는 경우, 선언한 FileReader로 업로드한 ..
1. 웹개발/1_1_5 React JS 2023. 1. 28. 19:32

[React] MySQL, Node.js 연동하여 Insert, Update, Delete 구현하기

지난 글에서는 React, MySQL, Node.js를 연동하여 데이터를 조회하는 글을 작성했었습니다. 이번 글에서는 데이터를 추가, 수정, 삭제해 보도록 하겠습니다. 지난번 데이터 조회때와 마찬가지로 시작하기에 앞서 MySQL이 설치되어 있어야 합니다. 이 글에서는 MySQL 설치, 세팅 방법에 대해서는 다루지 않겠습니다. 다운로드 링크만 적어놓을 테니 설치가 안되신 분은 설치 후 세팅하시기 바랍니다. 아래 경로에서 PC 운영 체제에 맞게 다운로드하여 설치 진행하시면 됩니다. 첫 번째 다운로드 링크는 MySQL 설치 파일이고, 두 번째 다운로드 링크는 MySQL을 편리하게 사용할 수 있는 툴입니다. 마지막 링크는 데이터 조회하는 방법입니다. https://dev.mysql.com/downloads/my..
1. 웹개발/1_1_5 React JS 2023. 1. 15. 21:55

[React] MySQL, Node.js 연동하여 데이터 조회하고 가져오기

이번 글에서는 React, MySQL, Node.js를 이용하여 사용 중인 MySQL에서 원하는 데이터를 가져와보도록 하겠습니다. 시작하기에 앞서 MySQL이 설치되어 있어야 합니다. 이 글에서는 MySQL 설치, 세팅 방법에 대해서는 다루지 않겠습니다. 다운로드 링크만 적어놓을 테니 설치가 안되신 분은 설치 후 세팅하시기 바랍니다. 아래 경로에서 PC 운영 체제에 맞게 다운로드하여 설치 진행하시면 됩니다. 첫 번째 다운로드 링크는 MySQL 설치 파일이고, 두 번째 다운로드 링크는 MySQL을 편리하게 사용할 수 있는 툴입니다. https://dev.mysql.com/downloads/mysql/ https://dev.mysql.com/downloads/workbench/ [데이터 조회] 먼저 저 같은..
1. 웹개발/1_1_5 React JS 2022. 12. 24. 20:42

[React] Debounce와 Throttle 사용법 및 예제

[이벤트 핸들러를 효율적으로 처리해야 하는 이유] input 태그 같은 곳에서 값을 입력할 때마다 이벤트 핸들러에 비즈니스 로직 혹은 API가 포함된 로직이 호출하게 되면 비용적인 문제도 발생하고, 유료 API 같은 경우 호출할 때마다 비용이 발생하게 됩니다. 간단한 예제를 통해 이벤트 핸들러가 보통 어떻게 호출되는지 확인해 보겠습니다. export default function App() { const onChange = e => { console.log(e.target.value); } return onChange(e)} />; } '안녕하세요'를 입력하면 'ㅇ', '아', '안', '안ㄴ', '안녀', '안녕' ... 입력할 때마다 불필요하게 이벤트가 실행되는 것을 확인할 수 있습니다. 이렇게 연속..
1. 웹개발/1_1_5 React JS 2022. 10. 27. 23:10