JavaScript46 [TIL] 내일배움캠프 React 과정 2022.12.03 Today I Learned JavaScript 입문과 웹 UI 개발 강의 수강 JavaScript 입문과 웹 UI개발 강의 getElementById와 getElementsByClassName document.getElementById('test').style.display = 'none'; id 이름은 중복을 허용하지 않음 document.getElementsByClassName('test')[0].style.display = 'none'; 클래스 이름은 중복이 가능함 -> 인덱싱 필수! 동일한 클래스 명을 가진 요소가 여러 개 일 수 있기 때문에 해당 클래스 명의 몇 번째를 가져올 것인지 지정해야 함. querySelector와 querySelectorAll document.querySelector.. 2022. 12. 3. [TIL] 내일배움캠프 React 과정 2022.12.02 Today I Learned javascript 심화 강의 수강 - 클로저 javascript 퀴즈 풀기 OSI 7계층 특강 수강 javascript 심화 강의 - 클로저 함수가 선언된 렉시컬 환경(lexical environment) const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 }; innerFunc(); }; outerFunc(); 중첩 함수 innerFunc의 상위 스코프는 outerFunc의 스코프 → 그래서 x = 10에 [먼저] 접근하는 것 const x = 1; // innerFunc()에서는 outerFunc()의 x에 접근할 수 없다. // Lexical Scope.. 2022. 12. 2. [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.. 2022. 12. 2. [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 }.. 2022. 12. 1. [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.. 2022. 11. 30. [TIL] 내일배움캠프 React 과정 2022.11.30_JS 실행 컨텍스트 Today I Learned javascript 심화 강의 수강 - 실행 컨텍스트, this javascript 심화 강의 실행 컨텍스트란? 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장 생성(활성화) 시점 : 한 ‘실행 컨텍스트’가 콜 스택의 맨 위에 쌓이는 순간 (함수가 실행되는 시점) 생성 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행 하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장한다. 실행 컨텍스트에 담기는 정보 1. Variable Environment a. 현재 컨텍스트 내의 식별자 정보 b. 외부 환경 정보 c. 선언 시점 LexicalEnvironment.. 2022. 11. 30. [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.. 2022. 11. 29. [TIL] 내일배움캠프 React 과정 2022.11.27 오늘 수정한 부분 메인 페이지 최신순 정렬 게시물 수정, 삭제 기능 구현 내가 작성한 글에만 수정, 삭제 버튼이 보이도록 설정하기 프로필 페이지에 내가 작성한 글만 불러오기 + css 작업 회원가입 후 프로필 이미지를 업로드하지 않고 게시물을 올렸을 때 프로필 이미지가 null로 뜨던 문제 해결 로그인하지 않으면 메인 페이지에 데이터가 불러오지 않던 문제 해결 게시물 수정 페이지에서 이미지를 새로 업로드하면 페이지 안에서 기존 이미지를 새로운 이미지로 교체하기 수정 페이지 css 작업 메인 페이지 css 작업 해결하는 경험 프로필 이미지가 null로 뜨는 문제 회원가입 후 프로필 이미지를 업로드하지 않으면 DB에 저장된 프로필 이미지 URL이 null로 떠서 게시물 상세 페이지에서 프로필 이미지를 불러오.. 2022. 11. 28. [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.. 2022. 11. 25. [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.. 2022. 11. 23. 이전 1 2 3 4 5 다음
