[TIL] 내일배움캠프 React 과정 2022.12.06_React 입문

Today I Learned React 입문 강의 수강 My Todo List 만들기 과제 수행 React 입문 강의 명령형 프로그래밍과 선언형 프로그래밍 명령형 프로그래밍 (DOM) // 순수 javaScript 명령형 코드 const root = document.getElementById('root'); const header = document.createElement('h1'); const headerContent = document.createTextNode( 'Hello, World!' ); header.appendChild(headerContent); root.appendChild(header); 명령형은 어떻게(How)를 중요시 여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 ..

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

[TIL] 내일배움캠프 React 과정 2022.12.05_ES6 문법

화살표 함수 (Arrow Function) // ES5 function func() { return true } //ES6 const func = () => true const func = () => { return true } () => {} parm => {} (parm1, parm2, ...parms) -> {} // 익명 화살표 함수 () => {} function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다. 구조 분해 할당 (Destructuring) 구조 분해 할당이란 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법. // 배열의 경우 let [value1, value2] = [1, "new"]; console.log(valu..

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

[WIL] 내일배움캠프 다섯째 주_javascript 심화 공부

이번 주는 월요일에 프로젝트 발표를 끝내고 계속 자바스크립트 강의를 들었다. 주중에는 원장님의 자바스크립트 심화 강의를 들으며 데이터 타입, 실행 컨텍스트, THIS, 콜백 함수, 클로저에 대해 공부했다. 이론적인 부분이고 심화 강의답게 내용이 어려워서 모든 내용을 이해할 수는 없었지만 자바스크립트에 익숙해지는 과정이라 생각하고 일단은 강의를 끝까지 다 들었다. 주말에는 코딩애플에서 자바스크립트 강의를 들으며 실습 위주로 자바스크립트를 공부했다. 모달 창이나 토글 기능, 애니메이션 등을 직접 구현해봤다. 확실히 직접 코드를 작성해보니 더 재밌고 금방 배우는 거 같다. 이번 주 동안 쌓은 자바스크립트 기초 지식을 가지고 다음 주부터는 드디어 내배캠의 주특기 REACT 공부를 시작한다. 11월을 마무리하며 ..

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

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

Today I Learned JavaScript 입문과 웹 UI 개발 강의 수강 JavaScript 입문과 웹 UI개발 jQuery $('.hello').html('안녕'); javascript의 innerHTML과 동일한 코드. 코드가 짧고 간결하다. $('.hello').css('color', 'red'); jQuery로 css 변경하기 $('.hello').addClass('클래스명'); $('.hello').removeClass('클래스명'); $('.hello').toggleClass('클래스명'); jQuery로 class 명 추가 및 제거하기 안녕 안녕 안녕 javascript의 quertSelectorAll과 다르게 인덱싱 필요 없이 해당 클래스 명을 가진 모든 요소에 접근한다. $('.n..

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

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

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

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

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

[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