즐겁게, 코드

🚨 주의! 본 포스팅은 리액트 웹 어플리케이션을 기반으로 합니다. 지난 글에 이어 유저 페이지에서 프로필 사진을 지정할 수 있도록 하고, 이미지를 업로드하면 곧장 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} {/* 버튼을 ..

토스의 첫 개발 컨퍼런스, SLASH21이 막을 올렸습니다! 저는 이런 컨퍼런스 홍보 페이지를 보면 항상 개발자 도구에 먼저 손이 가곤 하는데, 이번에는 특이하게도 페이지가 리액트로 제작되어 있어 컴포넌트를 구경하던 중 처음 보는 forwardRef 성분에 대해 궁금증을 갖게 되었습니다. 🤔 🛠 HTML 노드를 커스텀 컴포넌트로 교체하기 import { useEffect, useRef } from "react"; import Input from "./components/Input"; function App() { const nameRef = useRef(null); const submitRef = useRef(null); useEffect(() => { alert("페이지 로딩됨"); nameRef.cu..

웹 어플리케이션 특성상 로드와 동시에 서버로부터 데이터를 불러와야 하는 경우가 자주 있습니다. 아마 대부분의 경우 useEffect 또는 useLayoutEffect 훅을 활용해 렌더링이 끝난 후 데이터를 불러올 텐데요, 한번 샘플 코드를 보겠습니다. const getGroupList = async () => { await axios .get(`${GROUP_ENDPOINT}?func=getAllGroup`) .then((res) => setGroupList(res.data)); }; useEffect(getGroupList, []); 컴포넌트 렌더링을 마친 후 useEffect 훅으로 getGroupList 함수를 호출해 그룹 리스트 상태값을 초기화해주고 있습니다. 그런데 이렇게 짜면 절대로 안됩니다!..

react-router-dom을 사용하다 보면 이동할 페이지의 경로나 쿼리스트링을 컴포넌트 내에서 사용해야 할 때가 있습니다. 한번 간단한 유저 정보 페이지를 예를 들어 보겠습니다. 유저 정보 페이지가 있다고 할 때 /user/chanmin 으로 접속하면 "chanmin" 유저의 데이터를 불러와야 하고, /user/chanstar 로 접속하면 "chanstar" 유저의 데이터를 불러와야 하는 상황입니다. 그럼 axios.get(`userid=${유저명}&func=getUser}`); 에는 경로에 주어진 유저명으로 데이터를 불러와야 할 텐데, 어떻게 해야 URL로 주어진 값을 컴포넌트 내부에서 활용할 수 있을까요? 경로 데이터를 속성값으로 사용하기 리액트 라우터에서는 history, match, locat..

학교에서 한번쯤은 "미니서든" 이라는 게임을 해본 적이 있을 것이다. FPS 게임에서 가장 중요한 요소를 뽑아보자면 모델과 모델의 시야가 되겠는데, 이렇게 사물이 바라볼 수 있는 시야를 처리하는 엔진을 레이캐스트(Raycast) 라 부른다고 한다. 우연히 오늘 깃헙을 돌아다니다 웹(심지어 리액트!) 기반 레이캐스트 엔진을 찾을 수 있었는데, 여기에 socket.io와 이것저것 끼얹으면 웹 기반 FPS 게임 + 관전자 모드까지 구현할 수 있을 것 같았다. 이슈를 읽어보니 이걸로 둠을 구현하겠다는 사람도 나왔는데, 아무튼 상세한 내용은 코드를 조금 까봐야 알겠지만 시도해볼만한게 늘어난 것 같아 즐겁다. (괜찮으면 종설까지 들고 가야겠다...) [깃헙 저장소 링크] ahuth/raycast HTML5 rayc..

리액트 어플리케이션에서는 상태와 속성을 통해 컴포넌트끼리 값을 주고받는다는 것을 알고 계실 것입니다. 그런데 컴포넌트 계층이 아래 이미지와 같다고 할 때, App에서 TodoItem까지 값을 전달해야 한다면 어떨까요? 맞습니다. App에서 TodoItem 컴포넌트까지 값을 전달하기 위해 TodoContainer, TodoList 컴포넌트에도 상태를 넘겨줘야 합니다. 물론 전달할 상태값이 단순하고 컴포넌트의 중첩 깊이가 깊지 않다면 이렇게 해도 큰 문제는 없습니다. 다만 큰 문제가 없을 뿐이지 분명히 더 나은 방법이 있는데요, 바로 오늘 소개할 리덕스를 활용하는 방법입니다. 🛠 리덕스(Redux) 리덕스는 데이터를 저장하는 거대한 창고(Store)와, 창고에 진입할 수 있는 함수들을 제공하는 라이브러리입니..