React

리엑트를 사용하여 프로젝트를 만들고 공부를 한지 8개월정도가 지났다. 문득 어느시점부터 새로운 배움보다 익숙함에 손이 갔고 안주하게 되는 나를 보며 내가 되고 싶었던 프론트 개발자의 자세와 멀어지는 모습을 스스로 보고 반성하는 시간을 가지게 되었다. 따라서 강의와 공식 문서등을 통해서 업데이트 내용들을 확인하고 고수분들의 클린 코드 팁과 리엑트 철학과 기...

2024 트랜드 React + Typescript 가 강세를 보인다 React 공식 홈페이지가 리뉴얼 되었다. https://react.dev/blog/2023/03/16/introducing-react-dev 상태 관리의 강세는 TanStack Query React

리펙토링 적용해보기

Props

React Hooks 기존 규칙 컴포넌트 함수 내에서만 훅들을 불러야 한다. Top Level에서만 훅들을 부를 수 있다. 커스텀 훅 사용이유 컴포넌트 내에 들어가 코드를 감싸고 재사용하기 위함이다. 상황 1. useEffect 내에 있는 Http 통신 코

A state management system for cross-component or app-wide state상태에는 크게 3가지로 나뉜다.Local Statestate that belongs to a single componentex) 사용자 입력값 필드 감지Cr

큰 틀은 다음과 같다. React + Node 를 사용하여 간단한 플래너 서비스를 구현해보려고 한다.새로운 서비스 기능을 만들고 구현하여 상품화 시켜 수익을 낼 목적이 아닌 개인 공부의 목적이기에 계획 정리 플랫폼들의 여러 기능을 짜집기해서 만들어보려고 한다.우선 풀스

공식 사이트에서 해당 기술을 소개하는 문장은 다음과 같다.공식 사이트를 조금 읽어보겠다.텐스택 쿼리는 종종 웹 어플리케이션의 잃어버린 데이터 패칭 도서관이라고 설명되지만, 기술적인 측면에서 이것은 통신,캐싱,동기 그리고 서버 상태 업데이팅을 담당해준다.전통적인 상태 관

디자인에 재능 없는 사람한테 아주 유용할 것 같다.(나 같은)material ui처럼 제공되는 컴포넌트도 아주 많아서 원하는 디자인 딸깍 가져다가 사용해도 좋을 것 같고 보니까 공식 홈페이지에서 제공되는 형태의 className을 가져다 사용해야 제대로 적용이 된다.

프로젝트를 진행하다 보면 하나의 컴포넌트에서 다른 컴포넌트로 상태를 전달하는 상황이 빈번하게 일어난다. https://dev.to/stuxnat/final-react-project-2poi기본적으로 React의 데이터 흐름은 State & Props를 사용해

강의를 들으며 배운 내용을 바탕으로 구현해보려고 한다.Express와 mysql을 docker를 이용하여 구성한다.postman을 이용해서 작동을 확인하고 DB를 붙인 후 배포하여 프론트와 연결해보는 과정을 해보려고 한다.매번 배포된 Api만 받아서 사용했었는데 직접

서론 유저 테이블과 API를 완성했으니 이번에는 할일 테이블과 API를 만든다. 유저 테이블의 PK인 id를 할일 테이블에서 user_id로 FK로 사용해서 데이터 무결성을 유지하고 두 테이블 간의 관계를 명확하게 표현하며, 효율적인 데이터 조회와 일관성을 유지할 수

회원과 할일 데이터베이스와 기본적인 API를 구현했다.이제 배포를 한 뒤에 해당 API들을 React 앱에서 사용해보려고 한다. 배포 방법으로는 정말 다양한 방법이 많지만 docker를 이용해서 배포해볼 생각이다.사용하기에 앞서 docker 이 친구가 무엇이고 어떤 역

인증 인가와 토큰 발행 작업은 프론트와 벡을 연결한 후에 진행해볼 예정이다. 추가로 간편 로그인(카카오 or 구글) 또한 연결해서 사용해보려고 한다.앞으로의 계획은 다음과 같다.프론트에 만든 API 모두 연결하고 화면에 정상 작동 시키기Tanstack Query 학습

프로젝트를 만들다 보면 정말 많은 상태와 마주하게 된다. 상태는 유저가 서비스에서 수행만 모든 동작의 결과가 데이터로 저장된 형태라고 볼 수 있다.현재 프로젝트에서도 상태를 관리해주는 툴로 zustand를 사용하고 있다. 이 친구는 로그인 상태 / 다크 모드 상태 /

React Query는 React Application에서 서버의 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와주는 라이브러리이다.일단 대표적인 두개의 hook이 있다. useQuery와 useMutationuseQuery는 HTTP ME

SPA SPA란 single page apllication의 약자로 하나의 페이지로 구성된 어플리케이션을 의미한다. 가장 많이 사용하고 즐겨 사용하는 React는 기본적으로 SPA에 속한다. SPA는 처음 요청을 보냈을 때 필요한 모든 스크립트를 다운로드 하여 라