개발 블로그

프론트와 백을 나누어 프로젝트를 진행하다보면 API 가 만들어지기 전에 디자인 및 레이아웃이 먼저 나오는 경우가 정말 많다. 이 경우에 백엔드에서 마치 데이터를 받아 오는 것처럼 미리 구현을 해놓으면, 추후 API 가 만들어졌을때 라우터명만 바꿔주면 된다. 이렇게 더미 데이터를 만들어 놓고 미리 화면을 짜고, 로직을 만드는 방식은 정말 많다. 구글링을 해보면 보통 MSW(https://www.npmjs.com/package/msw) 라이브러리를 사용하여 Mocking (단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜(mock)로 대체하는 기법) 하는 방법을 많이 소개해준다. 이번 포스팅에서는 MSW 와 같은 Mocking 라이브러리를 사용하지 않고 아주 간단하게 Mocking 하는 방법을 소..

벌써 프론트엔드 개발 2년차인데 이 회사를 들어오고 나서 단 한번도 Context API 를 사용한 적이 없다. 기존 프로젝트가 redux 로 상태관리를 하였었고, 이후에 react-query 와 jotai 라이브러리로 상태 데이터를 관리하는 것으로 리팩토링을 진행하였기 때문이다. 이러던 중 문득, 다른 많은 UI 라이브러리들이 Context API 로 구성되어 있는 것을 발견하였고 Context API 공부의 필요성을 느껴 따로 공부하여 정리하여 본다. Context API 란? Context API 란 React 에서 제공하는 상태 관리 API 이다. 먼저 기존 리액트의 구조를 살펴보겠다. 리액트는 컴포넌트가 다음과 같이 트리구조로 구성되어 있다. 때문에, 컴포넌트 간의 데이터를 교환 할때는 pro..

우리 회사 프로젝트는 리액트로 되어 있다. 프로젝트는 약 3년정도 된 프로젝트이고 규모도 꽤나 있는 프로젝트이다. 해당 프로젝트에 네이버 검색엔진에 최대한 많이 노출되게 끔 하는 업무를 하게 되었고 많은 시도 끝에 성공하였다. 우선 SEO 최적화를 진행하기 전에 어떤 상태였는지 말해보겠다. 네이버 서치 어드바이저에 등록이 된 상태였지만, React 프로젝트가 SPA 라서 네이버 검색엔진에 홈 라우터 ( / ) 밖에 노출이 되지 않고 있었다. 네이버 웹 마스터 도구를 이용하여 각 라우터마다 수집 요청을 새롭게 넣어도 잘 노출이 되지 않았다. ( 네이버 웹마스터 가이드에서는 SPA 라도 네이버 검색 엔진 봇이 자바스크립트를 읽어서 페이지를 로드 후 수집을 한다고 되어 있긴 하다. 하지만 우리 프로젝트의 경우..

리액트 네이티브로 두번째 어플을 개발중인데 setTimeout 을 사용하여서 기능 개발중인 것이 있다. 근데 개발을 하던 중 모르던 사실을 발견하여 기록한다. 리액트에서 setTimeout 내에서의 state는 setTimeout을 정의할때의 state값을 계속해서 사용한다. 예를들어, const [count, setCount] = useState(0); useEffect(() => { setInterval(() => { console.log(count); setCount((prev) => prev + 1); }, 1000); }, []); 이렇게 하면 0 1 2 3 4 ... 이렇게 찍힐 것 같지만 실제로는 0 0 0 0 0 ... 이렇게 찍힌다. 그렇다고 count 값이 계속해서 0은 아니다. set..

매일 듣고 기록해보자 ( 계속 추가 예정 ) 🔥🔥 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 1. useInput export const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = (e) => { const { target: { value } } = e; let willUpdate = true; if (typeof validator === "function") { willUpdate = validator(value); } if (willUpdate) { ..