ref prop React의 ref prop은 HTML 엘리먼트의 래퍼런스를 변수에 저장하기 위해 사용한다. 엘리먼트에 ref prop으로 inputRef라는 변수를 넘기면 이 inputRef 객체의 current 속성을 통해 엘리먼트에 접근할 수 있고 DOM API를 이용하여 제어 할 수 있게된다. useRef ref prop에는 React API 중 current 속성을 갖는 특정 형태의 객체만이 할당 될 수 있다 클래스 기반 컴포넌트에서는 React.createRef() 함수를 사용하고 함수형 컴포넌트에서는 useRef()와 같은 훅(Hook)함수를 사용하여 객체를 생성할 수 있다. 예제. input 엘리먼트 제어 useRef Hook 함수를 이용하여 inputRef 객체를 생성한 후 엘리먼트의 r..

Nullish coalescing operator 널 병합 연산자란 왼쪽 피연산자가 null 이거나 undefined라면 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환한다. 뿐만 아니라 null, undefined말고 falsy값. 즉, ' ' 이나 0 인 값들도 포함된다. 밑에는 if문을 사용한 예제이다. printMessage 함수는 text를 인자로 받아서 text의 값을 변수 message에 할당한다. 만약 text가 null 이거나 undefined이면 변수 message에 'nothing to display'라는 문자열을 할당한다. 보통 이렇게 변수값을 저장할 때 논리 연산자(OR)를 사용한다. function printMessage(text) { let message = te..

이번에는 Task Queue에 대해 알아보자. Task Queue는 Call Stack과 마찬가지로 자료구조중 하나이며 Call Stack과 반대로 FIFO(First In First Out)구조를 갖는다. 즉 제일 먼저 들어오는 아이가 제일 먼저 나가게된다. 위 그림을 보면 DOM API, setInterval, setTimeout 등 이런 Web APIs들을 통해서 이벤트를 호출할 때 콜백을 등록하게되는데 그 등록된 콜백이 Task Queue 안에 들어오게된다. Task Queue에 들어온 콜백은 이벤트 루프가 계속 돌다가 Call Stack에 공간이 다 비워지고 자바스크립트 엔진이 일을 하지않는 그 때 Task Queue안에 있는 콜백을 한번에 하나씩 Call Stack으로 가져오게된다. 다만 Ca..

먼저 자바는 멀티쓰레드 기반의 언어이다. 여기서 멀티쓰레드란 말 그대로 하나의 프로세스를 위해 일하는 여러개의 쓰레드가 동시다발적으로 일을 하여 효율적인 프로그래밍을 가능하도록 해준다. 다만 내가 지금 쓰고있는 자바스크립트는 싱글 스레드 기반의 언어이다. 싱글 스레드면 동시다발적으로 일을 할 수없는데 브라우저 웹에서 동작하는 방식을보면 비동기적으로 여러 일들이 동시에 수행하는걸 볼 수 있다. 그 이유는 자바스크립트 런타임환경인 브라우저 위에서 자바스크립트 소스코드를 받으면 자바스크립트 엔진이 소스코드를 순차적으로 읽게된다. 여기서 큰 그림으로 정리해보자면 사용자의 정보와 같은 데이터를 저장하는 공간인 Memory Heap 함수를 호출하고 불러오는 즉 함수의 동작 순서를 기억하는 공간인 Call Stack..

1001. A - B [문제] 두 정수 A, B를 입력받은 다음, A - B를 출력하는 프로그램을 작성하시오. [입출력 예시] 문제 자체는 매우 간단한 문제이다. 두 정수 A와 B를 입력받아 A-B를 출력하면된다. 나는 당연하듯 javascript prompt를 이용하여 자신있게 풀었지만 런타임오류가 발생했다. 코드가 잘못됐나 수정하고 다시 해봤지만 결과는 같았다. 이 간단한 문제를 왜 못넘어가고있지?하며 고민하다 결국 구글링의 힘을 빌렸다. 알고보니 백준문제를 풀때 자바스크립트로 입력을 받을때는 node.js에서 사용되는 모듈인 fs를 이용하여 입력을 받아야 한다는 사실을 알았다. 따라서 다음과같이 node.js에서 제공하는 fs(file system)를 이용해서 input을 설정하고 입력값을 배열로 ..

10171 문제. 아래와 같은 고양이를 출력하시오. \ /\ ) ( ') ( / ) \(__)| 매우 간단하다. console.log를 이용하여 문자열 그대로 표현하기 위해 String template을 사용하여 고양이모양을 복사해 답을 적었더니 자꾸 런타임 에러가 발생했다. 무엇이 문제일까? 그 이유는 백 슬래시를 문자열로 인식못하게 답을 적어서 에러가 발생한것이었다. 참고로 자바스크립트에서는 \(백 슬래시)를 문자열로 넣고싶으면 escape문자를 사용해야하기 때문에 \앞에 \를 하나씩 넣어서 출력해야 한다. escape 자바스크립트에서는 문자열로 쓰일 때 js가 제대로 인식하지 못하거나 키보드로 표현하지 못하는 문자 몇몇이 존재한다. 이것을 해결하기 위해 백 슬래시를 이용하여 문자열로 인식하게 만드는..

함수 선언식 function sayYo() { alert("Yo!") } sayYo(); 함수 표현식 let speak = function sayYo() { alert("Yo!!"); } alert( speak ); 함수 표현식이란 함수를 변수에 할당하여 표현한 방식이다. 함수는 값이기 때문에 함수를 변수에 할당할 수 있다. 위 예제처럼 변수 speak에 함수 sayYo를 할당했는데 함수는 값이기 때문에 함수 코드도 출력할 수도 있다. 여기서 alert을 이용해서 speak를 호출해보면 speak에 할당했던 함수가 출력되는걸 확인할 수 있다. 콜백함수 function person(ask, adult, teenager) { let age = prompt(ask); if(age >= 20) adult(age..

SPA와 MPA SPA(Single Page Application) 하나의 HTML파일을 기반으로 화면을 자바스크립트를 이용하여 컨텐츠를 동적으로 변화하는 웹 어플리케이션 방식이다. MPA(Multiple Page Appliecation) 사용자가 페이지를 요청할 때마다, 웹 서버가 요청한 UI와 요청한 데이터를 HTML파일로 파싱해서 보여주는 웹 어플리케이션 방식이다. 여기서 일반적인 전통방식으로 접근하면 SPA의 렌더링 방식은 CSR에 속하고 MPA의 렌더링 방식은 SSR에 속하게 된다. CSR(Client Side Rendering) CSR(Client Side Rendering) 브라우저가 서버에 HTML과 JS를 요청한 후 요청파일이 모두 로드가 되면 사용자의 상호작용에 따라 동적으로 렌더링한다..