myinfo7091 님의 블로그

React Toast는 사용자 알림을 간편하게 구현할 수 있는 라이브러리이다. React Toastify를 통해 손쉽게 사용자에게 피드백을 전달할 수 있다. 알림은 사용자의 경험을 강화하는 중요한 요소이기 때문에 적절한 위치와 타이밍에 사용해야 한다. ◆ 설치 및 적용 react-toastify 패키지를 추가한다.yarn add react-toastify  설치 후에는, ToastContainer 컴포넌트를 애플리케이션에 추가하고, toast 함수를 사용해 알림을 띄울 수 있다. import React from 'react';import { ToastContainer, toast } from 'react-toastify';import 'react-toastify/dist/ReactToastify.css'..

게시글 작성 페이지_기능_이미지 업로드하기사용자가 로컬 시스템에서 이미지를 선택하고 업로드 전에 미리 볼 수 있는 이미지 업로더를 만들게 되었다. 목표 FileReader로 이미지 미리보기 생성하기이미지 입력을 사용자 친화적으로 만들기useState Hook로 이미지 상태 관리하기  const [imgPath, setImgPath] = useState(null); useState Hook를 통해 업로드된 이미지의 상태를 관리한다. 브라우저에서 이미지를 바로 렌더링해 미리보기하는 기능을 어떻게 구현할지 고민했는데, 비슷한 기능을 구현한 사례에서 FileReader를 사용해 base64 형식으로 변환하는 방법을 알게 되었다.   JavaScript FileReaderIn this tutorial, you'l..

팀 프로젝트: 뉴스피드 프로젝트 - 뉴스피드란?내 게시물을 포함한 모든 게시물을 볼 수 있는 공간실시간 정보 업데이트 기능 뉴스피드 프로젝트는 실시간으로 새로운 게시물이 올라오고 사용자가 쉽게 최신 정보를 확인할 수 있는 구조를 가진다. 데이터베이스와의 연동을 통해 정보 갱신 기능을 추가할 수 있다.사용자 맞춤형 피드 사용자의 관심사를 바탕으로 피드가 제공된다. ‘운동’에 관심이 많은 사용자에게는 관련된 게시물을 우선적으로 표시해줄 수 있다.소셜 상호작용 게시물에 댓글을 달고, 좋아요를 누르고, 공유하는 등 다양한 상호작용이 가능하다. 사용자 간의 관계 형성과 피드에 대한 활발한 참여를 유도할 수 있다.UI/UX의 중요성 사용자가 시각적으로 정보를 얻을 수 있어야 하므로 깔끔하고 효율적인 설계가 필요하다..

Hook 호출의 규칙?반복문, 조건문, 중첩되는 함수 내에서 Hook를 호출할 수 없다. return이 실행되기 전 react 함수의 최상위 레벨에서 Hook를 사용해야 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장한다. 이를 통해 useState, useEffect와 같은 Hook이 여러 번 호출되는 중에도 그 상태를 올바르게 유지할 수 있다.  // React의 함수 컴포넌트는 어떻게 생겼을까?// 1)const App = (props) => {// 여기에 react hook를 사용하면 된다. 아래도 마찬가지 return ;};// 2) function App(props) { return ; } 응 단축키 딸깍 할거야 rafce rfce Hook는 react sta..

오늘의 학습내용 :  Supabase ◆ Baas 모바일, 웹 애플리케이션을 제작할 때에는 백엔드 서버 개발도 함께 진행하게 된다. 백엔드 이야기를 하자면, 서버 개발을 할 때 고려해야 할 사항들이 있다. 만약 유저가 늘어난다면 서버를 확장해야 하고, 보안도 주의해야 한다. 이러한 웹, 모바일 앱 개발을 더 쉽고 빠르게 할 수 있도록 돕는 클라우드 기반의 백엔드 서비스가 Baas 이다. 복잡한 백엔드 시스템을 직접 관리할 필요가 없기 때문에 프론트엔드에 집중하는 것이 가능해진다! (참고: https://velog.io/@ki5970)  대표적인 BaaS 플랫폼에는 Firebase(Google 운영), Parse, AWS Amplify 등이 있다. 이러한 서비스들은 데이터베이스, 소셜 미디어 서비스와의 연..

오늘의 학습내용 :  중첩 라우팅, useSearchParams ◆ 중첩 라우팅 중첩 라우팅(Nested Routing)은 특정 라우트 내에서 추가적으로 라우트를 정의하는 방식이다. 여러 계층의 UI를 웹 애플리케이션에서 구성할 때 사용할 수 있다. 하나의 Route 안에 또다른 Route를 포함시키고, 이를 통해 복잡한 구조를 더 효율적으로 렌더링할 수 있다. 만약 /home이라는 페이지의 하위에 Location이라는 컴포넌트가 있을 경우, /home/location 으로 접속하면 home 컴포넌트 안에서 location 컴포넌트를 함께 보여줄 수 있게 된다. (참고: https://monamigoon.tistory.com/ ) // Outlet 으로 중첩 라우팅 구현하기import { Outlet }..

오늘의 학습내용 :  Dynamic Route, Path Parameter  ◆ Dynamic Route 동적 라우팅(Dynamic Routing)은 웹 어플리케이션에서 클라이언트의 요청에 따라 동적으로 경로를 처리하는 라우팅 방식이다. 사용자의 입력과 상태의 변화 등 여러 조건에 따라 서버가 제공할 페이지와 리소스를 결정하며, 정적 라우팅(Static Routing)과는 다르게 라우팅 규칙이 실행 시에 결정된다. 어떤 웹사이트가 전체 아이템을 보여주는 리스트 페이지와 특정 아이템의 정보를 보여주는 상세 페이지로 구성되어 있을 때, 특정 아이템 카드를 클릭하면 해당 아이템의 id값에 해당하는 데이터로 이동하는 것을 알 수 있다. 동적 라우팅은 라우트 경로에 특정 값을 넣어주고 각각에 맞는 페이지로 이동할..

오늘의 학습내용 :  React Router Dom  ◆ Router Dom 리액트 라우터 돔을 통해 여러 페이지를 가진 웹을 만들어 볼 수 있다. 일반적으로 웹페이지를 이용할 때 여러 페이지를 오가며 이동할 수 있는 것처럼, react-router-dom은 페이지 이동 기능을 처리할 수 있게 해 준다. 라우팅(Routing)이란?웹 어플리케이션에서 라우팅은 사용자가 요청한 URL에 맞는 페이지를 보여주는 것을 의미한다. 다양한 주소에 대해 요청이 들어오고, 네트워크에서 각각에 맞는 경로를 선택해서 해당 컨텐츠로 이동시켜 주는 작업이다. React Router 라이브러리를 통해 리액트에서 컴포넌트 기반의 라우팅 시스템을 구축할 수 있다.   '평소처럼 a 태그를 사용해도 되는 게 아닐까?' 라고 생각할 ..

오늘의 학습내용 :  Action Creator  ◆ Action Redux에서 Action은 영단어의 본뜻과 마찬가지로 행동(동작)을 말한다. 정확히는 상태에 영향을 미치는 어떤 행동인데, 스토어에 저장된 데이터에 변화를 주기 위함이다. Action은 자바스크립트 객체 형태로 존재하며, type이라는 필드를 반드시 포함한다. { type: 'ADD_TODO', text: '내배캠 강의 복습하기'} 개발자는 type 필드를 통해 해당 Action이 정의할 수 있고, 객체에 포함된 부가적인 데이터를 통해 Action을 처리하게 된다. 애플리케이션의 규모가 클수록 객체는 훨씬 더 많은 데이터를 포함하게 되고, 디버깅할 때 redux-devtools 등의 도구를 이용해서 각 Action을 살펴보아야..

오늘의 학습내용 :  Redux  ◆ ReduxRedux는 자바스크립트 어플리케이션 상태 관리 라이브러리로, React Tool kit을 설치해서 React 라이브러리와 함께 사용할 수도 있다. 프론트엔드 개발에서는 전역 상태 관리 라이브러리로 표현되는데, Global State를 관리하도록 돕기 때문이다.동일한 상태와 액션이 리듀서에 전달되면 순수함수인 리듀서는 멱등성을 보장한다.다른 상태관리 라이브러리에 비해 엄격한 코드 구성 방법을 갖추고 있어 코드 유지보수에 유용하다.액션, 상태 변화가 로그에 기록되기 때문에 개발자가 디버깅하기 용이하다.다만 리덕스를 사용해서 코드를 작성할 경우 필수적으로 만들어지는 파일이 있는데다가 스토어와 컴포넌트를 연결할 때 메서드를 필요로 하기 때문에 사용되는 코드의 양이..