728x90 프로그래밍/Javascript & React12 [Javascript] Javascript 특징 및 웹 워커(멀티 스레드) [Javascript] Javascript 특징 및 웹 워커(멀티 스레드) 인터프리터 언어 원시코드(프로그래머가 작성한 소스코드)를 기계어로 변환하는 과정없이 한줄 한줄 해석하여 바로 명령어를 실행하는 언어를 말한다. R, Python, Javascript가 대표적이다. 장점 - 빌드 시간이 따로 없이 바로 실행 가능하다. 단점 - Runtime 상황에서는 한 줄씩 실시간으로 읽어서 실행하기 때문에 컴파일 언어에 비해 속도가 느리다. 단일 스레드 자바스크립트에서 동적으로 UI 변경 작업시 UI thread 라는 공간에서 Queue 방식으로 처리 순서를 담아 놓는다. 웹 워커를 통한 멀티 스레드 멀티스레드 기능을 지원해주는 다른 스크립트와 독립적으로 실행되는 javascript이다. 웹 워커가 생성될 때마.. 2022. 1. 14. [Javascript] 렉시컬 스코프(Lexical Scope), 스코프 체인(Scope Chain), 클로저(Closure) [Javascript] 렉시컬 스코프(Lexical Scope), 스코프 체인(Scope Chain), 클로저(Closure) 먼저 자바스크립트의 실행문맥중 렉시컬환경에 대해 알아보자 렉시컬 환경(Lexical Environment) 자바스크립트 엔진이 실행을 위해 모아놓은 자원환경이다. key-value 형식으로 구성되며, 유효범위에 있는 변수와 함수, 객체들을 모아놓은 곳이라 생각하면 된다. 스크립트 전체, 실행중인 함수, 코드블록 등은 자신만의 렉시컬 환경을 갖는다. 렉시컬 환경 구성 환경레코드 - 렉시컬 환경에서 모든 지역변수를 property로 저장하고 있는 객체이다. (this, 함수일 경우 매개변수 포함) 외부 렉시컬환경 - 현재 렉시컬 환경보다 상위의 렉시컬환경. 스크립트는 최상위 렉시컬환.. 2022. 1. 13. [21/11/27] TIL_onClick 무한 렌더링, 21/11/27 TIL onClick event 무한 렌더링. (Room > serchbox.index.js) 아래 코드는 무한 렌더링 된다. const clickTag = useCallback( async (tag) =>{ setSearchKeyword(tag); ... // 함수의 결과값 렌더링시 onClick(clickTag(tag))의 함수가 실행되며 clickTag(tag)의 결과값을 받아오는 과정에서 setSearchKeyword(tag) 코드에 의해 state의 변화가 생기고 이 상태변화는 렌더링을 초래한다. 즉 렌더링 -> 함수실행 -> state 변화 -> 렌더링 -> 함수실행 -> state 변화 -> 렌더링 -> 함수실행 -> state 변화 ->.... 무한 반복 ! 그래서 함수 객.. 2021. 11. 27. [React] z-index, 그의 정체는?!? [React] z-index, 그것의 정체는?!? z-index html나 jsx로 화면을 구현할 때 layer 층 개념이 중요하다. 특정 Object가 제일 특정 위치에 오게 하기 위해서 z-index라는 인자를 사용한다. 기본적으로 숫자가 클수록 더 앞(위)에 위치한다. 하지만 왜 원하는대로 동작하지 않는 것이냐...... 규칙을 알아보자 layering 규칙 1. According to this rule, elements that come later in the markup will be on top of elements that come before them. 뒤에있는 코드가 더 위로 온다. 2. To set position for an element, add the CSS position pro.. 2021. 11. 12. [React] SPA와 React-Redux [React] SPA와 React-Redux SPA SPA은 Single Page Application의 약어로 한 개의 페이지로 이루어진 애플리케이션이다. 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고, 우선 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트한다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있다. 라우팅 : 다른 주소에 다른 화면을 보여 주는 것 SPA 단점 : 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다. -> 코드 스플리팅(Code splitting)을 이용해 해결 가능 React - Redux React : 소문으로 전파 필요 없는.. 2021. 11. 11. [React] 21/11/07 TIL [React] 21/11/07 TIL useState 컴포넌트에서 보여줘야 하는 내용이 동적으로 바뀔 때 'Hooks'란 기능을 이용할 수 있다. useState는 React 내장함수로서 Hooks 중 하나이다. 데이터는 변수와 state에 저장할 수 있는데, state에 굳이 저장해 놓는 이유는 웹이 App처럼 동작할 수 있게 만들기 때문이다. 즉 state가 변경되면 html이 자동으로 재랜더링이 된다 !! state 데이터를 수정할 때에는 원래 데이터를 놔두고 array deep copy를 통해 수정하는 방식이 바람직하다. 참고고 데이터는 primitive data type 과 Reference data type 2 종류가 있으며 React에서 array 는 Reference data type이다... 2021. 11. 5. 이전 1 2 다음 728x90
