전체 글

이번 주 목표 달성 여부 및 다음 주 목표 설정 강의는 다 들었지만 추가적인 공부는 거의 못함.. 다음주 강의도 다 듣자 현아야.... ​ 부족한 점 부족한거 투성이입니다.. 뭐 하나를 꼽을 수가 읎네 ​ 스스로 시도해본 것들 그래도 추가적으로 이해 안 되는 내용들 찾아보고 개념 복습도 조금 했다 ​ 해결 내용 ​ 헷갈리거나 실수한 점 ​ 회고 오잉 이걸 왜 안 올렸었지.. 주말에 그래도 복습도 잠깐 했는데.. 사실 플젝도 참여하고 더 많이 알아봐야 내 공부가 되는건데, 강의도 따라가기가 벅차서...하 난 정말 왜이럴까요 ,,~ 나 이거 환급 받아야 되는데 ...ㅜㅜ 엄마 미안 그래도 열심히 공부할게요..

TO-DO LIST - 24강 Big Picture ~ 28강 리액트 상태 - 4 - Form Input - 17:00 정기 팀 회의 ​ 배운 내용 요약 정리 이벤트: 프로그래밍하고 있는 시스템에서 일어나는 사건 action 혹은 발생 occurance ​ - 이벤트 핸들러 이벤트가 발생되면 실행되는 코드 블럭(보통 프로그래머가 만드는 자바스크립트 함수) 코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 이를 이벤트 핸들러를 등록(register)했다고 함 ​ HTMLButtonElement 버튼에는 어떤 이벤트 핸들러가 있을까? The HTMLButtonElement interface provides properties and methods (beyond the regular HTMLElem..

https://react.dev/learn/updating-objects-in-state Updating Objects in State – React The library for web and native user interfaces react.dev 리액트 공식 문서 참고! ! ​ 그냥 적으면서 공부하는 느낌으로 사이트 내용을 쭉 적어보겠다 ​ State can hold any kind of JavaScript value, including objects. But you shouldn't change objects that you hold in the React state directly. Instead, when you want to update an object, you nedd to create ..

Scope: 범위 변수에 접근할 수 있는 범위 / 식별자(변수)를 찾기 위한 규칙 자바스크립트에서 스코프는 2가지 타입이 있음 global과 local ​ 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다. ​ 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다. 함수 자신과 하위 함수에서만 참조할 수 있다. ​ 자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 된다. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데, 이걸 함수 스코프(function-scoped)라고 한다. ​ var x = 'global'; ​ function foo () { var x = 'function scope'; console.log(..

Truthy 자바스크립트에서 truthy인 값은 Boolean 문맥에서 true로 평가되는 값이다. (너무 당연한 얘기) falsy값으로 정의된 값이 아니면 모두 truthy값으로 평가된다. ​ Falsy Boolean 문맥에서 false로 평가되는 값이다. ​ Falsy 값: false: 직접적으로 false 값을 가지는 경우 0: 숫자 0 -0: 음의 숫자 0 NaN: 숫자가 아님(Not-a-Number) null: 값이 없음을 나타내는 값 undefined: 정의되지 않은 값 '' 또는 "": 빈 문자열 등 ​ 주의! 빈 배열 []나 객체 {}는 truthy한 값이다. falsy한 값 앞에 !를 붙여주면 truthy로 전환된다. (반대도 마찬가지) ​ 아래 코드는 지피티가 짜준 예시 let valu..

리액트 (React) UI를 만들기 위한 JavaScript 기반의 라이브러리 매번 서버로부터 html 파일을 받아오지 않더라도 js 조작함으로써 새롭게 페이지 조작 가능 ​ 리액트의 특징 선언형 필요한 컴포넌트만 렌더링 2. 컴포넌트 기반 컴포넌트에서 상태를 관리 재사용해서 생산성 향상 3. Virtual DOM 실제 DOM과 동일 리플로우/리페인트(브라우저 렌더링) 최소화 -> 절차 간소화 ​ 이때 DOM은 무엇일까? 먼저 내친구 지피티한테 물어봤다. ​ 지피티 says DOM은 "문서 객체 모델"의 약자로, 웹 페이지의 구조화된 내용을 프로그래밍적으로 조작할 수 있는 인터페이스를 제공하는 웹 기술입니다. HTML, XHTML 또는 XML 문서의 각 요소를 객체로 취급하여 스크립트 언어(주로 자바스크..

TO-DO LIST - 18강 리액트 기본 - 2 - JSX ~ 23강 1주차 Wrap-up 수강하기 - 17:00 정기 팀 회의 ​ 배운 내용 요약 정리 JSX (JavaScript XML) JavaScript 안에 있는 HTML 코드 ​ 하나의 컴포넌트에는 반드시 하나의 root element를 리턴해야 한다. ​ BEM 네이밍 규칙 CSS 클래스 명에 대한 네이밍 컨벤션 소문자 숫자만 조합 조합은 하이픈(-)으로 연결하여 작명 네이밍 조합은 형태 > 의미 > 순서_상태를 기본 순서로 사용 (예) btn-cancel-01-off 4. 네이밍 조합의 _ 는 파일, 폴더, 이미지 등에 사용 https://getbem.com/naming/ BEM — Block Element Modifier BEM — Bl..

TO-DO LIST - 13강 JS(ES6+) Part 9. ~ 17강 리액트 기본 - 1 - 컴포넌트 수강하기 - 17:00 정기 팀 회의 ​ 배운 내용 요약 정리 원시 타입은 값을 콜 스택에, 객체 타입은 값을 힙에 저장 ​ Object.assign({}, profile2); // 얕은 복사 깊은 복사는 lodash 사용 ​ 비구조화 할당 ​ 스프레드(...) 연산자 스프레드 연산자는 이터러블 객체에서만 가능 이터러블: 순회 가능한 객체. For...of 반복문 사용이 가능 (배열, 문자열, Map, Set...) ​ (예시) const [a, b, ...others] = [1,2,3,4,5]; console.log(others); // [3, 4, 5] ​ const add = function (...