[꼼꼼한 개발자] 꼼코더

🧹 간단 정리 호이스팅이란 선언한 변수 및 함수가 단순히 코드 최상단으로 올라오는 것을 의미한다. var, let, const 모두 호이스팅 방법이 다를뿐 호이스팅이 이루어진다. var 호이스팅 방식 : 메모리에 변수 선언 + 'undefind'값으로 초기화 하여 접근가능 let/const 호이스팅 방식 : 메모리에 변수 선언 단 TDZ에 있어 접근 불가 (자세한 내용은 아래에..👀 마무리 글도 꼭 읽는다면 도움이 무조건 될 것이다!) 📈 호이스팅(Hoisting)이란? 호이스팅(Hoisting)은 선언한 변수 및 함수가 선언 범위의 최상단으로 올라가 작동하는 '자바스크립트(JS)의 행동'이다. 이는 변수나 함수가 실제 코드에서 작성된 위치와 관계없이 선언 단계에서 메모리에 저장되기 때문에 발생한다. 호..

🧹 간단설명 함수 선언식 : function add () {} 함수 표현식 : var add = function() {} (위 설명은 정말로 너무 간단하게 설명한 것이고 자세한 내용을 확인하려면 아래로..👀) ✌🏻 자바스크립트 함수 생성 2가지 방법 자바스크립트에서 함수를 만드는 방법에는 주로 두 가지가 있다. 함수 선언식(Function Declarations)과 함수 표현식(Function Expressions). 이 두 방법은 유사해 보일 수 있지만, 몇 가지 중요한 차이점을 알아보자. 🏭 함수 선언식(Function Declarations) 함수 선언식은 'function' 키워드로 시작하고 함수 이름을 명시한다. 함수 선언식은 호이스팅이 된다. 함수가 선언되기 전에도 호출할 수 있다. 🧑🏻‍💻예..

🧹 간단정리 TDZ란? 임시사각지대라고도 부르며 변수가 선언되기 전의 코드 영역을 말한다. JS에만 있는 개념이다. (자세한 내용은 아래참고 👀) 🥡 TDZ란? 변수가 선언되었지만 아직 초기화 되지 않는 상태를 말 한다. 쉽게 말 해 '선언만 되고 아직 초기화 되지 않는 변수가 머무는 공간'이라고 생각하면 될 거 같다! JS에서 'let'이나 'const'로 선언한 변수들이 TDZ을 거쳐 간다. 이 공간에 있는 변수를 참조하려고 하면 'ReferenceError'를 마주할 것이다. 그럼 TDZ가 왜 필요한데? TDZ의 주요 목적은 프로그래밍 오류를 줄이는데 있다. 대표적으로 초기화 되지 않는 변수를 사용하는 것을 방지할 수 있다. 🏃🏻‍♂️ TDZ의 동작(작동) 방식 TDZ의 동작 방식은 '변수 선언 전..

🧹간단정리 var, let, const는 값을 저장하는 '변수'를 불러오는 키워드이다. var : 재선언 가능, 재할당 가능,함수 레벨 스코프 *블록 레벨 스코프 무시 let : 재선언 불가능, 재할당 가능, 블록 레벨 스코프, const : 재선언 불가능, 재할당 불가능, 블록 레벨 스코프 스..스코프가 뭐지?? [JS] - 스코프란? 간단하고 쉽게 이해하기 (예제코드, 글로벌 스코프,블록 레벨 스코프, 함수 스코 🧹 간단정리 스코프(Scope) : 변수와 함수가 접근 가능한 범위를 의미 글로벌 스코프(Global Scope): 전역 변수로 선언. 코드 어디에서든 접근 가능. 함수 스코프(Function Scope): 함수 내부에서 선언. 해 ccomccomhan.tistory.com (자세한 내용은 ..

🧹 간단정리 스코프(Scope) : 변수와 함수가 접근 가능한 범위를 의미 글로벌 스코프(Global Scope): 전역 변수로 선언. 코드 어디에서든 접근 가능. 함수 스코프(Function Scope): 함수 내부에서 선언. 해당 함수 내부에서만 접근 가능. 블록 레벨 스코프(Block Level Scope): 블록(중괄호 {} 내)에서만 접근 가능. * let 또는 const로 선언된 변수만 해당 스코프 체인(Scope Chain): 중첩된 함수 내부에서는 외부 함수의 변수에 접근 가능. (예제와 함께 쉽게 설명한 내용은 아래에...👀) 🛸 스코프란? 자바스크립트에서 스코프(Scope)란? 변수와 함수가 접근 가능한 범위를 의미한다. 이는 코드의 특정 영역에서 어떤 변수들을 사용할 수 있는지를 정의..

🧹 간단 정리 enum 타입은 변하지 않는 것을 묶어놓은(열거한) 타입이다. ex) > enum Tier {Gold, Platinum, Diamond} (자세한 내용은 아래참고) 🙋🏻‍♂️ enum 타입 소개 enum은 열거형(enumaration)의 줄임말로, 연관된 상수들을 묶어서 사용하는 타입이다. 여러 개의 관련된 값을 한 곳에 모아 놓음으로써 가독성과 유지보수성을 향상시킬 수 있다. enum은 주로 숫자나 문자열과 연결된 값들을 나타내는데 사용된다. 👍🏻 enum 타입의 장단점 장점 가독성 향상: 코드 내에서 명시적인 이름을 사용하여 상수를 참조할 수 있다. 유지보수 용이성: 관련된 상수들을 그룹화하여 관리하므로 코드 수정 시 편리하다. 단점 타입 안정성 감소: enum 값은 숫자로도 접근 가능..

🧹 두서없이 적는 쉬운 정리 1. 함수 컴포넌트는 정말 함수처럼 생겼다. 2. 리액트 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 나뉜다. 3. 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다. 4. 컴포넌트 생성 시 첫 글자는 대문자여야 한다.(소문자는 HTML 태그로 인식됨) 5. 이렇게 만들어진 컴포넌트는 엘리먼트를 출력하고 렌더링을 통해 브라우저에 보이게 된다. (자세한 내용은 아래 참고) 🎅🏻 Components의 역사 리액트 컴포넌트는 아래 그림처럼 크게 클래스 컴포넌트와 함수 컴포넌트로 나뉜다. 초기 버전에는 클래스 컴퍼넌트를 주로 사용하였다. 하지만 클래스 컴포넌트가 사용하기 불편하다는 의견이 많이 나와 함수 컴포넌트를 주로 사용하게 되었다. 함수 컴포넌트를 개선하는..

🧹 두서없이 적는 쉬운 정리 1. Props의 중요한 특징은 Read-only 즉 읽기 전용이므로 변경이 불가하다. 2. 다른 Props의 값으로 엘리먼트를 생성하려면새로운 Props 값을 컴포넌트의 전달하여 새로 엘리먼트를 생성하면 된다. 3. 위 과정에서 엘리먼트가 다시 렌더링 된다. 4. Props의 값을 넣을 때 문자열 이외 [정수 변수 그리고 다른 컴포넌트 등]이 들어갈 경우 중괄호 {} 를 사용해서 감싸 주어야 한다. 5. Props는 자바스크립트 객체가 된다. 6. JSX 를 사용하는 경우에는 간단하게 컴포넌트의 Props를 넣을 수 있다. 7. JSX를 사용하지 않는경우에는 React.createElement()를 사용하면 된다. (비추천) (자세한 내용은 아래 참고) Props의 특징 P..