본문 바로가기

개발/javascript

let const var 사용 수칙 2022. 8. 17. 변수 생성은 3단계로 이루어진다. * 선언 단계(Declaration phase)변수를 실행 컨텍스트의 변수 객체(Variable Object)에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. * 초기화 단계(Initialization phase)변수 객체(Variable Object)에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화된다. * 할당 단계(Assignment phase)undefined로 초기화된 변수에 실제 값을 할당한다. var 은 1, 2 단계가 한번에 이루어진다. var : 이제 사용하지 말자. 함수 레벨 스코프 let : 재할당 가능, 블록 레벨 스코프, 중복 선언 금지 const : 재할당 불가, 블록 레벨 스코프 var..
Node.js 에서 Bash Script 출력(stdout, stderr) 문자열로 읽기 + 한글(EUC-KR) 인코딩 2022. 8. 5. DC 코믹스의 Spawn 이라는 다크히어로. (이미지 클릭 - 나무위키 링크) Spawn 함수가 오늘의 주인공이기에 모셔봤당 ㅎㅎ Focus Point 매번 TeleditClient 를 포팅하는 작업은 "SClient 모듈 실행, 결과값(stdout) 받아오기"가 문제다. jar, c 실행파일 2가지 선택지 중 골라 어떻게든 SClient를 호출 해야한다. javascript 는 기본적으로 동기적 실행방식을 갖지만, 수많은 함수들이 비동기적으로 실행된다. (결과를 기다리지 않고 넘어간다) Bash 스크립트를 실행시킬 수 있는 exec, spawn 함수 둘 다 실행 방식은 비동기적이다. 따라서 spawnSync, execSync 와 같은 함수들이 같이 제공된다. child_process.spawn, spa..
React Array Toggle Element (리액트 배열 값 토글하기!) 2021. 7. 16. 짧지만 직접 짠 코드입니다. 사용하신다면 좋아요 댓글 부탁드려요. 헤헤 myArray.indexOf('elemA')>-1 ? setMyArray(myArray.filter((item)=>item!='elemA')) : setMyArray([...myArray, 'elemA']) }> 토글버튼 설명: REACT의 배열은 Push, Pop 등 변화를 주는 Method는 일체 사용 불가. (불변성의 법칙) 다행히도 indexOf 와 같이 조회하는 용도의 함수는 사용이 가능하다. 따라서 원소의 추가와 삭제는 기존 배열에 변화를 주지 못하고, 새로운 배열을 만들어서 대입해야한다. 원소 삭제: myArray.filter((item) => item!='elemA') 배열에 filter를 돌려서 'elemA'이 없는 ..
React useState() Object 내부 값 변경 2021. 7. 5. React Hooks 기반 const [infoData, setInfoData] = useState({ major: { name: "John Doe", age: "24", sex: "M", }, minor:{ id: 4, collegeRegion: "south", } }); 위와 같은 설정일 때, setInfoData((prevState) => ({ ...prevState, major: { ...prevState.major, name: "Tan Long", } })); 이렇게 변경합니다. prevState 를 파라미터로, ...prevState 로 이전 오브젝트 데이터를 복사해오고, 그 외에 새로운 값을 추가/변경 합니다. (=덮어 씌웁니다) 출처 : javascript - React Hooks useS..
[Javascript] 당신의 머리를 터지게 만들 Instanceof 2020. 12. 17. 안심하세요 머리는 안터집니다. 바야흐로 어그로의 시대 아니겠습니까 ㅎ 지난 포스팅에서 언급했듯이, instanceof 는 >,
[Javascript] instance of, arguments, callee, this, new 2020. 12. 16. 자바스크립트는 알면 알수록 무시무시한 함수입니다. 여러분 빨리 도망치세요..! function a() { if ( !(this instanceof arguments.callee) ) { return new a() ; /* blah blah... */ } 위 구문은 어떤 것을 의미할까? 하나하나씩 보자. function function 도 하나의 객체이다. 거기에 추가적으로 arguments, caller, length, name 처럼 function 고유의 property가 함께 빌트인 되어있다. 당연히 Object는 function 이 아니다. Object가 더 큰 집합이다. this, new this : 함수의 호출자를 가리킨다. = 함수의 호출자와 바인딩 된다. 즉시실행함수와 같이 앞에 호출자가 없..
자바스크립트만의 특징 몇가지 (ft. 호이스팅) + 예시 퀴즈 2020. 12. 7. 1. 인터프리터 언어이다. 자바 → 바이트코드 처럼, C → 실행파일 처럼 컴파일 과정을 거치는 컴파일 언어와 다르다. 자바스크립트 Parser가 코드들을 파싱하면서 해석하고 실행시킨다. 각 브라우저마다 자신의 엔진이 있는데 (ex. 크롬 V8) 각자가 해석하는 결과물의 특징이 조금씩 다르다. 그래서 빡친다. 2. 함수 기반 언어이다. 자바는 클래스의 개념이 없다. 함수를 사용해서 유사하게 구현할 수 있다. 3. true, false 개념이 특별하다. NaN, 0, ''(빈 문자열), undefined, null, false 이 6가지를 제외한 모든 것들이 true이다. "고군분투", 1234 등등 모든 것이 true이다. +Q. '0' 은 true일까 false일까?? 더보기 정답은 true이다. 빈 ..
꼭 알아야 할 자바스크립트 성능 최적화를 위한 몇가지 꿀팁 2020. 12. 3. 너무 좋은 인사이트가 많이 담긴 글을 봐서 공유한다. Ternary Conditional (삼항 연산자) 1 2 3 4 5 6 7 8 9 10 11 // 두개 이상의 변수를 이용하여 값을 받는 경우 isArthur && isKing ? (weapon = "Ex", helmet = "Goose") : (weapon = "ln", helmet = "Iron") // 즉시 실행함수로 값을 받는 경우 isArthur && isKing ? function () { // ... }( ); : function () { // ... }( ); Logical Assignment 1 (OR) OR 연산자 : “falsy” 하지 않은 가장 첫번째 마주친 값을 갖는다. 아래의 삼항 연산자를 OR 연산자를 이용하여 다음과 같이..

티스토리툴바