myinfo7091 님의 블로그

프로젝트 개요Next.js와 TypeScript를 사용하여 리그 오브 레전드 캐릭터&아이템 정보 도감 만들기 주요 기능챔피언 정보 조회아이템 정보 조회금주의 챔피언 로테이션 정보 조회 프로젝트 셋업npx create-next-app@14 // 14버전 설치하기What is your project named? my-appWould you like to use TypeScript? YesWould you like to use ESLint? NoWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? YesWould you like to use App Router? (recommended) YesWould you like to..

Next.js에서 주요 렌더링 방식은 4가지로 나눌 수 있다. 각 패턴별로 프로젝트의 성능이나 데이터, 사용자 경험 최적화를 위해 고려해야 할 부분들이 있는데, 자신이 진행할 프로젝트에서 요구되는 사항에 따라 적절한 방식을 선택하면 된다. 렌더링 시점속도데이터활용SSG빌드타임빠름고정형 데이터마케팅 페이지SSR요청 시느림(서버 요청)최신 데이터실시간 데이터CSR클라이언트 실행 시느림(초기에)클라이언트에서 처리검색 결과ISR빌드 타임,주기적인 재생성빠름조정 가능뉴스, 전자상거래 등  SSG(Static Site Generation)export async function getStaticProps() { const res = await fetch("https://example.com/data"); cons..

지도에 커스텀 오버레이 생성하기  카카오맵 api 공식 문서를 참고해서 지도에 자유롭게 컨텐츠를 표시할 수 있는 커스텀 오버레이를 생성한다. 마커를 클릭할 시 식당의 상호명과 주소를 적당한 ui 안에 나타내기로 했다.   ◆ Custom Hook으로 분리하기  그 전에 점점 길어지고 있는 코드를 정리할 필요가 있었다. supabase에서 식당의 위도와 경도 정보를 가져와서 해당 좌표에 마커를 생성하는 지도 컴포넌트인데, 기능을 추가하다 보니 뭐가 참 많다(...) supabase에서 restaurants 테이블의 정보를 가져오는 부분은 다른 팀원들도 활용할 가능성이 있어서 따로 커스텀 훅을 만들면 좋을 것 같다. import { useEffect, useState } from 'react';import ..

목표 _ React에서 사용자의 특정 결과값을 필터링하는 기능 구현하기공개 설정한 결과값만 리스트 페이지에 표시하기현재 로그인한 사용자의 결과값은 공개 여부와 관계없이 항상 화면에 표시하기 구현 과정 _ 테스트 결과 렌더링하기 필터링된 결과를 map 메서드로 TestResultItem 컴포넌트에 렌더링한다. visibleResults.map((result) => ( ));  구현 과정 _ 어려웠던 부분   개발자 도구에서 네트워크 탭을 확인해 보면 비공개 / 공개 전환에 대한 요청이 정상적으로 진행되고 있다. 그런데 다른 아이디로 로그인했을 때 비공개 설정이 적용되지 않거나, 현재 로그인한 사용자의 테스트 결과가 전부 표시되지 않는 문제가 있었다. 튜터링 과정에서 네트워크 헤더, 페이로드 부분을 확인하..

React에서 로그인 상태에 따라 내비게이션 바 관리하기 React에서 사용자 로그인 여부에 맞춰 다른 내비게이션을 보여주고 싶었다. 로컬 스토리지를 이용해 로그인 여부를 확인하고, 로그인/아웃 상태에 따라 내비게이션 컴포넌트를 조건부 렌더링하는 방법을 고려해볼 수 있다.  ◆ 로그인 상태에 따른 조건부 내비게이션  컴포넌트에서 로그인에 따라 LoginNav, LogoutNav 컴포넌트를 조건부로 보여주기 위해 localStorage에서 사용자 정보를 확인하고, 로그인된 상태면 LoginNav, 로그아웃된 상태면 LogoutNav를 렌더링하도록 설정하면 된다. const Header = () => { const user = JSON.parse(localStorage.getItem("user")); c..

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 등이 있다. 이러한 서비스들은 데이터베이스, 소셜 미디어 서비스와의 연..