JAEJAE imojeomo

1. 리액트의 기본 개념📌 리액트에서 “컴포넌트”와 “프로퍼티(props)” 에 대해 설명더보기리액트에서 컴포넌트는 UI를 구성하는 독립적인 단위입니다. 각 컴포넌트는 자체적인 상태(state)를 가질 수 있으며, 다른 컴포넌트들과 props를 통해 데이터를 주고받습니다. props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터입니다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 props를 사용합니다. 컴포넌트는 리액트 애플리케이션의 UI 구성 요소를 만들 때 중요한 역할을 합니다.📌 리액트에서 “상태(state)”와 속성(props)”의 차이점더보기상태(state)는 컴포넌트 내부에서 관리되는 동적인 데이터이고, 속성(props)은 부모 컴포넌트에서 자식 컴포넌..

🔹 React 란?Facebook에서 만든 JavaScript 라이브러리재사용 가능한 UI 컴포넌트로 빠르고 효율적으로 웹 애플리케이션 구축에 사용단순한 웹사이트부터 대규모 애플리케이션까지 다양하게 활용 가능 🔹 React의 핵심 가치1. 컴포넌트 기반 아키텍처컴포넌트라는 독립적인 UI 단위로 웹 어플리케이션 구성하나의 페이지를 여러 개의 작은 컴포넌트로 나누면 재사용성이 높아지고 유지보수가 쉬워짐2. 가상 DOM(Virtual DOM)실제 DOM을 직접 조작하는 대신, 가상 DOM을 사용해 성능을 최적화함변경 사항을 메모리 상에서 비교(diffing)한 후, 최소한의 업데이트만 실제 DOM에 반영해서 렌더링 성능을 향상시킴(바뀐 부분만 업데이트)예를 들어, 쇼핑몰에서 장바구니에 추가할 때 전체 페리..

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 파일로 정..