JAEJAE imojeomo

1. 클라이언트 기능 명세 2. 주요 웹 화면 구현① 회원가입② 소셜 로그인③ 로그인④ 홈 화면⑤ 홈 화면 - 게시물 수정/삭제⑥ 마이페이지⑦ 게시물 업로드⑧ 메세지 3. 배포 및 기술 문서📍배포 urlhttps://instagram-clone-client-lr01.onrender.com/auth/login📍기술 문서https://spectacled-azimuth-86e.notion.site/SSinstagram-18f05e45325f807fbbc2cbb8f0c20747?pvs=74📍깃 주소https://github.com/SeungjaeLee00/Instagram_Clone📍프로젝트 포트폴리오 4. 회고10월 4일부터 시작해서 1월 22일까지. 약 4개월 동안의 프로젝트가 끝났다. 풀스택 개발자..

GitHub Actions를 이용한 React 앱 CI/CD 배포 자동화이 포스트에서는 GitHub Actions를 사용하여 React 앱을 GitHub Pages에 자동 배포하는 CI/CD 파이프라인을 설정하는 방법을 다룹니다. GitHub Actions는 소프트웨어 개발 워크플로우를 자동화할 수 있는 도구로, 다양한 작업을 자동으로 실행할 수 있습니다. React 앱을 GitHub Pages에 배포하는 프로세스를 자동화하여, 매번 수동으로 배포할 필요 없이, main 브랜치에 변경 사항이 푸시될 때마다 자동으로 빌드되고 배포되도록 설정할 수 있습니다.1. GitHub Actions 워크플로우 파일 설정GitHub Actions 워크플로우는 .github/workflows 폴더 내에 YAML 파일로 정..

이번 포스팅에서는 반응형 헤더를 구현하는 방법을 다루겠습니다. 이 헤더는 사용자가 로그인한 상태에 따라 동적으로 로그인/로그아웃 버튼을 표시하고, 모바일 화면에서는 햄버거 메뉴를 통해 메뉴 항목을 조작할 수 있도록 구성되어 있습니다. 1. 프로젝트 개요이번에 구현할 헤더는 기본적으로 2가지 중요한 기능을 제공합니다:반응형 디자인: 화면 크기에 따라 메뉴를 햄버거 메뉴로 전환해 모바일에서도 깔끔하게 표시되도록 합니다.로그인 상태에 따른 동적 버튼: 사용자가 로그인한 상태에 따라 헤더에 로그아웃 버튼을 동적으로 보여주며, 로그인하지 않은 경우 로그인이 필요하다는 메시지를 유도합니다.2. 주요 기능2.1 반응형 디자인헤더는 기본적으로 데스크탑 화면에서 모든 메뉴 항목을 수평으로 배치하며, 화면 크기가 줄어들면..

영화 검색 기능 및 찜 페이지 구현이번 포스팅에서는 찜 페이지와 영화 검색 기능을 구현한 내용을 다뤄보겠습니다. 이를 통해 사용자가 사이트에서 찜 목록을 쉽게 볼 수 있고 영화 검색을 효율적으로 할 수 있도록 만드는 방법을 소개합니다.1. 영화 검색 기능 구현사용자는 영화 검색 기능을 통해 원하는 영화를 빠르게 찾을 수 있습니다. 이 기능은 TMDB API를 활용하여 검색된 영화 목록을 표시하고, 필터링 옵션을 제공하여 사용자가 원하는 영화를 정리할 수 있도록 돕습니다.1.1 검색어 입력 및 API 호출사용자가 검색어를 입력하면 해당 검색어를 바탕으로 TMDB API에서 영화 목록을 받아옵니다. 이를 위해 useState로 검색어 상태를 관리하고, 검색 버튼을 클릭하면 searchMovies 함수를 호출..

로그인 및 회원가입 팝업 구현이 포스팅에서는 사용자가 로그인할 수 있도록 로그인 팝업을 구현했습니다. 팝업 안에서 로그인과 회원가입 기능을 모두 지원하며, 로그인 유지 기능도 추가하여 사용자가 로그인 상태를 유지할 수 있습니다. 또한, 로컬 스토리지를 활용하여 사용자의 인증 정보를 저장하고 관리합니다.1. 주요 기능1.1 로그인로그인 기능은 사용자가 입력한 이메일과 비밀번호를 로컬 스토리지에 저장된 사용자 목록과 비교하여 인증합니다. 인증에 성공하면 isLoggedIn 값을 로컬 스토리지에 저장하여 사용자가 로그인된 상태로 앱을 이용할 수 있게 합니다.1.2 회원가입회원가입은 사용자가 입력한 이메일과 비밀번호를 기반으로 새로운 사용자 정보를 로컬 스토리지에 저장합니다. 또한, 비밀번호 확인 필드를 제공하..