초보 개발자의 일기

this는 함수가 호출될 때 정해진다!! 자바스크립트의 this는 다른 언어의 this와는 다르다. this를 콘솔에 찍어보자. 그럼 이렇게 window가 찍히게 되는데 this는 기본적으로 window다. 여기서 window란? window 객체란 window 객체는 웹 브라우저의 창을 나타내는 객체로, 대부분의 웹 브라우저에서 지원하고 있다. 1. 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 전역 객체라고도 부른다. 2. 일반적으로 우리가 열고 있는 브라우저의 창을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다. globalThis js 환경에서는 window node 환경에서는 global이다. 하지만 최근에 globalThis로 합쳐지게..

호이스팅 자바스크립트에서 코드를 위에서 아래로 읽어가기 전, 변수, 함수, 클래스 등의 선언부를 먼저 읽어 들이는 작업을 말한다. var는 호이스팅이 되면 const x = "x"; console.log(z); var y='gege'; var y; const x = "x"; console.log(z); y='gege'; 이렇게 호이스팅이 된다. 해결법 애초에 호이스팅을 안되게 코드를 작성하는 것이 훨씬 좋다. 이렇게 코드를 고려해서 작성하기 어려우면 eslint를 활용하여 호이스팅 안되게 규칙을 정해 오류를 알려주게 하여 코드를 작성하면 좋다! TDZ TDZ => Temporal Dead Zone 한글로 직역하면 일시적인 사각지대 선언보다 더 위에서 변수에 접근을 하는 것 코드로 예를 들자면 const ..

스코프체인 함수에서 어떤 값에 접근이 가능한가? 어떤 값에 접근이 불가능한가?라는 것을 의미한다. { } 블록이 기준이 된다. switch (){ } if (){ } const a = () =>{ } 예시 const x = "x"; function c() { const y = "y"; console.log("c"); function b() { const z = "z"; console.log("b"); c(); } } function a() { const x = "x"; console.log("a"); b(); } a(); c(); 이것을 실행해 보면 이라는 에러가 나온다. anonymous => 파일 전체라고 생각하면 된다. 그 이유는 코드를 보면 나온다. a => anonymous b => c => a..

함수 선언 const add= (a,b) => a+b; function calculator(func, a,b){ return func(a,b); } const onClick = () =>{ return ()=>{ console.log('hello') } } const onClick1 = ()=>()=>{ console.log('hello') } 이렇게 함수를 선언하는 방식이다. 함수 호출 add(3,5); //8 calculator(add,3,5); //8 onClick(); 이렇게 알맞게 선언한 함수를 위 코드처럼 호출할 수 있다. 알맞게 선언한 함수 호출은 함수의 리턴값으로 대체하여도 맞다. JS 알맞은 코드 const onClick = () =>{ return ()=>{ console.log('he..

prop 부모 컴포넌트에서 자식 컴포넌트에게 어떤 값을 이름을 붙여 전달하는 방식 부모 자식 const Counter = (props) => { console.log(props); 이렇게 값이 객체안에 들어가 전달이 된다. 이렇게 짧은 값 말고 긴 값들도 전달을 해주고 싶을 때는 객체에 넣어서 전달해주면 된다. 부모 function App() { const number = 5; const counterProps = { a: 1, b: 2, c: 3, d: 4, e: 5, initialValue: 5, }; return ( ); } 자식 const Counter = (props) => { console.log(props); const Counter = ({ initialValue }) => { const ..

State(상태) 계속해서 변화하는 특정 상태 상태에 따라서 각각 다른 동작을 한다.! ex) 인간의 허기 상태 변화 배고픔 -> 배부름 -> 적당함 -> 배고픔 -> 배부름..... import React, { useState } from "react"; 상태를 사용하겠다는 메서드를 import 해줘야 한다. -버튼을 눌러서 count 값 변화시키기 import React, { useState } from "react"; 를 사용 +버튼을 누르면 값이 1 증가하고 -버튼을 누르면 값이 1 감소하는 간단한 페이지를 만들었다.

JSX 문법 - 닫는 태그를 꼭 써야 한다. 모든 태그에는 닫는 태그를 꼭 넣어야 한다 ex) -최상위 태그 규칙 컴포넌트의 구성중에 가장 밖에 구성되는 태그 최상위 태그를 지워버리면 오류가 발생한다. 반드시 하나의 최상위 태그로 나머지 태그를 묶어야 작동한다 묶기 싫으면 로 대체 가능이다/ 리액트의 기능이기 때문에 import React form 'react'; 이렇게 import로 불어와야 한다. 로 최상위 태그로 묶어주면 해결이 가능하다.! -className jsx에서는 js처럼 클래스를 정할 때 class=""이 안되고 className=""으로 지정을 해야 설정해야 한다. -{} {} 안에는 값을 포함할 수 있지만 숫자만 문자열만 포함할 수 있다. 안에 삼항 연사자도 넣을 수 있다 이런 랜더링..

React 컴포넌트 기반의 UI 라이브러리이다. 모든 html 요소들을 다 컴포넌트로 만드어서 재사용을 하기 쉽게 할 수 있게 해 준다. React를 사용하는 이유 3가지 1. 컴포넌트화 방식 여러 코드를 작성하다 보면 중복적으로 들어가는 내용이 많다. 이런 코드를 계속 반복해서 작성하는 것보다 컴포넌트에 작성을 해 컴포넌트를 불러오기만 하면 같은 내용이 들어와 진다 => 코드 작성 시간 감소, 재사용 용이 2. 선언형 프로그래밍 선언형 프로그래밍의 대표로 말하면 React가 있고 명령형 프로그래밍의 대표는 jQuery가 있다. 명령형 프로그래밍은 절차를 하나하나 다 나열해서 작성하는 반면 선언형 프로그램인 목적을 바로 말해 간단하다는 장점이 있다. 3. Virtual DOM 가상의 돔을 사용한다. 가상..