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

DOM 기초 특강 나도 DOM 이해할 수 있어~~! 웹 페이지가 뜨는 과정 1. www.naver.com (클 → 서) 2. HTML 문서를 수신(서 → 클) 3. 브라우저가 HTML 파일을 해석(parsing) 브라우저에는 기본적으로 랜더링 엔진이 있는데 랜더링 엔진이 HTML 문서에 코드 한 줄, 한 줄 보면서 ‘해석'한다. 4. DOM Tree를 구성 5. HTML에 CSS가 포함돼있으면 CSSOM Tree를 구성 6. DOM Tree랑 CSSOM Tree를 묶어서 Render Tree … 이하 과정 생략 DOM이란? Document(HTML 파일)를 Javascript가 해석할 수 있는 Object 형태로 Modeling 한 것! DOM은 브라우저에 내장되어있기 때문에 우리는 HTML의 내용을 j..

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

[TIL] 내일배움캠프 React 과정 2022.12.01_JS 콜백 함수

Today I Learned javascript 심화 강의 수강 - this, 콜백 함수 DOM 기초 특강 수강 javascript 심화 강의 - THIS NodeList에 배열 메서드를 적용 document.body.innerHTML = `ABC`; var nodeList = document.querySelectorAll('div'); console.log(nodeList) // 유사배열객체 // { // 0: div, // 1: div, // 2: div, // length: 3 // } var nodeArr = Array.prototype.slice.call(nodeList); nodeArr.forEach(function(node) { console.log(node); // A // B // C }..

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

[TIL] 내일배움캠프 React 과정 2022.11.30_JS this

전역 공간에서의 this this는 실행 컨텍스트가 생성될 때 결정(this binding) === this는 함수를 호출할 때 결정 전역 공간에서 this는 전역 객체를 가리킴 -> window(브라우저 환경) 메서드로서 호출할 때 그 메서드 내부에서의 this 함수와 메서드의 차이점 : 독립성 -함수 : 그 자체로 독립적인 기능을 수행 ex) obj1.( ) -메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행 ex) obj1.method( ) var func = function (x) { console.log(this, x); }; // 함수로서 호출된 경우 this는 window 전역 객체를 의미한다. func(1); // Window { ... } var obj = { method: func..

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

[TIL] 내일배움캠프 React 과정 2022.11.30_JS 실행 컨텍스트

Today I Learned javascript 심화 강의 수강 - 실행 컨텍스트, this javascript 심화 강의 실행 컨텍스트란? 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장 생성(활성화) 시점 : 한 ‘실행 컨텍스트’가 콜 스택의 맨 위에 쌓이는 순간 (함수가 실행되는 시점) 생성 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행 하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장한다. 실행 컨텍스트에 담기는 정보 1. Variable Environment a. 현재 컨텍스트 내의 식별자 정보 b. 외부 환경 정보 c. 선언 시점 LexicalEnvironment..

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

[WIL] 내일배움캠프 넷째 주_기초 프로젝트 결과물 정리

기초프로젝트 내일배움캠프 React B반 3조 The Leaders팀 팀원: 이희령, 이학경, 배성완, 박성환, 박상우 프로젝트 소개 웹페이지 명: 먹을텐데~ 컨셉: 내가 먹은 음식의 사진을 올려서 사용자들과 공유한다. 도메인 http://yourfood.site/ github 링크 https://github.com/baesee0806/the-leaders S.A 및 체크리스트 https://www.notion.so/S-A-Starting-Assignments-5731fd349cc94067b68b5667eb65c0b5 KPT 회고 https://velog.io/@baesee0806/%EB%82%B4%EC%9D%BC%EB%B0%B0%EC%9B%80%EC%BA%A0%ED%94%84-Reate-B%EB%B0%..

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

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

Today I Learned 프로젝트 발표 전에 최종 점검, 자잘한 에러 수정 드디어 발표와 함께 기초 프로젝트 마무리! 해결하는 경험 게시물 상세 페이지에 수정, 삭제 버튼이 나타났다가 사라지는 문제 firebase.auth().onAuthStateChanged((user) => { if ( user && user.uid == result.data().uid) { $("#edit").show(); $("#delete").show(); } else { $("#edit").hide(); $("#delete").hide(); } 내가 작성한 글이 아닐 때는 hide 메서드를 이용해서 수정, 삭제 버튼이 보이지 않도록 만들었다. 그런데 로딩 과정에서 내가 작성한 글이 아니더라도 수정, 삭제 버튼이 잠깐 나타났..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2022. 11. 28.
• 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.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