[TIL] 내일배움캠프 React 과정 2022.11.26

주말 동안 해결해야 할 부분을 정리해 봤다. 소셜 회원가입 기능이 정상적으로 작동하는지 확인하기 회원가입 시 입력한 닉네임이 user DB에 저장되게 연결하기 로그인하지 않았을 때 글 쓰기, 프로필 페이지 등 접근 차단 메인 컬러 정하기 메인 페이지 스크롤 어떤 방식으로 구현할 것인지 (더보기/페이지네이션 등) alert CSS 통일하기 AW3 도메인 연결하기 프로필 페이지에서 내가 작성한 글만 불러오기 카테고리 별로 네비게이션 바? 이미지 파일 업로드하지 않으면 글 작성 못하도록? 게시물 수정 페이지에서 input 창에 데이터 카테고리, 제목, 내용 불러오기 해결하는 경험 github으로 협업하기 원래는 팀원들마다 개인 브랜치를 만들어서 각자 담당한 페이지 작업을 하고 있었는데 중간에 모든 페이지를 연..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 28.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.25

Today I Learned 헤더에 프로필 이미지 뜨도록 수정, 함수 기능 추가 CRUD 중 Read, Delete 공부하기 팀원들이 개별 작업한 모든 페이지 모아서 merge하기 해결하는 경험 프로필 이미지 저장 경로 수정하기 const imgRef = ref(storageService, `${authService.currentUser.uid}/${uuidv4()}`) 프로필 이미지를 업로드할 때 원래는 내 계정의 uid 폴더 안에 uuid 형식으로 이미지가 저장되는 방식이었다. 그런데 이렇게 되면 storage에 계정마다 폴더가 무한으로 생성되고 게시물 작성 시 업로드한 이미지와도 구분되지 않을 거 같아서 폴더명을 보기 좋게 수정하기로 했다. const imgRef = ref(storageServic..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 25.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.24

Today I Learned CRUD 구현 공부하기 해결하는 경험 임시로 작업하던 페이지를 우리 팀의 firebase에 연결하기 팀원 분이 임시로 웹페이지를 만들어서 작업하던 페이지를 어제 우리 팀의 github에서 파일을 내려받아 합치는 과정을 도와드렸다. 그런데 JS module 로 작업하던 구조가 아니라 import와 export가 전혀 되어있지 않았다. 그래서 오늘 오전에는 공부할 겸 팀원분이 작업하던 새 글 작성 페이지를 firebase에 db가 올라가게 연결하는 작업을 해봤다. import { addDoc, collection,} from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js"; import { dbService }..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 24.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.23

Today I Learned javascript 공부하기 github branch merge 첫 도전! javascript 공부 AND, OR 논리 연산자 const condition1 = "안녕하세요" const condition2 = true const result = condition1 && condition2 && 'Value'; result // Print: 'Value' AND 연산자(&&)를 사용할 때, 모든 값이 Truthy할 경우 맨 뒤에 있는 값이 result 변수에 할당된다. const condition1 = false const condition2 = null const condition3 = "이용우" const name = condition1 || condition2 || con..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 23.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.22

Today I Learned firebase에 저장된 프로필 정보 가져오기 닉네임 변경 시 새로고침 없이 변경된 닉네임 보여주기 프로필 변경 javascript 함수 분리 닉네임 수정 버튼에 토글 기능 구현 해결하는 경험 firebase에서 user email 정보 가져오기 마이페이지에 가입할 때 firebase에 저장된 이메일 주소를 불러오고 싶었다. 프로필 이미지와 닉네임을 불러올 때 사용했던 코드를 그대로 사용하면 될 거 같아서 일단 console.log로 이메일 정보가 어디에 저장되어 있는지 확인했다. document.getElementById("profileEmail").textContent = authService.currentUser.email ?? "이메일 없음"; email이 담긴 위치를..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 22.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.21

Today I Learned 마이페이지에서 프로필 이미지와 닉네임 변경하는 기능 구현하기 해결하는 경험 에러를 해결하는 방법 SPA가 정상적으로 작동되다가 main.js에 loginpage.js를 import 하기만 하면 헤더 아래 부분이 나타나지 않는 문제가 발생했다. import { handleAuth, onToggle, logout, socialLogin } from "./pages/loginpage.js"; 혼자서 해결하기 어려워서 튜터님께 질문을 드렸는데 크롬 console창을 확인하는 방법으로 문제를 해결할 수 있었다! console 창을 확인해 보면 'logout'이 export 되지 않고 있다는 에러 메세지가 뜨는데 이것을 해결하기 위해서 main.js import 부분에서 사용하지 않는 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 21.
• textsms

[WIL] 내일배움캠프 셋째 주_SPA와 Firebase

금요일부터 새로운 팀 프로젝트가 시작됐다. 이번 프로젝트의 목표는 뉴스피드 사이트를 구현하는 것. 우리 팀은 다양한 아이디어를 두고 고민하다가 오늘 먹은 음식을 게시물로 올려서 자랑하는 사이트를 만들기로 했다. 나는 마이페이지와 AW3를 이용한 배포를 맡았다. 일단 프로젝트 첫날에는 마이페이지의 기본적인 틀을 잡았고 주말에는 SPA와 Firebase 특강을 다시 들으며 프로젝트를 준비했다. Firebse를 이용하지 않은 SPA 구조는 그렇게 어렵지 않았는데 Firebase까지 연결해서 SPA를 구현하려니 어렵다. 이제 이번 주에는 마이페이지의 디자인을 조금 더 수정하고 Firebase를 연결해서 유저의 닉네임과 이메일 주소를 띄우고 프로필 이미지를 변경할 수 있는 기능을 구현해야 한다. 프로젝트 발표가 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 21.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.20

Today I Learned FIREBASE 특강 다시 보기 BEM 문법에 따른 전체적인 마이페이지 코드 수정 github에서 폴더 삭제하기 로컬 저장소와 원격 저장소 모두에서 삭제하는 방법 git rm -rf ex) git rm -rf TEST 그리고 커밋과 푸시까지 하면 된다. git commit -m "delete folder" git push origin main Firebase 공부하기 input이 버튼 모양이 된다. 이벤트 리스너 이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. 이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다. 이벤트 리스너 등록하기 특정 DOM요소에 이..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 20.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.19

Today I Learned CSS BEM 표기법 Javascript로 하는 SPA 공부 CSS BEM(Block Element Modifier) 표기법 기본 구조 .header__navigation--navi-text { color: red; } 이름을 연결할 때는 block-name과 같이 하이픈 하나만 써서 연결한다. BLOCK 블록. block 재사용 가능하며 기능적으로 독립적인 페이지 컴포넌트. 한 페이지 안에 구현되는 요소들을 영역으로 구분 짓고 이에 따른 이름을 붙인다. 블록은 블록을 감쌀 수 있다. ex) header, container, menu, input, button Example ELEMENT 요소 .block__element 엘리먼트는 블럭을 구성하는 단위이다. 블록은 독립적인 ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 19.
• textsms

[TIL] 내일배움캠프 React 과정 2022.11.18

Today I Learned 기초 팀 프로젝트 발제-S.A 작성 프로세스, 스레드, 비동기 주제 CS 특강 수강 해결하는 경험 내가 담당한 마이페이지의 대략적인 틀을 만들고 있다. 간단한 구조 같아 보이지만 여기까지 만드는 데 3시간이 걸렸다.😥 현재 문제사항은 좌측에 이미지 변경 버튼이 가운데 정렬이 되지 않는 것과 우측에 베이지색 박스가 내가 원하는 위치에 들어가지 않는다는 것이다. 일단 이미지 변경 버튼은 justify-content: center;로 여기저기 시도해봤지만 실패하고 일단 버튼에 margin-left 값을 설정해서 가운데로 오도록 수정했다. div 정렬 문제는 content_box에 display 설정을 했더니 해결되었다. 글로 적으니까 간단하지만 해결하기까지 많은 시행착오가 있었다ㅎ..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 18.
• textsms