디버깅은 프로그래밍에서 가장 중요한 요소중 하나다. 잘못된 동작을 찾아내는 것은 때론 간단하지만, 여러 라이브러리와 작성된 코드들이 섞인다면 잘못된 동작을 찾아내기란 사막에서 바늘 찾기다. 이때 활용할 수 있는 리액트 개발 도구에 대해 소개해보겠다.리액트 개발 도구리액트 개발 도구란?리액트 팀에서 리액트 개발을 더 편리하게 돕기위해 만든 디버깅 툴이다. 리액트 개발도구는 브라우저의 확장 프로그램으로 만들어져있다.크롬, 파이어폭스, 엣지를 지원하는데 나는 크롬을 사용하기에 크롬에 설치해보았다.리액트 도구를 설치하고 난 후에 회색으로 뜬다면 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이고 리액트 로고가 정상적으로 표시된다면, 리액트 개발 도구가 웹 어플리케..

이 글을 읽는 모두 SSR에 대해 많이 들어봤을것이다.SSR, 서버 사이드 렌더링 나도 많이 들어봤지만 그게 정확히 뭐야? 라고 한다면 잘 설명하지 못했었던거 같다. 글을 쓰며 정리하고 다시 읽어보며 SSR을 정복해보자!우선 SSR에 대해 잘 알고 설명할 수 있으려면 SPA에 대하여 잘 알아야한다고 생각한다.📌 SPA란?spa는 뭘까? 스파? 따뜻하겠다.. 가 아니라 싱글 페이지 어플리케이션이다.싱글 페이지 애플리케이션이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 말한다.최초에 첫 페이지에서 데이터를 모두 불러온 이후에는 페이지 전환을 위한 모든 작업이 자바스크립트로 이루어지기 때문에 페이지를 불러온 이후에는 서버에서 HTML을 받지 않고 하나의 페..

친구랑 해커톤에 나가려고 찾아보던중에 유일하게 모집하던 sparcs 해커톤을 보게 되었다.SPARCS는 카이스트 총학생회 산하 단체로, 이전에도 여러 해커톤을 개최했지만 이번에는 대전 사이언스 페스티벌에서 해커톤 기간 동안 제작한 서비스로 직접 부스를 열어 일반 시민들의 반응을 볼 수 있는 좋은 기회라고 생각했다.새로운 경험과 자극이 될 것 같아 기대를 가지고 지원하게 되었다.프로젝트 미리보기팀 소개우리 팀은 프론트 2 + 백엔드 1 + 디자이너 1 총 4명으로 해커톤에 나가게되었다.그 중에서 나는 프론트엔드를 맡았다. ~ 0일차팀 빌딩우선 이번 해커톤은 개인 지원과 4인 팀 지원을 받았다. 원하는 팀으로 나가고 싶었기에 4인 지원을 하기로 마음을 먹었다.하지만 팀원을 찾는 과정에 있어서 어려움이 있었다..

React 애플리케이션에서 자주 사용하는 useThrottle와 useDebounce는 사용자 인터페이스 성능을 최적화하는 데 유용한 커스텀 훅이다.스크롤, 키보드 입력, 리사이즈 등 이벤트가 자주 발생하는 상황에서 불필요한 호출을 줄여 부드러운 사용자 경험을 제공하는 것이 목적이다 먼저 useThrottle과 useDebounce에 대해 알기전에 커스텀 훅에 대하여 알아야한다.커스텀 훅이란?커스텀 훅(Custom Hook) 은 React에서 상태 관리 및 로직을 재사용 가능하도록 만드는 함수다. 일반적으로 useState, useEffect 같은 내장 훅을 활용해 특정 기능을 캡슐화하고 이를 필요할 때마다 호출하여 사용할 수 있다. 예를 들어, useThrottle와 useDebounce 같은 커스텀 ..

스터디 책을 읽다가 평소 관심이 있던 최적화와 관련된 부분이 있어서 정리해보기로 했다.메모이제이션이란?계산 결과를 메모리에 저장해 두고 동일한 계산이 요청될 때 다시 계산하지 않고 저장된 값을 반환하는 최적화 기법이다.리액트에서는 useMemo, useCallback 훅과 고차 컴포넌트인 memo를 활용해 메모이제이션을 하곤한다.추가: React.memo, useMemo, useCallbackReact.memoimport React from 'react';const ChildComponent = React.memo((props) => { console.log('ChildComponent rendered'); return Child Value: {props.value};});const ParentCom..

지금 블로그는 버셀로 배포가 되어있기 때문에 이번에 만들고 있는 개인 포트폴리오 사이트는 깃허브 페이지로 배포하기로 했다.깃허브 페이지 배포하는것은 크게 어렵지 않았지만, 커스텀 도메인 연결이 시간이 오래걸렸어서 까먹지 않기 위해 정리 한 번 하려고 한다.1. 도메인 구매나같은 경우에는 가비아에서 이미 도메인을 산 상태여서 새로 구매는 안했다.검색창에 원하는 도메인을 치고 아직 구매안된 도메인을 사면된다.2. DNS 설정내 도메인을 깃허브 페이지의 IP 주소에 연결하기 위해 A레코드를 다음과 같이 추가해준다.타입호스트값/위치A@185.199.108.153A@185.199.109.153A@185.199.110.153A@185.199.111.153그리고 또한 나는 서브 도메인 연결을 위해서 CNAME도 사용..