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

Today I Learned 리액트 입문 개인 과제 - My Todo List 만들기 리액트 입문 과제 리뷰 특강 시청 My Todo List 구현하기 배열에서 특정 객체의 프로퍼티 값만 수정하기 const [todo, setTodo] = useState([ {id: 1, title: '운동하기', content: '테스트1', isDone: false}, {id: 2, title: '마라탕 먹기', content: '테스트2', isDone: false}, {id: 3, title: '잘 쉬고 공부하기', content: '테스트3', isDone: false}, ]); 이 배열에서 투두리스트의 완료 버튼을 눌렀을 때 그 id 값을 가진 객체만 isDone: true로 바꿔주는 것이 내가 구현하고 싶은..

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

[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

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

Today I Learned React 입문 강의 수강 ES6 문법 특강 수강 React 입문 강의 React란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리. SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트해야 하는 DOM요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 향상된 퍼포먼스를 낼 수 있다. Virtual Dom (가상 돔)이란? 실제 DOM은 조작이 일어나면 바로 브라우저를 통해 여러가지 랜더링 단계를 거치게 된다. 하지만 메모리상에 그냥 값으로 존재하는 가상 돔은 변경이 일어나도 이것이 브라우저 렌더링과는 직접적으로 연결되어 있지 않다. 즉, 리액트가 가상 돔의 변화를 실..

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

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

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

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

[TIL] 내일배움캠프 React 과정 2022.12.02_OSI 7계층

OSI 7계층 특강 OSI란? OSI 모형(Open Systems Interconnection Reference Model)은 국제표준화기구(ISO)에서 개발한 모델로, 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나누어 설명한 것이다. 일반적으로 OSI 7 계층이라 불리기도 한다. 출처 https://namu.wiki/w/OSI%20%EB%AA%A8%ED%98%95 LAN vs WAN LAN (Local Area Network) 사무실이나 빌딩처럼 비교적 좁은 범위의 네트워크를 말한다. WAN (Wide Area Network) 서로 떨어져 있는 LAN 사이를 전용선 등으로 연결한 광역 네트워크를 말한다. 클라이언트 vs 서버 클라이언트 : 네트워크상에서 서버에게 서비스를 요청하는 장비 컴퓨터, ..

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