즐겁게, 코드

function* f1() { yield 10; yield 20; return "완료"; } const gen = f1(); 제너레이터 문법을 알고 계신 분들이라도, 제너레이터를 어떻게 사용할 수 있는지에 대해서는 잘 모르는 분들도 계실 것입니다. (저도 잘 몰랐습니다..!) 오늘은 제너레이터를 통해 성능을 개선할 수 있는 지연 평가(lazy evaluation) 라는 기법을 간단히 구현해 보도록 하겠습니다. 📋 지연 평가 지연 평가는 자바스크립트에만 존재하는 개념은 아니고, 함수형 프로그래밍에서 등장한 개념입니다. 코드와 함께 지연 평가의 개념을 간단히 소개해보겠습니다. const a = 3 + 5; const b = 2 + 4; console.log(a); // 8 변수 a에는 3 + 5의 계산 결과..

토스의 첫 개발 컨퍼런스, 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..

토스트 UI 팀의 "TDZ을 모른 채 자바스크립트 변수를 사용하지 말라" 글을 읽고, 오늘도 변수를 스스럼없이 사용한 것을 반성했습니다. TDZ(Temporal Dead Zone) 는 초기화되지 않은 변수가 저장되는 곳인데요, 오늘은 TDZ와 변수에 대한 얘기를 해보도록 하겠습니다. var, const, let과 호이스팅 console.log(Var); // undefined console.log(Let); // ReferenceError: Let is not defined var Var = 1; let Let = 2; TDZ를 소개하기 전, 잠깐 호이스팅의 개념을 되짚어보는 시간을 갖겠습니다. 초기화되지 않은 변수에 접근하려 하면 var 변수는 undefined를 출력하고 넘어가지만, let과 cons..

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

제너레이터를 활용하면 함수의 실행을 중간에 멈췄다가 재개할 수 있습니다. // 화살표 함수 형태로는 제너레이터를 생성할 수 없습니다. function* f1() { yield 10; yield 20; return "완료"; } const gen = f1(); 보시면 function 키워드 뒤에 * 이 붙어있는 것을 확인할 수 있는데요, function* 키워드는 제너레이터를 정의하는 문법입니다. (따라서 화살표 함수 형태로는 제너레이터 함수를 생성할 수 없습니다.) 함수 내에 존재하는 yield는 함수의 실행을 잠깐 멈출 수 있는 분기이며, 제너레이터 함수를 실행하면 제너레이터 객체를 반환합니다. yield 키워드 yield 키워드에 대해 조금 자세히 다루자면 yield는 제너레이터 내부의 값을 외부로 ..