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개월 동안의 프로젝트가 끝났다. 풀스택 개발자..

여태 한 것 중에 제일 어려웠다.. 카카오톡 로그인 자체를 구현하는 것은 어렵지 않았는데 기존의 로그인 확인 로직(난 쿠키로 넘겨서 관리함)이랑 카카오 로그인 확인 로직을 통합하는 데 애를 먹었다. 카톡 로그인 구현에 걸린 시간이 1시간이라면 로그인 확인 로직 통합은 체감 12시간 걸린 느낌.. 아무튼 이건 기록하지 않으면 두고두고 후회할 것 같아서 오랜만에 포스팅을 해본다. 거두절미하고 시작해 보겠다.1. 카카오 로그인 구현Kakao Developers 공식 문서를 참고하면 로그인까지 어렵지 않게 구현이 가능하다.(차근차근 하면 끝)1) 클라이언트 코드(Kakao.jsx)import React, { useEffect } from "react";import { useNavigate } from "reac..

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 함수를 호출..