Develop+

Naver Map api 를 사용해 맵을 클릭 할 때마다 해당 범위를 선택해 표시해주는 프로그램을 구현 중이었다. naver map에서 제공하는 addListener로 생성한 map 객체와 click에 addHex라는 함수를 추가해주는데 이 addHex라는 함수 내에서는 외부 변수인 data와 hexList라는 변수를 참조한다. 컴포넌트가 생성되는 시점에 addEventListener을 해주니 data 에 값이 들어온 이후 시점에도 컴포넌트 생성 당시의 data값을 가지고 온다. 이거 이론으로만 들어봤던 Lexical scope 인 거 같다! Lexical Scope 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 출처: https://poiemaweb.com/js..

리액트를 훅을 사용하다보면 useEffect와 useState만으로도 충분히 프로그램을 짤 수 있다. 그래서 useMemo, useCallback이라는 개념을 듣고 제대로 적용해 본 적이 없는 거 같다. 이렇게 작동하는 코드로 만족하는 것이 새로운 것을 배우려는 마음까지도 좁게 만드는 거 같아 useMomo와 useCallbak 에대해 공부해보고자 한다. 일단 useMemo, useCallback을 배우기 전에 알고가야 할 두 가지는, 함수형 컴포넌트도 "함수"라는 것이다. 함수가 실행될 때 내부에 있는 선언, 함수들이 매번 다시 선언이된다는 점이다. 그리고 컴포넌트는 state와 props가 변경될 때 마다 리랜더링 된다는 점이다. 그렇다면 리랜더링 될 때마다 내부의 변수선언, 함수들이 매번 다시 선언..

리액트에서 props 에 props 타고 내려가는 상태의 물림을 없애기 위해 redux 상태관리 툴이 탄생했다. 리덕스의 state의 전역 객체의 데이터를 여러 컴포넌트에서 참조해서 사용하고, 변경하는 것이 기본적인 개념이다. 이번 포스트에서 Redux의 코어 기능을 구현해보려고 한다. 컨셉을 이해하자. 리덕스의 컨셉은 전역 상태가 필요하다 실제로 여러 컴포넌트에서 리덕스의 상태를 가져다 쓰는데 전역 상태라는 전제 때문에 A라는 데이터를 b,c 컴포넌트에서 여기저기서 수정하게 된다면 어디서 수정이 됐는지 찾기가 힘들다. 그렇다면 이런 문제를 어떻게 해소할 수 있을까? 이는 각 컴포넌트가 리덕스 스토어를 직접 수정할 수 없도록 구현할 수 있다. 그리고 상태를 수정할 수 있는 트리거만을 주고 실제로 수정은 ..

리액트 16.8v 이후부터 함수형 컴포넌트 내에서 hook을 사용할 수 있다. 클래스형 컴포넌트에서 라이프사이클을 이용하면서 여러 문제점들을 만났고, 리액트 팀에서는 그를 보완하기 위해 훅이라는 개념을 도입했다. 그렇다면 훅은 어떻게 구현될까? 가장 기본적인 훅인 useState에 대해 살펴보자. useState의 기본적인 문법은 const [variable, variableSetter] = useState(initialValue); 형식으로 useState의 파라미터로 초기값을 받고, value와 그 값에 유일하게 접근할 수 있는 setter를 반환한다. export function useState(initValue) { let value = initValue; return value, (nextVal..

일단 바닐라js로 리액트 코어를 만들어보려고 한다. 컴포넌트의 ui를 만드는 JSX 는 js문법이 아니기 때문에 js로 바꿔야 하기 때문에 babel을 사용해 변환을 해줄 것이다. 시작하기 전 리액트 버츄어돔에 대한 이해 리엑트는 버츄얼돔을 가지고 있다. 버츄얼 돔을 만든다면 어떻게 만들 수 있을까??? 리액트의 버츄어돔도 오픈소스이기 때문에 전부 공개되어있다. 버츄얼돔은 기본적으로 HTML태그를 변환시키는 구조로 되어있을 것이다. 그러면 html태그는 어떻게 생겼을까. 태그가 있고 그 안에 속성 id등등이 있고, 태그는 열리고 닫히고 내부에는 자식 노드들이 있다. 이걸 버츄어 돔으로 js친화적인 데이터로 만들면 어떨까? js 친화적긴 데이터란 객체이다. EXAMPLE 이걸 객체로 바꾸면 어떨까 객체도 ..

앱을 만들기 위한 방식은 다양하게 존재합니다. 순수 네이티브 앱이 존재하느냐? 요즘의 앱 개발에서는 글쎄! 입니다. 예전부터 웹 기술을 사용한 하이브리드 앱이 많이 시도되었고, 현재에는 예전에 비해 이런 하이브리드 앱 개발이 성능도 많이 좋아졌습니다. 네이티브 앱 패키징을 보통 많이 사용하지만, 모든것을 네이티브로 개발하기는 힙듭니다. 그래서 웹뷰를 이용한 개발을 합니다. 그렇다면 웨뷰 개발을 할 때 어떤 부분들을 고려해야할까요? 웹뷰를 사용하는 방식은 3가지 정도로 분류됩니다. 네이티브 컨테이너 + 단일웹뷰 네이티브 앱을 컨테이너로 사용하고 웹앱을 올리는 경우가 있습니다. 이러한 경우 이미 모웹이 있는데 빠르게 앱에 적용하고 싶을 때 많이 사용이 됩니다. 하지만 안드로이드 심사에서는 문제가 많지 않지만..

기존에 Vue로 만들어진 프로젝트를 React로 변환하는 작업을 하는 중에 잘 실행을 시켰지만 프로젝트가 빈 화면을 띄우며 터미널에서는 에러를 뱉어냈다. // In the Terminal No issues found. URIError: Failed to decode param '/%3C%=%20BASE_URL%20%%3Efavicon.ico' at decodeURIComponent () . . . http://localhost:8080 포트에 올려 작업을 했는데, 이상하게 실행이 되지 않는다..! 구글링을 통해 에러를 검색해보니 vue.config.js파일 내에 BaseUrl 또는 PathUrl 옵션에 에 무슨 문자열이 셋팅 되어있을 것이기 때문이라는 코멘트를 찾을 수 있었다. vue.config.js를..

자바스크립트를 타입스크립트로 마이그레이션 중 만난 에러, 타입스크립트에서는 사용할 변수의 타입을 지정해줘야한다. 기존 자바스크립트에서는 porpsType 등 플러그인을 사용해 Props의 타입을 지정해주기도 했지만 선택사항이었다. 타입스크립트에서는 받을 Props와 사용할 State에 대한 인터페이스 제너릭을 사용해 명시해 줄 것을 요구한다. Property '' does not exist on type 'Readonly & Readonly' > 위 링크를 참고하여 에러를 해결하였다. 타입스크립트는 런타임에서 날 에러를 컴파일타임에서 미리 잡아준다. 빨간 줄이 난 부분에 마우스를 올려보면 저러한 에러가 뜬다. 해결방안 Props와 State의 타입을 인터페이스로 선언하여 클래스 extends Compon..