일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 프론트엔드
- 컴퓨터공학
- 알고리즘
- 블록체인
- AWS
- kubernetes
- es6
- 웹
- docker
- 쿠버네티스
- 백준
- 이슈
- react
- 파이썬
- TypeScript
- HTML
- CSS
- 자바스크립트
- 백엔드
- 이더리움
- 타입스크립트
- next.js
- 클라우드
- k8s
- 가상화
- 솔리디티
- BFS
- JavaScript
- 리액트
- node.js
- Today
- Total
목록react (18)
즐겁게, 코드
리액트 개발을 해보신 분들이라면 map 등을 사용해 컴포넌트를 반복적으로 생성할 때 'Warning: Each child in a list should have a unique "key" prop.' 이라는 경고를 보신 적이 있을 것입니다. 과연 key 속성이 왜 필요한 것인지 리액트의 렌더링 원리와 함께 알아보도록 하겠습니다. 요소 트리 리액트는 컴포넌트의 상태나 속성(prop)이 변할 때마다 render() 함수를 호출하는데요, render() 함수는 새로운 리액트 요소 트리를 반환하고 이를 기존의 요소 트리와 비교해 새로운 변경점에 대해서만 재렌더링을 수행합니다. 잠깐 트리를 비교하는 부분을 더 소개하자면 리액트는 O(N) (N = 노드의 개수) 의 시간 복잡도로 두 트리를 비교하기 위해 key 속..
리덕스 사가에는 주식시장을 떠오르게 하는 콜(call)과 풋(put)이 있습니다. (물론 주식과의 연관성은 제로입니다! 😄) 이 중 사가 안에서 콜백을 호출하는 콜에 관한 궁금증이 생겼는데, 바로 코드를 통해 공유드리도록 하겠습니다. // api/getMemberList.js export const getMemberList = async () => { const res = await fetch("http://localhost:5000/member"); const data = await res.json(); return data; }; // sagas/requestSaga.js // 예외처리 및 yield all 등의 로직은 생략했습니다. const loadSuccess = (data) => ({ type..
🚨 주의! 본 포스팅은 리액트 웹 어플리케이션을 기반으로 합니다. 지난 글에 이어 유저 페이지에서 프로필 사진을 지정할 수 있도록 하고, 이미지를 업로드하면 곧장 S3에 올라갈 수 있도록 합니다. 이를 구현하는 과정을 크게 [input 태그 커스텀] - [AWS SDK 연동] - [대체 이미지 설정] 단계로 나눠 설명드리겠습니다. [1 / 3] - input 태그 커스텀 먼저 클라이언트의 파일 업로드를 위해 input[type=file] 태그를 활용합니다. 그런데, 이걸 스타일하는게 아주 악랄합니다. input[type=file]는 브라우저가 기본적으로 “파일 선택 / 선택된 파일 없음” 이라는 문구를 출력하는데요, 이게 속성을 설정한다고 해서 보이지 않는게 아니라 position: absolute 등 ..
아마 리액트에서 가장 많이 사용되는 훅을 꼽아보라 하면 useState가 주인공이 될 것 같은데요, 오늘은 useState로 상태를 변경할 때 주의할 점에 대해 다뤄보려 합니다. const [state, setState] = useState(); useState 훅은 상탯값과 상태를 변경할 수 있는 함수(※ action, setter 함수 등으로 부르는데, 여기서는 세터 함수라고 부르겠습니다.)를 제공하는데요, 세터 함수를 사용하면 원하는 값으로 상탯값을 변경할 수 있습니다. import React, { useState } from "react"; const Counter = () => { const [count, setCount] = useState(0); return ( {count} {/* 버튼을 ..
📋 내용 : react-chartjs를 사용할 때, 차트의 라벨 숨기기 react-chartjs를 사용할 때, 차트의 라벨을 숨기고 싶을 수 있습니다. 스택오버플로우의 답변은 legend: {display: false} 를 적용하면 된다고 하는데, 최신 버전에서는 이렇게 해도 라벨이 감춰지지 않습니다. const options = { scales: { yAxes: [ { ticks: { beginAtZero: true, }, }, ], }, legend: { display: false, }, }; 최신 chartjs 버전 (21년 5월 기준 ^3.2.1)에서는 legend를 plugin으로 감싸야 정상적으로 적용됩니다. const options = { scales: { yAxes: [ { ticks: {..
📋 내용 : react-chartjs로 생성한 차트 사이즈 조정하기 chart.js를 리액트에 이식한 react-chartjs-2를 사용하면 예쁜 차트를 그릴 수 있습니다. 다만 차트의 크기가 생각보다 훨씬 크거나 작을 수 있는데, 아래처럼 인라인 스타일을 적용해도 제대로 반영이 되질 않습니다. 이는 설정 객체 중, responsive 라는 속성의 값을 false 로 지정해 해결할 수 있습니다. const options = { // responsive 속성을 false로 지정한다. responsive: false, scales: { yAxes: [ { ticks: { beginAtZero: true, }, }, ], }, };
🛠 내용 : react-globe.gl 라이브러리를 사용할 때, 한글 라밸이 깨지는 문제 WebGL 기반 3D 지구를 모델링할 수 있는 vasturiano 님의 react-globe.gl 라이브러리를 사용하던 중, 큰 문제가 생겼습니다. vasturiano/react-globe.gl React component for Globe Data Visualization using ThreeJS/WebGL - vasturiano/react-globe.gl github.com 다름이 아니라 이렇게 한국어 라벨을 사용하면 문자를 인식하지 못하고 "??" 라는 기호로 치환되는 문제였는데요, 문제의 원인이 도저히 감이 오지 않아 어쩔 줄을 몰라하고 있었습니다. 😂 📪 이슈를 남깁시다 아무튼 이렇게 이슈를 남기고 답변을 ..