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

Today I Learned javascript 기초 문법 공부 javascript 심화 강의 수강 javascript 기초 문법 선언되지 않은 변수를 참조한다면? Reference error를 일으키게 된다. console.log(foo); // ReferenceError: foo is not defined javascript 함수 기본 구조 function 함수이름(인자1, 인자2, 인자3) { // 명령문 } 함수이름(인수1, 인수2, 인수3); // 명령문에 있는 내용을 실행한다. 인자(Parameter 또는 매개변수)란 함수를 호출할 때 전달받기 위해 지정한 변수를 뜻한다. 인수(Argument)란 인자에 전달하는 값 그 자체를 의미한다. 함수는 return 키워드로 값을 반환할 수 있다. ja..

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

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

오늘 수정한 부분 메인 페이지 최신순 정렬 게시물 수정, 삭제 기능 구현 내가 작성한 글에만 수정, 삭제 버튼이 보이도록 설정하기 프로필 페이지에 내가 작성한 글만 불러오기 + css 작업 회원가입 후 프로필 이미지를 업로드하지 않고 게시물을 올렸을 때 프로필 이미지가 null로 뜨던 문제 해결 로그인하지 않으면 메인 페이지에 데이터가 불러오지 않던 문제 해결 게시물 수정 페이지에서 이미지를 새로 업로드하면 페이지 안에서 기존 이미지를 새로운 이미지로 교체하기 수정 페이지 css 작업 메인 페이지 css 작업 해결하는 경험 프로필 이미지가 null로 뜨는 문제 회원가입 후 프로필 이미지를 업로드하지 않으면 DB에 저장된 프로필 이미지 URL이 null로 떠서 게시물 상세 페이지에서 프로필 이미지를 불러오..

• 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.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

[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.16

Today I Learned 웹 퍼블리싱 강의 3주차 수강 오전에 JS로 하는 SPA 특강 수강 저녁에 DB이해 특강 수강 웹 퍼블리싱 3주차 강의 내용 strong 태그와 em 태그 중요한 내용이라서 Bold 효과를 주고 싶을 때는 strong 태그를 사용하면 된다. 위 이미지에서 증시, 환율, 숫자 부분에 strong 태그를 적용하고 font-weight는 따로 사용하지 않았다. 더 자세한 내용 https://www.codingfactory.net/11014 vertical-align 속성 이해하기 그동안 아이콘을 넣을 때마다 코드에 vertical-align: top;이 적혀있는 걸 봤는데 주석 처리를 해봐도 아무런 변화가 없길래 어떤 기능을 하는 녀석일까 궁금했다. 그런데 이번에 드디어 그 효과를..

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

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

Today I Learned 웹 퍼블리싱 강의 2주차, 3주차 수강 웹 퍼블리싱 2주차 강의 내용 padding 값으로 텍스트 정렬하기 .api_atcmp_wrap .atcmp_fixer .atcmp_header { position: relative; padding: 8px 18px 0; } /* 전체삭제 텍스트 */ .api_atcmp_wrap .atcmp_fixer .atcmp_header .option { position: absolute; top: 9px; right: 18px; } 최근 검색어와 전체삭제를 양 끝에 위치하기 위해 padding 값을 이용해서 정렬을 해주었다. 좌측의 최근 검색어는 따로 위치를 설정할 것은 없고 우측의 전체 삭제 텍스트는 추가적으로 right: 18px;을 넣어준다..

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