하루 30분 모던 자바스크립트 딥 다이브. 스코프

스코프는 프로그래밍 언어의 기본 개념. 식별자 자신을 참조할 수 있는 유효한 범위 스코프 체인 중첩 함수와 같이 지역 스코프도 중첩될 수 있다. (지역이 곧 함수 몸체를 말하고, 지역은 지역 스코프를 만들기 때문) 모든 스코프는 하나의 계층적 구조로 연결 되어있다. 최상위 스코프는 전역 스코프다. 참조하는 코드의 스코프에서 시작하여 상위 스코ㅡ로 이동하면서 선언된 변수를 검색한다. 스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것이다. 전역 렉시컬 환경은 코드가 로드되면 곧바로 생성되고 함수의 렉시컬 환경은 함수가 호출되면 곧바로 생성된다. 함수도 식별자에 할당되기 때문에 변수를 검색할 때 사용하는 규칙 보다는 식별자를 검색하는 규칙이 좀 더 적합 함수 레벨 스코프 대부분의 프로그래밍 언..

• format_list_bulleted 기술 서적/하루 30분 모딥다
• · 2023. 6. 8.
• textsms

하루 30분 모던 자바스크립트 딥 다이브. 함수

함수란? 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것. 함수 정의를 통해 생성. 함수 표현식 자바 스크립트의 함수는 객체타입의 값. 즉 일급 객체 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 함수 생성 시점과 함수 호이스팅 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다. (호이스팅) 하지만 함수 표현식으로 정의한 함수는 이전에 호출 불가능. 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문. 변수 선언은 런타임 이전에 실행되어 undefined로 초기화 된다. 함수 표현식의 함수 리터럴은 할당문이 실행되는 시점에 평가되기 때문에 이전에 호출 불가능. 따라서..

• format_list_bulleted 기술 서적/하루 30분 모딥다
• · 2023. 6. 3.
• textsms

React에서 React-Hook-Form을 이용할 때 focus 하는 법. 리액트 JS, TypeScript

input을 생성여부를 결정하는 State를 이용해서, input요소를 생성함과 동시에 요소를 focus하는 동작을 만들려고 합니다. react-hook-form을 이용하여 form을 만들어 주고. useRef() 훅을 이용하여 input을 지정한 다음, focus해주는 방식을 생각했습니다. 이 방법으로 해본 결과, focus는 정상적으로 작동하지만, form이 제출되지 않는 현상 const [isAddBox, setIsAddBox] = useState(false); const inputRef = useRef(null); const handleAdd = () => { setIsAddBox(true); }; const handleBlur = () => { setIsAddBox(false); }; useEf..

• format_list_bulleted Front End/React
• · 2023. 6. 2.
• textsms

백준 JS 12865번 평범한 배낭. Knapsack

1. 첫 번째 시도 처음 문제를 봤을 때 들었던 생각은 재귀를 이용한 완전탐색. const fs = require('fs'); const Data = fs.readFileSync('/dev/stdin').trim() .split("\\n").map(v => v.split(" ").map(Number)); const [N,K] = Data.shift() Data.sort((a,b)=>b[1] - a[1]) let answer = 0; function additem(bag,index,w,v) { if(index === N){ if(answer < v){ answer = v } return } const newbag = [...bag] additem([...newbag],index+1,w,v) const [W..

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 2.
• textsms

백준 JS 9251번 LCS. 최장 공통 부분 수열

이 문제는 위의 이미지를 참고하면 이해하기가 쉽다. 알파벳이 같다면 대각선 왼쪽의 값에서 +1, 같지 않다면 위쪽, 왼쪽에서 큰 수를 가져온다. let fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString().trim().split("\\n") const A = input[0].split("") const B = input[1].split("") const DP = Array.from({length:B.length+1}, ()=>Array(A.length+1).fill(0)) let answer = 0; for(let i=0; i

• format_list_bulleted 알고리즘/백준
• · 2023. 6. 2.
• textsms

하루 30분 모딥다. 어트리뷰트

어트리뷰트 노드와 attributes 프로퍼티 HTML요소는 여러 개의 어트리뷰트 속성을 가질 수 있다. 모든 어트리뷰트 노드의 참조는 유사 배열 객체이자 이터러블인 NamedNodeMap객체에 담겨져 요소 노도의 attributes 프로퍼티에 저장된다. Element.prototype.attributes 프로퍼티로 취득 할 수 있다. getter만 존재하는 읽기 전용 접근자 프로퍼티이며 NamedNodeMap 객체를 반환한다. HTMl 어트리뷰트 조작 Element.prototype.getAttrigute/setAttribute 메서드를 사용하여 요소노드에서 직접 HTML 어트리뷰트 값을 취득하거나 변경할 수 있다. 이외에 hasAttribute, removeAttribute도 가능. HTML 어트리뷰..

• format_list_bulleted 기술 서적/하루 30분 모딥다
• · 2023. 6. 1.
• textsms