스코프란? 특정 장소에 변수를 저장하고 나중에 그 변수를 찾는 데에 필요한 규칙 💻 컴파일러 이론 자바스크립트 또한 컴파일러 언어로서, 컴파일러언어의 처리과정 3단계인 컴파일레이션을 수행 💡 토크나이징/ 렉싱 문자열을 토큰으로 만드는 과정 var a =2; 👉 var, a = 2 ; 💡 파싱 토큰 배열을 문법 구조를 반영하여 👉 AST(추상 구문 트리) var a = 2; 의 경우, 변수 선언( : 최상위 노드) 에서 시작 확인자 : a 대입수식 : 2 💡 코드생성 AST를 기계어 집합으로 바꾸어 실행코드로 변경 💻 스코프 이해하기 💡 처리의 수행자 var a=2; 엔진 컴파일레이션 전과정을 책임 컴파일러 파싱, 코드생성의 모든잡일 스코프 선언된 모든 확인자(변수) 검색 목록 작성 및 유지 엄경한 규칙을..

💻 useEffect 활용법 ❗ 의존성 배열은 잘못 입력 시, 버그로 이어질 수 있어 되도록 사용하지 않는 것을 권장 💡 useEffect 내에서 사용되는 값은 의존성배열에 추가해주어야 변경사항이 적용됨. function Profile({ userId }) { const [user, setUser] = useState(); useEffect(() => { fetchUser(userId).then(data => setUser(data)); }, [userId]); } 💡 마운트 시점에만 실행되기 원한 다면 별도의 훅으로 사용하면 더 직관적이라는 장점이 있습니다. function Profile({ userId }) { const [user, setUser] = useState(); useOnMounted((..

💻 5.1 문과 표현식 자바스크립트에서의 문 != 표현식 문: 문장 표현식 : 어구 연산자: 구두점/접속사 var a = 3*6; var b=a; b; 자바스크립트에서의 표현식은 "단일한, 특정한" 결괏값으로 계산됨. 위 각 세줄은 표현식이 되기도하고, 표현식이 포함된 문이기도하다. + '선언문' : var a = 3 * 6; 이런식의 변수 선언의 문 + '할당 표현식' : a = 3 * 6; + '표현식 문' : 표현식의 전부이면서 완전환 문 💡 문의 완료 값 모든 문은 완료 값을 가짐. var a = 43; //완료값 : undefined a = 43; //완료값 : 43 선언문의 완료값은 undefined 할당 표현식은 할당 이후의 값이 완료값 ❗ {}블록은 마지막 문/표현식의 완료값이 블록의 완료..

💻 추천하는 컴포넌트 파일 작성법 컴포넌트 파일의 상단에 속성값 타입을 상단에 작성 해주는 것이 좋습니다. MyComponent.propTypes = { //... } 💡 컴포넌트에 이름을 붙여주는 것이 디버깅할때 확인이 편함. export default function ({ prop1, prop2 }) {} 👇 export default function MyComponent({ prop1, prop2 }) {} 💡 외부 객체나 변수 같은경우는 가장 밑에 따로 작성 MyComponent.propTypes = { //... } export default function MyComponent({ prop1, prop2 }) {} const DATA = []; function setData(data) { DA..

💻 암시적 변환 암시적 변환 : 숨겨진 형태로 일어나는 타입변환 암시적 변환이 코드를 더 복잡하고 이해하기 어렵게 많든다는 논란은아직까지도 많다고 합니다. 하지만, 교재에서는 긍정적인 관점으로 살펴보고있어 저 또한 장점을 위주로 살펴보겠습니다. 암시적 변환의 목적은 '불필요한 상세 구현을 줄이는 것'이라고 볼 수 있습니다. 👉 '암시적'이란? 예를 들어 타입변환의 의사코드를 살펴보면 아래와 같습니다. Sometype x = SomeType(AnotherType(y)) 즉, 타입이 바로 변환되는 것이 아닌 중간단계를 거치는 부분까지 표현이 되는데요, 이를 암시적으로 단순화 하여 표현 할 수있습니다. Sometype x = SomeType(y) 이렇게 작성하여 코드 가독성을 높이고, 세세한 구현부를 추상화하..

📍 훅 규칙 💡 훅 사용 순서는 늘 같아야 함 👉 if문 for문 등에 넣어 조건적으로 호출되면 안 됩니다. 👉 if 문 return 뒤에 사용도 마찬가지입니다. 💡 함수형 컴포넌트나 커스텀 훅에서만 호출 가능 📍 Context API 속성 값을 하위 컴포넌트로 넘겨 사용할 경우, 컴포넌트 트리가 깊다면 속성값을 여러 컴포넌트에 걸쳐 넘겨줘야 하는 불편함이 있습니다. 이를 해결할 수 있는 방법으로 context API가 있습니다. import React, {useContext, createContext } from 'react'; const UserContext = createContext('unknown'); export default function App() { return ( 상단 메뉴 하단 메뉴..