[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

내일배움캠프 React 과정 기초 팀프로젝트 S.A_Food Diary

프로젝트 설명 팀명: B반 3조 - The Leaders 팀 프로젝트명: Food Diary 먹을텐데~ 오늘 무엇을 먹어야 할지 고민될 때 사용자들이 먹을 것을 추천해준다. 오늘 내가 먹은 음식을 자랑해서 사용자들과 공유한다. 와이어 프레임 개발해야 하는 기능들 학경 [ ] SPA [ ] 메인 페이지 성완 [ ] CRUD [ ] Authentication를 이용하여 회원가입 | 로그인 구현 [ ] 회원가입 | 로그인 구현 | 소셜 로그인 && 로그인 회원가입 페이지 [ ] Authentication uid 내게시물 모아서 보기 [ ] Cloud Storage 이미지 업로드 | 다운로드 url 희령 [ ] 마이 페이지 [ ] Authentication 에서 제공하는 uid 를 이용해서 내 게시물 조회하기 ..

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

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

Today I Learned 웹 퍼블리싱 강의 수강 git 특강 수강 firebase 실시간 강의 수강 git 특강 git 비교하기 $ git diff 현재 작업 디렉터리에서의 작업 내역과 최신 커밋을 비교하기 git 되돌리기 revert: 작업을 취소한 새로운 커밋을 생성함 (기존의 커밋 내역은 유지됨) $ git revert reset: 특정 커밋으로 되돌아가기 (기존의 커밋 내역에 영향이 갈 수도 있음) soft reset: 커밋을 했다는 사실만을 되돌리기 $ git reset --soft mixed reset: 스테이지에 추가했다는 사실까지 되돌리기 $ git reset --mixed hard reset: 변경사항을 만들었다는 사실까지 되돌리기 (작업 디렉토리까지 되돌리기) $ git reset ..

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