react63 React 정리_20240317 React 란? UI(user interface) 빌딩하기 위한 자바스크립트 라이브러리로서 SPA 기반으로 컴포넌트 단위의 독립적인 블록을 이용한 개발을 가능하게 해준다. 🔥 SPA(Single Page Application) 1. 정의 - 한개의 페이지로 이루어진 애플리케이션으로, MAP와는 상반된 개념이다. 2. 기존 MPA의 문제점 - 예를 들어 좋아요 버튼을 눌렀는데 페이지가 다시 로딩된다면.. 사용자 경험을 해치게 될 것이다. - 요즘 시대에는 리렌더링. 즉, 페이지가 갱신되는 상황이 매우 많기 때문에 그럴 때마다 계속 깜박거린다면.......ㅠ 3. SPA의 특징과 장점 - 딱 한 개의 페이지(= index.html)로 구성된 웹 앱이다. - 서버에 1회만 리소스를 요청한다. - 그 이후에는 .. 2024. 3. 17. 트위터 클론코딩 컨테스트 Day 15. 최종 제출 URL / GitHub 링크 깃허브 링크 : https://github.com/jiwonkim16/twitter-contest 최종 도메인 : https://twitter-contest.web.app/ Panwitter 1. 자기소개 안녕하세요! 프론트엔드 개발자를 준비하고 있는 학생입니다. 개발자가 되기 위해 작년 6월부터 공부하고 있던 중에 프로젝트를 진행했었고 이후 뭔가 갈피를 잡지 못하고 이것저것 찍먹만 하게 된 제 스스로를 다잡기 위해서 이번 컨테스트에 참여하게 되었습니다. 마침 firebase를 배워보고 싶었고 프로젝트라는 목표 의식을 가질 수 있어 지원했습니다. 2. 프로젝트 설명 배운걸 토대로 해서 뭔가 팬카페 같은 느낌의 서비스를 만들고 싶었고 요즘 가장 핫한 판다 가족들을 타겟으로 팬들.. 2024. 1. 25. 트위터 클론코딩 컨테스트 Day 13~14. 배포 Firebase Hosting 배포를 위해 파이어베이스 hosting을 사용할 것이다. 먼저 파이어베이스 콘솔 탭에서 빌드-hosting 으로 들어가서 시작하기 를 누르면 파이어베이스 CLI를 설치하라고 코드 한줄이 나오는데 이 코드를 복사해서 내 프로젝트에 설치한다. 그리고 다음 버튼을 누르면 프로젝트 초기화 단계를 진행해야 되는데 먼저 firebase login 명령어를 입력해서 파이어베이스에 로그인 여부를 확인한다. 그리고 나서 firebase init 명령어를 통해 프로젝트를 초기화 한다. 그러면 아래와 같이 터미널에 여러 선택지가 주어질텐데 이는 어떤 요소들로 내 프로젝트를 구성하고 싶은지를 묻고 있는 것이다. 이 중에서 ◯ Hosting: Configure files for Firebase H.. 2024. 1. 25. 트위터 클론코딩 컨테스트 Day 9~12. 프로필 페이지 프로필 이미지 수정 state 프로필 페이지 state 2024. 1. 25. 트위터 클론코딩 컨테스트 Day 6~8. 실시간 게시물 기능 / 중간 공유 실시간 게시물 등록 state 실시간 게시물 수정 state 실시간 게시물 삭제 state 게시물 이미지 등록 state 2024. 1. 18. 트위터 클론코딩 컨테스트 Day 3~5. 회원가입 / 소셜 로그인 Routing createBrowserRouter 함수 활용, auth.currentUser 값이 null 인지 여부에 따라 전환 페이지 구분 회원가입 const credentials = await createUserWithEmailAndPassword( auth, email, password ); await updateProfile(credentials.user, { displayName: nickName }); toast.success("계정 생성"); navigate("/login"); 일반 로그인 / 구글 로그인 const onSubmit = async (event: React.FormEvent) => { event.preventDefault(); if (isLoading || id === "" .. 2024. 1. 16. 이전 1 2 3 4 ··· 11 다음
