본문 바로가기

전체 글

 (19)
표현식과 문 - 값(value) 값은 식(표현식)이 평가되어 생성괸 결과를 말한다. 평가(evaluate)는 식(표현식)을 해석해 값을 생성 또는 참조하는 것이다. const foo = 10 + 20; 위 예의 경우 foo라는 변수에 10 + 20이 아닌, 10 + 20의 결과인 30이 할당된다. 10 + 20 이라는 표현식의 평가 결과인 30이 값이다. - 리터럴(literal) 사람이 이해할 수 있는 문자나 약속된 기호로 값을 생성하는 표기법이다. 리터럴에는 정수, 부동소수점, 2진수, 8진수, 16진수, string, boolean, null, undefined, object, array, function, 정규표현식 등의 다양한 data type이 존재한다. 자바스크립트 엔진은 코드가 실행되는 시점인 'run..
매니지드 언어와 언매니지드 언어 프로그래밍 언어는 매니지드 언어와 언매니지드 언어로 나뉘는데 c언어 같은 언매니지드 언어의 경우, 개발자가 명시적인 메모리할당 등을 수행할 수 있도록, malloc(), free() 등의 저수준 메모리제어 기능을 제공한다고 한다. 따라서 개발자의 역량에 따라 성능이 달라질 수 있다. 뛰어난 개발자는 최적화된 성능을 만들어 낼 수 있지만, 그렇지 않은 경우는 치명적 오류를 생산할 수도 있다. 반면에 매니지드 언어는 이러한 자유도를 낮추고, 개발자의 역량보다는, 언어차원에서 제공하는 기능으로써 메모리 관리를 담당한다. 상대적으로 일관화 된 성능과 생산성을 확보할 수 있는 반면, 성능상의 디메리트는 일정부분 감수해야할 수 있다. 매니지드언어와 언매니지드언어의 차이는 framework과 library의 차이와 ..
가비지 콜렉터 a라는 변수에 10이라는 값을 할당했다고 하자. a라는 변수가 선언될때 자동으로 할당되는 undefined는 10이라는 새로이 할당된 값이 있으므로 쓸모 없어졌다. 변수에 값이 할당될때, 기존 undefined가 지워지고 나서 10이라는 값이 해당 메모리를 차지하는게 아니라, 새로운 메모리 에 10이라는 값을 저장하고, a라는 식별자는 그 10이라는 값이 저장된 특정 메모리를 가리킨다. 그리고 a라는 변수에 20이라는 값을 재할당 한다면, 위와 마찬가지 프로세스로 a는 20이라는 값을 가리키게 되고, undefined와 10이 저장된 메모리는 쓸모없는 공간이 된다. 가비지 콜렉터는 주기적으로 메모리공간을 검사하여, 이런 쓸모없는 메모리를 해제한다. 자바스크립트는 가비지콜렉터를 내장하고 있으며, 가비지콜렉..
변수와 식별자 - 변수 변수(variable)는 값을 저장하기 위한 메모리 공간 혹은 그 공간을 식별하기 위해 붙인 이름이다. 값의 위치를 가리키는 상징적인 이름이다. Object나 Array와 같은 자료구조를 이용하면, 하나의 변수에 여러 값을 그룹화하여 저장할 수 있다. var foo = 'FOO'; 라고 변수를 선언하는 경우, foo는 변수명이고, FOO라는 문자열은 그 변수의 값이다. 할당은 변수에 값을 저장하는 것을 말하며, 참조는 변수에 저장된 값을 읽어들이는 것이다. 변수명은 컴퓨터를 위한 것이 아닌, 저장한 값의 위치를 사람이 식별하기 용이하도록 붙이는 상징적인 이름이다. 즉, 사람이 보고 어떤 값이 저장되었는지 알아야 한다. --------------------------------------- 자기만..
React-native TextInput secure( input password ) 역시 어떤 기술을 사용하고자 할때는, document를 잘 봐야 한다... HTML 에서는 태그의 type 속성을 지정함으로써, password 등을 입력하면, 각 브라우저는 정의된 대로 password input을 출력해준다. 그러면 입력시에 *** 처리되면서 가려준다. reactNative의 TextInput은 기본적으로 그런 type props가 없다. 그래서 비밀번호 입력이 필요한 폼 작업시에는 검색을 통해 서드파티 컴포넌트를 찾아 사용하게 되는데, 결국엔 TextInput 을 가지고 만들어 놓은 것이기 때문에, 만약 심플하게 구성하고자 한다면, 서드파티 컴포넌트가 가지고 있는 화려하거나 혹은 신박한 효과(라벨이 움직인다거나, 튀어나온다거나, 애니메이트되는) 제외하고 secureTextEntry ..
React-native 배경이미지 넣기 페이지, 섹션 등 어떤 영역에 배경 이미지를 넣고 싶을때는, import { ImageBackground } from "react-native"; 위와 같이 ImageBackground를 추가해서 감싸주면 된다. 단, 서드파티 라이브러리에서 땡겨오는 컴포넌트들이 고유의 background color 를 가지고 있는 경우가 많기 때문에, 그 때는 아래와 같이 일일이 배경색을 바꿔주거나, Styled-Components를 활용하여, 스타일을 적용한 컴포넌트를 만들어 사용하면 된다.
React.js Global State Management(전역 상태관리) 1. React.js를 사용하면서, State와 Props를 사용하고, 컴포넌트를 넘나들며 각각의 함수나 값들을 전달하는 과정에서, 구조가 복잡해질수록 전달 구조가 복잡해진다. (이미지가 너무 큰것 같다..........하지만 폭을 알아서 맞춰줄것이니....) 그림에서 표현하고 싶었던 것은, 한 컴포넌트에 속한 여러 하위 컴포넌트 가운데 한 컴포넌트에서 콜라가격을 가지고 쏼라쏼라 하는 내용이 있다고 가정하자. 그런데 분기된 줄기가 다른 어떤 컴포넌트에서 그 콜라가격을 통해 무언가를 하고 싶어졌다. 물론 콜라가격을 해당 컴포넌트에서 잡아주면 상관 없겠지만, 각각의 컴포넌트가 각각 state를 설정해서 변화를 적용해야한다면 굳이 react를 사용할 필요가 있을까? 그래서 값을 전달하고 전달받아 사용하기 위해 기본..
State와 Props React.js를 사용한지 어느덧 10개월이 된것 같다. 잠시 3개월동안 프리로 일한 곳에서 세달동안 일하면서, 처음으로 만져본 React.js. DOM요소를 직접 컨트롤 하는 jQuery방식이 몸에 배었고, jQuery적인 발상으로 로직을 짜서 작업을 해왔기 때문에, React로 작업했던 그 세달이 너무나 고통스러웠다. 지금은 jQuery도 많이 잊어버렸고, react가 훨씬 편하다. React는 SPA(Single Page Application) 라이브러리이다. 하나의 HTML 파일에서 여러 컴포넌트를 mount/unmount 하면서 유연하게 웹어플리케이션 운용을 가능하게 한다. 그 중심에 있는 것이 바로 state 와 props 이다. State import React from "react"; ex..

티스토리툴바